/* CMA Careers - Listen & Diagnose. Uses the site's --cma-* tokens with fallbacks. */
.cma-ld-section {
  background: var(--cma-bg, #F6F7F9);
  box-shadow: 0 0 0 100vmax var(--cma-bg, #F6F7F9);
  clip-path: inset(0 -100vmax);
  padding: 56px 16px 72px;
}
.cma-ld-wrap { max-width: 760px; margin: 0 auto; }

#cma-ld {
  --ld-navy: var(--cma-navy, #1A334B);
  --ld-navy-900: var(--cma-navy-900, #122438);
  --ld-navy-700: var(--cma-navy-700, #294762);
  --ld-rust: var(--cma-rust, #B34839);
  --ld-rust-600: var(--cma-rust-600, #9C3C2E);
  --ld-rust-400: var(--cma-rust-400, #C96B59);
  --ld-rust-100: var(--cma-rust-100, #F5E4DF);
  --ld-ink: var(--cma-ink, #2C333D);
  --ld-ink-500: var(--cma-ink-500, #6E7681);
  --ld-line: var(--cma-line, #E4E7EB);
  --ld-line-strong: var(--cma-line-strong, #CDD3DA);
  --ld-ok: #2E7D4F;
  --ld-ok-bg: #E6F2EB;
  --ld-display: var(--cma-display, Poppins), "Segoe UI", Arial, sans-serif;
  --ld-body: var(--cma-body, Mulish), "Segoe UI", Arial, sans-serif;
  font-family: var(--ld-body);
  color: var(--ld-ink);
  font-size: 16px;
  line-height: 1.5;
}
#cma-ld *, #cma-ld *::before, #cma-ld *::after { box-sizing: border-box; }

#cma-ld .ld-card {
  background: #fff;
  border: 1px solid var(--ld-line);
  border-radius: var(--cma-r-md, 10px);
  box-shadow: 0 12px 32px -18px rgba(18, 36, 56, 0.35);
  padding: 32px;
}
#cma-ld .ld-empty { text-align: center; color: var(--ld-ink-500); }

#cma-ld .ld-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ld-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ld-rust);
  margin-bottom: 10px;
}
#cma-ld .ld-eyebrow-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ld-rust-400); }
#cma-ld .ld-h {
  font-family: var(--ld-display); font-weight: 700; color: var(--ld-navy);
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 12px; outline: none;
  text-wrap: balance;
}
#cma-ld .ld-lead { font-size: 1.125rem; color: var(--ld-ink); margin: 0 0 20px; text-wrap: pretty; }
#cma-ld .ld-note { font-size: 0.875rem; color: var(--ld-ink-500); margin: 12px 0 0; }

#cma-ld .ld-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
#cma-ld .ld-steps li { display: flex; gap: 12px; align-items: flex-start; }
#cma-ld .ld-steps li > span {
  flex: 0 0 30px; height: 30px; border-radius: 999px; background: var(--ld-navy); color: #fff;
  font-family: var(--ld-display); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
#cma-ld .ld-steps li > div { padding-top: 3px; }

#cma-ld .ld-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#cma-ld .ld-btn {
  font-family: var(--ld-display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer;
  padding: 16px 26px; min-height: 48px; border-radius: var(--cma-r-xs, 3px);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid transparent; transition: background-color .15s, color .15s, border-color .15s;
}
#cma-ld .ld-btn-primary { background: var(--ld-rust); color: #fff; }
#cma-ld .ld-btn-primary:hover, #cma-ld .ld-btn-primary:focus-visible { background: var(--ld-rust-600); color: #fff; }
#cma-ld .ld-btn-ghost { background: transparent; color: var(--ld-navy); border-color: var(--ld-line-strong); }
#cma-ld .ld-btn-ghost:hover, #cma-ld .ld-btn-ghost:focus-visible { border-color: var(--ld-navy); background: transparent; color: var(--ld-navy); }
#cma-ld .ld-btn:focus-visible, #cma-ld .ld-choice:focus-visible, #cma-ld .ld-play:focus-visible {
  outline: 3px solid var(--ld-rust-400); outline-offset: 2px;
}

#cma-ld .ld-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
#cma-ld .ld-count {
  font-family: var(--ld-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ld-ink-500);
}
#cma-ld .ld-dots { display: flex; gap: 6px; }
#cma-ld .ld-dot { width: 22px; height: 6px; border-radius: 999px; background: var(--ld-line); }
#cma-ld .ld-dot.now { background: var(--ld-navy); }
#cma-ld .ld-dot.ok { background: var(--ld-ok); }
#cma-ld .ld-dot.miss { background: var(--ld-rust-400); }

#cma-ld .ld-player {
  display: flex; align-items: center; gap: 16px;
  background: var(--ld-navy); border-radius: var(--cma-r-md, 10px); padding: 16px;
}
#cma-ld .ld-play {
  flex: 0 0 72px; height: 72px; padding: 0; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ld-rust); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s, transform .1s;
}
#cma-ld .ld-play:hover { background: var(--ld-rust-600); color: #fff; }
#cma-ld .ld-play:active { transform: scale(0.96); }
#cma-ld .ld-play:disabled { background: var(--ld-navy-700); cursor: default; }
#cma-ld .ld-play svg { width: 32px; height: 32px; fill: currentColor; }
#cma-ld .ld-play .i-wave { display: none; }
#cma-ld .ld-play.is-playing .i-play { display: none; }
#cma-ld .ld-play.is-playing .i-wave { display: inline; }
#cma-ld .ld-play.is-playing .i-wave rect { animation: ld-eq .8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
#cma-ld .ld-play.is-playing .i-wave rect:nth-child(2) { animation-delay: .15s; }
#cma-ld .ld-play.is-playing .i-wave rect:nth-child(3) { animation-delay: .3s; }
@keyframes ld-eq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { #cma-ld .ld-play.is-playing .i-wave rect { animation: none; } }

#cma-ld .ld-wavewrap { position: relative; flex: 1; height: 64px; }
#cma-ld .ld-wave { width: 100%; height: 100%; display: block; }
#cma-ld .ld-loading {
  position: absolute; inset: 0; display: flex; align-items: center; color: rgba(255,255,255,.7); font-size: 0.875rem;
}
#cma-ld .ld-plays { font-size: 0.875rem; color: var(--ld-ink-500); margin: 10px 2px 0; min-height: 1.5em; }

#cma-ld .ld-q {
  font-family: var(--ld-display); font-weight: 600; color: var(--ld-navy);
  font-size: 1.3rem; margin: 22px 0 12px; outline: none;
}
#cma-ld .ld-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#cma-ld .ld-choices.ld-say { grid-template-columns: minmax(0, 1fr); }
#cma-ld .ld-choice {
  font-family: var(--ld-body); font-size: 1rem; font-weight: 600; color: var(--ld-ink); text-align: left;
  text-transform: none; letter-spacing: 0;
  background: #fff; border: 2px solid var(--ld-line-strong); border-radius: var(--cma-r-sm, 6px);
  padding: 14px 16px; min-height: 56px; cursor: pointer; line-height: 1.35; white-space: normal;
  transition: border-color .15s, background-color .15s;
}
#cma-ld .ld-say .ld-choice { font-weight: 400; }
#cma-ld .ld-choice:hover:not(:disabled) { border-color: var(--ld-navy); background: #F6F8FA; color: var(--ld-ink); }
#cma-ld .ld-choice:disabled { cursor: default; color: var(--ld-ink); }
#cma-ld .ld-choice:disabled:not(.is-correct):not(.is-wrong) { opacity: .55; }
#cma-ld .ld-choice.is-correct { border-color: var(--ld-ok); background: var(--ld-ok-bg); opacity: 1; }
#cma-ld .ld-choice.is-wrong { border-color: var(--ld-rust); background: var(--ld-rust-100); opacity: 1; }

#cma-ld .ld-feedback:not(:empty) { margin-top: 18px; display: grid; gap: 14px; justify-items: start; }
#cma-ld .ld-verdict { border-left: 4px solid var(--ld-ok); background: var(--ld-ok-bg); padding: 12px 16px; border-radius: 0 6px 6px 0; width: 100%; }
#cma-ld .ld-verdict.miss { border-left-color: var(--ld-rust); background: var(--ld-rust-100); }
#cma-ld .ld-verdict-h { font-family: var(--ld-display); font-weight: 700; color: var(--ld-navy); margin-bottom: 2px; }
#cma-ld .ld-verdict p { margin: 0; text-wrap: pretty; }

#cma-ld .ld-customer { display: flex; gap: 12px; align-items: flex-start; }
#cma-ld .ld-avatar {
  flex: 0 0 48px; height: 48px; border-radius: 999px; background: var(--ld-rust-100);
  display: flex; align-items: center; justify-content: center;
}
#cma-ld .ld-avatar svg { width: 26px; height: 26px; fill: none; stroke: var(--ld-rust); stroke-width: 2; stroke-linecap: round; }
#cma-ld .ld-bubble {
  background: var(--ld-navy); color: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 16px;
  font-size: 1.1rem; line-height: 1.4;
}
#cma-ld .ld-bubble-name { font-family: var(--ld-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cma-on-navy-muted, #B7C2CE); margin-bottom: 2px; }
#cma-ld .ld-diag { margin: 14px 0 0; font-size: .95rem; color: var(--ld-ink-500); }
#cma-ld .ld-diag strong { color: var(--ld-ink); }

#cma-ld .ld-stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 22px; }
#cma-ld .ld-stamp {
  border: 2px dashed var(--ld-line-strong); border-radius: var(--cma-r-md, 10px); padding: 18px; text-align: center;
}
#cma-ld .ld-stamp.earned { border-style: solid; border-color: var(--ld-rust); background: var(--ld-rust-100); }
#cma-ld .ld-stamp-label { font-family: var(--ld-display); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ld-ink-500); }
#cma-ld .ld-stamp-score { font-family: var(--ld-display); font-weight: 700; font-size: 3rem; line-height: 1.1; color: var(--ld-navy); }
#cma-ld .ld-stamp-score span { font-size: 1.25rem; color: var(--ld-ink-500); }
#cma-ld .ld-stamp-state { font-size: .875rem; font-weight: 700; color: var(--ld-ink-500); }
#cma-ld .ld-stamp.earned .ld-stamp-state { color: var(--ld-rust); }
#cma-ld .ld-kiosk-msg { font-size: 1.2rem; font-weight: 700; color: var(--ld-navy); margin: 0 0 16px; }
#cma-ld .ld-motto {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--ld-line);
  font-family: var(--ld-display); font-weight: 600; color: var(--ld-rust);
}

#cma-ld .ld-credits { margin-top: 16px; font-size: .8rem; color: var(--ld-ink-500); }
#cma-ld .ld-credits summary { cursor: pointer; }
#cma-ld .ld-credits ul { margin: 8px 0 0; padding-left: 18px; }
#cma-ld .ld-credits a { color: var(--ld-ink-500); }

@media (max-width: 600px) {
  .cma-ld-section { padding: 32px 16px 48px; }
  #cma-ld .ld-card { padding: 22px 18px; }
  #cma-ld .ld-choices { grid-template-columns: minmax(0, 1fr); }
  #cma-ld .ld-play { flex-basis: 60px; height: 60px; }
  #cma-ld .ld-stamp-score { font-size: 2.4rem; }
}

/* Kiosk: full screen on the booth tablet, no site chrome. */
body.cma-ld-kiosk-page header, body.cma-ld-kiosk-page footer,
body.cma-ld-kiosk-page .elementor-location-header, body.cma-ld-kiosk-page .elementor-location-footer,
body.cma-ld-kiosk-page #masthead, body.cma-ld-kiosk-page #colophon,
body.cma-ld-kiosk-page #wpadminbar { display: none !important; }
html:has(body.cma-ld-kiosk-page) { margin-top: 0 !important; }
body.cma-ld-kiosk-page { overflow: hidden; }
body.cma-ld-kiosk-page .cma-ld-section {
  position: fixed; inset: 0; z-index: 99999; overflow-y: auto;
  display: flex; align-items: center; padding: 24px;
  background: var(--cma-navy, #1A334B); box-shadow: none; clip-path: none;
}
body.cma-ld-kiosk-page .cma-ld-wrap { width: 100%; max-width: 900px; margin: auto; }
body.cma-ld-kiosk-page #cma-ld .ld-credits, body.cma-ld-kiosk-page #cma-ld .ld-credits a { color: var(--cma-on-navy-muted, #B7C2CE); }
#cma-ld.ld-kiosk { font-size: 18px; user-select: none; -webkit-user-select: none; }
#cma-ld.ld-kiosk .ld-card { padding: 40px; }
#cma-ld.ld-kiosk .ld-choice { min-height: 72px; font-size: 1.15rem; }
#cma-ld.ld-kiosk .ld-btn { min-height: 60px; font-size: 16px; padding: 20px 32px; }
#cma-ld.ld-kiosk .ld-play { flex-basis: 88px; height: 88px; }