/* CDL Greenlight: identity. Asphalt, a signal that turns green, condensed capitals, hard edges.
   Green means go: the buy button, a pass, a right answer. Yellow stays what it is on the road: caution.
   Built for a driver on a phone: big type, big targets, nothing decorative that costs bytes. */
:root{
  --paper:#f2f1ec;--white:#fffffc;--ink:#14181c;--muted:#575d63;--line:#d4d3cb;--radius:6px;
  --x-deep:#1c2329;--x-deeper:#0c0f12;--x-tint:#ecebe3;
  --cdl-display:"Avenir Next Condensed","Roboto Condensed","HelveticaNeue-CondensedBold","Arial Narrow",sans-serif-condensed,DM,sans-serif;
}
h1,h2,.x-price-amount,.x-stats strong,.e-card h2,.b-title{font-family:var(--cdl-display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1}
h1{font-size:clamp(46px,7.4vw,104px)}
h2{font-size:clamp(34px,4.6vw,64px)}
.x-hero h1{font-size:clamp(44px,6.6vw,92px);font-weight:700;letter-spacing:.005em;line-height:.98}
.study-content h1{font-size:clamp(34px,4vw,52px)}
.x-result h2,.b-title{font-size:clamp(24px,2.6vw,32px)}
.e-card h2{font-size:26px}
/* Hard edges instead of soft cards */
.button,.x-demo,.x-demo-option,.x-price-card,.x-feature,.b-block,.b-chip,.b-action,.e-card,.g-steps li,.x-objection,.quiz-stage,.quiz-option,.x-report,.a-player,.g-row,.e-history button{border-radius:6px}
.x-glow::before{border-radius:8px}
.x-demo-letter,.b-rail li,.e-facts div,.x-promise,.x-hero-promise a,.b-panel,.b-gauge,.b-lock,.b-ask,.b-note{border-radius:4px}
.button.primary{color:#14181c;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* Hero: night road, lane markings, a hazard stripe under the header */
.x-hero{background:linear-gradient(180deg,#1c2329 0%,#0c0f12 100%)}
.x-hero::before{background-image:repeating-linear-gradient(90deg,rgb(255 255 255/.16) 0 56px,transparent 56px 112px);background-size:112px 6px;background-repeat:repeat-x;background-position:0 calc(100% - 26px);-webkit-mask-image:none;mask-image:none}
.x-hero-bg span:nth-child(1){background:var(--orange);opacity:.28}
.x-hero-bg span:nth-child(2){background:#2c3a45;opacity:.9}
.home-page .site-header{background:#14181c;border-bottom:6px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--orange) 0 14px,#14181c 14px 28px) 6}
.x-scroll{height:4px}
.x-eyebrow{color:var(--orange);letter-spacing:.14em}
.x-trust li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;background:var(--orange);transform:rotate(45deg)}
.x-stats{background:var(--orange);color:#14181c}
.x-stats span{color:rgb(20 24 28/.78)}
.x-stats-grid>div{border-left-color:rgb(20 24 28/.2)}
.section-label{display:inline-block;padding:4px 9px;background:#14181c;color:var(--orange);letter-spacing:.14em;margin-bottom:22px}
.x-pricing .section-label,.x-audio-band .section-label{background:var(--orange);color:#14181c}
.x-seal{border-radius:4px;background:#14181c;text-transform:uppercase;letter-spacing:.08em}
.x-guarantee{background:var(--x-tint);border-block:6px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--orange) 0 14px,#14181c 14px 28px) 6}
.g-steps b{border-radius:4px;background:#14181c;color:var(--orange)}
.x-pricing{background:linear-gradient(180deg,#1c2329,#0c0f12)}
.x-feature svg{border-radius:4px;background:#14181c;stroke:var(--orange)}
.b-kind{border-radius:3px;background:#14181c;color:var(--orange)}
.source-quote{border-left-width:5px}
.site-footer{border-top:6px solid var(--orange)}
@media(max-width:640px){
  .x-hero{padding-block:34px 56px}
  .x-hero h1{font-size:clamp(40px,12.5vw,58px)}
  .x-hero-sub{font-size:16px;margin-top:14px}
  .x-hero .hero-actions{margin-top:20px}
  .x-hero-promise{margin-top:14px}
  .x-hero-promise a{display:block}
}
/* Questions are read, not shouted: prompts keep the body face in normal case. */
.x-demo-prompt,.quiz-prompt,.lesson-section h2,.x-result h2,.answer-feedback h3,.x-faq-list summary{font-family:DM,Arial,sans-serif;text-transform:none;letter-spacing:-.02em;line-height:1.35}
.x-demo-prompt{font-weight:600}
.lesson-section h2{font-weight:600;line-height:1.2}

/* The green light --------------------------------------------------------------------------------------- */
:root{--go:#31d67b;--go-hover:#25c06b;--go-deep:#0d7a3e;--go-glow:rgb(49 214 123/.45)}
.brand b{font-weight:inherit;color:var(--go-deep)}
.home-page .site-header .brand b,.site-footer .brand b,.x-sticky .brand b{color:var(--go)}
.button.primary{background:var(--go);color:#0c0f12;box-shadow:0 16px 34px -14px var(--go-glow)}
.button.primary:hover{background:var(--go-hover)}
.gl-go{color:var(--go);white-space:nowrap}
.gl-signal{display:inline-flex;gap:5px;align-items:center;padding:5px 8px;margin-right:10px;border-radius:999px;background:#0c0f12;border:1px solid #3a444c;vertical-align:middle}
.gl-signal i{width:9px;height:9px;border-radius:50%;background:#3a444c}
.gl-signal i:nth-child(1){animation:gl-red 2.4s ease-out both}
.gl-signal i:nth-child(2){animation:gl-amber 2.4s ease-out both}
.gl-signal i:nth-child(3){animation:gl-green 2.4s ease-out both}
@keyframes gl-red{0%,38%{background:#ff4a36;box-shadow:0 0 10px #ff4a36}46%,100%{background:#3a444c;box-shadow:none}}
@keyframes gl-amber{0%,38%{background:#3a444c;box-shadow:none}46%,72%{background:#ffb400;box-shadow:0 0 10px #ffb400}80%,100%{background:#3a444c;box-shadow:none}}
@keyframes gl-green{0%,72%{background:#3a444c;box-shadow:none}80%{background:#fff;box-shadow:0 0 18px var(--go)}100%{background:var(--go);box-shadow:0 0 12px var(--go)}}
@media(prefers-reduced-motion:reduce){.gl-signal i{animation:none}.gl-signal i:nth-child(3){background:var(--go);box-shadow:0 0 12px var(--go)}}
.x-trust li::before{background:var(--go);border-radius:50%;transform:none}
.nav-try,.home-page .site-header .nav-try{background:var(--go);border-color:var(--go);color:#0c0f12}
.nav-try:hover{background:var(--go-hover);color:#0c0f12}
.x-scroll{background:var(--go)}
.x-hero-bg span:nth-child(1){background:var(--go);opacity:.2}
.x-glow::before{background:linear-gradient(135deg,var(--go),transparent 38%,transparent 62%,#1c2329);opacity:.7}
.x-hero-promise strong{color:var(--go)}
.film-sound,.film-play span{background-color:#fffffc}
.x-price-card{border-top-color:var(--go)}
.hero-actions .button.primary,.x-sticky .button.primary{box-shadow:0 16px 34px -14px var(--go-glow)}
/* One wordmark everywhere: the headline face, in capitals */
.brand{font-family:var(--cdl-display);font-weight:700;text-transform:uppercase;letter-spacing:.012em;font-size:28px}
@media(max-width:540px){.brand{font-size:23px}}
@media(max-width:430px){.site-header .brand{font-size:21px}}
@media(max-width:360px){.site-header .brand{font-size:19px}}
/* Desktop hero: the film is the hero */
@media(min-width:1000px){
  .x-hero-grid:has(.x-hero-film){grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,3.4vw,56px)}
  .x-hero:has(.x-hero-film) h1{font-size:clamp(40px,4.5vw,66px)}
  .x-hero:has(.x-hero-film) .x-hero-sub{font-size:18px}
}
/* A pass is green */
.b-stamp.is-pass{border-color:var(--go);color:var(--go)}
.e-result.is-pass h1{color:var(--go-deep)}
.site-header nav .nav-try,.site-header .nav-try{background:var(--go);border-color:var(--go);color:#0c0f12}
.site-header nav .nav-try:hover{background:var(--go-hover);color:#0c0f12}
/* Play is go */
.a-play{background:var(--go)}
.a-play:hover{background:var(--go-hover)}
.a-seek{accent-color:var(--go-deep)}
.x-welcome[hidden]{display:none}
.site-footer .brand b{margin-left:.28em}
.x-audio-list i,.x-audio-list em b{background:var(--go)}
.x-audio-list button[aria-pressed="true"]{border-color:var(--go)}

/* The question claim on a phone, where the hero's sub-line is not shown: one line under the headline. */
.x-hero-claim{display:none}
@media (max-width:760px){.home-page .x-hero-grid:has(.x-hero-film) .x-hero-claim{display:block;order:1;margin:-4px 0 0;font-size:15px;line-height:1.35;color:rgb(255 255 255/.86)}.x-hero-claim strong{color:#fff}}

/* Header for someone who has the course: where they are, or the way back; never "Log in". */
.nav-in{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.nav-in i{width:9px;height:9px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px rgb(49 214 123/.22)}
/* End of a practice set: the questions to see again. */
.set-missed{margin:0 0 22px;padding-left:22px;display:grid;gap:10px;font-size:16px;line-height:1.45}