/* ==========================================================================
   Codr website — layout and sections.
   Brand tokens and components come from brand.css (the brandbook's codr.css).
   Elementor pages are built from containers and widgets carrying the classes
   below, so the look lives here — not in per-element Elementor settings.
   ========================================================================== */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: #fff; overflow-x: hidden; }
body, button, input, select, textarea { font-family: var(--codr-font); }
img { max-width: 100%; height: auto; }
.site-main, .elementor { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Neutralise Elementor's defaults so the classes below are the whole story */
.elementor-heading-title { color: inherit; font-family: inherit; font-weight: 800; line-height: 1.12; }
.elementor-widget-text-editor { color: inherit; }
.elementor-widget-text-editor p { margin: 0 0 0.8em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-shortcode .elementor-shortcode { line-height: 0; }
body .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --row-gap: 0px; --column-gap: 0px; }
body .e-con > .elementor-widget, body .e-con > .e-con { margin: 0; }
.elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ---------- Layout primitives ---------- */
body .e-con.codr-sec { --padding-top: clamp(72px, 10vw, 128px); --padding-bottom: clamp(72px, 10vw, 128px); --padding-left: 0px; --padding-right: 0px; position: relative; }
body .e-con.codr-sec--tight { --padding-top: clamp(40px, 6vw, 64px); --padding-bottom: clamp(40px, 6vw, 64px); }
body .e-con.codr-sec--grey { background: var(--codr-elevated); }
body .e-con.codr-sec--sky {
  background-color: var(--codr-brand);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 70%),
    radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 1.8px);
  background-size: 100% 100%, 24px 24px;
  background-position: 0 0, 12px 12px;
  color: #fff;
}
body .e-con.codr-sec--rounded { border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); }
body .e-con.codr-sec--card-sky { --padding-top: 0px; --padding-bottom: clamp(72px, 10vw, 112px); }

body .e-con.codr-wrap { --width: 100%; --padding-left: var(--codr-gutter); --padding-right: var(--codr-gutter); max-width: calc(1120px + 2 * var(--codr-gutter)); margin-inline: auto; flex-direction: column; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
body .e-con.codr-stack { flex-direction: column; --gap: 20px; --row-gap: 20px; --column-gap: 20px; }
body .e-con.codr-stack--sm { --gap: 12px; --row-gap: 12px; --column-gap: 12px; }
body .e-con.codr-stack--lg { --gap: 28px; --row-gap: 28px; --column-gap: 28px; }
body .e-con.codr-center { align-items: center; text-align: center; }
body .e-con.codr-center .elementor-widget { width: 100%; }
body .e-con.codr-row { flex-direction: row; flex-wrap: wrap; align-items: center; --gap: 12px; --row-gap: 12px; --column-gap: 12px; }
body .e-con.codr-row > .elementor-widget { width: auto; }
body .e-con.codr-center.codr-row, body .e-con.codr-center > .codr-row { justify-content: center; }

body .e-con.codr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
body .e-con.codr-split--wide-text { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
body .e-con.codr-split--rev > :first-child { order: 2; }
@media (max-width: 900px) {
  body .e-con.codr-split { grid-template-columns: 1fr; gap: 40px; }
  body .e-con.codr-split--rev > :first-child { order: 0; }
}

body .e-con.codr-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .e-con.codr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .e-con.codr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { body .e-con.codr-grid, body .e-con.codr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body .e-con.codr-grid, body .e-con.codr-grid--2, body .e-con.codr-grid--4 { grid-template-columns: 1fr; } }

.codr-gap-top { margin-top: clamp(40px, 6vw, 64px) !important; }
.codr-gap-top-sm { margin-top: 28px !important; }
.codr-head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px) !important; }

/* ---------- Type ---------- */
.codr-eyebrow, .codr-eyebrow .elementor-heading-title { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--codr-brand-ink); line-height: 1.3; }
.codr-eyebrow--green .elementor-heading-title { color: var(--codr-success-ink); }
.codr-eyebrow--orange .elementor-heading-title { color: var(--codr-orange-ink); }
.codr-eyebrow--purple .elementor-heading-title { color: var(--codr-purple-ink); }
.codr-eyebrow--gold .elementor-heading-title { color: var(--codr-gold-ink); }
.codr-sec--sky .codr-eyebrow .elementor-heading-title { color: rgb(255 255 255 / 0.9); }

.codr-title-hero .elementor-heading-title { font-size: clamp(44px, 6.4vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }
.codr-title-xl .elementor-heading-title { font-size: clamp(36px, 5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; }
.codr-title-lg .elementor-heading-title { font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.codr-title-md .elementor-heading-title { font-size: clamp(22px, 2.2vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.codr-title-sm .elementor-heading-title { font-size: 20px; font-weight: 800; line-height: 1.25; }
.codr-title-blue .elementor-heading-title { color: var(--codr-brand-ink); }
.codr-sec--sky .elementor-heading-title { color: #fff; }

.codr-lead { font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; line-height: 1.5; color: var(--codr-ink-secondary); }
.codr-sec--sky .codr-lead { color: rgb(255 255 255 / 0.94); }
.codr-copy { font-size: 17px; line-height: 1.6; color: var(--codr-ink-secondary); }
.codr-copy strong { color: var(--codr-ink); }
.codr-fine { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--codr-ink-secondary); }
.codr-sec--sky .codr-fine { color: rgb(255 255 255 / 0.85); }
.codr-measure { max-width: 560px; }
.codr-center .codr-measure { margin-inline: auto; }

/* ---------- Elementor Button widget in the Codr style ---------- */
.elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 28px; box-sizing: border-box;
  font-family: var(--codr-font); font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2;
  border: 2px solid var(--codr-brand-dark); border-bottom-width: 4px; border-radius: var(--codr-radius-button);
  background: var(--codr-brand); color: #fff; fill: #fff; text-decoration: none;
  transition: transform var(--codr-fast) var(--codr-ease-out), border-bottom-width var(--codr-fast) var(--codr-ease-out), background-color var(--codr-normal) var(--codr-ease-out);
}
.elementor-widget-button .elementor-button:hover, .elementor-widget-button .elementor-button:focus-visible { background: var(--codr-brand-light); color: #fff; text-decoration: none; }
.elementor-widget-button .elementor-button:active { transform: translateY(3px) scale(0.985); border-bottom-width: 1px; }
.codr-b-success .elementor-button { background: var(--codr-success); border-color: var(--codr-success-dark); }
.codr-b-success .elementor-button:hover { background: var(--codr-success-light); }
.codr-b-secondary .elementor-button { background: #fff; color: var(--codr-brand-ink); border-color: var(--codr-edge); }
.codr-b-secondary .elementor-button:hover { background: var(--codr-elevated); color: var(--codr-brand-ink); }
.codr-b-white .elementor-button { background: #fff; color: var(--codr-brand-ink); border-color: #fff; border-bottom-color: rgb(8 60 100 / 0.3); }
.codr-b-white .elementor-button:hover { background: var(--codr-brand-pale); color: var(--codr-brand-ink); }
.codr-b-ghost-white .elementor-button { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.55); border-bottom-color: rgb(255 255 255 / 0.55); }
.codr-b-ghost-white .elementor-button:hover { background: rgb(255 255 255 / 0.22); color: #fff; }
.codr-b-lg .elementor-button { min-height: 60px; padding: 0 32px; font-size: 18px; }
.codr-b-block, .codr-b-block .elementor-button { width: 100%; }
@media (max-width: 520px) {
  .codr-btnrow { width: 100%; }
  .codr-btnrow > .elementor-widget-button { width: 100% !important; }
  .codr-btnrow .elementor-button { width: 100%; }
}

/* ---------- Header: a floating pill ----------
   The header is a transparent sticky strip; the white capsule floats inside it with the brand's
   bottom lip. It overlaps the page's blue hero (see "room for the pill" below). */
.codr-header { --pill-h: 64px; --pill-top: 14px; position: sticky; top: 0; z-index: 100; height: calc(var(--pill-h) + var(--pill-top) * 2); margin-bottom: calc(-1 * (var(--pill-h) + var(--pill-top) * 2)); padding: var(--pill-top) var(--codr-gutter) 0; box-sizing: border-box; pointer-events: none; }
.admin-bar .codr-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .codr-header { top: 46px; } }
.codr-header-pill, .codr-menu { pointer-events: auto; }
.codr-header-pill {
  display: flex; align-items: center; gap: 16px;
  max-width: 1120px; height: var(--pill-h); margin: 0 auto; padding: 0 8px 0 24px; box-sizing: border-box;
  background: #fff; border-radius: 999px;
  border: 2px solid rgb(0 0 0 / 0.06); border-bottom: 5px solid rgb(8 50 90 / 0.16);
  transition: transform var(--codr-smooth) var(--codr-ease-out), border-color var(--codr-normal);
}
.codr-header.is-scrolled .codr-header-pill { border-color: var(--codr-edge); border-bottom-color: #d4d4d4; }
.codr-logo { text-decoration: none !important; display: inline-flex; flex: none; }
.codr-logo .codr-wordmark { font-size: 30px; }
.codr-nav { margin: 0 auto; }
.codr-nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.codr-nav-list a { display: block; padding: 10px 16px; border-radius: 999px; color: var(--codr-ink-secondary); font-size: 16px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--codr-normal) var(--codr-ease-out), color var(--codr-normal) var(--codr-ease-out); }
.codr-nav-list a:hover { background: var(--codr-elevated); color: var(--codr-ink); text-decoration: none; }
.codr-nav-list .current-menu-item > a, .codr-nav-list .current_page_item > a { color: var(--codr-brand-ink); background: var(--codr-brand-pale); }
.codr-header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.codr-header-cta.codr-btn { min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 16px; }
.codr-burger { display: none; width: 46px; height: 46px; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 999px; background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.codr-burger:active { transform: translateY(2px); border-bottom-width: 2px; }
.codr-burger span { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--codr-ink); transition: transform var(--codr-normal) var(--codr-ease-out), opacity var(--codr-fast); }
.codr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.codr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.codr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Phone menu: a floating card under the pill */
.codr-menu { max-width: 1120px; margin: 10px auto 0; padding: 10px 10px 12px; box-sizing: border-box; background: #fff; border-radius: 28px; border: 2px solid var(--codr-edge); border-bottom-width: 5px; }
.codr-menu:not([hidden]) { animation: codrMenuIn var(--codr-smooth) var(--codr-ease-out); }
@keyframes codrMenuIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.codr-menu .codr-nav-list { flex-direction: column; gap: 2px; margin-bottom: 10px; }
.codr-menu .codr-nav-list a { font-size: 18px; padding: 14px 16px; border-radius: 18px; }
.codr-menu .codr-btn { border-radius: 999px; }
@media (min-width: 961px) { .codr-menu { display: none !important; } }
@media (max-width: 960px) {
  .codr-header { --pill-h: 60px; --pill-top: 12px; }
  .codr-header-pill { padding: 0 7px 0 20px; }
  .codr-nav { display: none; }
  .codr-burger { display: inline-flex; }
  .codr-header-actions { margin-left: auto; }
  .codr-logo .codr-wordmark { font-size: 28px; }
  .codr-header-cta.codr-btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
  .codr-burger { width: 42px; height: 42px; }
}
@media (max-width: 380px) { .codr-header-cta { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .codr-menu:not([hidden]) { animation: none; } }

/* Room for the pill: the first section of every page starts under it */
body:not(.elementor-page) .site-main { padding-top: 140px; }
.codr-404 { padding-top: clamp(140px, 14vw, 180px); }

/* ---------- Footer: Duolingo-style columns on the blue sky ---------- */
.codr-footer {
  background-color: var(--codr-brand);
  background-image: radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 1.8px);
  background-size: 24px 24px; background-position: 12px 12px;
  color: #fff; border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}
.codr-footer-inner { max-width: calc(1120px + 2 * var(--codr-gutter)); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--codr-gutter) 40px; box-sizing: border-box; }
.codr-footer ul { list-style: none; margin: 0; padding: 0; }
.codr-footer a { color: #fff; text-decoration: none; }

.codr-footer-langs { padding-bottom: 32px; border-bottom: 2px solid rgb(255 255 255 / 0.3); }
.codr-footer-langs-title { margin: 0 0 18px; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.codr-footer-langs ul { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.codr-footer-langs a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; opacity: 0.92; transition: opacity var(--codr-normal); }
.codr-footer-langs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.codr-footer-langs img { width: 28px; height: 28px; }

.codr-footer-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; padding: 40px 0 44px; border-bottom: 2px solid rgb(255 255 255 / 0.3); }
.codr-footer-h { margin: 0 0 16px; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.codr-footer-col li { margin: 0 0 12px; }
.codr-footer-col a { font-size: 16px; font-weight: 700; color: rgb(255 255 255 / 0.88); transition: color var(--codr-normal); }
.codr-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.codr-footer-brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 36px 0 20px; }
.codr-footer-logo { display: inline-flex; text-decoration: none !important; }
.codr-footer-logo .codr-wordmark { font-size: clamp(44px, 5vw, 56px); }
.codr-footer-tag { margin: 8px 0 0; font-size: 18px; font-weight: 800; color: rgb(255 255 255 / 0.94); }
.codr-footer-legal { margin: 0; font-size: 14px; font-weight: 700; color: rgb(255 255 255 / 0.8); }

@media (max-width: 960px) { .codr-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .codr-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codr-footer-langs ul { gap: 12px 18px; }
  .codr-footer-brand { flex-direction: column; align-items: flex-start; }
}

/* ---------- Store buttons ---------- */
.codr-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.codr-store { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px; box-sizing: border-box; border-radius: 16px; border: 2px solid #000; border-bottom-width: 4px; background: #141414; color: #fff !important; text-decoration: none !important; transition: transform var(--codr-fast) var(--codr-ease-out), border-bottom-width var(--codr-fast) var(--codr-ease-out), background-color var(--codr-normal); }
.codr-store:hover { background: #2a2a2a; }
.codr-store:active { transform: translateY(3px); border-bottom-width: 1px; }
.codr-store svg { width: 24px; height: 24px; flex: none; }
.codr-store span { display: flex; flex-direction: column; font-size: 18px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.codr-store small { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.85; }
.codr-store--white { background: #fff; color: var(--codr-ink) !important; border-color: #fff; border-bottom-color: rgb(8 60 100 / 0.3); }
.codr-store--white:hover { background: var(--codr-brand-pale); }
.codr-center .codr-stores { justify-content: center; }

/* ---------- Cody ---------- */
.codr-pip { position: relative; margin: 0 auto; line-height: 0; max-width: 100%; }
.codr-pip img, .codr-pip video { display: block; width: 100%; height: auto; }
.codr-pip video { position: absolute; inset: 0; height: 100%; object-fit: contain; opacity: 0; transition: opacity 160ms ease-out; }
.codr-pip.is-playing video { opacity: 1; }
.codr-pip.is-playing .codr-pip-poster { opacity: 0; transition: opacity 120ms ease-out 80ms; }
.codr-pip .is-flipped { transform: scaleX(-1); }
.codr-pip--hero { width: min(100%, 460px); }
.codr-pip--lg { width: min(100%, 400px); }
.codr-pip--md { width: min(100%, 300px); }
.codr-pip--sm { width: min(100%, 200px); }
.codr-pip--xs { width: min(100%, 132px); }
/* A soft floor under Cody so he stands, not floats */
.codr-pip--floor::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 1%; height: 6%; border-radius: 50%; background: rgb(0 0 0 / 0.08); z-index: -1; }
.codr-sec--sky .codr-pip--floor::after { background: rgb(8 60 100 / 0.18); }

/* ---------- Hero ---------- */
body .e-con.codr-hero { --padding-top: calc(clamp(40px, 7vw, 96px) + 92px); --padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; }
.codr-hero-visual { position: relative; display: flex; justify-content: center; }
.codr-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 800; color: rgb(255 255 255 / 0.92); }
.codr-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.codr-hero-meta svg { width: 18px; height: 18px; }
.codr-float-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 16px; background: #fff; border: 2px solid #fff; border-bottom: 4px solid rgb(8 60 100 / 0.22); color: var(--codr-ink); font-size: 16px; font-weight: 800; line-height: 1; white-space: nowrap; }
.codr-float-pill svg { width: 24px; height: 24px; flex: none; }
.codr-float-pill--a { top: 14%; left: 0; }
.codr-float-pill--b { bottom: 18%; right: 0; }
.codr-float-pill .xp { color: var(--codr-gold-ink); }
.codr-float-pill .streak { color: var(--codr-orange-ink); }
@media (prefers-reduced-motion: no-preference) {
  .codr-float-pill--a { animation: codrBob 5s ease-in-out infinite; }
  .codr-float-pill--b { animation: codrBob 5s ease-in-out 1.2s infinite; }
}
@keyframes codrBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 900px) {
  .codr-hero .codr-split > :first-child { text-align: center; align-items: center; }
  .codr-hero .codr-row, .codr-hero .codr-hero-meta { justify-content: center; }
  .codr-pip--hero { width: min(80%, 340px); }
}
/* Short sky hero for inner pages */
body .e-con.codr-pagehero { --padding-top: calc(clamp(40px, 6vw, 80px) + 92px); --padding-bottom: clamp(48px, 6vw, 80px); }
.codr-pagehero .codr-pip { margin-bottom: -6px; }

/* ---------- Language strip ---------- */
.codr-langs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.codr-langs a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 16px; border: 2px solid var(--codr-edge); border-bottom-width: 4px; color: var(--codr-ink); font-size: 15px; font-weight: 800; text-decoration: none; background: #fff; transition: transform var(--codr-fast) var(--codr-ease-out), border-color var(--codr-normal), border-bottom-width var(--codr-fast); }
.codr-langs a:hover { border-color: var(--codr-edge-strong); transform: translateY(-2px); text-decoration: none; }
.codr-langs a:active { transform: translateY(2px); border-bottom-width: 2px; }
.codr-langs img { width: 56px; height: 56px; }
@media (max-width: 900px) { .codr-langs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .codr-langs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .codr-langs a { font-size: 14px; padding: 12px 4px; } .codr-langs img { width: 48px; height: 48px; } }

/* ---------- Feature visuals (flat mock-ups of the app) ---------- */
.codr-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
.codr-visual-pad { position: absolute; inset: 6% 4%; border-radius: 40px; background: var(--pad, var(--codr-brand-pale)); }
.codr-visual > *:not(.codr-visual-pad) { position: relative; z-index: 1; }
.codr-visual .codr-pip { position: absolute; z-index: 2; }
.codr-visual .codr-pip.at-br { right: -2%; bottom: -4%; width: 34%; }
.codr-visual .codr-pip.at-bl { left: -2%; bottom: -4%; width: 34%; }
@media (max-width: 520px) { .codr-visual { min-height: 320px; } .codr-visual-pad { inset: 4% 0; border-radius: 28px; } }

.codr-phone { width: min(100%, 320px); box-sizing: border-box; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 6px; border-radius: 32px; padding: 22px 18px 18px; text-align: left; }
.codr-phone-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.codr-phone-top .codr-progress { flex: 1; height: 12px; }
.codr-phone-x { width: 22px; height: 22px; color: var(--codr-ink-muted); flex: none; }
.codr-phone h4 { margin: 0 0 12px; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--codr-ink); }
.codr-mini-code { background: var(--codr-editor); color: var(--codr-editor-ink); border: 2px solid var(--codr-editor-edge); border-radius: 14px; padding: 12px 14px; font: 400 14px/1.6 var(--codr-font-mono); white-space: pre; overflow: hidden; }
.codr-mini-code .k { color: #c792ea; } .codr-mini-code .s { color: #a5e075; } .codr-mini-code .f { color: #58c7f7; } .codr-mini-code .n { color: #ffc857; } .codr-mini-code .c { color: var(--codr-editor-muted); }
.codr-out { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--codr-success-pale); color: var(--codr-success-ink); font: 600 14px/1.3 var(--codr-font-mono); }
.codr-out b { font-family: var(--codr-font); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.codr-phone .codr-btn { margin-top: 16px; }
.codr-opt { margin-top: 8px; padding: 12px 14px; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 14px; font-weight: 800; font-size: 15px; color: var(--codr-ink); }
.codr-opt.is-sel { border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); background: var(--codr-brand-pale); color: var(--codr-brand-ink); }

.codr-statcard { width: min(100%, 340px); box-sizing: border-box; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 6px; border-radius: 28px; padding: 22px; }
.codr-statcard h4 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--codr-ink); }
.codr-statcard p { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--codr-ink-secondary); }
.codr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.codr-week span { font-size: 12px; font-weight: 800; color: var(--codr-ink-secondary); }
.codr-week i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--codr-elevated); border: 2px solid var(--codr-edge); margin-top: 6px; }
.codr-week i.on { background: var(--codr-orange); border-color: var(--codr-orange-dark); border-bottom-width: 3px; }
.codr-week i.on svg { width: 60%; height: 60%; }
.codr-week i.today { background: #fff; border-color: var(--codr-orange); border-style: dashed; }
.codr-goal { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--codr-edge); }
.codr-goal svg { width: 56px; height: 56px; flex: none; }
.codr-goal b { display: block; font-size: 16px; color: var(--codr-ink); }
.codr-goal small { font-size: 13px; font-weight: 700; color: var(--codr-ink-secondary); }

.codr-badgefan { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 10px; justify-content: center; align-items: center; padding: 24px; }
.codr-badgefan img { width: clamp(76px, 9vw, 112px); height: auto; }
.codr-badgefan img:nth-child(2), .codr-badgefan img:nth-child(5) { transform: translateY(-14px); }
.codr-statrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.codr-stat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; font-weight: 800; font-size: 16px; }
.codr-stat svg { width: 22px; height: 22px; }
.codr-stat.o { color: var(--codr-orange-ink); } .codr-stat.g { color: var(--codr-gold-ink); } .codr-stat.p { color: var(--codr-purple-ink); }

.codr-medalfan { display: flex; justify-content: center; align-items: flex-end; padding: 28px 12px; }
.codr-medalfan img { width: clamp(84px, 10vw, 124px); height: auto; margin: 0 -10px; }
.codr-medalfan img:nth-child(1), .codr-medalfan img:nth-child(5) { transform: translateY(-4px) scale(0.86); }
.codr-medalfan img:nth-child(2), .codr-medalfan img:nth-child(4) { transform: translateY(-18px) scale(0.94); }
.codr-medalfan img:nth-child(3) { transform: translateY(-30px); z-index: 1; position: relative; }

/* ---------- Cards ---------- */
body .e-con.codr-card { background: #fff; border: 2px solid var(--codr-edge); border-radius: 24px; --padding-top: 28px; --padding-right: 28px; --padding-bottom: 28px; --padding-left: 28px; flex-direction: column; --gap: 12px; --row-gap: 12px; --column-gap: 12px; }
body .e-con.codr-card--grey { background: var(--codr-elevated); }
body .e-con.codr-card--lip { border-bottom-width: 5px; }
@media (max-width: 520px) { body .e-con.codr-card { --padding-top: 22px; --padding-right: 20px; --padding-bottom: 22px; --padding-left: 20px; } }

/* Step cards */
.codr-stepnum { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--codr-brand); border: 2px solid var(--codr-brand-dark); border-bottom-width: 4px; color: #fff; font-size: 24px; font-weight: 900; line-height: 1; }
.codr-stepnum.g { background: var(--codr-success); border-color: var(--codr-success-dark); }
.codr-stepnum.o { background: var(--codr-orange); border-color: var(--codr-orange-dark); }

/* Course cards */
.codr-course-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.codr-course-top img { width: 72px; height: 72px; }
.codr-course-tag { font-size: 16px; font-weight: 800; color: var(--codr-ink); }
.codr-course-card .codr-mini-code { font-size: 13px; margin-top: 6px; }
.codr-trail { font-size: 14px; font-weight: 700; color: var(--codr-ink-secondary); line-height: 1.5; }
.codr-trail b { color: var(--codr-ink); }

/* Career cards */
.codr-career-top { display: flex; align-items: center; gap: 16px; }
.codr-career-top img { width: 88px; height: 88px; flex: none; }
.codr-career-top h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--codr-ink); }
.codr-career-top p { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--codr-ink-secondary); }
.codr-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.codr-journey li { display: inline-flex; align-items: center; gap: 6px; }
.codr-journey li + li::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--codr-edge-strong); }
.codr-journey .codr-chip { font-size: 12px; padding: 7px 10px; }

/* Game cards */
body .e-con.codr-game { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; overflow: hidden; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.codr-game-art { position: relative; height: 210px; background: var(--accent); overflow: hidden; }
.codr-game-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / 0.2) 1.6px, transparent 1.8px); background-size: 22px 22px; }
.codr-game-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.codr-game-body h3 { margin: 0; font-size: 26px; font-weight: 800; color: var(--codr-ink); }
.codr-game-body p { margin: 0; color: var(--codr-ink-secondary); font-size: 16px; line-height: 1.55; }
.codr-game-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.codr-game-tag { font-weight: 800; font-size: 17px; color: var(--codr-ink); }
.codr-game-art--big { height: auto; aspect-ratio: 4 / 3; border-radius: 32px; border: 2px solid rgb(0 0 0 / 0.06); border-bottom-width: 6px; border-bottom-color: rgb(0 0 0 / 0.14); }

/* Little flat scenes for each game */
.gs { position: absolute; inset: 0; }
.gs-code { position: absolute; left: 7%; top: 12%; width: 54%; background: var(--codr-editor); color: var(--codr-editor-ink); border-radius: 14px; border: 2px solid var(--codr-editor-edge); border-bottom-width: 4px; padding: 10px 12px; font: 400 13px/1.55 var(--codr-font-mono); white-space: pre; box-sizing: border-box; overflow: hidden; }
.gs-code .k { color: #c792ea; } .gs-code .s { color: #a5e075; } .gs-code .f { color: #58c7f7; } .gs-code .n { color: #ffc857; } .gs-code .t { color: #f78c6c; }
.gs-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: rgb(0 0 0 / 0.14); }
.gs-plat { position: absolute; height: 14px; border-radius: 6px; background: #fff; box-shadow: 0 5px 0 rgb(0 0 0 / 0.16); }
.gs-cube { position: absolute; width: 34px; height: 34px; border-radius: 9px; background: #fff; box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.14); }
.gs-cube::after { content: ""; position: absolute; left: 9px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--codr-ink); box-shadow: 10px 0 0 var(--codr-ink); }
.gs-coin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--codr-gold); box-shadow: inset 0 -3px 0 var(--codr-gold-dark); }
.gs-flag { position: absolute; width: 4px; height: 44px; background: #fff; border-radius: 2px; }
.gs-flag::after { content: ""; position: absolute; left: 4px; top: 2px; width: 22px; height: 15px; background: var(--codr-danger); border-radius: 0 4px 4px 0; }
.gs-browser { position: absolute; right: 6%; top: 14%; width: 46%; height: 72%; background: #fff; border-radius: 14px; border-bottom: 4px solid rgb(0 0 0 / 0.16); overflow: hidden; }
.gs-browser::before { content: ""; display: block; height: 18px; background: var(--codr-elevated); border-bottom: 2px solid var(--codr-edge); background-image: radial-gradient(circle at 10px 9px, #ff5f57 3px, transparent 3.5px), radial-gradient(circle at 20px 9px, #febc2e 3px, transparent 3.5px), radial-gradient(circle at 30px 9px, #28c840 3px, transparent 3.5px); }
.gs-line { display: block; height: 8px; border-radius: 4px; background: var(--codr-edge); margin: 8px 10px 0; }
.gs-line.h { height: 12px; width: 60%; background: var(--codr-ink); opacity: 0.8; margin-top: 12px; }
.gs-line.s { width: 45%; }
.gs-box { display: block; height: 34%; margin: 10px 10px 0; border-radius: 8px; background: var(--accent); opacity: 0.35; }
.gs-iso { position: absolute; right: 8%; top: 18%; width: 40%; aspect-ratio: 1; transform: rotate(45deg) scaleY(0.82) rotate(0deg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.gs-iso i { border-radius: 4px; background: rgb(255 255 255 / 0.9); box-shadow: 0 4px 0 rgb(0 0 0 / 0.14); }
.gs-iso i.p { background: var(--codr-purple); }
.gs-iso i.c { background: var(--codr-gold); }
.gs-iso i.x { background: transparent; box-shadow: none; }
.gs-card { position: absolute; right: 7%; top: 16%; width: 44%; height: 66%; border-radius: 16px; background: #fff; border-bottom: 4px solid rgb(0 0 0 / 0.16); padding: 14px; box-sizing: border-box; }
.gs-card span { display: block; border-radius: 6px; }
.gs-card .a { height: 40%; background: linear-gradient(0deg, transparent, transparent), var(--accent); }
.gs-card .b { height: 10px; width: 70%; margin-top: 10px; background: var(--codr-ink); opacity: 0.8; }
.gs-card .c { height: 8px; width: 90%; margin-top: 8px; background: var(--codr-edge); }
.gs-card .d { height: 22px; width: 50%; margin-top: 12px; background: var(--codr-brand); border-radius: 8px; box-shadow: inset 0 -3px 0 var(--codr-brand-dark); }
.gs-card.old { right: auto; left: 50%; top: 22%; transform: rotate(-6deg); width: 34%; height: 56%; background: #ececec; opacity: 0.85; }
.gs-card.old .a { background: #bdbdbd; } .gs-card.old .d { background: #9a9a9a; box-shadow: none; }

/* ---------- FAQ ---------- */
.codr-faq { display: flex; flex-direction: column; gap: 12px; }
.codr-faq details { background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 18px; transition: border-color var(--codr-normal); }
.codr-faq details[open] { border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); }
.codr-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 800; color: var(--codr-ink); line-height: 1.3; }
.codr-faq summary::-webkit-details-marker { display: none; }
.codr-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--codr-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23696969' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--codr-normal) var(--codr-ease-out); }
.codr-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--codr-brand-pale); }
.codr-faq details > div { padding: 0 20px 20px; color: var(--codr-ink-secondary); font-size: 16px; line-height: 1.6; }
.codr-faq details > div p { margin: 0 0 0.6em; }
.codr-faq details > div p:last-child { margin: 0; }
.codr-sec--grey .codr-faq details { background: #fff; }

/* ---------- Pricing ---------- */
body .e-con.codr-plan { position: relative; }
body .e-con.codr-plan--best { border-color: var(--codr-success); border-bottom-color: var(--codr-success-dark); border-bottom-width: 5px; }
.codr-plan-name { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-secondary); }
.codr-price { display: flex; align-items: baseline; gap: 6px; color: var(--codr-ink); }
.codr-price b { font-size: clamp(44px, 5vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.codr-price span { font-size: 18px; font-weight: 800; color: var(--codr-ink-secondary); }
.codr-price-note { font-size: 15px; font-weight: 700; color: var(--codr-ink-secondary); }
.codr-flag { position: absolute; top: -16px; left: 24px; display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--codr-success); border-bottom: 3px solid var(--codr-success-dark); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.codr-checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.codr-checks li { position: relative; padding-left: 34px; font-size: 16px; font-weight: 700; color: var(--codr-ink); line-height: 1.45; }
.codr-checks li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; background: var(--codr-success-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23348000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.codr-checks--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
@media (max-width: 640px) { .codr-checks--2col { grid-template-columns: 1fr; } }


/* ---------- Cody gallery ---------- */
.codr-pipcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 16px 22px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 24px; }
.codr-pipcard .codr-pip { width: 78%; }
.codr-pipcard b { font-size: 18px; font-weight: 800; color: var(--codr-ink); }
.codr-pipcard span { font-size: 14px; font-weight: 600; color: var(--codr-ink-secondary); }

.codr-quote { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--codr-ink); }
.codr-quote::before { content: "\201C"; color: var(--codr-brand); }
.codr-quote::after { content: "\201D"; color: var(--codr-brand); }

/* ---------- Final call to action ---------- */
body .e-con.codr-cta { border-radius: clamp(28px, 4vw, 48px); --padding-top: clamp(48px, 7vw, 80px); --padding-bottom: clamp(48px, 7vw, 80px); --padding-left: var(--codr-gutter); --padding-right: var(--codr-gutter); overflow: hidden; }
.codr-cta .codr-pip { margin-bottom: 4px; }

/* ---------- Reveal on scroll (only once JS has run) ---------- */
.codr-js-reveal .codr-reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--codr-ease-out), transform 520ms var(--codr-ease-out); }
.codr-js-reveal .codr-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .codr-reveal { opacity: 1 !important; transform: none !important; }

/* ---------- 404 & plain pages ---------- */
.codr-404 { text-align: center; padding: clamp(56px, 10vw, 120px) var(--codr-gutter); max-width: 640px; margin: 0 auto; }
.codr-404 h1 { font-size: clamp(36px, 5vw, 52px); font-weight: 900; letter-spacing: -0.02em; margin: 12px 0 10px; }
.codr-404 p { font-size: 19px; font-weight: 600; color: var(--codr-ink-secondary); margin: 0 0 28px; }
body:not(.elementor-page) .site-main { max-width: 760px; margin: 0 auto; padding: 56px var(--codr-gutter) 96px; }
body:not(.elementor-page) .site-main .entry-title, body:not(.elementor-page) .site-main h1 { font-size: clamp(34px, 4.5vw, 48px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }

/* Hero pills float over Cody: their widget covers the whole visual */
body .e-con.codr-hero-visual { position: relative; }
.codr-hero-visual > .elementor-widget-html { position: absolute !important; inset: 0; z-index: 2; pointer-events: none; }
.codr-hero-visual > .elementor-widget-html .elementor-widget-container { height: 100%; }
@media (max-width: 900px) {
  .codr-float-pill { font-size: 14px; padding: 8px 12px 8px 10px; }
  .codr-float-pill svg { width: 20px; height: 20px; }
  .codr-float-pill--a { top: 10%; left: 4%; }
  .codr-float-pill--b { bottom: 20%; right: 4%; }
}

/* Feature rows sit closer together than full sections */
body .e-con.codr-sec--feature { --padding-top: clamp(36px, 5vw, 64px); --padding-bottom: clamp(36px, 5vw, 64px); }
body .e-con.codr-sec--tight + .codr-sec--feature { --padding-top: clamp(56px, 7vw, 96px); }
.codr-sec--feature + .codr-sec:not(.codr-sec--feature):not(.codr-sec--grey) { --padding-top: clamp(56px, 7vw, 96px); }
.codr-copy { font-size: 18px; }
.codr-langs img { width: 68px; height: 68px; }
@media (max-width: 520px) { .codr-langs img { width: 52px; height: 52px; } }

/* Centring that survives Elementor's own margins */
body .e-con.codr-wrap, body .e-con.codr-head { margin-left: auto; margin-right: auto; }
body .e-con.codr-head { width: 100%; }
.codr-center .elementor-heading-title, .codr-center .elementor-widget-text-editor, .codr-center .codr-measure { text-align: center; }
body .e-con.codr-center > .elementor-widget { align-self: stretch; }
body .e-con.codr-center > .codr-measure { align-self: center; }

.codr-center .codr-pip, .codr-cta .codr-pip { margin-left: auto !important; margin-right: auto !important; }
.codr-medalfan img { width: clamp(64px, 7.4vw, 100px); margin: 0 -6px; }
.codr-medalfan { flex-wrap: nowrap; max-width: 100%; }

/* The big game panels on /games: everything in the scene scales up */
.codr-game-art--big .gs-code { font-size: clamp(12px, 1.25vw, 17px); padding: 14px 18px; border-radius: 16px; }
.codr-game-art--big .gs-cube { width: 52px; height: 52px; border-radius: 13px; }
.codr-game-art--big .gs-cube::after { left: 14px; top: 17px; width: 8px; height: 8px; box-shadow: 16px 0 0 var(--codr-ink); }
.codr-game-art--big .gs-plat { height: 18px; }
.codr-game-art--big .gs-coin { width: 26px; height: 26px; }
.codr-game-art--big .gs-flag { height: 64px; width: 5px; }
.codr-game-art--big .gs-flag::after { width: 30px; height: 20px; }
.codr-game-art--big .gs-iso { width: 46%; right: 6%; top: 22%; }
.codr-game-art .gs-iso { overflow: visible; }
.codr-game-art--big .gs-line { height: 10px; margin: 12px 14px 0; }
.codr-game-art--big .gs-line.h { height: 16px; }
.codr-game-art--big .gs-box { margin: 14px 14px 0; }
.codr-game-art--big .gs-card { padding: 18px; }

/* The plan flag hangs off the card's top edge, not its widget */
body .e-con.codr-plan > .elementor-element:first-child { position: static; }
.codr-flag { top: -17px; }

/* Cody gallery: every pose stands on the same baseline in a same-sized stage */
.codr-pipcard { height: 100%; box-sizing: border-box; justify-content: flex-end; }
.codr-pipcard .codr-pip { width: 100%; height: clamp(200px, 22vw, 280px); display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.codr-pipcard .codr-pip img { width: auto; height: auto; max-width: 92%; max-height: 100%; object-fit: contain; }
body .e-con.codr-grid > .elementor-widget-html, body .e-con.codr-grid > .elementor-widget-html > .elementor-widget-container { height: 100%; }
/* Belief cards: small Pips on one baseline too */
.codr-card .codr-pip--xs { height: 132px; display: flex; align-items: flex-end; justify-content: center; }
.codr-card .codr-pip--xs img { width: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 520px) { .codr-hero-meta span[aria-hidden] { display: none; } .codr-hero-meta { gap: 6px 16px; } }

/* Footer columns share the row evenly, however many there are (Privacy and terms appears once those pages exist) */
@media (min-width: 961px) { .codr-footer-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* The closing call to action is white now — the blue belongs to the footer right below it */
body .e-con.codr-cta { --padding-top: 0px; --padding-bottom: 0px; }
.codr-cta .codr-stores { margin-top: 8px; }
body .e-con.codr-sec--card-sky { --padding-top: clamp(56px, 8vw, 96px); --padding-bottom: clamp(72px, 9vw, 112px); }

/* ==========================================================================
   The valley: the footer's blue rises into the page along an uneven curve,
   with a thick darker lip under the white sheet (the brand's 3D edge). Cody
   stands at the bottom of the valley; Codr things float around him.
   ========================================================================== */
.codr-footer { border-radius: 0; }
.codr-footer-inner { padding-top: 24px; }
.codr-valley { --h: clamp(260px, 28vw, 400px); --s: max(100vw / 1440, var(--h) / 360); position: relative; height: var(--h); }
.codr-valley-land { position: absolute; inset: -1px 0 0 0; width: 100%; height: calc(100% + 1px); display: block; }
.codr-valley-sheet { fill: #fff; }
.codr-valley-lip { fill: var(--codr-brand-dark); }
.codr-valley-stage { position: absolute; inset: 0; width: min(1080px, 100%); margin: 0 auto; }

/* Cody stands on the valley floor: 54 units above the bottom of the 360-unit drawing, scaled like the SVG */
.codr-valley-pip { position: absolute; left: 50%; bottom: calc(54 * var(--s) - 6px); transform: translateX(-50%); width: clamp(150px, 19vw, 250px); z-index: 2; }
.codr-valley-pip .codr-pip { width: 100%; }
.codr-valley-pip::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 9%; border-radius: 50%; background: rgb(0 0 0 / 0.07); z-index: -1; }

/* Floating things — flat, tilted, each bobbing on its own beat */
.codr-float { position: absolute; left: var(--l); top: var(--t); width: var(--w); min-width: 34px; z-index: 1; }
.codr-float-item { display: block; transform: rotate(var(--r)); }
.codr-float-item img, .codr-float-item svg { display: block; width: 100%; height: auto; }
.codr-float.has-shadow::after { content: ""; position: absolute; left: 6%; right: 6%; top: 118%; height: 22%; border-radius: 50%; background: rgb(8 60 110 / 0.22); }
.codr-bit { position: absolute; width: 14px; height: 14px; border-radius: 4px; transform: rotate(18deg); }
.codr-bit--b { background: var(--codr-brand-light); opacity: 0.55; }
.codr-bit--y { background: var(--codr-gold); opacity: 0.45; }
.codr-bit--g { background: var(--codr-success-light); opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .codr-float-item { animation: codrHover 4.8s ease-in-out var(--d) infinite; }
  .codr-float.has-shadow::after { animation: codrShadow 4.8s ease-in-out var(--d) infinite; }
}
@keyframes codrHover { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-9px); } }
@keyframes codrShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.86); opacity: 0.7; } }
@media (max-width: 640px) {
  .codr-float { min-width: 30px; }
  .codr-float:nth-of-type(2), .codr-bit:nth-of-type(n+4) { display: none; }
}

/* The closing section sits just above the valley: big Codr-blue headline with the wordmark's drop */
body .e-con.codr-sec--card-sky { --padding-top: clamp(64px, 9vw, 112px); --padding-bottom: 8px; }
.codr-title-cta .elementor-heading-title { color: var(--codr-brand); text-shadow: 0 0.06em 0 var(--codr-brand-dark); font-weight: 900; letter-spacing: -0.03em; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; padding-bottom: 0.06em; }

/* Deeper, wider valley (drawing is 1440×400; the floor sits 28 units above its bottom) */
.codr-valley { --h: clamp(320px, 36vw, 520px); --s: max(100vw / 1440, var(--h) / 400); }
.codr-valley-pip { bottom: calc(28 * var(--s) - 4px); width: clamp(170px, 21vw, 300px); }
.codr-float { min-width: 40px; }
@media (max-width: 640px) { .codr-valley { --h: 300px; } .codr-float { min-width: 34px; } }

/* Once the page scrolls, the pill floats over content: a soft, low shadow separates it (the one blurred shadow on the site) */
.codr-header-pill { transition: box-shadow var(--codr-smooth) var(--codr-ease-out), border-color var(--codr-normal); }
.codr-header.is-scrolled .codr-header-pill { box-shadow: 0 12px 32px -8px rgb(15 60 100 / 0.18); }
.codr-header.is-scrolled .codr-menu { box-shadow: 0 16px 36px -10px rgb(15 60 100 / 0.2); }

/* ==========================================================================
   Hero → page: the blue ends on an uneven curve with a thick darker lip under
   it (the same 3D edge as the footer's valley), instead of rounded corners.
   A section marked codr-sec--lift rises over the curve as a raised card.
   ========================================================================== */
:root { --codr-wave: clamp(56px, 8vw, 120px); --codr-lift: clamp(56px, 7vw, 96px); }
body .e-con.codr-sec--sky.codr-sec--rounded {
  border-radius: 0;
  --padding-bottom: calc(clamp(48px, 6vw, 88px) + var(--codr-wave));
}
body .e-con.codr-sec--sky.codr-sec--rounded:has(+ .codr-sec--lift, + .codr-sec--lift-plain) {
  --padding-bottom: calc(clamp(40px, 5vw, 72px) + var(--codr-wave) + var(--codr-lift));
}
body .e-con.codr-sec--sky.codr-sec--rounded::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--codr-wave) + 1px); z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23168fcc' d='M0,30 C150,30 230,84 400,84 C570,84 640,26 820,26 C1000,26 1080,80 1240,78 C1340,76 1400,52 1440,44 V121 H0 Z'/%3E%3Cpath fill='%23ffffff' transform='translate(0 18)' d='M0,30 C150,30 230,84 400,84 C570,84 640,26 820,26 C1000,26 1080,80 1240,78 C1340,76 1400,52 1440,44 V121 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
/* Content stays above the curve */
body .e-con.codr-sec--sky.codr-sec--rounded > .e-con { position: relative; z-index: 2; }

/* A raised card that sits across the curve (Home: the languages) */
body .e-con.codr-sec--lift { margin-top: calc(-1 * (var(--codr-lift) + var(--codr-wave) * 0.55)) !important; z-index: 3; --padding-top: 0px; }
body .e-con.codr-sec--lift > .e-con.codr-wrap {
  width: calc(100% - 2 * var(--codr-gutter)); max-width: 1120px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 6px; border-radius: 32px;
  --padding-top: clamp(28px, 4vw, 44px); --padding-bottom: clamp(28px, 4vw, 44px); --padding-left: clamp(18px, 3vw, 40px); --padding-right: clamp(18px, 3vw, 40px);
  box-shadow: 0 18px 40px -18px rgb(15 60 100 / 0.22);
}
body .e-con.codr-sec--lift .codr-head { margin-bottom: clamp(20px, 3vw, 32px) !important; }
/* Content that rises over the curve on its own (Pricing: the plan cards) */
body .e-con.codr-sec--lift-plain { margin-top: calc(-1 * (var(--codr-lift) + var(--codr-wave) * 0.55)) !important; z-index: 3; --padding-top: 0px; }
body .e-con.codr-sec--lift-plain .codr-plan { box-shadow: 0 18px 40px -18px rgb(15 60 100 / 0.22); }
/* The curve already adds room: the section right after a hero starts closer */
body .e-con.codr-sec--sky.codr-sec--rounded + .codr-sec:not(.codr-sec--lift):not(.codr-sec--lift-plain) { --padding-top: clamp(32px, 4vw, 56px); }
@media (max-width: 640px) { :root { --codr-wave: 64px; } }

/* ---------- Languages marquee: one line, looping right to left ---------- */
.codr-marquee {
  --pad: clamp(18px, 3vw, 40px);
  margin-inline: calc(-1 * var(--pad)); overflow: hidden; padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.codr-marquee-track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: codrMarquee 48s linear infinite; }
.codr-marquee:hover .codr-marquee-track, .codr-marquee:focus-within .codr-marquee-track { animation-play-state: paused; }
.codr-marquee-track li { flex: none; margin-right: 14px; }
.codr-marquee-track a {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 10px;
  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; text-decoration: none;
  transition: transform var(--codr-fast) var(--codr-ease-out), border-color var(--codr-normal), border-bottom-width var(--codr-fast);
}
.codr-marquee-track a:hover { border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); color: var(--codr-brand-ink); text-decoration: none; transform: translateY(-2px); }
.codr-marquee-track a:active { transform: translateY(2px); border-bottom-width: 2px; }
.codr-marquee-track img { width: 44px; height: 44px; flex: none; }
@keyframes codrMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .codr-marquee-track a { font-size: 16px; padding: 6px 18px 6px 8px; } .codr-marquee-track img { width: 38px; height: 38px; } .codr-marquee-track { animation-duration: 36s; } }
@media (prefers-reduced-motion: reduce) {
  .codr-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--pad); }
  .codr-marquee-track { animation: none; }
  .codr-marquee-track li[aria-hidden] { display: none; }
}

/* ==========================================================================
   Header at the top of a page: part of the blue hero (no pill, white logo and
   links). Scrolling — or opening the phone menu — turns it into the floating pill.
   Only Elementor pages have a blue hero under the header; others keep the pill.
   ========================================================================== */
.codr-header-pill { transition: background-color var(--codr-smooth) var(--codr-ease-out), border-color var(--codr-smooth) var(--codr-ease-out), box-shadow var(--codr-smooth) var(--codr-ease-out), padding var(--codr-smooth) var(--codr-ease-out), max-width var(--codr-smooth) var(--codr-ease-out); }
.codr-logo .codr-wordmark, .codr-nav-list a, .codr-header-cta.codr-btn, .codr-burger, .codr-burger span { transition: color var(--codr-smooth) var(--codr-ease-out), background-color var(--codr-smooth) var(--codr-ease-out), border-color var(--codr-smooth) var(--codr-ease-out), transform var(--codr-normal) var(--codr-ease-out), opacity var(--codr-fast); }

html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-header-pill {
  background-color: transparent; border-color: transparent; box-shadow: none;
  max-width: calc(1120px + 16px); padding-left: 8px;
}
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-logo .codr-wordmark { color: #fff; }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-nav-list a { color: rgb(255 255 255 / 0.92); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-nav-list a:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-nav-list .current-menu-item > a,
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-nav-list .current_page_item > a { background: rgb(255 255 255 / 0.2); color: #fff; }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-header-cta.codr-btn { background: #fff; color: var(--codr-brand-ink); border-color: #fff; border-bottom-color: rgb(8 60 100 / 0.3); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-header-cta.codr-btn:hover { background: var(--codr-brand-pale); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-burger { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.55); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-burger span { background: #fff; }

/* A recording standing in a feature row's coloured pad */
.codr-visual .codr-phonevid { position: relative; z-index: 1; margin: 18px 0; }

/* ==========================================================================
   Screen recordings in a phone ([codr_phone]). Four finishes, five angles:
   the frame is a thick band with a lighter rim and a darker side edge, so it
   reads as a solid object; angled phones turn in 3D with the edge showing.
   ========================================================================== */
body .e-con > .elementor-widget-html:has(.codr-phonevid) { width: 100%; align-self: stretch; }
.codr-phonevid { --w: 290px; width: min(100%, var(--w)); margin: 0 auto; perspective: 1600px; }
.codr-phonevid--lg { --w: 320px; }
.codr-phonevid--sm { --w: 250px; }
.codr-device {
  --body: #232a37; --rim: #4a5366; --side: #11151d; --btn: #2c3442;
  position: relative; box-sizing: border-box; padding: 10px; border-radius: 54px;
  background: var(--body);
  box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35);
  transform-style: preserve-3d;
  transition: transform 700ms var(--codr-ease-out);
}
/* Side buttons */
.codr-device::before { content: ""; position: absolute; left: -4px; top: 19%; width: 4px; height: 7%; border-radius: 3px 0 0 3px; background: var(--btn); box-shadow: 0 calc(var(--w) * 0.2) 0 var(--btn), 0 calc(var(--w) * 0.35) 0 var(--btn); }
.codr-device::after { content: ""; position: absolute; right: -4px; top: 27%; width: 4px; height: 12%; border-radius: 0 3px 3px 0; background: var(--btn); }
.codr-device-screen { position: relative; overflow: hidden; border-radius: 44px; background: #fff; aspect-ratio: 590 / 1282; transform: translateZ(1px); }
.codr-device-screen video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.codr-device-screen video::-webkit-media-controls, .codr-device-screen video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* A soft floor shadow under every phone */
.codr-phonevid { position: relative; }
.codr-phonevid::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgb(15 50 90 / 0.28), transparent); z-index: -1; }

/* Finishes */
.codr-device--silver .codr-device { --body: #e9edf3; --rim: #ffffff; --side: #b9c2cf; --btn: #cfd6e0; }
.codr-device--blue .codr-device { --body: #1593d6; --rim: #58c7f7; --side: #0d6ea3; --btn: #1287c4; }
.codr-device--orange .codr-device { --body: #f08a00; --rim: #ffb347; --side: #b86600; --btn: #e07f00; }

/* Angles — the side edge is a solid lip in the direction the phone turns away */
.codr-angle--right .codr-device { transform: rotateY(-16deg) rotateX(4deg) rotateZ(1deg); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), 9px 6px 0 var(--side), 20px 30px 40px -18px rgb(15 50 90 / 0.35); }
.codr-angle--left .codr-device { transform: rotateY(16deg) rotateX(4deg) rotateZ(-1deg); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), -9px 6px 0 var(--side), -20px 30px 40px -18px rgb(15 50 90 / 0.35); }
.codr-angle--tilt .codr-device { transform: rotate(5deg); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), 0 8px 0 var(--side), 0 30px 46px -20px rgb(15 50 90 / 0.35); }
.codr-angle--tilt-left .codr-device { transform: rotate(-5deg); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), 0 8px 0 var(--side), 0 30px 46px -20px rgb(15 50 90 / 0.35); }
.codr-angle--flat .codr-device { box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), 0 8px 0 var(--side), 0 30px 46px -20px rgb(15 50 90 / 0.35); }
/* Angled phones settle a little toward you on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .codr-angle--right:hover .codr-device { transform: rotateY(-8deg) rotateX(2deg); }
  .codr-angle--left:hover .codr-device { transform: rotateY(8deg) rotateX(2deg); }
}
@media (max-width: 520px) {
  .codr-device { border-radius: 48px; padding: 9px; }
  .codr-device-screen { border-radius: 39px; }
  .codr-angle--right .codr-device { transform: rotateY(-10deg) rotateX(3deg); }
  .codr-angle--left .codr-device { transform: rotateY(10deg) rotateX(3deg); }
}

/* Straight-on phones lean gently toward the pointer on hover, like a real object (site.js sets --rx/--ry) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .codr-angle--flat .codr-device { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 600ms var(--codr-ease-out), box-shadow 600ms var(--codr-ease-out); }
  .codr-angle--flat.is-tilting .codr-device { transition: transform 140ms linear, box-shadow 300ms var(--codr-ease-out); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 5px var(--body), inset 0 0 0 6px rgb(0 0 0 / 0.35), calc(var(--ry, 0deg) / 1deg * -0.8px) 8px 0 var(--side), 0 34px 50px -20px rgb(15 50 90 / 0.4); }
}

/* ==========================================================================
   Game Room ([codr_gameroom]): the four games on one phone.
   The whole block takes the active game's colour (--gr-c face, --gr-d lip,
   --gr-p pale, --gr-i text-safe ink), so switching games recolours it.
   ========================================================================== */
.gr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "head stage" "tabs stage" "info stage";
  grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 6vw, 80px); row-gap: 28px; align-items: start;
}
.gr-head { grid-area: head; }
.gr-stage { grid-area: stage; }
.gr-tabs { grid-area: tabs; }
.gr-info { grid-area: info; }

.gr-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--codr-success-ink); }
.gr-title { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 900; line-height: 1.06; letter-spacing: -0.025em; color: var(--codr-ink); }
.gr-lead { margin: 16px 0 0; max-width: 480px; font-size: clamp(17px, 1.6vw, 19px); font-weight: 600; line-height: 1.5; color: var(--codr-ink-secondary); }

/* ---- Picker: four game tiles ---- */
.gr-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gr-tab {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px 12px; overflow: hidden;
  text-align: left; font: inherit; color: var(--codr-ink); cursor: pointer;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 18px;
  transition: background-color 260ms var(--codr-ease-out), border-color 260ms var(--codr-ease-out), transform var(--codr-fast) var(--codr-ease-out), border-bottom-width var(--codr-fast);
}
.gr-tab:hover { border-color: var(--codr-edge-strong); transform: translateY(-1px); }
.gr-tab:active { transform: translateY(2px); border-bottom-width: 2px; }
.gr-tab.is-active { background: var(--gr-p); border-color: var(--gr-c); border-bottom-color: var(--gr-d); }
.gr-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--gr-c) 45%, transparent); outline-offset: 2px; }
.gr-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--gr-c); color: #fff; box-shadow: 0 3px 0 var(--gr-d); transition: transform 360ms var(--codr-ease-spring); }
.gr-icon svg { width: 26px; height: 26px; }
.gr-tab.is-active .gr-icon { transform: rotate(-6deg) scale(1.06); }
.gr-tab-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-tab-text b { font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-tab-text small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-secondary); }
.gr-tab.is-active .gr-tab-text small { color: var(--gr-i); }
/* How far the active game's clip has played — it moves on by itself when the clip ends */
.gr-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--gr-c) 18%, transparent); opacity: 0; transition: opacity 200ms; }
.gr-tab-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--gr-c); transform-origin: left; transform: scaleX(0); }
.gr-tab.is-active .gr-tab-bar { opacity: 1; }

/* ---- The active game's facts ---- */
.gr-info { position: relative; }
.gr-panel[hidden] { display: none; }
.gr-panel.is-active { animation: grIn 420ms var(--codr-ease-out) both; }
@keyframes grIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gr-name { margin: 0; font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--gr-i); }
.gr-tag { margin: 6px 0 0; font-size: 19px; font-weight: 800; color: var(--codr-ink); }
.gr-desc { margin: 10px 0 0; max-width: 500px; font-size: 17px; line-height: 1.6; color: var(--codr-ink-secondary); }
.gr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; max-width: 460px; }
.gr-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 16px; text-align: center; }
.gr-stat b { font-size: 26px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--gr-i); }
.gr-stat small { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--codr-ink-secondary); }
.gr-skills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.gr-skills li { padding: 7px 12px; border-radius: 999px; background: var(--gr-p); color: var(--gr-i); font-size: 13px; font-weight: 800; }
.gr-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 16px; font-weight: 800; color: var(--codr-brand-ink); }
.gr-more span { transition: transform var(--codr-normal) var(--codr-ease-out); }
.gr-more:hover span { transform: translateX(4px); }

/* ---- The stage: the game's colour, a dot grid, one phone ---- */
.gr-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(36px, 4vw, 52px) 24px 26px; border-radius: 40px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gr-stage-bg {
  position: absolute; inset: 0; z-index: 0; background-color: var(--gr-p);
  background-image: radial-gradient(ellipse 60% 50% at 50% 45%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 70%), radial-gradient(color-mix(in srgb, var(--gr-c) 32%, transparent) 1.6px, transparent 1.8px);
  background-size: 100% 100%, 24px 24px; background-position: 0 0, 12px 12px;
  transition: background-color 500ms var(--codr-ease-out);
}
.gr-phone { --w: 290px; position: relative; z-index: 1; cursor: grab; }
.gr-stage.is-dragging .gr-phone { cursor: grabbing; }
.gr-phone .codr-device { transition: transform 600ms var(--codr-ease-out), box-shadow 600ms var(--codr-ease-out); }
.gr-stage.is-dragging .gr-phone .codr-device { transition: none; }
.gr-screen { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms var(--codr-ease-out); }
.gr-screen.is-active { opacity: 1; z-index: 1; }
.gr-screen img, .gr-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gr-screen video { opacity: 0; transition: opacity 200ms; }
.gr-screen.is-playing video { opacity: 1; }
/* Switching games: the phone gives a small hop */
.gr-phone.is-switching .codr-device { animation: grHop 460ms var(--codr-ease-out); }
@keyframes grHop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(6px) scale(0.975); } 100% { transform: none; } }

.gr-arrow {
  position: absolute; top: calc(50% - 26px); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border-radius: 999px; background: #fff; color: var(--gr-i); border: 2px solid #fff; border-bottom: 4px solid color-mix(in srgb, var(--gr-d) 55%, #fff);
  transition: transform var(--codr-fast) var(--codr-ease-out), border-bottom-width var(--codr-fast), color 300ms;
}
.gr-arrow svg { width: 22px; height: 22px; }
.gr-arrow:hover { transform: translateY(-1px) scale(1.04); }
.gr-arrow:active { transform: translateY(2px); border-bottom-width: 2px; }
.gr-arrow--prev { left: 18px; }
.gr-arrow--next { right: 18px; }
.gr-dots { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 30px; }
.gr-dot { display: block; width: 10px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--gr-c) 30%, #fff); overflow: hidden; transition: width 360ms var(--codr-ease-out); }
.gr-dot.is-active { width: 34px; }
.gr-dot i { display: block; height: 100%; width: 100%; background: var(--gr-c); transform-origin: left; transform: scaleX(0); }
.gr-dot.is-active i { transform: scaleX(var(--p, 0)); }

/* ---- Phones and tablets: heading, phone, picker, facts ---- */
@media (max-width: 960px) {
  .gr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "tabs" "info"; grid-template-rows: none; row-gap: 22px; }
  .gr-head { text-align: center; }
  .gr-lead { margin-inline: auto; }
  .gr-stage { border-radius: 32px; }
  .gr-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .gr-tab { flex-direction: column; justify-content: center; gap: 8px; padding: 12px 6px 14px; text-align: center; }
  .gr-tab-text b { font-size: 13px; white-space: normal; line-height: 1.15; }
  .gr-tab-text small { font-size: 11px; }
  .gr-tab-bar { left: 10px; right: 10px; bottom: 5px; }
  .gr-info { text-align: center; }
  .gr-desc, .gr-stats { margin-inline: auto; }
  .gr-skills { justify-content: center; }
}
@media (max-width: 520px) {
  .gr-phone { --w: 236px; }
  .gr-arrow { width: 44px; height: 44px; top: calc(50% - 30px); }
  .gr-arrow--prev { left: 10px; }
  .gr-arrow--next { right: 10px; }
  .gr-tab-text b { font-size: 12px; }
  .gr-icon { width: 40px; height: 40px; }
  .gr-stat b { font-size: 22px; }
}
@media (max-width: 380px) { .gr-tab-text b { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gr-panel.is-active, .gr-phone.is-switching .codr-device { animation: none; }
  .gr-icon, .gr-screen, .gr-stage-bg { transition: none; }
}
.gr { line-height: 1.5; }
.gr-tab-text b { white-space: normal; overflow: visible; }
.gr-tab-text small { line-height: 1.3; }

/* ---------- Hero: Cody at his laptop (hero.webm / hero.mov) with the footer's floating badges ---------- */
.codr-floats { position: absolute; inset: 0; pointer-events: none; }
.codr-floats--hero .codr-float { min-width: 34px; }
.codr-floats--hero .codr-float.has-shadow::after { background: rgb(8 60 110 / 0.24); }
.codr-hero-visual .codr-pip--hero { width: min(100%, 520px); }
/* The clip's square has air around Cody: pull it in so he fills the column, and set his floor shadow under the laptop */
.codr-hero-visual .codr-pip--hero.codr-pip--floor::after { bottom: 12%; left: 22%; right: 22%; height: 5%; background: rgb(8 60 100 / 0.2); }
.codr-hero .codr-hero-visual { margin-block: -4% -6%; }
@media (max-width: 900px) {
  .codr-hero-visual .codr-pip--hero { width: min(88%, 380px); }
  .codr-floats--hero .codr-float { --w-m: 1; }
}
@media (max-width: 520px) {
  .codr-floats--hero .codr-float:nth-child(2), .codr-floats--hero .codr-float:nth-child(6) { display: none; }
}
@media (max-width: 900px) { .codr-hero .codr-hero-visual { margin-block: 0 -16%; } }
body .e-con.codr-hero-visual { --margin-top: -4%; --margin-bottom: -6%; }
@media (max-width: 900px) { body .e-con.codr-hero-visual { --margin-top: 0px; --margin-bottom: -18%; } }
body .e-con > .e-con.codr-hero-visual { margin-block: -4% -6%; }
@media (max-width: 900px) { body .e-con > .e-con.codr-hero-visual { margin-block: 0 -18%; } }

/* ---------- Hero floats: scattered, each drifting on its own path, a gentle parallax, a playful hover ---------- */
:is(.codr-floats--hero, .codr-floats--footer) .codr-float {
  min-width: 22px;
  transform: translate(calc(var(--px, 0) * var(--z) * 1px), calc(var(--py, 0) * var(--z) * 1px));
  transition: transform 900ms var(--codr-ease-out);
}
:is(.codr-floats--hero, .codr-floats--footer) .codr-float-art { display: block; pointer-events: auto; cursor: pointer; transition: transform 380ms var(--codr-ease-spring), filter 200ms; }
:is(.codr-floats--hero, .codr-floats--footer) .codr-float-art img, :is(.codr-floats--hero, .codr-floats--footer) .codr-float-art svg { display: block; width: 100%; height: auto; }
:is(.codr-floats--hero, .codr-floats--footer) .codr-float-art:hover { transform: scale(1.22) rotate(calc(-1 * var(--r))); animation: codrWiggle 520ms var(--codr-ease-out) 120ms; }
:is(.codr-floats--hero, .codr-floats--footer) .codr-float-art:active { transform: scale(1.05) rotate(calc(-1 * var(--r))); transition-duration: 120ms; }
@keyframes codrWiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -9deg; } 60% { rotate: 7deg; } 80% { rotate: -3deg; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float-item { animation: codrDrift var(--dur) ease-in-out var(--d) infinite; }
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float.has-shadow::after { animation: codrShadow var(--dur) ease-in-out var(--d) infinite; }
}
@keyframes codrDrift {
  0%, 100% { transform: rotate(var(--r)) translate(0, 0); }
  25% { transform: rotate(calc(var(--r) + 5deg)) translate(calc(var(--dx) * 0.6), calc(var(--dy) * -1)); }
  50% { transform: rotate(calc(var(--r) - 2deg)) translate(var(--dx), calc(var(--dy) * -0.35)); }
  75% { transform: rotate(calc(var(--r) - 6deg)) translate(calc(var(--dx) * -0.4), calc(var(--dy) * -0.8)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float { transform: none; }
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float-art:hover { animation: none; }
}
@media (max-width: 520px) {
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float:nth-child(2), :is(.codr-floats--hero, .codr-floats--footer) .codr-float:nth-child(6) { display: revert; }
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float:nth-child(5), :is(.codr-floats--hero, .codr-floats--footer) .codr-float:nth-child(8) { display: none; }
}

/* Group reaction (site.js): --ox/--oy push each icon out from Cody and away from the pointer */
:is(.codr-floats--hero, .codr-floats--footer) .codr-float {
  transform: translate(calc(var(--px, 0) * var(--z) * 1px + var(--ox, 0px)), calc(var(--py, 0) * var(--z) * 1px + var(--oy, 0px)));
  transition: transform 700ms cubic-bezier(0.34, 1.45, 0.5, 1);
}
:is(.codr-floats--hero, .codr-floats--footer).is-bursting .codr-float { transition-delay: calc(var(--i, 0) * 45ms); }
:is(.codr-floats--hero, .codr-floats--footer) .codr-float-art { transition: transform 460ms cubic-bezier(0.34, 1.6, 0.5, 1), filter 200ms; }
:is(.codr-floats--hero, .codr-floats--footer).is-excited .codr-float-art { transform: scale(1.14) rotate(calc(-1 * var(--r))); }
:is(.codr-floats--hero, .codr-floats--footer).is-bursting .codr-float-art { animation: codrHop 560ms cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes codrHop { 0% { translate: 0 0; } 40% { translate: 0 -14px; } 70% { translate: 0 2px; } 100% { translate: 0 0; } }
:is(.codr-floats--hero, .codr-floats--footer).is-excited .codr-float.has-shadow::after { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  :is(.codr-floats--hero, .codr-floats--footer) .codr-float, :is(.codr-floats--hero, .codr-floats--footer).is-excited .codr-float-art { transform: none; animation: none; }
}

/* ==========================================================================
   FAQ: big Cody with a speech bubble that stays in view, and an accordion
   where one answer is open at a time (site.js animates the height).
   ========================================================================== */
#faq .codr-split { align-items: start; }
@media (min-width: 901px) { body .e-con.codr-faq-side { position: sticky; top: 110px; } }
.codr-faq-pip { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.codr-faq-pip .codr-pip--lg { width: min(100%, 380px); }
.codr-bubble {
  position: relative; z-index: 1; align-self: center; margin-bottom: -6px; padding: 12px 18px;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 18px;
  font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--codr-ink);
}
.codr-bubble::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; background: #fff; border-right: 2px solid var(--codr-edge); border-bottom: 4px solid var(--codr-edge); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; }
@media (prefers-reduced-motion: no-preference) { .codr-bubble { animation: codrBob 4.5s ease-in-out infinite; } }

.codr-faq { display: flex; flex-direction: column; gap: 12px; }
.codr-faq details { background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 20px; overflow: hidden; transition: border-color 260ms var(--codr-ease-out), background-color 260ms; }
.codr-faq details:hover { border-color: var(--codr-edge-strong); }
.codr-faq details[open] { border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); }
.codr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 20px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--codr-ink); user-select: none; }
.codr-faq summary::-webkit-details-marker { display: none; }
.codr-faq summary::after { content: none; display: none; }
.codr-faq summary:focus-visible { outline: 3px solid rgb(28 176 246 / 0.45); outline-offset: -3px; border-radius: 18px; }
.codr-faq details[open] .codr-faq-q { color: var(--codr-brand-ink); }
.codr-faq-icon {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 12px;
  background: var(--codr-elevated); border-bottom: 3px solid var(--codr-edge);
  transition: background-color 260ms, border-color 260ms, transform 360ms var(--codr-ease-spring);
}
.codr-faq-icon::before, .codr-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 2px; background: var(--codr-ink-secondary); transition: transform 360ms var(--codr-ease-out), background-color 260ms; }
.codr-faq-icon::after { transform: rotate(90deg); }
.codr-faq details[open] .codr-faq-icon { background: var(--codr-brand); border-bottom-color: var(--codr-brand-dark); transform: rotate(180deg); }
.codr-faq details[open] .codr-faq-icon::before, .codr-faq details[open] .codr-faq-icon::after { background: #fff; }
.codr-faq details[open] .codr-faq-icon::after { transform: rotate(0deg); }
.codr-faq-a-inner { padding: 0 24px 22px; font-size: 17px; line-height: 1.6; color: var(--codr-ink-secondary); }
.codr-faq-a-inner p { margin: 0 0 0.6em; }
.codr-faq-a-inner p:last-child { margin: 0; }
.codr-faq details > div { padding: 0; }
@media (max-width: 900px) { .codr-faq-pip .codr-pip--lg { width: min(70%, 280px); } }
@media (prefers-reduced-motion: reduce) { .codr-faq-icon, .codr-faq-icon::before, .codr-faq-icon::after { transition: none; } }
/* While an answer shrinks its card already looks closed */
.codr-faq details.is-closing { border-color: var(--codr-edge); border-bottom-color: var(--codr-edge); }
.codr-faq details.is-closing .codr-faq-q { color: var(--codr-ink); }
.codr-faq details.is-closing .codr-faq-icon { background: var(--codr-elevated); border-bottom-color: var(--codr-edge); transform: none; }
.codr-faq details.is-closing .codr-faq-icon::before, .codr-faq details.is-closing .codr-faq-icon::after { background: var(--codr-ink-secondary); }
.codr-faq details.is-closing .codr-faq-icon::after { transform: rotate(90deg); }
.codr-faq-a { overflow: hidden; }

/* Cody's bubble swapping lines: a quick shrink, then a springy pop with the new words */
.codr-bubble > span { display: inline-block; }
.codr-bubble.is-hushing > span { transform: scale(0.6); opacity: 0; transition: transform 120ms ease-in, opacity 120ms ease-in; }
.codr-bubble.is-saying { animation: codrSay 420ms cubic-bezier(0.34, 1.6, 0.5, 1); }
.codr-bubble.is-saying > span { animation: codrSayText 320ms var(--codr-ease-out); }
@keyframes codrSay { 0% { transform: scale(0.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes codrSayText { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.codr-bubble { transition: width 200ms; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .codr-bubble.is-saying, .codr-bubble.is-saying > span, .codr-bubble.is-hushing > span { animation: none; transition: none; transform: none; opacity: 1; } }

/* ---------- Back to top: appears after a little scroll; its ring fills with how far down you are ---------- */
.codr-totop {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom)); z-index: 90;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; cursor: pointer;
  background: #fff; color: var(--codr-brand-ink); border: 2px solid var(--codr-edge); border-bottom: 5px solid var(--codr-edge-strong); border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgb(15 60 100 / 0.3);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.85);
  transition: opacity 260ms var(--codr-ease-out), transform 360ms cubic-bezier(0.34, 1.5, 0.5, 1), visibility 0s linear 360ms, border-color 200ms, background-color 200ms;
}
.codr-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.codr-totop:hover { background: var(--codr-brand-pale); border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); }
.codr-totop:hover .codr-totop-arrow { transform: translateY(-3px); }
.codr-totop:active { transform: translateY(3px); border-bottom-width: 2px; }
.codr-totop:focus-visible { outline: 3px solid rgb(28 176 246 / 0.45); outline-offset: 3px; }
.codr-totop-arrow { position: relative; width: 24px; height: 24px; transition: transform 260ms cubic-bezier(0.34, 1.6, 0.5, 1); }
.codr-totop-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; }
.codr-totop-ring circle { fill: none; stroke: var(--codr-brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: calc(157.08 * (1 - var(--p, 0))); }
/* Launching: a quick hop up before the page follows */
.codr-totop.is-launching .codr-totop-arrow { animation: codrLaunch 520ms cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes codrLaunch { 0% { transform: none; } 35% { transform: translateY(-12px); opacity: 0; } 36% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Keep clear of the open phone menu */
.codr-menu-open .codr-totop { opacity: 0; visibility: hidden; }
@media (max-width: 520px) { .codr-totop { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .codr-totop, .codr-totop-arrow { transition: opacity 150ms; transform: none !important; } .codr-totop.is-launching .codr-totop-arrow { animation: none; } }

/* Back to top, inverted: Codr Blue face and lip, white arrow, white progress ring */
.codr-totop { background: var(--codr-brand); color: #fff; border-color: var(--codr-brand-dark); border-bottom-color: var(--codr-brand-dark); box-shadow: 0 12px 28px -10px rgb(15 90 150 / 0.45); }
.codr-totop:hover { background: var(--codr-brand-light); border-color: var(--codr-brand-dark); border-bottom-color: var(--codr-brand-dark); }
.codr-totop-ring circle { stroke: rgb(255 255 255 / 0.9); }
.codr-totop-ring { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.codr-totop-ring circle { stroke-width: 2.5; }
.codr-totop-ring { opacity: 0.95; }
.codr-totop::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; border: 2.5px solid rgb(255 255 255 / 0.22); pointer-events: none; }

/* ==========================================================================
   Buttons are physical keys. The darker lip is a solid shadow under the face
   (--lip), so the face can sink without moving anything around it:
   rest = 4px lip, hover = sinks halfway (2px), press = all the way down.
   The colour never changes on hover — the movement is the feedback.
   ========================================================================== */
.codr-btn, .wp-block-button__link, .elementor-widget-button .elementor-button, .codr-store, .codr-totop, .gr-arrow, .codr-burger {
  --lip: var(--codr-brand-dark);
  border-bottom-width: 2px !important;
  box-shadow: 0 4px 0 var(--lip);
  transform: translateY(0);
  transition: transform 120ms var(--codr-ease-out), box-shadow 120ms var(--codr-ease-out), background-color 200ms, color 200ms, border-color 200ms, opacity 260ms !important;
}
@media (hover: hover) {
  .codr-btn:hover, .wp-block-button__link:hover, .elementor-widget-button .elementor-button:hover, .codr-store:hover, .gr-arrow:hover, .codr-burger:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--lip); }
}
.codr-btn:active, .wp-block-button__link:active, .elementor-widget-button .elementor-button:active, .codr-store:active, .gr-arrow:active, .codr-burger:active { transform: translateY(4px) !important; box-shadow: 0 0 0 var(--lip) !important; }

/* Each variant keeps its own colour on hover, with its own lip */
.codr-btn, .elementor-widget-button .elementor-button { --lip: var(--codr-brand-dark); }
.codr-btn:hover, .elementor-widget-button .elementor-button:hover { background: var(--codr-brand); color: #fff; }
.codr-btn--success, .codr-b-success .elementor-button { --lip: var(--codr-success-dark); }
.codr-btn--success:hover, .codr-b-success .elementor-button:hover { background: var(--codr-success); }
.codr-btn--secondary, .codr-b-secondary .elementor-button, .wp-block-button.is-style-outline .wp-block-button__link { --lip: #d7d7d7; }
.codr-btn--secondary:hover, .codr-b-secondary .elementor-button:hover { background: #fff; color: var(--codr-brand-ink); }
.codr-btn--white, .codr-b-white .elementor-button { --lip: rgb(8 60 100 / 0.3); }
.codr-btn--white:hover, .codr-b-white .elementor-button:hover { background: #fff; color: var(--codr-brand-ink); }
.codr-b-ghost-white .elementor-button { --lip: rgb(255 255 255 / 0.45); }
.codr-b-ghost-white .elementor-button:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.codr-btn--ghost { --lip: transparent; box-shadow: none; }
.codr-store { --lip: #000; }
.codr-store:hover { background: #141414; }
.codr-store--white { --lip: rgb(8 60 100 / 0.3); }
.codr-store--white:hover { background: #fff; }
.gr-arrow { --lip: color-mix(in srgb, var(--gr-d) 55%, #fff); border-bottom-color: #fff; }
.gr-arrow:hover { transform: translateY(2px); }
.codr-burger { --lip: var(--codr-edge); }
.codr-burger:hover { background: #fff; }
/* Header CTA while the header is part of the hero: white key on blue */
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-header-cta.codr-btn { --lip: rgb(8 60 100 / 0.3); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-header-cta.codr-btn:hover { background: #fff; }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-burger { --lip: rgb(255 255 255 / 0.35); }
html:not(.codr-menu-open) .elementor-page .codr-header:not(.is-scrolled) .codr-burger:hover { background: rgb(255 255 255 / 0.14); }
/* Disabled keys sit flat */
.codr-btn[disabled], .codr-btn.is-disabled { box-shadow: none; transform: none; }

/* Back to top keeps its glow under the lip, and its show/hide motion */
.codr-totop { --lip: var(--codr-brand-dark); box-shadow: 0 4px 0 var(--lip), 0 14px 28px -10px rgb(15 90 150 / 0.45); }
.codr-totop.is-visible { transform: none; }
@media (hover: hover) { .codr-totop.is-visible:hover { background: var(--codr-brand); transform: translateY(2px); box-shadow: 0 2px 0 var(--lip), 0 10px 22px -10px rgb(15 90 150 / 0.45); } }
.codr-totop.is-visible:active { transform: translateY(4px) !important; box-shadow: 0 0 0 var(--lip), 0 6px 16px -10px rgb(15 90 150 / 0.45) !important; }
.codr-totop:not(.is-visible) { transform: translateY(16px) scale(0.85); }
.codr-totop { transition: transform 360ms cubic-bezier(0.34, 1.5, 0.5, 1), box-shadow 120ms var(--codr-ease-out), opacity 260ms, visibility 0s linear 360ms, background-color 200ms !important; }
.codr-totop.is-visible { transition: transform 120ms var(--codr-ease-out), box-shadow 120ms var(--codr-ease-out), opacity 260ms, visibility 0s, background-color 200ms !important; }
.codr-totop:hover .codr-totop-arrow { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .codr-btn, .elementor-widget-button .elementor-button, .codr-store, .gr-arrow, .codr-burger { transition: background-color 150ms, box-shadow 150ms !important; }
}

/* Hero "Get Codr": the blue key from the scrolled header. On the blue sky a thin white rim and a soft
   shadow keep it from melting into the background. */
.codr-b-hero .elementor-button { --lip: var(--codr-brand-dark); background: var(--codr-brand); color: #fff; border-color: #fff; border-bottom-color: #fff; }
.codr-b-hero .elementor-button:hover { background: var(--codr-brand); color: #fff; }
.codr-sec--sky .codr-b-hero .elementor-button { box-shadow: 0 4px 0 var(--lip), 0 14px 26px -12px rgb(8 50 90 / 0.55); }
@media (hover: hover) { .codr-sec--sky .codr-b-hero .elementor-button:hover { box-shadow: 0 2px 0 var(--lip), 0 10px 20px -12px rgb(8 50 90 / 0.55); } }
.codr-sec--sky .codr-b-hero .elementor-button:active { box-shadow: 0 0 0 var(--lip), 0 6px 12px -10px rgb(8 50 90 / 0.5) !important; }
.codr-b-hero .elementor-button { border-color: var(--codr-brand-dark); border-bottom-color: var(--codr-brand-dark); }
.codr-sec--sky .codr-b-hero .elementor-button { box-shadow: 0 4px 0 var(--lip), 0 16px 30px -10px rgb(8 50 90 / 0.6); }

/* ==========================================================================
   Start in three steps ([codr_steps])
   ========================================================================== */
.codr-steps { --gap: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.codr-step {
  --c: var(--codr-brand); --d: var(--codr-brand-dark); --p: var(--codr-brand-pale); --ink: var(--codr-brand-ink);
  position: relative; display: flex; flex-direction: column; padding: 12px 12px 24px;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 5px; border-radius: 28px;
  transition: transform 300ms var(--codr-ease-out), border-color 300ms;
}
.codr-step--success { --c: var(--codr-success); --d: var(--codr-success-dark); --p: var(--codr-success-pale); --ink: var(--codr-success-ink); }
.codr-step--orange { --c: var(--codr-orange); --d: var(--codr-orange-dark); --p: var(--codr-orange-pale); --ink: var(--codr-orange-ink); }
.codr-step-art {
  position: relative; height: 190px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background-color: var(--p);
  background-image: radial-gradient(ellipse 60% 55% at 50% 60%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 70%), radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1.5px, transparent 1.7px);
  background-size: 100% 100%, 20px 20px; background-position: 0 0, 10px 10px;
}
.codr-step-art .codr-pip { width: auto; height: 92%; margin: 0 auto -2px; }
.codr-step-art .codr-pip img, .codr-step-art .codr-pip video { width: auto; height: 100%; max-width: 100%; }
.codr-step-art .codr-pip video { left: 50%; transform: translateX(-50%); width: auto; }
.codr-step-num {
  position: relative; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; margin: -30px 0 0 18px;
  border-radius: 18px; background: var(--c); color: #fff; font-size: 26px; font-weight: 900; line-height: 1;
  border: 3px solid #fff; box-shadow: 0 5px 0 var(--d);
}
.codr-step-title { margin: 14px 14px 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--codr-ink); }
.codr-step-text { margin: 0 14px; font-size: 16px; line-height: 1.55; color: var(--codr-ink-secondary); flex: 1; }
.codr-step-time { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 16px 14px 0; padding: 6px 11px; border-radius: 999px; background: var(--p); color: var(--ink); font-size: 13px; font-weight: 800; }
.codr-step-time svg { width: 15px; height: 15px; }
/* The dotted trail from one step's number to the next one's */
.codr-step-trail { position: absolute; z-index: 1; top: 190px; left: calc(18px + 54px + 18px); width: calc(100% - 18px - 54px - 18px + var(--gap) + 12px + 18px - 10px); height: 4px; pointer-events: none; }
.codr-step-trail i { display: block; height: 100%; background-image: radial-gradient(circle, var(--codr-edge-strong) 2.5px, transparent 3px); background-size: 14px 4px; background-repeat: repeat-x; transform-origin: left; }
@media (hover: hover) {
  .codr-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--codr-edge)); }
  .codr-step:hover .codr-step-num { animation: codrStepHop 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }
}
@keyframes codrStepHop { 0% { transform: none; } 40% { transform: translateY(-8px) rotate(-6deg); } 100% { transform: none; } }

/* Entrance, once: cards rise in turn, numbers pop, trails draw toward the next step */
@media (prefers-reduced-motion: no-preference) {
  .codr-js-steps .codr-steps:not(.is-in) .codr-step { opacity: 0; transform: translateY(26px); }
  .codr-js-steps .codr-steps:not(.is-in) .codr-step-num { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  .codr-js-steps .codr-steps:not(.is-in) .codr-step-trail i { transform: scaleX(0); }
  .codr-js-steps .codr-steps:not(.is-in) .codr-step-time { opacity: 0; transform: translateY(6px); }
  .codr-steps.is-in .codr-step { transition: opacity 500ms var(--codr-ease-out) calc(var(--i) * 260ms), transform 600ms cubic-bezier(0.3, 1.35, 0.5, 1) calc(var(--i) * 260ms), border-color 300ms; }
  .codr-steps.is-in .codr-step-num { transition: transform 560ms cubic-bezier(0.3, 1.7, 0.5, 1) calc(var(--i) * 260ms + 220ms), opacity 200ms calc(var(--i) * 260ms + 220ms); }
  .codr-steps.is-in .codr-step-trail i { transition: transform 520ms var(--codr-ease-out) calc(var(--i) * 260ms + 420ms); }
  .codr-steps.is-in .codr-step-time { transition: opacity 360ms calc(var(--i) * 260ms + 380ms), transform 360ms var(--codr-ease-out) calc(var(--i) * 260ms + 380ms); }
}
@media (max-width: 900px) {
  .codr-steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .codr-step-art { height: 170px; }
  /* On one column the trail runs down from each number to the next card */
  .codr-step-trail { top: calc(170px + 12px + 30px); left: calc(18px + 12px + 27px - 2px); width: 4px; height: calc(100% - 170px - 30px + var(--gap)); }
  .codr-step-trail i { width: 100%; height: 100%; background-image: radial-gradient(circle, var(--codr-edge-strong) 2.5px, transparent 3px); background-size: 4px 14px; background-repeat: repeat-y; transform-origin: top; }
  .codr-js-steps .codr-steps:not(.is-in) .codr-step-trail i { transform: scaleY(0); }
  .codr-step-text, .codr-step-title, .codr-step-time { margin-left: 80px; }
  .codr-step-num { margin-top: -30px; }
  .codr-step-title { margin-top: -22px; }
}
.codr-steps { line-height: 1.5; }
/* No trail between the steps */
.codr-step-trail { display: none !important; }
/* The desk scene is wide: let it fill the panel's width instead of its height */
.codr-step-art .codr-pip img[src*="typing"], .codr-step-art .codr-pip img[src*="typing"] + video { height: auto; max-height: 100%; width: 100%; }

/* Footer valley floats: same drift and group reaction as the hero; they sit behind Cody there */
.codr-floats--footer { z-index: 1; }
.codr-floats--footer .codr-float { min-width: 34px; }
.codr-floats--footer .codr-float.has-shadow::after { background: rgb(8 60 110 / 0.22); }
.codr-valley-pip { z-index: 2; }

/* ---------- Store buttons, redesigned as Codr keys: white face, a visible lip, real-colour logos ---------- */
.codr-stores { gap: 14px; }
.codr-store, .codr-store--white {
  --lip: #d4d4d4;
  min-height: 60px; padding: 0 22px 0 18px; gap: 12px;
  background: #fff; color: var(--codr-ink) !important;
  border: 2px solid var(--codr-edge); border-bottom-width: 2px !important; border-radius: 18px;
}
.codr-store:hover, .codr-store--white:hover { background: #fff; }
.codr-store svg { width: 28px; height: 28px; flex: none; overflow: visible; }
.codr-store svg path[fill="currentColor"] { fill: #1d1d1f; }
.codr-store span { gap: 1px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--codr-ink); }
.codr-store small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--codr-ink-secondary); opacity: 1; }
/* On the blue (footer): white keys with a blue-shadow lip */
.codr-store--white { --lip: rgb(8 60 100 / 0.32); border-color: #fff; }

/* Store keys in the closing CTA ("Your first line of code…") — the same keys as the footer.
   1. The CTA container still had overflow:hidden from its old card design, which sliced off the lip.
   2. Elementor's `.elementor a { box-shadow: none }` flattens links in page content; restate the lip.
   3. On white, the footer's translucent lip would turn grey, so use the colour it renders as on the
      footer's blue and outline the white face in the same dark blue so it reads as one key on white. */
body .e-con.codr-cta { overflow: visible; }
.codr-cta .codr-stores { padding-bottom: 4px; }
.elementor a.codr-store { box-shadow: 0 4px 0 var(--lip); }
.codr-cta .codr-store--white { --lip: rgb(22 139 199); border-color: var(--lip); }
@media (hover: hover) { .elementor a.codr-store:hover { box-shadow: 0 2px 0 var(--lip); } }

/* Closing CTA on phones: the two store keys stack centred, so give them one shared width
   (the wider key's) instead of two different ones. The footer's keys are left-aligned and stay as they are. */
@media (max-width: 520px) {
  .codr-cta .codr-stores { display: grid; grid-template-columns: max-content; justify-content: center; }
  .codr-cta .codr-store { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Coming soon (Elementor → Tools → Maintenance Mode, template "Codr — Coming soon", built by build/coming-soon.php).
   A single sky screen: wordmark, the home hero's headline, Cody with his floats, "coming soon" store pills.
   ========================================================================== */
body .e-con.codr-soon-wrap { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
/* One screen, never a scrollbar: the section is exactly the viewport and every size below scales with its height as well as its width */
body:has(.codr-soon) { background: var(--codr-brand); }
.codr-soon {
  position: relative; height: 100vh; height: 100dvh; display: flex; overflow: hidden; color: #fff;
  background-color: var(--codr-brand);
  background-image:
    radial-gradient(ellipse 70% 60% at 62% 45%, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 70%),
    radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 1.8px);
  background-size: 100% 100%, 24px 24px;
}
.codr-soon-inner { width: 100%; height: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(14px, 3.2svh, 36px) clamp(20px, 4vw, 48px); display: flex; flex-direction: column; box-sizing: border-box; }
.codr-soon-logo { display: block; font-family: var(--codr-font); font-size: clamp(24px, 4.2svh, 34px); line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.codr-soon-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(8px, 3svh, 40px) 0; }
.codr-soon-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(10px, 2.2svh, 18px); padding: clamp(5px, 1svh, 8px) 14px; border-radius: 999px; background: rgb(255 255 255 / 0.16); border: 2px solid rgb(255 255 255 / 0.3); font-size: clamp(11px, 1.7svh, 14px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.codr-soon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--codr-gold); box-shadow: 0 0 0 0 rgb(255 200 0 / 0.6); animation: codrSoonPing 2s ease-out infinite; }
@keyframes codrSoonPing { 70% { box-shadow: 0 0 0 10px rgb(255 200 0 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 200 0 / 0); } }
.codr-soon-text { container-type: inline-size; }
.codr-soon-title { margin: 0; font-size: clamp(30px, min(10.4cqw, 8.6svh), 76px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.codr-soon-lead { max-width: 520px; margin: clamp(10px, 2.4svh, 20px) 0 0; font-size: clamp(14px, min(1.6vw, 2.4svh), 20px); line-height: 1.5; color: rgb(255 255 255 / 0.92); }
.codr-soon-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: clamp(12px, 2.8svh, 24px) 0 0; padding: 0; }
.codr-soon-facts li { display: inline-flex; align-items: baseline; gap: 6px; padding: clamp(4px, 0.9svh, 8px) 14px; border-radius: 999px; background: rgb(255 255 255 / 0.16); border: 2px solid rgb(255 255 255 / 0.28); font-size: clamp(12px, 1.8svh, 15px); font-weight: 700; }
.codr-soon-facts b { font-size: clamp(14px, 2.2svh, 18px); font-weight: 900; }
.codr-soon-stores { display: flex; flex-wrap: wrap; gap: 12px 14px; list-style: none; margin: clamp(14px, 3.4svh, 30px) 0 0; padding: 0; }
.codr-soon-stores li { display: inline-flex; align-items: center; gap: 10px; min-height: clamp(44px, 7svh, 60px); padding: 0 20px 0 16px; box-sizing: border-box; border-radius: 16px; background: #fff; border: 2px solid #fff; box-shadow: 0 4px 0 rgb(8 60 100 / 0.32); color: var(--codr-ink); }
.codr-soon-stores svg { width: clamp(22px, 3.3svh, 28px); height: clamp(22px, 3.3svh, 28px); flex: none; }
.codr-soon-stores li:first-child svg path { fill: #1d1d1f; }
.codr-soon-stores span { display: flex; flex-direction: column; gap: 1px; font-size: clamp(15px, 2.3svh, 19px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.codr-soon-stores small { font-size: clamp(10px, 1.4svh, 11.5px); font-weight: 700; letter-spacing: 0.01em; color: var(--codr-ink-secondary); }
/* Cody's square stage: as big as the row allows, never taller than it; his floats are placed inside the same square */
.codr-soon .codr-soon-visual { align-self: stretch; min-height: 0; margin: 0; display: flex; justify-content: center; align-items: center; container-type: size; }
.codr-soon-stage { position: relative; flex: none; --s: min(100cqw, 100cqh, 540px); width: var(--s); height: var(--s); }
.codr-soon .codr-soon-stage .codr-pip { width: 100%; margin: 0; }
.codr-soon-foot { margin: 0; font-size: clamp(11px, 1.7svh, 14px); line-height: 1.3; font-weight: 700; color: rgb(255 255 255 / 0.78); }

/* Portrait screens (phones, tablets upright, tall windows): Cody on top takes whatever height the text leaves */
@media (max-aspect-ratio: 1/1), (max-width: 600px) {
  .codr-soon-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: clamp(8px, 2svh, 24px); text-align: center; padding: clamp(4px, 1.5svh, 24px) 0; }
  .codr-soon .codr-soon-visual { order: -1; }
  .codr-soon-stage { --s: min(100cqw, 100cqh, 460px); }
  .codr-soon-title { font-size: clamp(26px, min(8.6vw, 10.4cqw, 4.8svh), 60px); }
  .codr-soon-lead { max-width: 34em; margin-left: auto; margin-right: auto; font-size: clamp(13px, min(4vw, 2.1svh), 19px); }
  .codr-soon-facts, .codr-soon-stores { justify-content: center; }
  .codr-soon-foot { text-align: center; }
}
/* Phones: the two store keys side by side at one width, so they cost one row */
@media (max-width: 600px) {
  .codr-soon-eyebrow { margin-bottom: clamp(8px, 1.6svh, 14px); }
  /* Facts as one quiet line instead of three pills */
  .codr-soon-facts { flex-wrap: nowrap; gap: 0; margin-top: clamp(8px, 1.8svh, 16px); }
  .codr-soon-facts li { padding: 0; border: 0; background: none; border-radius: 0; gap: 4px; white-space: nowrap; font-size: clamp(12px, min(3.5vw, 1.9svh), 15px); color: rgb(255 255 255 / 0.9); }
  .codr-soon-facts li + li::before { content: "·"; margin: 0 7px; font-weight: 900; opacity: 0.7; }
  .codr-soon-facts b { font-size: clamp(13px, min(3.9vw, 2.1svh), 17px); }
  .codr-soon-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .codr-soon-stores li { justify-content: center; gap: 8px; padding: 0 10px; border-radius: 14px; }
  .codr-soon-stores span { font-size: clamp(13px, min(3.8vw, 2.1svh), 17px); }
  .codr-soon-stores small { font-size: clamp(9px, min(2.6vw, 1.35svh), 11px); }
}
@media (max-width: 340px) {
  .codr-soon-stores { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
/* Very short screens (phones held sideways, small laptop windows): drop the extras rather than scroll */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .codr-soon-eyebrow, .codr-soon-facts { display: none; }
}
@media (max-height: 600px) and (max-aspect-ratio: 1/1) {
  .codr-soon-facts { display: none; }
}
@media (prefers-reduced-motion: reduce) { .codr-soon-dot { animation: none; } }