:root{
  /* Brand primaries — RED LEADS (bright #ED1C24); dark red supports */
  --wcw-red:#ED1C24; --wcw-red-dark:#B9262C; --wcw-red-hover:#D4151D;
  --wcw-red-bright:#ED1C24; /* alias kept for legacy rules */
  --wcw-gray:#A7A9AC; --wcw-coral:#F46369; --wcw-black:#000; --wcw-white:#fff;
  --wcw-charcoal:#1C1B1A; --wcw-charcoal-soft:#2A2826;
  /* Neutrals — brand off-white + grey ramp */
  --paper:#EDEAE9; --gray-50:#F5F4F3; --gray-100:#F5F4F3; --gray-300:#CFD0D2; --gray-700:#5A5C5E;
  --red-tint:#FBEAEB; --green:#1E8E3E; --green-tint:#E6F4EA;
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-heading:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-caption:'Open Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--paper);color:var(--wcw-black);line-height:1.6}
.wordmark{font-family:var(--font-display);font-weight:800;letter-spacing:.02em;text-transform:uppercase}

/* ===== LANDING HERO — illustrative red surface ===== */
header.hero{background:var(--wcw-red);color:#fff;padding:58px 24px 78px;text-align:center;position:relative;overflow:hidden}
/* tonal ingredient line art ringing the edges, center kept open */
header.hero .ing{position:absolute;opacity:.16;pointer-events:none;user-select:none}
header.hero .ing.tl{top:-26px;left:-20px;width:190px;transform:rotate(-8deg)}
header.hero .ing.tr{top:-30px;right:-24px;width:210px;transform:rotate(10deg)}
header.hero .ing.bl{bottom:-12px;left:6%;width:150px;transform:rotate(6deg)}
header.hero .ing.br{bottom:-4px;right:4%;width:170px;transform:rotate(-6deg)}
/* soft organic dark-red wave divider along the bottom */
header.hero .hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:54px;display:block}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.hero-logo{height:62px;width:auto;margin:0 auto 10px;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.18))}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,6vw,60px);text-transform:uppercase;margin:14px 0 8px;letter-spacing:.01em;line-height:.96}
.hero .sub{font-family:var(--font-heading);font-weight:700;color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.95}
.hero .meta{margin-top:16px;font-size:13px;color:rgba(255,255,255,.85);font-family:var(--font-caption)}

/* ===== CONTAINER ===== */
.wrap{max-width:1080px;margin:0 auto;padding:40px 24px 80px}
.wrap.narrow{max-width:860px}
.intro{background:#fff;border:1px solid var(--gray-300);border-left:5px solid var(--wcw-red);border-radius:8px;padding:22px 26px;margin-bottom:36px;display:flex;gap:22px;align-items:center}
.intro .svc-icon{flex:0 0 64px;width:64px;height:auto}
.intro h2{font-family:var(--font-heading);font-weight:700;font-size:20px;color:var(--wcw-red);margin-bottom:8px}
.intro p{font-size:15px;max-width:780px}
@media(max-width:560px){.intro{flex-direction:column;align-items:flex-start;gap:12px}.intro .svc-icon{width:52px}}

.path-label{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:22px;color:var(--wcw-black);margin:0 0 4px}
.path-rule{height:3px;width:60px;background:var(--wcw-red);margin-bottom:24px}

/* ===== MODULE CARDS ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--gray-300);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10);border-color:var(--wcw-red)}
.card .top{background:var(--wcw-red);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:14px}
.card:hover .top{background:var(--wcw-red-dark)}
.card .num{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;min-width:46px;text-align:center;opacity:.95}
.card .top h3{font-family:var(--font-heading);font-weight:700;font-size:17px;line-height:1.2}
.card .body{padding:16px 18px 18px}
.card .obj{list-style:none;font-size:13.5px;color:var(--gray-700)}
.card .obj li{padding-left:18px;position:relative;margin-bottom:6px}
.card .obj li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--wcw-coral)}
.card .foot{margin-top:auto;padding:12px 18px;border-top:1px solid var(--gray-100);font-family:var(--font-heading);font-weight:600;font-size:13px;color:var(--wcw-red);text-transform:uppercase;letter-spacing:.03em;display:flex;justify-content:space-between;align-items:center}
.card .tag{font-size:11px;padding:3px 9px;border-radius:20px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px}
.card .tag.video{background:var(--wcw-charcoal);color:#fff}
.card .tag.read{background:var(--red-tint);color:var(--wcw-red)}
.card .tag .dot{font-size:10px}

/* ===== MODULE PAGE ===== */
.bar{background:var(--wcw-charcoal);color:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:5px solid var(--wcw-red)}
.bar a.back{color:#fff;text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.bar a.back:hover{color:var(--wcw-coral)}
.bar .mark{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.mhero{background:var(--wcw-red);color:#fff;padding:34px 24px 30px}
.mhero .inner{max-width:860px;margin:0 auto}
.mhero .mod{font-family:var(--font-heading);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;opacity:.95;display:flex;align-items:center;gap:10px}
.mhero .mod .mod-truck{height:42px;width:auto;flex:0 0 auto;filter:brightness(0) invert(1)}
.mhero h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,5vw,46px);line-height:1.02;margin-top:6px}

/* ===== VIDEO PLAYER ===== */
.video-block{margin-bottom:30px}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--wcw-black);border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.video-frame.portrait{max-width:380px;margin:0 auto;aspect-ratio:9/16}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{font-family:var(--font-heading);font-weight:600;font-size:13px;color:var(--gray-700);margin-top:10px;text-transform:uppercase;letter-spacing:.06em}
.video-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px}
.video-missing .play{font-size:46px;opacity:.55;margin-bottom:10px}
.video-missing .lbl{font-family:var(--font-heading);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:14px}
.video-missing .hint{font-size:12.5px;color:var(--wcw-gray);margin-top:6px}

/* ===== CONTENT BLOCKS ===== */
.obj-box{background:#fff;border:1px solid var(--gray-300);border-left:5px solid var(--wcw-coral);border-radius:8px;padding:18px 22px;margin-bottom:30px}
.obj-box h2{font-family:var(--font-heading);font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--wcw-red);margin-bottom:10px}
.obj-box ul{list-style:none}
.obj-box li{padding-left:24px;position:relative;margin-bottom:7px;font-size:15px}
.obj-box li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--wcw-red);font-weight:700}
h2.sec{font-family:var(--font-heading);font-weight:700;font-size:21px;color:var(--wcw-black);margin:30px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--gray-300)}
h3.sub{font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--wcw-red);margin:18px 0 6px}
p{font-size:15px;margin-bottom:12px}
ul.body{margin:0 0 14px 4px;list-style:none}
ul.body li{padding-left:22px;position:relative;margin-bottom:7px;font-size:15px}
ul.body li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--wcw-coral)}
.callout{border-radius:8px;padding:16px 20px;margin:18px 0;font-size:15px}
.callout.warn{background:var(--red-tint);border-left:5px solid var(--wcw-red)}
.callout.warn strong{color:var(--wcw-red)}
.coming-soon{background:var(--red-tint);border:1px dashed var(--wcw-red);border-radius:8px;padding:14px 18px;margin-bottom:26px;font-family:var(--font-heading);font-weight:600;font-size:13.5px;color:var(--wcw-red);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:10px}
.takeaways{background:var(--wcw-charcoal);color:#fff;border-radius:10px;padding:24px 26px;margin:36px 0 10px}
.takeaways h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:24px;color:#fff;margin-bottom:14px}
.takeaways ul{list-style:none}
.takeaways li{padding-left:30px;position:relative;margin-bottom:12px;font-size:15.5px}
.takeaways li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--wcw-red-bright);font-weight:800;font-size:18px}
.tablewrap table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.tablewrap th,.tablewrap td{border:1px solid var(--gray-300);padding:10px 12px;text-align:left;vertical-align:top}
.tablewrap th{background:var(--wcw-red);color:#fff;font-family:var(--font-heading);font-weight:600}
.tablewrap tr:nth-child(even) td{background:var(--gray-100)}

/* ===== NAV ===== */
.nav{display:flex;justify-content:space-between;gap:14px;margin-top:36px}
.nav a{flex:1;text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:14px;padding:14px 18px;border-radius:8px;border:1px solid var(--gray-300);background:#fff;color:var(--wcw-black);transition:.15s}
.nav a:hover{border-color:var(--wcw-red);color:var(--wcw-red)}
.nav a.next{background:var(--wcw-red);color:#fff;border-color:var(--wcw-red);text-align:right}
.nav a.next:hover{background:var(--wcw-red-hover);color:#fff}
.nav a.disabled{opacity:.4;pointer-events:none}

/* ===== INTERACTIVE QUIZ ===== */
.quiz{background:#fff;border:1px solid var(--gray-300);border-top:5px solid var(--wcw-red);border-radius:10px;padding:26px 26px 22px;margin:36px 0 10px}
.quiz .qz-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.quiz h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:24px;color:var(--wcw-black)}
.quiz .qz-sub{font-size:13.5px;color:var(--gray-700);margin-bottom:20px}
.qz-lock{border-radius:8px;padding:13px 18px;margin:0 0 8px;font-family:var(--font-heading);font-weight:600;font-size:13.5px;background:var(--red-tint);border-left:5px solid var(--wcw-red);color:var(--wcw-red)}
.qz-lock.done{background:var(--green-tint);border-left-color:var(--green);color:var(--green)}
.quiz.locked #qz-form{opacity:.45;pointer-events:none;filter:saturate(.4)}
.quiz.locked #qz-check{opacity:.45;cursor:not-allowed}
.qz-q{border-top:1px solid var(--gray-100);padding:18px 0 4px}
.qz-q:first-of-type{border-top:0}
.qz-q .qtext{font-family:var(--font-heading);font-weight:600;font-size:15.5px;margin-bottom:12px}
.qz-q .qtext .qn{color:var(--wcw-red);margin-right:6px}
.qz-opt{display:block;position:relative;padding:11px 14px 11px 44px;margin-bottom:9px;border:1px solid var(--gray-300);border-radius:8px;font-size:14.5px;cursor:pointer;transition:.12s;background:#fff}
.qz-opt:hover{border-color:var(--wcw-coral);background:var(--gray-50)}
.qz-opt input{position:absolute;left:14px;top:50%;transform:translateY(-50%);accent-color:var(--wcw-red);width:17px;height:17px;cursor:pointer}
.qz-opt .mk{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:800;font-size:15px;opacity:0}
.qz-opt.correct{border-color:var(--green);background:var(--green-tint)}
.qz-opt.correct .mk{opacity:1;color:var(--green)}
.qz-opt.wrong{border-color:var(--wcw-red);background:var(--red-tint)}
.qz-opt.wrong .mk{opacity:1;color:var(--wcw-red)}
.qz-opt.locked{cursor:default;pointer-events:none}
.qz-explain{display:none;font-size:13.5px;background:var(--gray-50);border-left:3px solid var(--wcw-gray);border-radius:0 6px 6px 0;padding:10px 14px;margin:4px 0 6px}
.qz-explain.show{display:block}
.qz-explain.ok{border-left-color:var(--green)}
.qz-explain b{color:var(--wcw-red)}
.qz-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.btn{font-family:var(--font-heading);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;padding:13px 26px;border-radius:8px;border:0;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
.btn-primary{background:var(--wcw-red);color:#fff}
.btn-primary:hover{background:var(--wcw-red-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--wcw-black);border:1px solid var(--gray-300)}
.btn-ghost:hover{border-color:var(--wcw-red);color:var(--wcw-red)}
.qz-score{font-family:var(--font-heading);font-weight:700;font-size:15px}
.qz-score.pass{color:var(--green)}
.qz-score.fail{color:var(--wcw-red)}
.qz-result{display:none;border-radius:8px;padding:16px 20px;margin-top:18px;font-size:15px}
.qz-result.show{display:block}
.qz-result.pass{background:var(--green-tint);border-left:5px solid var(--green)}
.qz-result.fail{background:var(--red-tint);border-left:5px solid var(--wcw-red)}
.qz-result h3{font-family:var(--font-heading);font-size:16px;margin-bottom:4px}

footer{text-align:center;padding:30px 24px;color:var(--gray-700);font-size:12.5px;border-top:1px solid var(--gray-300)}
footer .footer-mark{width:46px;height:auto;display:block;margin:0 auto 14px;opacity:.92}
@media(max-width:640px){.grid{grid-template-columns:1fr}}