/* demo-module-safeguarding-level-1.page.css — restored verbatim from v62 ground-truth stylesheet, plus any post-v62 additions */

:root {
  --green:#274640; --green-dark:#1C3832; --green-light:#E8F0EE;
  --gold:#C9970C; --gold-dark:#A07A08; --gold-light:#FDF6E3;
  --white:#FFFFFF; --off-white:#F8F6F1;
  --gray-light:#EDEBE6; --gray-mid:#B8B4AC; --gray-dark:#6B6660;
  --success:#2D7A4F; --success-light:#EAF5EE;
  --danger:#C0392B; --danger-light:#FEF0EE;
  --text:#1A2E1E; --text-muted:#6B6660;
  --radius:10px; --font:'Nunito',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--off-white); color:var(--text); }
nav { background:var(--green); padding:0 2rem; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-brand img { display:block; }
.nav-brand-text .org { font-size:14px; font-weight:600; color:white; }
.nav-brand-text .cic { font-size:10px; font-weight:300; color:rgba(255,255,255,0.5); letter-spacing:3px; }
.nav-back { color:rgba(255,255,255,0.7); font-size:13px; text-decoration:none; font-family:var(--font); }
.nav-back:hover { color:white; }
.layout { max-width:860px; margin:2rem auto; padding:0 1.5rem 4rem; }
.step-nav { display:flex; margin-bottom:2rem; background:transparent; border:none; border-radius:0; overflow:visible; position:relative; counter-reset:stepnum; }
.step-nav::before { content:''; position:absolute; top:17px; left:8%; right:8%; height:2px; background:var(--gray-light); z-index:0; }
.step { flex:1; padding:0; text-align:center; font-size:11.5px; font-weight:700; color:var(--text-muted); border-right:none; transition:all 0.2s; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.step::before { counter-increment:stepnum; content:counter(stepnum); width:34px; height:34px; border-radius:50%; background:var(--white); border:2px solid var(--gray-light); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; transition:all .2s ease; }
.step:last-child { border-right:none; }
.step.active { background:transparent; color:var(--gold-dark); font-weight:800; }
.step.active::before { background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 0 0 5px rgba(201,151,12,.16); }
.step.done { background:transparent; color:var(--green); }
.step.done::before { content:'✓'; background:var(--green); border-color:var(--green); color:#fff; }
.card { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:2rem; }
.card h1 { font-size:22px; font-weight:600; color:var(--green); margin-bottom:0.5rem; }
.mod-meta { font-size:13px; color:var(--text-muted); margin-bottom:1.5rem; display:flex; gap:1rem; flex-wrap:wrap; }
.video-wrap { position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden; margin-bottom:1.5rem; }
.video-wrap iframe { position:absolute; top:0;left:0;width:100%;height:100%;border:none; }
.video-placeholder { position:absolute; top:0;left:0;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(circle at 30% 20%,rgba(201,151,12,.22),transparent 45%),radial-gradient(circle at 80% 85%,rgba(201,151,12,.12),transparent 40%),linear-gradient(135deg,var(--green-dark) 0%,#0f231e 100%); color:white; text-align:center; padding:2rem; }
.video-placeholder .icon { width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:1.25rem; box-shadow:0 0 0 10px rgba(255,255,255,.04); }
.video-placeholder strong { font-size:15px; letter-spacing:.01em; }
.video-placeholder p { font-size:13px; opacity:0.62; max-width:320px; margin-top:.35rem; line-height:1.5; }
.banner { padding:0.75rem 1rem; border-radius:8px; font-size:13px; margin-bottom:1rem; }
.banner.success { background:var(--success-light); color:var(--success); border:1px solid #A8D5B8; }
.banner.info { background:var(--gold-light); color:var(--gold-dark); border:1px solid #E8C86A; }
.content-section { margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--gray-light); }
.content-section:last-of-type { border-bottom:none; margin-bottom:0; }
.content-section h3 { font-size:16px; font-weight:600; color:var(--green); margin-bottom:0.6rem; }
.content-section p { font-size:15px; line-height:1.75; color:var(--text); }
.section-badge { display:inline-block; background:var(--green); color:white; font-size:10px; font-weight:600; padding:0.2rem 0.6rem; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.quiz-q { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--gray-light); }
.quiz-q:last-child { border-bottom:none; padding-bottom:0; }
.q-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.4rem; }
.q-text { font-size:15px; font-weight:600; color:var(--text); margin-bottom:1rem; line-height:1.5; }
.opt-btn { width:100%; text-align:left !important; padding:0.85rem 1rem; margin-bottom:0.5rem; background:var(--off-white); border:1.5px solid var(--gray-mid); border-radius:8px; font-size:14px; font-family:var(--font); color:var(--text); cursor:pointer; transition:all 0.15s; }
.opt-btn * { text-align:left !important; }
.opt-btn:hover:not(:disabled) { border-color:var(--gold); background:var(--gold-light); }
.opt-btn.selected { border-color:var(--gold); background:var(--gold-light); }
.opt-btn.correct { border-color:var(--success); background:var(--success-light); color:var(--success); font-weight:600; }
.opt-btn.incorrect { border-color:var(--danger); background:var(--danger-light); color:var(--danger); }
.opt-btn:disabled { cursor:default; }
.feedback-box { margin-top:0.75rem; padding:0.85rem 1rem; background:var(--off-white); border-left:3px solid var(--green); border-radius:0 8px 8px 0; font-size:13px; line-height:1.6; color:var(--text); display:none; }
.feedback-box.show { display:block; }
.btn-row { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; gap:1rem; }
.btn-primary { padding:0.85rem 2rem; background:var(--gold); color:white; border:none; border-radius:var(--radius); font-size:15px; font-weight:600; font-family:var(--font); cursor:pointer; }
.btn-primary:hover { background:var(--gold-dark); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-secondary { padding:0.85rem 2rem; background:transparent; color:var(--green); border:1.5px solid var(--gray-mid); border-radius:var(--radius); font-size:15px; font-weight:600; font-family:var(--font); cursor:pointer; }
.btn-secondary:hover { border-color:var(--green); }
/* RESULTS PAGE */
.result { text-align:center; padding:1.5rem 2rem; }
.result-icon { font-size:60px; margin-bottom:1rem; }
.result-score { font-size:52px; font-weight:600; margin-bottom:0.25rem; }
.result-score.pass { color:var(--success); }
.result-score.fail { color:var(--gold-dark); }
.result-breakdown { display:flex; gap:1rem; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap; }
.result-section-score { background:var(--off-white); border:1px solid var(--gray-light); border-radius:8px; padding:0.75rem 1.5rem; text-align:center; }
.result-section-score .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.result-section-score .val { font-size:22px; font-weight:600; color:var(--green); }
.result-msg { font-size:15px; color:var(--text-muted); margin-bottom:1.5rem; line-height:1.6; max-width:520px; margin-left:auto; margin-right:auto; }
.result-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.attempts-info { font-size:13px; color:var(--text-muted); text-align:center; margin-bottom:2rem; }
/* REVIEW SECTION ON RESULTS */
.review-section { margin-top:2rem; text-align:left; border-top:2px solid var(--gray-light); padding-top:1.5rem; }
.review-section h3 { font-size:16px; font-weight:600; color:var(--green); margin-bottom:1.25rem; }
.review-q { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--gray-light); }
.review-q:last-child { border-bottom:none; }
.review-q-text { font-size:14px; font-weight:600; color:var(--text); margin-bottom:0.75rem; line-height:1.5; }
.review-answer { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0.85rem; border-radius:6px; font-size:13px; margin-bottom:0.4rem; }
.review-answer.correct { background:var(--success-light); color:var(--success); }
.review-answer.incorrect { background:var(--danger-light); color:var(--danger); }
.review-answer.right-answer { background:var(--success-light); color:var(--success); border:1.5px solid var(--success); }
.review-feedback { margin-top:0.75rem; padding:0.75rem 1rem; background:var(--gold-light); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; font-size:13px; line-height:1.6; color:var(--text); }
.preview-banner { background:var(--gold-light); border:1px solid #E8C86A; border-radius:8px; padding:0.75rem 1rem; font-size:13px; color:var(--gold-dark); margin-bottom:1.5rem; }
/* REVIEW TABS */
.review-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-light); margin-bottom:1.5rem; }
.review-tab { flex:1; padding:0.75rem 1rem; font-size:13px; font-weight:600; font-family:var(--font); color:var(--text-muted); background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:all 0.15s; }
.review-tab:hover { color:var(--green); }
.review-tab.active { color:var(--green); border-bottom-color:var(--green); background:transparent; }
.loading { text-align:center; padding:4rem; color:var(--text-muted); }
.spinner { display:inline-block; width:24px; height:24px; border:2px solid var(--gray-mid); border-top-color:var(--gold); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.page { display:none; }
.page.active { display:block; }

.reflection-box { margin-top:1.25rem; padding:1rem; border:1px solid var(--gray-light); border-radius:12px; background:var(--off-white); text-align:left; }
.reflection-box h3 { font-size:16px; color:var(--green); margin-bottom:0.4rem; }
.reflection-box p { font-size:13px; color:var(--text-muted); margin-bottom:0.75rem; line-height:1.5; }
.reflection-box textarea { width:100%; min-height:96px; border:1px solid var(--gray-light); border-radius:8px; padding:0.75rem; font-family:var(--font); font-size:14px; resize:vertical; }
.reflection-save-msg { font-size:12px; color:var(--success); margin-top:0.5rem; min-height:18px; }

/* ── Mobile optimisation ── */
@media (max-width:640px) {
  /* Nav */
  nav { padding:0 1rem; height:56px; }
  .nav-brand img { height:36px !important; }
  .nav-back { font-size:12px; }

  /* Layout */
  .layout { padding:1rem 0.875rem 3rem; margin-top:0; }

  /* Step nav - scrollable */
  .step-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; }
  .step-nav::-webkit-scrollbar { display:none; }
  .step { padding:0.65rem 0.6rem; font-size:11px; white-space:nowrap; flex:0 0 auto; min-width:72px; }

  /* Card */
  .card { padding:1.25rem; }
  .card h1 { font-size:18px; }

  /* Buttons - stack on mobile */
  .btn-row { flex-direction:column-reverse; gap:0.75rem; }
  .btn-primary, .btn-secondary { width:100%; text-align:center; padding:0.85rem 1rem; }

  /* Result actions */
  .result-actions { flex-direction:column; align-items:stretch; }
  .result-actions .btn-primary, .result-actions .btn-secondary { width:100%; }
  .result-score { font-size:42px; }

  /* Quiz options */
  .opt-btn { font-size:13px; padding:0.75rem 0.875rem; }

  /* Mod meta */
  .mod-meta { gap:0.5rem; font-size:12px; }
}

/* ── Global mobile touch optimisation ── */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
button, .btn-primary, .btn-secondary, .opt-btn, .tab, .btn-nav, .btn-sm {
  min-height: 44px;
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  touch-action: manipulation;
}

/* === Global mobile/accessibility optimisation === */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100svh;overflow-x:hidden;}
img{max-width:100%;height:auto;}
button,.btn,.btn-primary,.btn-secondary,.btn-nav,.btn-sm,.tab,a[role="button"]{min-height:44px;touch-action:manipulation;}
input,select,textarea{font-size:16px!important;max-width:100%;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:720px;}
@media (max-width:700px){
  body{font-size:16px;}
  main,.container,.wrap,.page{width:100%;max-width:100%;}
  nav{height:auto;min-height:56px;padding:0.65rem 0.85rem;gap:0.75rem;}
  .nav-brand img{height:34px!important;max-width:190px;object-fit:contain;}
  .nav-right{gap:0.5rem;}
  .nav-user{display:none!important;}
  .btn-nav{padding:0.55rem 0.75rem;font-size:13px;}
  .card,.stat-card,.module-card,.org-card,.profile-card{border-radius:14px;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
  .tab{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;}
  .form-row-2,.form-row-3,.form-row-4,.profile-grid,.competency-grid{grid-template-columns:1fr!important;}
  .btn-row,.action-row,.transcript-actions{flex-direction:column!important;align-items:stretch!important;}
  .btn-row button,.action-row button,.transcript-actions button{width:100%;}
  h1{line-height:1.12;}
}
@media (max-width:420px){
  .card{padding:1rem!important;}
  .logo-wrap{margin-bottom:1rem!important;}
  .steps{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0.01ms!important;}
}

.btn-nav-ghost { background:transparent; color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.25); font-size:12px; padding:0.35rem 0.75rem; border-radius:6px; cursor:pointer; font-family:var(--font); font-weight:600; text-decoration:none; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.3rem; }
.btn-nav-ghost:hover { background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.5); }
.nav-right { display:flex; align-items:center; gap:0.6rem; }


.demo-mode-banner{background:#F3F8FF;border:1px solid #CFE0FF;border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem;color:var(--text);font-size:13px;display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}.demo-mode-banner strong{color:var(--green)}.demo-lock{position:relative;overflow:hidden}.demo-lock:after{content:'🔒 Full access required';position:absolute;top:.75rem;right:.75rem;background:rgba(28,56,50,.92);color:white;border-radius:999px;padding:.25rem .6rem;font-size:10px;font-weight:800;letter-spacing:.03em}.demo-lock>*:not(.lock-cta){filter:blur(1px);opacity:.7}.lock-cta{position:relative;z-index:2;background:var(--gold-light);border:1px solid #E8C86A;border-radius:10px;padding:.75rem;margin-top:.8rem;font-size:12px;color:var(--gold-dark);line-height:1.45}.demo-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--gold-light);color:var(--gold-dark);border:1px solid #E8C86A;border-radius:999px;padding:.25rem .65rem;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.module-card.demo-assigned{border-left-color:var(--gold)}.module-card.demo-assigned .module-title{font-size:16px}.upgrade-card{background:linear-gradient(135deg,var(--green),var(--green-dark));color:white;border-radius:12px;padding:1rem;margin-top:1rem}.upgrade-card h3{color:white;margin-bottom:.25rem}.upgrade-card p{color:rgba(255,255,255,.8);font-size:13px;line-height:1.5}.upgrade-card a{display:inline-block;margin-top:.7rem;background:var(--gold);color:white;text-decoration:none;border-radius:8px;padding:.55rem .85rem;font-size:13px;font-weight:800}.scenario-answer{width:100%;text-align:left;padding:.85rem 1rem;margin:.45rem 0;background:var(--off-white);border:1.5px solid var(--gray-mid);border-radius:8px;font-family:var(--font);cursor:pointer}.scenario-answer:hover{border-color:var(--gold);background:var(--gold-light)}.scenario-feedback{display:none;background:var(--off-white);border-left:3px solid var(--green);border-radius:0 8px 8px 0;padding:.9rem;margin-top:.75rem;font-size:13px;line-height:1.55}.scenario-answer.best{border-color:var(--success);background:var(--success-light);color:var(--success);font-weight:700}.scenario-answer.notbest{border-color:var(--gold);background:var(--gold-light)}.demo-choice-card{background:var(--white);border:1px solid var(--gray-light);border-radius:14px;padding:1.25rem;text-decoration:none;color:var(--text);display:block}.demo-choice-card:hover{box-shadow:0 8px 28px rgba(28,56,50,.1);transform:translateY(-1px)}.demo-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.demo-choice-card h2{color:var(--green);margin:.4rem 0}.demo-choice-card p{color:var(--text-muted);line-height:1.55;font-size:14px;margin-bottom:1rem}.heat-note{font-size:12px;color:var(--text-muted);margin-top:.5rem}.badge-upgrade{background:var(--gold-light);color:var(--gold-dark);border-radius:999px;padding:.2rem .55rem;font-weight:800;font-size:10px;text-transform:uppercase}.demo-nav-note{font-size:12px;color:rgba(255,255,255,.7)}
.page{display:none}.page.active{display:block}
/* Demo spacing polish */
main{padding-bottom:3rem;}
.hero{margin-bottom:0;}
.hero>div:first-child{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.hero h1,.hero p,.hero .hero-kicker{color:#fff!important;}
.hero p{max-width:880px;line-height:1.55;margin-top:.35rem;}
.hero-org{min-width:260px;display:flex;flex-direction:column;gap:.3rem;align-items:center;justify-content:center;padding:1rem 1.4rem!important;}
.hero-org strong{display:block;color:var(--gold)!important;font-size:1.05rem;letter-spacing:.03em;}
.hero-org span{display:block;color:rgba(255,255,255,.75)!important;font-size:.8rem;}
.demo-mode-banner{max-width:1100px;margin:0 auto 1.75rem!important;border-radius:14px;}
.attention-panel,.card{margin-bottom:1.75rem!important;}
.attention-panel{padding:2rem!important;}
.attention-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.35rem!important;}
.attention-actions button,.manager-module-actions .btn-sm,.manager-module-actions button,.module-actions a,.module-actions button{margin:0!important;}
.stats-row{margin:1.75rem 0!important;gap:1rem!important;}
.tabs{margin-top:1.75rem!important;margin-bottom:1.75rem!important;}
.manager-library-grid,.learning-grid,.module-grid,.locked-grid{gap:1.1rem!important;}
.manager-module-card,.learning-card,.module-card{padding:1.35rem!important;}
.manager-module-actions,.module-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem!important;}
.lock-cta{margin-top:1rem!important;line-height:1.55;}
.library-count-note{gap:.25rem;padding:1rem 1.25rem!important;}
@media(max-width:760px){.hero>div:first-child{display:block}.hero-org{width:100%;margin-top:1rem}.attention-actions button{width:100%}.demo-mode-banner{display:block}.demo-pill{margin-top:.85rem}.manager-module-actions .btn-sm,.manager-module-actions button,.module-actions a,.module-actions button{width:100%;text-align:center;justify-content:center}}


/* ══════════════════════════════════
   ACTUAL APP DEMO SPACING FIX — dashboard/demo pages
   This is inline because the real platform pages do not use marketing style.css.
══════════════════════════════════ */
body { background: var(--off-white) !important; }
main { max-width: 1120px !important; padding: 2rem 1.25rem 4rem !important; }
.hero { margin: 0 auto 1.75rem !important; border-radius: 0 !important; padding: 2.1rem 1.5rem !important; }
.hero, .hero * { color: rgba(255,255,255,.88) !important; }
.hero h1, .hero h2, .hero h3 { color: #fff !important; }
.hero p { color: rgba(255,255,255,.80) !important; line-height: 1.55 !important; }
.hero-kicker, .hero-greeting { color: rgba(255,255,255,.72) !important; }
.hero-org { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.10) !important; }
.hero-org strong, .hero-org-num { color: var(--gold) !important; }
.hero-org span, .hero-org-label { color: rgba(255,255,255,.75) !important; }
.demo-mode-banner { margin: 0 0 1.75rem !important; padding: 1.05rem 1.25rem !important; border-radius: 14px !important; }
.attention-panel { margin: 0 0 1.9rem !important; padding: 2rem !important; border-radius: 22px !important; }
.attention-panel h2 { color: #fff !important; margin-bottom: .35rem !important; }
.attention-panel p { color: rgba(255,255,255,.86) !important; line-height: 1.5 !important; }
.attention-grid { gap: 1rem !important; margin-top: 1.05rem !important; }
.attention-card { padding: 1.1rem 1.25rem !important; }
.attention-actions { display: flex !important; gap: .9rem !important; flex-wrap: wrap !important; margin-top: 1.45rem !important; }
.attention-actions button { min-height: 44px !important; padding: .72rem 1.1rem !important; margin: 0 !important; }
.stats-row { gap: 1rem !important; margin: 0 0 1.75rem !important; }
.tabs { margin: 0 0 1.75rem !important; overflow-x: auto !important; }
.card, .demo-panel { padding: 1.75rem !important; margin-bottom: 1.75rem !important; }
.card h3, .demo-panel h3 { margin-bottom: .5rem !important; }
.card p, .demo-panel p { margin-bottom: 1.1rem !important; line-height: 1.6 !important; }
.manager-library-grid, .learning-grid, .module-grid, .locked-grid, .demo-choice-grid { gap: 1.25rem !important; margin-top: 1.25rem !important; }
.manager-module-card, .learning-card, .module-card, .locked-card, .demo-choice-card { padding: 1.35rem !important; }
.manager-module-actions, .module-actions, .learning-actions { display: flex !important; gap: .85rem !important; flex-wrap: wrap !important; margin-top: 1.15rem !important; }
.manager-module-actions a, .manager-module-actions button,
.module-actions a, .module-actions button,
.learning-actions a, .learning-actions button { margin: 0 !important; min-height: 38px !important; }
.package-category-title { margin: 1rem 0 .1rem !important; }
.library-count-note { margin: .25rem 0 1.25rem !important; padding: 1rem 1.25rem !important; }

.demo-lock { background: linear-gradient(180deg,#fff,#fffcf2) !important; border-color: #E2C15D !important; }
.demo-lock:after { top: .85rem !important; right: .85rem !important; background: var(--green-dark) !important; color: #fff !important; }
.lock-cta { margin-top: 1rem !important; padding: .85rem 1rem !important; line-height: 1.55 !important; }

@media(max-width:760px){
  nav { height: auto !important; min-height: 64px !important; padding: .75rem 1rem !important; gap: .75rem !important; flex-wrap: wrap !important; }
  .nav-right { gap: .5rem !important; flex-wrap: wrap !important; }
  main { padding: 1.25rem .9rem 3rem !important; }
  .hero { padding: 1.5rem 1rem !important; margin-bottom: 1.25rem !important; }
  .hero-org { width: 100% !important; margin-top: 1rem !important; }
  .demo-mode-banner { display: block !important; }
  .demo-pill { margin-top: .85rem !important; }
  .attention-panel, .card, .demo-panel { padding: 1.25rem !important; margin-bottom: 1.25rem !important; }
  .attention-actions button,
  .manager-module-actions a, .manager-module-actions button,
  .module-actions a, .module-actions button,
  .learning-actions a, .learning-actions button { width: 100% !important; justify-content: center !important; text-align: center !important; }
}


/* === Demo paywall + real-platform module card consistency v7 === */
.demo-lock{position:relative!important;overflow:hidden!important;border-color:#E8C86A!important;background:linear-gradient(180deg,#fff,#fffcf2)!important;cursor:not-allowed!important;}
.demo-lock:hover{transform:none!important;box-shadow:0 3px 12px rgba(30,77,59,.06)!important;}
.demo-lock:after{content:'🔒 Full access required'!important;position:absolute!important;top:.75rem!important;right:.75rem!important;background:rgba(28,56,50,.92)!important;color:#fff!important;border-radius:999px!important;padding:.25rem .65rem!important;font-size:10px!important;font-weight:800!important;letter-spacing:.03em!important;z-index:4!important;box-shadow:0 4px 14px rgba(0,0,0,.14)!important;}
.demo-lock>*:not(.lock-cta){filter:blur(1px)!important;opacity:.7!important;}
.lock-cta{position:relative!important;z-index:5!important;background:rgba(253,246,227,.96)!important;border:1px solid #E8C86A!important;border-radius:10px!important;padding:.75rem!important;margin-top:1rem!important;font-size:12px!important;color:var(--gold-dark)!important;line-height:1.45!important;box-shadow:0 6px 18px rgba(201,151,12,.10)!important;}
.lock-cta strong{color:var(--green)!important;}
/* Make static demo cards follow the actual dashboard module-card language */
.module-card .module-top{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:.6rem!important;margin-bottom:.6rem!important;}
.module-card .module-badge{font-size:10px!important;font-weight:600!important;padding:.2rem .6rem!important;border-radius:20px!important;text-transform:uppercase!important;letter-spacing:.05em!important;white-space:nowrap!important;background:var(--gray-light)!important;color:var(--gray-dark)!important;}
.module-card.demo-assigned .module-badge{background:var(--gold-light)!important;color:var(--gold-dark)!important;}
.module-card .module-duration{font-size:10px!important;font-weight:700!important;color:var(--text-muted)!important;background:var(--off-white)!important;border:1px solid var(--gray-light)!important;border-radius:999px!important;padding:.2rem .55rem!important;}
.module-card .module-footer{display:flex!important;gap:1rem!important;flex-wrap:wrap!important;font-size:12px!important;color:var(--text-muted)!important;margin-top:.9rem!important;}
.module-card.demo-lock{border-left-color:var(--gray-mid)!important;}
.module-card.demo-assigned{border-left-color:var(--gold)!important;}
.manager-module-card.demo-lock>*:not(.lock-cta){filter:blur(1px)!important;opacity:.7!important;}
.manager-module-card.demo-lock{border-color:#E8C86A!important;background:linear-gradient(180deg,#fff,#fffcf2)!important;}



/* ═══════════════════════════════════════════════
   DRAGONFLY MOBILE OPTIMISATION v8 — app/platform
   Targets learner, manager, admin, builder, module and demo pages.
   ═══════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea { font-family: inherit; }
button, .btn-primary, .btn-secondary, .btn-nav, .btn-nav-ghost, .btn-sm, .tab, .lib-tab, .opt-btn, .continue-btn, .cert-btn, .btn-gold, .btn-outline { min-height: 44px; touch-action: manipulation; }
input, select, textarea { font-size: 16px !important; max-width: 100%; }
.table-scroll-wrap, .completed-table-wrap, .demo-table, .transcript-card { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrap table, .completed-table-wrap table, .demo-table table, .transcript-card table, table.data-table { min-width: 680px; }

@media (max-width: 900px) {
  main, .page, .container, .builder-wrap { width: 100%; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .dashboard-grid, .journey-grid, .profile-grid, .learning-journey-grid, .demo-grid, .drill-grid, .tower-grid, .org-summary-main, .form-row-4, .form-row-3, .form-row-2, .assign-mode { grid-template-columns: 1fr !important; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .locked-grid, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-inner, .hero > div:first-child, .panel-head, .panel-head-space, .transcript-actions, .level-card, .code-banner, .seat-status-card, .demo-module, .demo-card { flex-wrap: wrap; }
  .hero-org { width: 100%; margin-top: 1rem; }
  .library-controls, .list-toolbar, .rankings-toolbar { grid-template-columns: 1fr !important; }
  .list-toolbar .form-group, .library-search, .library-filter { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  nav { height: auto !important; min-height: 58px; padding: .65rem .85rem !important; gap: .6rem; align-items: center; }
  .nav-brand { min-width: 0; }
  .nav-brand img { max-width: 160px; height: auto !important; object-fit: contain; }
  .nav-right { margin-left: auto; gap: .45rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-user { display: none !important; }
  .btn-nav, .btn-nav-ghost { white-space: nowrap; padding: .55rem .7rem; font-size: 12px; flex: 0 0 auto; }
  main, .page, .container { padding: 1rem .9rem !important; }
  .page-title { font-size: 22px; margin-bottom: 1rem; }
  .hero, .next-action-panel, .attention-panel { border-radius: 18px !important; padding: 1rem !important; margin-bottom: 1rem !important; }
  .hero-greeting, .attention-title, .next-action-panel h2, .hero h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.12; }
  .hero-sub, .attention-sub, .demo-mode-banner, .example-banner, .manager-example-banner { font-size: 14px; line-height: 1.5; }
  .tabs, .lib-tabs, .review-tabs, .stage-nav, .step-nav, .library-category-strip, .library-filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .35rem; padding-bottom: .15rem; scroll-snap-type: x mandatory; }
  .tab, .lib-tab, .review-tab, .stage-btn, .step, .library-pill, .filter-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: 1fr !important; gap: .85rem !important; }
  .module-card, .manager-module-card, .learning-badge-card, .profile-card, .card, .panel, .achievement-panel, .pathway-card, .stat-card, .summary-stat-card, .journey-stat-card, .competency-card, .demo-preview, .demo-mini-card, .upgrade-card { padding: 1rem !important; border-radius: 14px !important; }
  .module-card-top, .module-top, .mcc-top, .pathway-top, .demo-preview-head, .seat-status-card { flex-direction: column; align-items: flex-start !important; gap: .55rem !important; }
  .module-title, .mcc-title, .manager-module-card h3, .pathway-title { font-size: 16px !important; line-height: 1.25; }
  .module-desc, .manager-module-meta, .module-meta, .pathway-list { font-size: 13px; line-height: 1.5; }
  .module-footer, .module-actions, .manager-module-actions, .attention-actions, .result-actions, .btn-row, .editor-actions, .tower-actions, .org-actions, .demo-modal-head { display: flex; flex-direction: column !important; align-items: stretch !important; gap: .65rem !important; }
  .module-footer a, .module-footer button, .module-actions a, .module-actions button, .manager-module-actions a, .manager-module-actions button, .attention-actions button, .result-actions a, .result-actions button, .btn-row button, .btn-row a, .editor-actions button, .tower-actions button, .org-actions button { width: 100% !important; text-align: center; justify-content: center; }
  .badge, .module-badge, .demo-pill, .pathway-pill { white-space: normal; text-align: center; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-tile { min-width: 0; padding: .75rem .55rem !important; }
  .badge-title { overflow-wrap: anywhere; }
  .heatmap-wrap, .heatmap, .hm-name { min-width: 0; }
  .hm-name { font-size: 12px; }
  .progress-mini, .progress-wrap, .hero-progress { width: 100%; }
  .demo-modal-backdrop { padding: 4rem .75rem .75rem !important; }
  .demo-modal { width: min(100%, 96vw); max-height: 88svh; overflow: auto; }
}

@media (max-width: 420px) {
  main, .page, .container { padding-left: .75rem !important; padding-right: .75rem !important; }
  .nav-brand img { max-width: 135px; }
  .btn-nav, .btn-nav-ghost { padding: .5rem .6rem; font-size: 11px; }
  .stat-num, .summary-stat-value, .journey-stat-value, .competency-score, .impact-score .num { font-size: 28px !important; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-icon { font-size: 19px !important; }
  .badge-title { font-size: 10px !important; }
  .module-meta, .module-footer { flex-direction: column; gap: .35rem; align-items: flex-start; }
  .cpd-ring { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.module-rating{margin:1.25rem 0;padding:1rem;border:1px solid #E8C86A;background:#FFF8E3;border-radius:14px;text-align:left}.module-rating h3{color:var(--green);margin-bottom:.35rem}.module-rating p{color:var(--text-muted);font-size:13px;line-height:1.5}.star-row{display:flex;gap:.35rem;margin:.75rem 0}.star-row button{font-size:26px;background:white;border:1px solid var(--gray-light);border-radius:10px;color:var(--gold);width:48px;height:44px;cursor:pointer}.star-row button.active{background:var(--gold);color:white}.module-rating textarea{width:100%;min-height:80px;border:1px solid var(--gray-light);border-radius:10px;padding:.75rem;font-family:var(--font);font-size:14px;margin:.5rem 0}.rating-msg{font-size:13px;font-weight:800;color:var(--green);margin-top:.5rem}.learning-failure{background:#fffdf6}.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.compare-grid>div{background:#fff;border:1px solid var(--gray-light);border-radius:12px;padding:1rem}.compare-grid p{color:var(--text-muted);font-size:13px;line-height:1.5;margin-top:.35rem}


.demo-app-footer{margin:2rem auto 0;padding:1rem 1.25rem;border-top:1px solid rgba(39,70,64,.14);display:flex;flex-wrap:wrap;gap:.85rem 1.25rem;justify-content:center;align-items:center;font-size:.82rem;color:#6b6258;background:#f7f5ef}.demo-app-footer a{color:#274640;text-decoration:none;font-weight:700}.demo-app-footer a:hover{text-decoration:underline}@media(max-width:640px){.demo-app-footer{flex-direction:column;gap:.6rem;padding:1.25rem}}