:root{
  /* ===== BRAND (shared with collintibbs.com) ===== */
  --red: #B70609;
  --red-dark: #7A0406;
  --red-bright: #E31E23;
  --black: #141414;
  --off-black: #1c1c1c;
  --gray: #5a5a5a;
  --light-gray: #8a8a8a;
  --paper: #F7F5F3;
  --line: #e4dfdc;
  --white: #ffffff;
  --max: 1080px;

  --font-display:'Anton', 'Archivo', Impact, sans-serif;
  --font-sans:'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --sh-2:0 4px 12px rgba(20,20,20,.06), 0 2px 4px rgba(20,20,20,.04);
  --sh-3:0 12px 28px rgba(20,20,20,.09), 0 4px 10px rgba(20,20,20,.05);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }
section{ position: relative; }

/* ---------- Utility ---------- */
.kicker{
  font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: var(--red); text-transform: uppercase; margin-bottom: 14px;
}
.eyebrow-line{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.eyebrow-line .bar{ width:28px; height:3px; background:var(--red); display:inline-block; }
.h1{ font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -1px; margin: 0 0 14px; }
.h2{ font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -0.4px; margin: 0 0 12px; }
.lede{ font-size: 16.5px; line-height: 1.65; color: var(--gray); max-width: 620px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
  padding: 14px 26px; border-radius: 3px;
  cursor:pointer; border: none; transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background: var(--red); color:var(--white); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(183,6,9,0.28); }
.btn-primary:disabled{ background:#d8d2cd; color:#8a8a8a; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-dark{ background: var(--black); color:var(--white); }
.btn-dark:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
.btn-outline{ background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.btn-outline:hover{ background: var(--black); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--gray); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--black); color:var(--black); }
.btn-sm{ padding: 10px 18px; font-size: 12.5px; }
.btn-full{ width:100%; }

.pill{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.3px; padding:5px 12px; border-radius:999px; text-transform:uppercase; }
.pill-red{ background: rgba(183,6,9,0.09); color: var(--red); }
.pill-done{ background: rgba(27,120,67,0.1); color:#1B7843; }
.pill-locked{ background: rgba(20,20,20,0.06); color: var(--light-gray); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand img{ height:34px; width:auto; }
.nav-brand .word-stacked{ display:flex; flex-direction:column; line-height:1.03; }
.nav-brand .word-stacked .line1{ font-weight:800; font-size:12.5px; letter-spacing:1px; color:var(--black); }
.nav-brand .word-stacked .line2{ font-weight:800; font-size:12.5px; letter-spacing:1px; color:var(--red); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-user{ font-size:12.5px; font-weight:700; color:var(--gray); }
.nav-logout{ font-size:12.5px; font-weight:700; color:var(--gray); cursor:pointer; background:none; border:none; padding:0; }
.nav-logout:hover{ color:var(--red); }

/* ---------- Section shell ---------- */
.section{ padding: 56px 0; }
.section-dark{ background: var(--black); color: var(--white); }
.section-dark .lede{ color: rgba(255,255,255,0.65); }
.section-paper{ background: var(--paper); }

/* ---------- Auth screens (login) ---------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--black); padding:28px; }
.auth-card{ width:100%; max-width:400px; background:#fff; border-radius:10px; padding:44px 36px; box-shadow:var(--sh-3); text-align:center; }
.auth-card img{ height:46px; margin:0 auto 22px; }
.auth-card h1{ font-size:21px; font-weight:800; margin:0 0 8px; }
.auth-card p{ font-size:14px; color:var(--gray); margin:0 0 26px; line-height:1.6; }
.auth-note{ margin-top:22px; font-size:12.5px; color:var(--light-gray); line-height:1.6; }
.auth-field{ text-align:left; margin-bottom:16px; }
.auth-field label{ display:block; font-size:12px; font-weight:700; color:var(--black); margin-bottom:6px; }
.auth-field input{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px; font-family:inherit; font-size:14px; background:#fff; color:var(--black); }
.auth-field input:focus{ outline:2px solid var(--black); outline-offset:1px; }
.auth-error{ font-size:12.5px; color:var(--red); margin:-6px 0 14px; min-height:1px; line-height:1.5; }

/* ---------- Dashboard header / progress ---------- */
.dash-hero{ padding:48px 0 12px; }
.dash-progress-shell{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:22px 26px; margin-top:22px; }
.dash-progress-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash-progress-label{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--black); }
.dash-progress-count{ font-size:13px; font-weight:700; color:var(--red); }
.progress-track{ width:100%; height:8px; border-radius:999px; background:#e9e4e0; overflow:hidden; }
.progress-fill{ height:100%; background:var(--red); border-radius:999px; transition:width .4s var(--ease-out); width:0%; }

/* ---------- Module grid (dashboard) ---------- */
.module-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
.module-card{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:20px 22px; transition:border-color .15s ease, transform .15s ease;
}
.module-card:hover{ border-color:var(--black); transform:translateY(-2px); }
.module-card.is-done{ border-color:rgba(27,120,67,.35); background:rgba(27,120,67,.03); }
.module-card .mnum{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--black); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.module-card.is-done .mnum{ background:#1B7843; }
.module-card-body{ flex:1; min-width:0; }
.module-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.module-card h3{ font-size:15px; font-weight:800; margin:0; }
.module-card p{ font-size:13px; color:var(--gray); line-height:1.55; margin:0; }
.module-card-link{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:800; color:var(--red); }
@media (max-width:760px){ .module-grid{ grid-template-columns:1fr; } }

/* ---------- Module page ---------- */
.module-hero{ padding:40px 0 8px; }
.module-hero .pill{ margin-bottom:14px; }
.module-nav-between{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:13px; font-weight:700; color:var(--gray); }
.module-nav-between a:hover{ color:var(--red); }

.video-shell{
  background:var(--black); border-radius:10px; overflow:hidden; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.video-shell video, .video-shell iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.video-placeholder{ color:rgba(255,255,255,.55); text-align:center; padding:28px; }
.video-placeholder .tag{ display:block; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--red-bright); margin-bottom:10px; }
.video-placeholder p{ font-size:14px; margin:0; max-width:420px; margin:0 auto; line-height:1.6; }
.video-placeholder code{ background:rgba(255,255,255,.1); padding:2px 6px; border-radius:3px; font-size:12.5px; color:#fff; }

.resource-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin-top:22px;
}
.resource-row .r-label{ font-size:13.5px; font-weight:700; }
.resource-row .r-sub{ font-size:12.5px; color:var(--gray); margin-top:2px; }

.notes-block{ margin-top:36px; }
.notes-block h3{ font-size:16px; font-weight:800; margin:0 0 10px; }
.notes-block ul{ margin:0; padding-left:20px; }
.notes-block li{ font-size:14.5px; line-height:1.7; color:var(--black); margin-bottom:6px; }
.placeholder-note{
  border-left:3px solid var(--red); background:rgba(183,6,9,.045); padding:10px 16px;
  font-size:13px; color:var(--red-dark); line-height:1.6; margin:14px 0;
}

.complete-row{ display:flex; align-items:center; gap:16px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.complete-status{ font-size:13.5px; font-weight:700; color:#1B7843; display:none; align-items:center; gap:8px; }
.complete-status.show{ display:flex; }
.complete-status .dot{ width:8px; height:8px; border-radius:50%; background:#1B7843; }

/* ---------- Footer ---------- */
footer.tu-footer{ border-top:1px solid var(--line); padding:28px 0; }
footer.tu-footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer.tu-footer .fmeta{ font-size:12px; color:var(--light-gray); }

@media (max-width:600px){
  .nav .wrap{ height:64px; }
  .auth-card{ padding:34px 24px; }
  .resource-row{ flex-direction:column; align-items:flex-start; }
}