:root {
  --bbt-navy: #111827;
  --bbt-blue: #1f4fd8;
  --bbt-sky: #eef4ff;
  --bbt-gold: #f5a623;
  --bbt-green: #0f766e;
  --bbt-red: #b42318;
  --bbt-border: #e5e7eb;
  --bbt-muted: #6b7280;
  --bbt-bg: #f8fafc;
  --bbt-card: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bbt-bg);
  color: var(--bbt-navy);
  line-height: 1.5;
}
a { color: var(--bbt-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--bbt-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--bbt-blue), #0f766e);
  font-weight: 900;
}
.nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-links a { padding: 8px 10px; border-radius: 10px; color: var(--bbt-navy); }
.nav-links a:hover { background: var(--bbt-sky); text-decoration: none; }
.hero {
  padding: 64px 0 44px;
  background: radial-gradient(circle at top left, #eaf1ff 0, transparent 32%), linear-gradient(180deg, #fff, var(--bbt-bg));
}
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }
.eyebrow { color: var(--bbt-green); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.02; margin: 8px 0 16px; letter-spacing: -0.045em; }
h2 { font-size: 28px; margin: 0 0 14px; letter-spacing: -0.025em; }
h3 { margin: 0 0 10px; font-size: 18px; }
p { margin: 0 0 14px; }
.lead { font-size: 18px; color: #374151; max-width: 760px; }
.card {
  background: var(--bbt-card);
  border: 1px solid var(--bbt-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  padding: 22px;
}
.card.compact { padding: 16px; border-radius: 14px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.section { padding: 42px 0; }
.btn, button, input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 10px 15px;
  background: var(--bbt-blue); color: #fff; font-weight: 700;
  cursor: pointer; text-decoration: none; min-height: 42px;
}
.btn:hover, button:hover, input[type=submit]:hover { filter: brightness(.95); text-decoration: none; }
.btn.secondary { background: #fff; color: var(--bbt-navy); border: 1px solid var(--bbt-border); }
.btn.danger { background: var(--bbt-red); }
.btn.green { background: var(--bbt-green); }
.btn.small { padding: 7px 10px; min-height: auto; border-radius: 9px; font-size: 13px; }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--bbt-sky); color: var(--bbt-blue); font-size: 12px; font-weight: 800; }
.badge.green { background: #ecfdf3; color: #047857; }
.badge.gray { background: #f3f4f6; color: #4b5563; }
.badge.red { background: #fef3f2; color: var(--bbt-red); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label { display: block; font-weight: 750; font-size: 14px; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--bbt-border); border-radius: 12px;
  padding: 10px 12px; min-height: 42px; font: inherit; background: #fff;
}
textarea { min-height: 110px; resize: vertical; }
.help { color: var(--bbt-muted); font-size: 13px; }
.alert { padding: 12px 14px; border-radius: 12px; margin: 12px 0; border: 1px solid var(--bbt-border); background: #fff; }
.alert.success { background: #ecfdf3; border-color: #bbf7d0; color: #065f46; }
.alert.error { background: #fef3f2; border-color: #fecaca; color: #991b1b; }
.table-wrap { overflow-x: auto; border: 1px solid var(--bbt-border); border-radius: 14px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px; border-bottom: 1px solid var(--bbt-border); text-align: left; vertical-align: top; }
th { background: #f9fafb; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #4b5563; }
tr:last-child td { border-bottom: 0; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-size: 30px; letter-spacing: -0.03em; }
.footer { padding: 30px 0; border-top: 1px solid var(--bbt-border); color: var(--bbt-muted); background: #fff; margin-top: 40px; }
.survey-shell { max-width: 920px; margin: 32px auto; }
.question { padding: 16px 0; border-bottom: 1px solid var(--bbt-border); }
.question:last-child { border-bottom: 0; }
.rating-grid { display: grid; grid-template-columns: repeat(6, minmax(88px, 1fr)); gap: 8px; margin-top: 10px; }
.rating-option { border: 1px solid var(--bbt-border); border-radius: 12px; padding: 8px; text-align: center; background: #fff; }
.rating-option input { width: auto; min-height: auto; margin: 0 0 4px; }
.category-heading { margin-top: 22px; padding: 13px 16px; background: var(--bbt-sky); border-radius: 14px; border: 1px solid #dbe7ff; }
.copy-input { font-size: 12px; min-width: 360px; }
.report-score { font-weight: 900; }
@media (max-width: 820px) {
  .hero-grid, .grid-2, .grid-3, .grid-4, .form-row { grid-template-columns: 1fr; }
  .nav { align-items: flex-start; flex-direction: column; }
  .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container { width: min(100% - 22px, 1180px); }
  .copy-input { min-width: 220px; }
}

/* --- Applied visual refresh --- */

/* =========================================================
   BBT SaaS/LMS Builder Visual Refresh - May 2026
   Inspired by modern AI-builder landing pages; keeps all existing PHP logic intact.
   ========================================================= */
:root{
  --ink:#0b1020;
  --muted:#667085;
  --line:#e7e9f3;
  --soft:#f6f7fb;
  --panel:#ffffff;
  --brand:#111827;
  --accent:#2737ff;
  --accent2:#7c3aed;
  --gold:#f59e0b;
  --shadow:0 22px 60px rgba(17,24,39,.11);
  --radius:28px;
}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  color:var(--ink)!important;
  background:radial-gradient(circle at 10% -5%,rgba(39,55,255,.12),transparent 32%),radial-gradient(circle at 88% 0,rgba(124,58,237,.10),transparent 34%),linear-gradient(180deg,#fff 0%,#f7f8fc 100%)!important;
}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none;color:#101828}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.page{padding-top:38px;padding-bottom:56px}
.site-header,.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.84)!important;color:var(--ink)!important;border-bottom:1px solid rgba(231,233,243,.9)!important;box-shadow:none!important;backdrop-filter:blur(18px)
}
.site-header.admin,.site-header.learner{background:rgba(255,255,255,.86)!important}.nav,.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand,.logo{display:flex;align-items:center;gap:12px;color:#101828!important;font-weight:850}.brand:hover,.logo:hover{color:#101828!important}.brand-mark,.logo-mark{width:44px!important;height:44px!important;border-radius:15px!important;display:grid;place-items:center;color:#fff!important;background:linear-gradient(135deg,#111827,#2737ff 55%,#7c3aed)!important;box-shadow:0 12px 28px rgba(39,55,255,.18)!important;font-weight:900!important}.brand small{color:var(--muted)!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important}.nav nav,.nav-links,nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nav a,nav a,.nav-links a{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:999px!important;padding:9px 12px!important;color:#344054!important;font-weight:750!important;background:transparent!important}.nav a:hover,nav a:hover,.nav-links a:hover{background:#f2f4ff!important;color:#101828!important}.button,.btn,button,input[type=submit],.link-button{border-radius:999px!important;border:1px solid transparent!important;background:linear-gradient(135deg,#111827,#2737ff)!important;color:#fff!important;font-weight:850!important;box-shadow:0 14px 30px rgba(39,55,255,.18)!important;padding:11px 17px!important;min-height:42px!important}.button:hover,.btn:hover,button:hover,input[type=submit]:hover{filter:none!important;transform:translateY(-1px);box-shadow:0 18px 38px rgba(39,55,255,.23)!important;color:#fff!important}.button-secondary,.btn.secondary,.btn.ghost{background:#fff!important;color:#101828!important;border-color:#d8ddec!important;box-shadow:0 10px 24px rgba(17,24,39,.06)!important}.hero,.bbt-hero{position:relative;overflow:hidden;padding:70px 0 54px!important;background:radial-gradient(circle at 78% 0,rgba(39,55,255,.11),transparent 35%),linear-gradient(180deg,#fff,#f8f9ff)!important;border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);gap:48px;align-items:center}.eyebrow,.label,.kicker{display:inline-flex;align-items:center;gap:8px;width:max-content;background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:0 8px 24px rgba(17,24,39,.05)!important;color:#2330cf!important;font-weight:850!important;padding:8px 13px!important;text-transform:none!important;letter-spacing:.01em!important;margin-bottom:16px}h1{font-size:clamp(2.25rem,5vw,4.85rem)!important;line-height:.97!important;letter-spacing:-.07em!important;color:#080d1d!important}h2{font-size:clamp(1.55rem,3vw,2.65rem)!important;line-height:1.05!important;letter-spacing:-.045em!important;color:#101828!important}h3{letter-spacing:-.02em;color:#101828!important}.hero-copy,.lead,p,.muted,.small-muted{color:#667085}.card,.panel,.report-card,.hero-panel,.brief-card,.start-card,.prompt-card,.score-panel,.category-card,.simulation-card,.metric,.stat,.question,.concept-block,.case-block,.takeaway-box,.chosen-answer,.correct-answer-box{background:#fff!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:0 12px 34px rgba(17,24,39,.055)!important}.card,.panel,.report-card,.hero-panel,.brief-card,.start-card,.prompt-card,.score-panel{padding:24px!important}.category-card:hover,.simulation-card:hover,.card:hover{box-shadow:0 22px 48px rgba(17,24,39,.09)!important;transform:translateY(-2px)}.category-icon,.module-index{background:linear-gradient(135deg,#eef2ff,#e0f7ff)!important;color:#2330cf!important;border-radius:15px!important}.section,.section-tint{padding:62px 0!important}.section-tint{background:linear-gradient(180deg,#f8f9ff,#fff)!important;border-block:1px solid var(--line)}.grid.two,.grid.three,.grid-2,.grid-3,.grid-4,.card-grid,.category-grid,.simulation-grid{gap:20px!important}.brand-strip{background:#fff!important;border:1px solid var(--line)!important;border-radius:26px!important;box-shadow:0 16px 38px rgba(17,24,39,.07)!important;border-left:0!important}.table-wrap{border:1px solid var(--line)!important;border-radius:20px!important;overflow:auto}table{border-collapse:collapse;width:100%;background:#fff!important}th{background:#f8f9ff!important;color:#667085!important;font-size:.78rem!important;letter-spacing:.08em!important;text-transform:uppercase!important}th,td{border-bottom:1px solid var(--line)!important;padding:13px!important}.badge,.pill,.level,.emotion{border-radius:999px!important;background:#eef2ff!important;color:#2330cf!important;font-weight:850!important}.score-circle{background:linear-gradient(135deg,#2737ff,#7c3aed)!important;box-shadow:0 18px 38px rgba(39,55,255,.2)!important}.footer{background:#fff!important;border-top:1px solid var(--line)!important;color:#667085!important}.footer a{color:#2330cf!important;font-weight:800}@media(max-width:900px){.hero-grid,.grid.two,.grid.three,.grid-2,.grid-3,.grid-4,.card-grid,.category-grid,.simulation-grid,.feature-grid,.feature-list,.split-layout{grid-template-columns:1fr!important}.nav,.nav-wrap,.topbar{align-items:flex-start;flex-direction:column;padding:12px 0!important}nav,.nav-links{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:6px}.container{width:min(100% - 28px,1180px)!important}.page{padding-top:24px}.hero{padding:48px 0 36px!important}h1{font-size:clamp(2rem,11vw,3.2rem)!important}.card,.panel,.report-card{padding:20px!important;border-radius:22px!important}}


/* Breaking Barriers Training official logo update */
.brand-logo{
  width:52px!important;
  height:46px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 auto!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:800px){.brand-logo{width:44px!important;height:40px!important}}


/* BBT logo size refinement - compact text-height header logo */
.brand-logo{
  width:30px!important;
  height:22px!important;
  max-width:30px!important;
  max-height:22px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 30px!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.logo .brand-logo,.brand .brand-logo{margin-right:2px!important;}
.footer .brand-logo{width:30px!important;height:22px!important;max-width:30px!important;max-height:22px!important;}
.certificate-logo{
  width:86px!important;
  height:auto!important;
  max-width:86px!important;
  object-fit:contain!important;
  margin-bottom:12px!important;
}
@media print{.certificate-logo{width:78px!important;max-width:78px!important;margin-bottom:10px!important;}}
@media(max-width:800px){.brand-logo{width:28px!important;height:20px!important;max-width:28px!important;max-height:20px!important;flex-basis:28px!important}.footer .brand-logo{width:28px!important;height:20px!important}.certificate-logo{width:76px!important;max-width:76px!important;}}

/* =========================================================
   Mobile UX Optimization Patch - May 2026
   For 360 survey completion and admin pages.
   ========================================================= */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg,video,iframe{ max-width:100%; height:auto; }
p,li,a,h1,h2,h3,label,td,th,.card,.question,.rating-option{ overflow-wrap:anywhere; }
button,.btn,input[type=submit],.nav-links a{ min-height:44px; touch-action:manipulation; }
input,textarea,select{ font-size:16px; }
.table-wrap{ -webkit-overflow-scrolling:touch; }
.table-wrap table{ min-width:720px; }
@media(max-width:820px){
  .topbar{ position:sticky; top:0; z-index:60; }
  .nav{ flex-direction:column!important; align-items:flex-start!important; gap:10px!important; padding:12px 0!important; }
  .brand{ width:100%; min-width:0; line-height:1.15; }
  .nav-links{ width:100%; display:flex; flex-wrap:nowrap!important; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px!important; padding-bottom:6px; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ flex:0 0 auto; border:1px solid var(--bbt-border); background:#fff; border-radius:999px!important; padding:9px 12px!important; white-space:nowrap; font-size:13px; }
  .container{ width:min(100% - 24px,1180px)!important; }
  .hero{ padding:38px 0 28px!important; }
  h1{ font-size:clamp(1.85rem,9vw,2.7rem)!important; line-height:1.08!important; }
  h2{ font-size:clamp(1.35rem,6vw,1.9rem)!important; }
  .lead{ font-size:1rem!important; }
  .card{ padding:16px!important; border-radius:18px!important; }
  .grid,.grid-2,.grid-3,.grid-4,.form-row{ grid-template-columns:1fr!important; gap:14px!important; }
  .survey-shell{ margin:18px auto!important; }
  .question{ padding:14px 0!important; }
  .rating-grid{ grid-template-columns:1fr!important; gap:9px!important; }
  .rating-option{ display:flex; align-items:center; justify-content:flex-start; gap:10px; min-height:46px; text-align:left!important; padding:10px 12px!important; }
  .rating-option input{ margin:0!important; min-width:20px; min-height:20px; }
  .copy-input{ min-width:0!important; width:100%!important; }
  .btn,button,input[type=submit]{ width:100%; }
  .table-wrap:before{ content:'Swipe sideways to view the full table'; display:block; padding:8px 10px; font-size:12px; color:var(--bbt-muted); background:#fffaf0; border-bottom:1px solid var(--bbt-border); }
}
@media(max-width:420px){ .container{ width:min(100% - 20px,1180px)!important; } .card{ padding:14px!important; } }
@media print{ .table-wrap:before{ display:none!important; } }
/* BBT official theme is applied via /assets/css/global-ui.css. */