/* ==========================================================================
   VAETO SECURELEARN — security awareness & compliance training
   Light theme. Design tokens carried over from the Vaeto VAPT platforms so
   the three products read as one suite.
   ========================================================================== */

@import url('../fonts/poppins.css');

:root {
  /* Brand.
     #034CF6 is sampled directly from the V in the supplied logo pack, so the
     interface and the mark are the same blue rather than merely similar. */
  --primary: #034CF6;
  --primary-hover: #0240D2;
  --primary-light: #3B72F8;
  --primary-dark: #0231A6;
  --primary-deep: #01216E;
  --primary-bg: rgba(3, 76, 246, 0.08);
  --primary-border: rgba(3, 76, 246, 0.28);

  --gold: #F8B825;
  --gold-hover: #E2A31B;
  --gold-bg: rgba(248, 184, 37, 0.14);
  --gold-ink: #7A5200;

  /* Certificate amber, taken from the published certificate design */
  --amber: #D97706;
  --amber-light: #FBBF24;
  --amber-bg: rgba(217, 119, 6, 0.10);

  /* Status */
  --success: #16A34A;
  --success-bg: rgba(22, 163, 74, 0.10);
  --success-line: #BBF7D0;
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #DC2626;
  --danger-bg: rgba(220, 38, 38, 0.10);
  --danger-line: #FECACA;
  --info: #2563EB;
  --info-bg: rgba(37, 99, 235, 0.10);

  /* Surfaces */
  --bg-main: #F4F7FB;
  --bg-surface: #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-input: #F8FAFC;
  --bg-sunken: #F8FAFC;

  /* Type */
  --text-title: #0F172A;
  --text-main: #1E293B;
  --text-muted: #475569;
  --text-dim: #94A3B8;

  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10);
  --shadow-brand: 0 14px 34px rgba(3, 76, 246, 0.18);

  --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --t-fast: 0.14s ease;
  --t-normal: 0.24s cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-w: 258px;
  --topbar-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  color: var(--text-title);
  letter-spacing: -0.018em;
  font-weight: 600;
  line-height: 1.25;
}

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }
::selection { background: var(--primary-bg); color: var(--primary-dark); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.fade-up { animation: fadeUp 0.4s var(--t-normal) both; }
.fade-in { animation: fadeIn 0.3s ease both; }

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

/* ==========================================================================
   Admin shell
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}

.sidebar-head {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head img { height: 30px; width: auto; }

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 12px 6px;
}
.nav-label:first-child { padding-top: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: var(--bg-hover); color: var(--text-title); }
.nav-link.active {
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-weight: 600;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-link .count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}
.nav-link.active .count { background: rgba(3,76,246,0.16); color: var(--primary-dark); }
.nav-link .count.alert { background: var(--danger-bg); color: var(--danger); }

.nav-divider { height: 1px; background: var(--border); margin: 12px 12px; }
.nav-spacer { flex: 1; min-height: 12px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.avatar {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
  flex-shrink: 0;
}
.avatar.gold { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: #78350F; }
.user-chip .meta { min-width: 0; }
.user-chip .name {
  font-size: 12.5px; font-weight: 600; color: var(--text-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip .role { font-size: 11px; color: var(--text-dim); }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar h1 { font-size: 18px; font-weight: 600; }
.crumb { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

.content { padding: 26px 28px 56px; flex: 1; }
.content > * + * { margin-top: 20px; }

.engine-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  padding: 6px 13px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.engine-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-bg);
}
.engine-pill .dot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-size: 14.5px; font-weight: 600; }
.card-head .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; font-weight: 400; }
.card-body { padding: 20px; }
.card-body.tight { padding: 14px 20px; }
.card-foot {
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   Stat cards
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 17px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary);
}
.stat.ok::before { background: var(--success); }
.stat.warn::before { background: var(--warning); }
.stat.bad::before { background: var(--danger); }
.stat.gold::before { background: var(--amber); }

.stat .label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.stat .label svg { width: 14px; height: 14px; }
.stat .value {
  font-size: 30px; font-weight: 700; color: var(--text-title);
  line-height: 1.1; margin-top: 9px; letter-spacing: -0.03em;
}
.stat .value small { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.stat .foot { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }

/* ==========================================================================
   Compliance ring
   ========================================================================== */

.ring-card {
  display: flex; align-items: center; gap: 22px;
  padding: 22px;
  /* Wraps rather than squeezing: this card appears both in a wide column and
     in the narrow right rail, and the text beside the ring needs room to
     stay readable in the second case. */
  flex-wrap: wrap;
}
.ring-card > :last-child { flex: 1 1 190px; min-width: 0; }
.ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .track { fill: none; stroke: var(--border); stroke-width: 11; }
.ring .fill {
  fill: none; stroke-width: 11; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--t-normal);
}
.ring .inner {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.ring .inner .n { font-size: 30px; font-weight: 700; color: var(--text-title); letter-spacing: -0.03em; }
.ring .inner .t { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* ==========================================================================
   Progress
   ========================================================================== */

.bar {
  height: 7px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bar > span {
  display: block; height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 0.6s var(--t-normal);
}
.bar > span.ok { background: var(--success); }
.bar > span.warn { background: var(--warning); }
.bar > span.bad { background: var(--danger); }
.bar.thin { height: 5px; }

.meter-row {
  display: flex; align-items: center; gap: 12px;
}
.meter-row .bar { flex: 1; }
.meter-row .n { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 42px; text-align: right; }

/* Segmented completion bar */
.segbar {
  display: flex; height: 9px; border-radius: var(--radius-full);
  overflow: hidden; background: var(--border);
}
.segbar > i { display: block; height: 100%; }
.segbar > i.done { background: var(--success); }
.segbar > i.doing { background: var(--primary); }
.segbar > i.late { background: var(--danger); }
.segbar > i.idle { background: var(--border-strong); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge.ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.badge.warn { background: var(--warning-bg); color: #92400E; border-color: rgba(245,158,11,0.3); }
.badge.bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge.info { background: var(--info-bg); color: var(--info); border-color: rgba(37,99,235,0.25); }
.badge.brand { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary-border); }
.badge.gold { background: var(--amber-bg); color: var(--amber); border-color: rgba(217,119,6,0.28); }
.badge.muted { background: var(--bg-sunken); color: var(--text-dim); border-color: var(--border); }
.badge.lg { font-size: 12px; padding: 5px 13px; }

.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   Brand lockup

   The supplied logo pack: a wide lockup, roughly 4.5:1, so it is sized by
   height and left to find its own width. Two files, because the wordmark is
   black on light and white on dark.
   ========================================================================== */

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { height: var(--brand-nav-h); width: auto; display: block; }
.brand.lg img { height: 48px; }
.brand.sm img { height: 26px; }
.brand.xl img { height: 60px; }

/* Byline under the lockup. Scoped to the surfaces it appears on rather than
   to an .on-dark ancestor, because on_dark is set on the brand itself. */
.brand-byline {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 8px;
}
.auth-panel .brand-byline,
.lp-hero .brand-byline { color: rgba(255, 255, 255, 0.62); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn.ghost { background: var(--bg-surface); color: var(--text-main); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text-title); }
.btn.subtle { background: var(--bg-hover); color: var(--text-muted); }
.btn.subtle:hover { background: var(--border); color: var(--text-title); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #B91C1C; }
.btn.success { background: var(--success); }
.btn.success:hover { background: #15803D; }
/* The two triage answers are opposites and must not read as the same button.
   Report is solid red; legitimate is an outlined green, so the pair is
   distinguishable by shape and colour rather than by reading the label. */
.btn.safe-choice {
  background: var(--bg-surface);
  color: var(--success);
  border-color: var(--success);
}
.btn.safe-choice:hover {
  background: var(--success);
  color: #FFFFFF;
  border-color: var(--success);
}
.btn.gold { background: var(--gold); color: #4A3200; }
.btn.gold:hover { background: var(--gold-hover); color: #4A3200; }
.btn.lg { font-size: 14.5px; padding: 12px 24px; border-radius: var(--radius-md); }
.btn.sm { font-size: 12px; padding: 6px 12px; }
.btn.block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Buttons sitting on a dark panel -- the hero, the closing call to action and
   the auth panels. Written as classes rather than inline overrides so the two
   variants stay consistent wherever they appear. */
.btn.on-dark { background: #FFFFFF; color: var(--primary-dark); }
.btn.on-dark:hover { background: #EEF2FF; color: var(--primary-dark); }
.btn.ghost.on-dark {
  background: transparent; color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.38);
}
.btn.ghost.on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.linkish {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--primary); cursor: pointer;
}
.linkish:hover { color: var(--primary-hover); text-decoration: underline; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 16px; }
.field label, .label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-title);
  margin-bottom: 6px;
}
.field .hint { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.field .req { color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
input[disabled], select[disabled], textarea[disabled] { opacity: 0.6; cursor: not-allowed; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.check:hover { border-color: var(--border-strong); }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.check .t { font-size: 13px; font-weight: 600; color: var(--text-title); }
.check .d { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin: 0; min-width: 150px; }

.code-input {
  font-family: var(--font-mono);
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 14px 12px 14px 24px !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.mid, table.data th.mid { text-align: center; }
table.data .strong { font-weight: 600; color: var(--text-title); }
table.data .dim { color: var(--text-dim); font-size: 12px; }
table.data .mono { font-family: var(--font-mono); font-size: 12px; }

.row-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-person .avatar { width: 30px; height: 30px; font-size: 11px; }
.row-person .who { min-width: 0; }
.row-person .who .n { font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-person .who .e { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty { text-align: center; padding: 48px 24px; }
.empty .icon {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  border-radius: var(--radius-lg);
  background: var(--primary-bg);
  color: var(--primary);
  display: grid; place-items: center;
}
.empty .icon svg { width: 26px; height: 26px; }
.empty h3 { font-size: 15px; margin-bottom: 6px; }
.empty p { font-size: 13px; color: var(--text-muted); max-width: 440px; margin: 0 auto 18px; line-height: 1.65; }

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flashes { display: flex; flex-direction: column; gap: 10px; }

.flash {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid;
  animation: fadeUp 0.3s ease both;
}
.flash svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.flash.success { background: var(--success-bg); border-color: var(--success-line); color: #14532D; }
.flash.error { background: var(--danger-bg); border-color: var(--danger-line); color: #7F1D1D; }
.flash.warning { background: var(--warning-bg); border-color: rgba(245,158,11,0.32); color: #78350F; }
.flash.info { background: var(--info-bg); border-color: rgba(37,99,235,0.25); color: #1E3A8A; }
.flash .x { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: 0.5; padding: 0 2px; font-size: 16px; line-height: 1; }
.flash .x:hover { opacity: 1; }

/* ==========================================================================
   Notice / callout
   ========================================================================== */

.notice {
  display: flex; gap: 13px;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.notice strong { color: var(--text-title); }
.notice.warn { background: var(--warning-bg); border-color: rgba(245,158,11,0.3); color: #78350F; }
.notice.warn svg { color: var(--warning); }
.notice.danger { background: var(--danger-bg); border-color: var(--danger-line); color: #7F1D1D; }
.notice.danger svg { color: var(--danger); }
.notice.brand { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-dark); }
.notice.gold { background: var(--gold-bg); border-color: rgba(248,184,37,0.4); color: var(--gold-ink); }
.notice.gold svg { color: var(--amber); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0 !important; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; font-size: 13px; }
.kv dt { color: var(--text-dim); font-size: 12px; }
.kv dd { color: var(--text-title); font-weight: 500; text-align: right; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ==========================================================================
   Course cards
   ========================================================================== */

.course-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
  display: flex; flex-direction: column; gap: 13px;
}
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.course-card::after {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--primary));
}

.course-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent);
  color: var(--accent, var(--primary));
  flex-shrink: 0;
}
.course-icon svg { width: 21px; height: 21px; }
.course-icon.sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.course-icon.sm svg { width: 17px; height: 17px; }
.course-icon.lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.course-icon.lg svg { width: 27px; height: 27px; }

.course-card h3 { font-size: 15px; margin-bottom: 4px; }
.course-card .desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.course-card .meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
.course-card .meta span { display: inline-flex; align-items: center; gap: 5px; }
.course-card .meta svg { width: 13px; height: 13px; }

/* ==========================================================================
   Employee shell
   ========================================================================== */

.learn-shell { min-height: 100vh; display: flex; flex-direction: column; }

.learn-bar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0 26px;
  height: 66px;
  display: flex; align-items: center; gap: 18px;
  position: sticky; top: 0; z-index: 30;
}
.learn-bar nav { display: flex; gap: 4px; margin-left: 14px; }
.learn-bar nav a {
  padding: 7px 13px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
.learn-bar nav a:hover { background: var(--bg-hover); color: var(--text-title); }
.learn-bar nav a.active { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }

.learn-body { flex: 1; padding: 28px 26px 60px; max-width: 1180px; margin: 0 auto; width: 100%; }
.learn-body > * + * { margin-top: 20px; }
.learn-body.narrow { max-width: 880px; }

.learn-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius-xl);
  padding: 30px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.learn-hero::before {
  content: '';
  position: absolute; right: -70px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.learn-hero::after {
  content: '';
  position: absolute; right: 60px; bottom: -110px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(61, 220, 151, 0.16);
}
.learn-hero > * { position: relative; z-index: 1; }
.learn-hero h1 { color: #fff; font-size: 24px; }
.learn-hero p { color: rgba(255,255,255,0.86); font-size: 13.5px; margin-top: 6px; max-width: 560px; line-height: 1.65; }
.learn-hero .hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
.learn-hero .hero-stats .n { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.learn-hero .hero-stats .l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.72); font-weight: 600; }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-panel {
  background: linear-gradient(150deg, #01216E 0%, var(--primary-dark) 45%, var(--primary) 100%);
  color: #fff;
  padding: var(--auth-top) 56px 44px;
  /* Top aligned rather than spread: with space-between the copy floated into
     the middle of a tall panel and drifted away from the logo above it. The
     footer is pushed down on its own instead. */
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 46px;
  position: relative; overflow: hidden;
}
.auth-panel .foot { margin-top: auto; }
.auth-panel .brand img { height: 42px; }
.auth-panel::before {
  content: '';
  position: absolute; right: -120px; top: 40px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.auth-panel::after {
  content: '';
  position: absolute; left: -80px; bottom: -120px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(61, 220, 151, 0.12);
}
.auth-panel > * { position: relative; z-index: 1; }
.auth-panel h1 { color: #fff; font-size: clamp(27px, 3vw, 35px); line-height: 1.16; letter-spacing: -0.032em; }
.auth-panel .lead { color: rgba(255,255,255,0.82); font-size: 14px; margin-top: 14px; line-height: 1.7; max-width: 420px; }
.auth-panel .points { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.auth-panel .points div {
  display: flex; gap: 13px; align-items: center;
  font-size: 13.5px; color: rgba(255,255,255,0.92); line-height: 1.6;
}
/* A chip rather than a bare glyph, so the list reads as a list. */
.auth-panel .points svg {
  width: 32px; height: 32px; flex-shrink: 0; padding: 7px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: #fff;
}
.auth-panel .foot { font-size: 11.5px; color: rgba(255,255,255,0.6); }

/* The two columns start on the same line. The panel puts its logo above the
   heading, so the form is offset by exactly that height plus the gap beneath
   it -- both derived from one variable so they cannot drift apart. */
:root { --auth-top: 48px; --auth-logo: 42px; --auth-gap: 46px; }

.auth-form {
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--auth-top) + var(--auth-logo) + var(--auth-gap)) 32px 40px;
  background: var(--bg-main);
}
.auth-form .inner { width: 100%; max-width: 400px; }
.auth-form .mark { display: none; margin-bottom: 26px; }
.auth-form .mark img { height: 34px; width: auto; }
.auth-form h2 { font-size: 25px; letter-spacing: -0.025em; }
.auth-form .sub { font-size: 13.5px; color: var(--text-muted); margin: 9px 0 28px; line-height: 1.7; }

.auth-switch {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted); text-align: center;
}

/* ==========================================================================
   Landing page
   ========================================================================== */

.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing-bar {
  height: 70px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.landing-bar img { height: 30px; }
.landing-main {
  flex: 1;
  display: grid; place-items: center;
  padding: 60px 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(32,102,245,0.09), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(61, 220, 151, 0.10), transparent 45%);
}
.landing-main .inner { max-width: 940px; text-align: center; }
.landing-main h1 { font-size: 44px; letter-spacing: -0.035em; line-height: 1.12; }
.landing-main h1 .g {
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-main .lead {
  font-size: 16px; color: var(--text-muted);
  max-width: 620px; margin: 18px auto 32px; line-height: 1.75;
}
.landing-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; margin-top: 46px; text-align: left;
}
.landing-cards .c {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.landing-cards .c:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.landing-cards .c .i {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--primary-bg); color: var(--primary);
  display: grid; place-items: center; margin-bottom: 14px;
}
.landing-cards .c .i svg { width: 20px; height: 20px; }
.landing-cards .c h3 { font-size: 14.5px; margin-bottom: 6px; }
.landing-cards .c p { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary-dark);
  background: var(--primary-bg); border: 1px solid var(--primary-border);
  padding: 6px 15px; border-radius: var(--radius-full);
  margin-bottom: 22px;
}

/* ==========================================================================
   Landing page

   Structured after vapptrix.com, the sibling product site: a deep blue
   gradient hero carrying the headline and a product visual, a figure strip
   beneath it, then light sections on a faint blue ground. No gold anywhere --
   the accents are the platform blue and the brand green.
   ========================================================================== */

.lp { background: #F4F8FD; }

/* The bar spans the full width so its background and border reach the edges,
   but the content inside sits on the same 1160px column as every section
   below it. Without the inner wrapper the logo drifts away from the copy it
   sits above. */
.lp-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px; height: 74px;
}
.lp-bar-inner {
  max-width: 1160px; height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* The lockup is not centred on one line: the V mark is centred in the file,
   but the "SecureLearn" wordmark sits on a lower baseline, its optical centre
   30.5px below centre on a 379px canvas -- 8.05% of the height. Centring the
   image box therefore aligns the links to the mark, not to the lettering the
   eye actually reads them against, and they sit visibly high. The nav is
   pushed down by that same fraction of the rendered logo height, so it holds
   if the logo is ever resized. Measured from the PNG, not guessed. */
:root { --brand-nav-h: 31px; --wordmark-drop: 0.0805; }

.lp-nav {
  display: flex; gap: 6px; margin-left: 38px;
  transform: translateY(calc(var(--brand-nav-h) * var(--wordmark-drop)));
}
.lp-nav a {
  padding: 8px 13px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-muted);
}
.lp-nav a:hover { background: var(--bg-hover); color: var(--text-title); }
@media (max-width: 900px) { .lp-nav { display: none; } }

/* The bar is a fixed 74px tall, so nothing inside it may wrap -- the global
   .row/.btn-row wrap would push the buttons onto a second line that the bar
   has no height for, and they would land on top of the wordmark. The mark
   also must not be squeezed: it is the one item allowed to keep its width. */
.lp-bar-inner .row { flex-wrap: nowrap; flex: 0 0 auto; }
.lp-bar .btn-row { flex-wrap: nowrap; flex: 0 0 auto; }
.lp-bar .btn { white-space: nowrap; }
.lbl-short { display: none; }

@media (max-width: 640px) {
  .lp-bar { padding: 0 18px; }
  .lp-bar-inner { gap: 10px; }
  .lp-bar .btn-row { gap: 8px; }
  .lp-bar .btn { padding: 9px 12px; font-size: 13px; }
  .lp-bar .brand img { height: 26px; }
  /* "Verify a certificate" does not fit beside the mark and Sign in. */
  .lp-bar .lbl-full { display: none; }
  .lp-bar .lbl-short { display: inline; }
}

@media (max-width: 400px) {
  .lp-bar { padding: 0 14px; }
  .lp-bar .brand img { height: 23px; }
  .lp-bar .btn { padding: 8px 10px; font-size: 12.5px; }
}

/* ---------------- Hero ---------------- */
.lp-hero {
  background: linear-gradient(140deg, #034CF6 0%, #0231A6 58%, #01216E 100%);
  color: #fff;
  padding: 66px 32px 60px;
  position: relative; overflow: hidden;
}
.lp-hero::before {
  content: ''; position: absolute; right: -140px; top: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.lp-hero::after {
  content: ''; position: absolute; left: -120px; bottom: -200px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(61, 220, 151, 0.14);
}
.lp-hero-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.06fr 0.94fr;
  gap: 54px; align-items: center;
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #BFDBFE;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 15px; border-radius: var(--radius-full);
  margin-bottom: 26px;
}
.lp-eyebrow svg { color: var(--brand-accent); }
.lp-hero h1 {
  color: #fff;
  font-size: clamp(34px, 4.7vw, 54px);
  letter-spacing: -0.037em; line-height: 1.07;
}
.lp-hero h1 em { font-style: normal; color: var(--brand-accent); }
.lp-hero .lead {
  font-size: 16px; line-height: 1.75; max-width: 540px;
  color: rgba(255, 255, 255, 0.84);
  margin: 22px 0 32px;
}
.lp-note {
  margin-top: 22px; font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  display: flex; align-items: center; gap: 8px;
}
.lp-note svg { color: var(--brand-accent); flex: none; }

/* ---------------- Figure strip ---------------- */
.lp-figures {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 30px;
}
.lp-figures .f .n {
  font-size: 31px; font-weight: 700; letter-spacing: -0.03em; color: #fff;
  line-height: 1;
}
.lp-figures .f .l {
  font-size: 12px; color: rgba(255, 255, 255, 0.66);
  margin-top: 8px; line-height: 1.5;
}

/* ---------------- Light sections ---------------- */
/* One vertical rhythm. Padding only -- adding margins here as well is what
   doubled the gaps to 156px between blocks. */
.lp-section { padding: 48px 32px; }
.lp-section.tinted { background: #EAF2FF; }
.lp-inner { max-width: 1160px; margin: 0 auto; }
.lp-head { text-align: center; max-width: 660px; margin: 0 auto 34px; }
.lp-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary);
}
.lp-head h2 {
  font-size: clamp(24px, 3.3vw, 34px);
  letter-spacing: -0.032em; margin-top: 12px;
}
.lp-head p {
  font-size: 15px; color: var(--text-muted);
  line-height: 1.75; margin-top: 14px;
}

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.lp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.lp-card .i {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--primary-bg); color: var(--primary);
  display: grid; place-items: center; margin-bottom: 16px;
}
.lp-card h3 { font-size: 16px; margin-bottom: 9px; }
.lp-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.72; }
.lp-card .pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--primary-dark); background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  padding: 4px 11px; border-radius: var(--radius-full);
}

/* Numbered steps */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }
.lp-step {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 22px;
  position: relative;
}
.lp-step::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--primary);
}
.lp-step .n {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--primary);
}
.lp-step h3 { font-size: 16px; margin: 10px 0 8px; }
.lp-step p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.lp-step .tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 15px;
  font-size: 11.5px; font-weight: 600; color: var(--success);
  background: var(--success-bg); border: 1px solid var(--success-line);
  padding: 5px 11px; border-radius: var(--radius-full);
}

/* Course chips */
.lp-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.lp-chips span {
  font-size: 13px; font-weight: 500; color: var(--text-main);
  background: #fff; border: 1px solid var(--border-strong);
  padding: 9px 15px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-chips span svg { color: var(--primary); }
.lp-chips span.soon { color: var(--text-dim); background: transparent; border-style: dashed; }

/* Two-column comparison */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-compare .col { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.lp-compare .col h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.lp-compare .col.yes h3 { color: var(--success); }
.lp-compare .col.no h3 { color: var(--danger); }
.lp-compare ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-compare li { display: flex; gap: 10px; font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.lp-compare li svg { flex: none; margin-top: 2px; }
.lp-compare .yes li svg { color: var(--success); }
.lp-compare .no li svg { color: var(--danger); }

/* Evidence split */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.lp-split .lp-head { text-align: left; margin: 0; max-width: none; }

/* Hero panel: the product surface itself, mirroring the card on the
   marketing site -- the catalogue with its completion state, which shows
   breadth in a way a single certificate cannot. */
.lp-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(1, 33, 110, 0.35);
  overflow: hidden;
}
.lp-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.lp-panel-head .t { font-size: 13px; font-weight: 700; color: var(--text-title); }
.lp-panel-head .s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* The list scrolls itself in a continuous loop, as on the marketing site.
   The rows are rendered twice and the track is translated by exactly half its
   height, so the wrap point lands on an identical frame and the motion never
   appears to jump. A mask fades both edges, which is what stops a row being
   cut in half at the boundary. */
.lp-panel-list {
  height: 292px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.lp-marquee { animation: lp-scroll 26s linear infinite; }
.lp-panel-list:hover .lp-marquee { animation-play-state: paused; }

@keyframes lp-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.lp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.lp-row:last-child { border-bottom: none; }
.lp-row .name { font-size: 12.5px; font-weight: 600; color: var(--text-title); }
.lp-row .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.lp-row .state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-full);
}
.lp-row .state.done { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); }
.lp-row .state.soon { background: var(--bg-hover); color: var(--text-dim); border: 1px solid var(--border); }
.lp-panel-foot {
  padding: 12px 18px; background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Certificate preview, in platform blue rather than the printed amber */
.lp-cert {
  background: #fff; border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* The corner brackets sit 11px in and run 18px, so content has to clear
     roughly 30px or the logo and the governance line collide with them. */
  padding: 34px 32px 30px;
  box-shadow: var(--shadow-lg);
  background-image: radial-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
  position: relative;
}
.lp-cert .corner { position: absolute; width: 18px; height: 18px; }
.lp-cert .corner.tl { top: 11px; left: 11px; border-top: 2px solid var(--primary); border-left: 2px solid var(--primary); }
.lp-cert .corner.tr { top: 11px; right: 11px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.lp-cert .corner.bl { bottom: 11px; left: 11px; border-bottom: 2px solid var(--primary); border-left: 2px solid var(--primary); }
.lp-cert .corner.br { bottom: 11px; right: 11px; border-bottom: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.lp-cert .ph {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 15px; margin-bottom: 19px;
  border-bottom: 1.5px dashed var(--border-strong);
}
.lp-cert .pk {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--primary); text-align: center;
}
.lp-cert .pn {
  font-size: 25px; font-weight: 700; color: var(--text-title);
  text-align: center; letter-spacing: -0.03em; margin: 11px 0 10px;
}
.lp-cert .pc {
  display: block; width: fit-content; margin: 0 auto;
  background: var(--primary-bg); border: 1.5px solid var(--primary-border);
  border-radius: var(--radius-md); padding: 9px 19px;
  color: var(--primary-dark); font-size: 14px; font-weight: 800;
}
.lp-cert .pf {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 21px; padding-top: 16px; border-top: 1px solid var(--border);
}
.lp-cert .fl {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
}
.lp-cert .fv { font-weight: 800; color: var(--text-title); margin-top: 3px; font-size: 12.5px; }
.lp-cert .governance {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); text-align: center;
}

/* Rotating certificate stack, as on the marketing site.

   The cards are stacked absolutely inside a fixed-height stage and each one
   is given the same keyframes with a staggered delay, so exactly one is
   visible at a time and the sequence loops without JavaScript. The stage
   needs an explicit height because absolutely positioned children cannot
   give it one. */
.lp-cert-stage { position: relative; min-height: 384px; }
.lp-cert-stage .lp-cert {
  position: absolute; inset: 0;
  opacity: 0;
  animation: lp-cert-rotate 25s ease-in-out infinite;
}
/* Negative delays start every card already part-way through its cycle, so one
   is visible from the first frame rather than after a blank second. The
   windows overlap by a beat, which is what removes the dead gap between
   cards that a non-overlapping stagger leaves behind. */
.lp-cert-stage .lp-cert:nth-child(1) { animation-delay:  0s; }
.lp-cert-stage .lp-cert:nth-child(2) { animation-delay: -5s; }
.lp-cert-stage .lp-cert:nth-child(3) { animation-delay: -10s; }
.lp-cert-stage .lp-cert:nth-child(4) { animation-delay: -15s; }
.lp-cert-stage .lp-cert:nth-child(5) { animation-delay: -20s; }

@keyframes lp-cert-rotate {
  0%        { opacity: 0; transform: translateY(12px) scale(0.985); }
  4%, 20%   { opacity: 1; transform: translateY(0) scale(1); }
  24%, 100% { opacity: 0; transform: translateY(-12px) scale(0.985); }
}

/* With motion suppressed the stack would leave nothing visible, so the first
   certificate is simply shown. */
@media (prefers-reduced-motion: reduce) {
  .lp-cert-stage .lp-cert { display: none; }
  .lp-cert-stage .lp-cert:nth-child(1) { display: block; opacity: 1; }
}

/* Backed-by band */
.lp-backed {
  max-width: 1160px; margin: 78px auto 0;
  background: linear-gradient(180deg, #0A1730, #060F22);
  border-radius: var(--radius-xl); padding: 44px 40px;
  color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 30px;
  align-items: center;
}
.lp-backed img { height: 34px; width: auto; background: #fff; padding: 9px 13px; border-radius: var(--radius-md); }
.lp-backed h3 { color: #fff; font-size: 19px; }
.lp-backed p { color: rgba(255,255,255,0.74); font-size: 13.5px; line-height: 1.75; margin-top: 9px; }

/* Closing */
.lp-closing {
  max-width: 1160px; margin: 0 auto;
  background: linear-gradient(140deg, #034CF6 0%, #0231A6 60%, #01216E 100%);
  border-radius: var(--radius-xl); padding: 48px 40px; text-align: center;
  color: #fff; position: relative; overflow: hidden;
}
.lp-closing::after {
  content: ''; position: absolute; left: -70px; bottom: -130px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(61, 220, 151, 0.16);
}
.lp-closing > * { position: relative; z-index: 1; }
.lp-closing h2 { color: #fff; font-size: clamp(23px, 3vw, 32px); letter-spacing: -0.03em; }
.lp-closing p { color: rgba(255,255,255,0.85); font-size: 15px; margin: 14px auto 30px; max-width: 520px; line-height: 1.7; }

/* Footer */
.lp-foot {
  background: #fff;
  border-top: 1px solid var(--border); padding: 30px 32px 36px;
}
.lp-foot-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}

@media (max-width: 960px) {
  .lp-hero-inner, .lp-split, .lp-compare { grid-template-columns: 1fr; gap: 34px; }
  .lp-backed { grid-template-columns: 1fr; gap: 18px; }
  .lp-hero { padding: 48px 20px 46px; }
  .lp-section { padding: 38px 20px; }
}

/* ==========================================================================
   Course player
   ========================================================================== */

.player { display: grid; grid-template-columns: 258px 1fr; gap: 22px; align-items: start; }

.player-rail {
  position: sticky; top: 88px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.player-rail .rail-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.player-rail .rail-head .t { font-size: 13.5px; font-weight: 600; color: var(--text-title); line-height: 1.4; }
.player-rail .rail-head .s { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.player-rail ol { list-style: none; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.player-rail a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-muted);
  transition: background var(--t-fast);
}
.player-rail a:hover { background: var(--bg-hover); }
.player-rail li.active a { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
.player-rail .step {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  background: var(--bg-hover); color: var(--text-dim);
  border: 1px solid var(--border-strong);
}
.player-rail li.active .step { background: var(--primary); color: #fff; border-color: var(--primary); }
.player-rail li.done .step { background: var(--success); color: #fff; border-color: var(--success); }
.player-rail li.done a { color: var(--text-muted); }
.player-rail .step svg { width: 12px; height: 12px; }

/* The unskippable gate */
.gate {
  margin: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.gate .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.gate .clock {
  font-family: var(--font-mono);
  font-size: 25px; font-weight: 700; color: var(--text-title);
  letter-spacing: -0.02em; margin: 5px 0 9px;
  font-variant-numeric: tabular-nums;
}
.gate.unlocked { background: var(--success-bg); border-color: var(--success-line); }
.gate.unlocked .clock { color: var(--success); }
.gate .note { font-size: 11px; color: var(--text-muted); margin-top: 9px; line-height: 1.55; }

.lesson {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lesson-head {
  padding: 24px 30px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-sunken), var(--bg-surface));
}
.lesson-head .k {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary);
}
.lesson-head h1 { font-size: 22px; margin-top: 7px; }
.lesson-head .s { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }

.lesson-body { padding: 26px 30px; }
.lesson-body > * + * { margin-top: 20px; }
.lesson-body .intro { font-size: 14.5px; line-height: 1.75; color: var(--text-main); }
.lesson-body h3 { font-size: 15px; margin-bottom: 8px; }
.lesson-body p { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); }
.lesson-body ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.lesson-body ul li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; line-height: 1.65; color: var(--text-muted);
}
.lesson-body ul li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 8px;
}

.section-block {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}

.keypoints {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
}
.keypoints .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 10px; }
.keypoints ul li::before { background: var(--primary-dark); }
.keypoints ul li { color: var(--primary-dark); font-weight: 500; }

.lesson-foot {
  padding: 18px 30px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Phishing inbox simulation
   ========================================================================== */

.inbox {
  display: grid; grid-template-columns: 300px 1fr;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 470px;
  background: var(--bg-surface);
}

.inbox-list { border-right: 1px solid var(--border); background: var(--bg-sunken); overflow-y: auto; max-height: 560px; }
.inbox-list .lh {
  padding: 11px 15px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky; top: 0;
  display: flex; justify-content: space-between; align-items: center;
}
.mail-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
  border-left: 3px solid transparent;
}
.mail-item:hover { background: var(--bg-hover); }
.mail-item.active { background: var(--bg-surface); border-left-color: var(--primary); }
.mail-item.judged { opacity: 0.72; }
.mail-item.judged.right { border-left-color: var(--success); }
.mail-item.judged.wrong { border-left-color: var(--danger); }
.mail-item .from { font-size: 12.5px; font-weight: 600; color: var(--text-title); display: flex; justify-content: space-between; gap: 8px; }
.mail-item .from .time { font-size: 10.5px; color: var(--text-dim); font-weight: 500; flex-shrink: 0; }
.mail-item .subj { font-size: 12px; color: var(--text-main); margin-top: 3px; line-height: 1.4; }
.mail-item .prev { font-size: 11px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mail-view { padding: 20px 24px; overflow-y: auto; max-height: 560px; }
.mail-view .mv-subject { font-size: 17px; font-weight: 600; color: var(--text-title); line-height: 1.35; }
.mail-view .mv-from {
  display: flex; align-items: center; gap: 11px;
  margin: 15px 0; padding-bottom: 15px;
  border-bottom: 1px solid var(--border);
}
.mail-view .mv-from .who .n { font-size: 13px; font-weight: 600; color: var(--text-title); }
.mail-view .mv-from .who .a { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.mail-view .mv-body { font-size: 13.5px; line-height: 1.8; color: var(--text-main); white-space: pre-line; }

.mail-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 10px 18px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.mail-link:hover { background: var(--primary-hover); }
.mail-hover {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); margin-top: 7px;
  display: flex; align-items: center; gap: 6px;
}
.mail-attach {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 9px 14px;
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12.5px;
  cursor: pointer; color: var(--text-main);
}
.mail-attach:hover { background: var(--bg-hover); }
.mail-attach svg { width: 15px; height: 15px; color: var(--text-muted); }

.triage {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}

.verdict {
  margin-top: 20px; padding: 17px 19px;
  border-radius: var(--radius-md);
  border: 1px solid;
  animation: fadeUp 0.3s ease both;
}
.verdict.right { background: var(--success-bg); border-color: var(--success-line); }
.verdict.wrong { background: var(--danger-bg); border-color: var(--danger-line); }
.verdict .vh { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.verdict.right .vh { color: #14532D; }
.verdict.wrong .vh { color: #7F1D1D; }
.verdict .vt { font-size: 13px; line-height: 1.7; color: var(--text-main); margin-top: 9px; }
.verdict ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.verdict ul li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.6; color: var(--text-main); }
.verdict ul li::before { content: '•'; color: var(--text-dim); }

/* ==========================================================================
   Scenario simulation
   ========================================================================== */

.scenario-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}
.scenario-step + .scenario-step { margin-top: 16px; }
.scenario-step .sit {
  padding: 19px 21px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.75; color: var(--text-main);
}
.scenario-step .q { padding: 16px 21px 8px; font-size: 13.5px; font-weight: 600; color: var(--text-title); }
.scenario-step .choices { padding: 0 21px 19px; display: flex; flex-direction: column; gap: 9px; }

.choice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: 13px; line-height: 1.6;
  text-align: left; font-family: inherit; color: var(--text-main);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  width: 100%;
}
.choice:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-bg); }
.choice:disabled { cursor: default; }
.choice .mark {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center; margin-top: 1px;
}
.choice .mark svg { width: 12px; height: 12px; }
.choice.right { border-color: var(--success); background: var(--success-bg); }
.choice.right .mark { background: var(--success); border-color: var(--success); color: #fff; }
.choice.wrong { border-color: var(--danger); background: var(--danger-bg); }
.choice.wrong .mark { background: var(--danger); border-color: var(--danger); color: #fff; }
.choice.faded { opacity: 0.55; }

.outcome {
  margin: 0 21px 19px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border-left: 3px solid var(--primary);
  font-size: 12.5px; line-height: 1.7; color: var(--text-muted);
  animation: fadeUp 0.28s ease both;
}
.outcome.right { border-left-color: var(--success); }
.outcome.wrong { border-left-color: var(--danger); }

/* ==========================================================================
   Checklist module
   ========================================================================== */

.checklist { display: flex; flex-direction: column; gap: 10px; }
.check-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.check-item:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.check-item.ticked { border-color: var(--success); background: var(--success-bg); }
.check-item .box {
  width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center; margin-top: 1px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check-item.ticked .box { background: var(--success); border-color: var(--success); color: #fff; }
.check-item .box svg { width: 12px; height: 12px; opacity: 0; }
.check-item.ticked .box svg { opacity: 1; }
.check-item .t { font-size: 13.5px; font-weight: 600; color: var(--text-title); line-height: 1.5; }
.check-item .d { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.65; }

/* ==========================================================================
   Assessment
   ========================================================================== */

.quiz-bar {
  position: sticky; top: 66px; z-index: 20;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.quiz-bar .t { font-size: 13px; font-weight: 600; color: var(--text-title); }
.quiz-bar .bar { flex: 1; min-width: 140px; }

.question {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.question + .question { margin-top: 14px; }
.question.answered { border-color: var(--primary-border); }
.question .qn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary-dark);
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.question.answered .qn { background: var(--primary); color: #fff; }
.question .qp { font-size: 14.5px; font-weight: 600; color: var(--text-title); line-height: 1.6; }
.question .opts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

.opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.6;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  background: var(--bg-surface);
}
.opt:hover { border-color: var(--primary); background: var(--primary-bg); }
.opt input { display: none; }
.opt .letter {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  transition: all var(--t-fast);
}
.opt.chosen { border-color: var(--primary); background: var(--primary-bg); }
.opt.chosen .letter { background: var(--primary); border-color: var(--primary); color: #fff; }
.opt.correct { border-color: var(--success); background: var(--success-bg); }
.opt.correct .letter { background: var(--success); border-color: var(--success); color: #fff; }
.opt.incorrect { border-color: var(--danger); background: var(--danger-bg); }
.opt.incorrect .letter { background: var(--danger); border-color: var(--danger); color: #fff; }

.explain {
  margin-top: 14px; padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border-left: 3px solid var(--primary);
  font-size: 12.5px; line-height: 1.7; color: var(--text-muted);
}
.explain strong { color: var(--text-title); }

/* ==========================================================================
   Result
   ========================================================================== */

.result-hero {
  text-align: center;
  padding: 44px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  position: relative; overflow: hidden;
}
.result-hero.pass { background: linear-gradient(160deg, #F0FDF4, #FFFFFF); border-color: var(--success-line); }
.result-hero.fail { background: linear-gradient(160deg, #FEF2F2, #FFFFFF); border-color: var(--danger-line); }
.result-hero .medal {
  width: 84px; height: 84px; margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  animation: pop 0.5s var(--t-normal) both;
}
.result-hero.pass .medal { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: #78350F; box-shadow: 0 10px 26px rgba(217,119,6,0.28); }
.result-hero.fail .medal { background: var(--danger-bg); color: var(--danger); }
.result-hero .medal svg { width: 38px; height: 38px; }
.result-hero .score { font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.result-hero.pass .score { color: var(--success); }
.result-hero.fail .score { color: var(--danger); }
.result-hero h1 { font-size: 23px; margin-top: 12px; }
.result-hero p { font-size: 13.5px; color: var(--text-muted); max-width: 520px; margin: 10px auto 0; line-height: 1.7; }

/* ==========================================================================
   Certificate card — mirrors the published design
   ========================================================================== */

.cert {
  background: #fff;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 30px 28px;
  position: relative;
  background-image: radial-gradient(rgba(37,99,235,0.035) 1px, transparent 1px);
  background-size: 20px 20px;
  box-shadow: var(--shadow-md);
}
.cert .corner { position: absolute; width: 22px; height: 22px; }
.cert .corner.tl { top: 12px; left: 12px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.cert .corner.tr { top: 12px; right: 12px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.cert .corner.bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.cert .corner.br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); }

.cert-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1.5px dashed var(--border-strong);
}
.cert-head img { height: 30px; width: auto; }

.cert-verified {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--success-bg); color: var(--success);
  border: 1.5px solid var(--success-line);
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 800;
}
.cert-verified.revoked { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.cert-verified svg { width: 13px; height: 13px; }

.cert-body { text-align: center; margin-bottom: 24px; }
.cert-kicker {
  font-size: 11.5px; font-weight: 800; color: var(--amber);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 9px;
}
.cert-awarded { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.cert-name { font-size: 30px; font-weight: 700; color: var(--text-title); letter-spacing: -0.03em; line-height: 1.2; }
.cert-for { font-size: 12.5px; color: var(--text-muted); margin: 12px auto; max-width: 380px; }
.cert-course {
  display: inline-block;
  background: #EFF6FF; border: 1.5px solid #BFDBFE;
  border-radius: var(--radius-md);
  padding: 10px 22px;
  color: #1D4ED8; font-size: 15px; font-weight: 800;
}
.cert-org { font-size: 12px; color: var(--text-muted); margin-top: 12px; font-weight: 500; }

.cert-foot {
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 17px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.cert-foot .col { display: flex; flex-direction: column; gap: 10px; }
.cert-foot .col.r { text-align: right; }
.cert-foot .fl {
  font-size: 9.5px; color: var(--text-dim); text-transform: uppercase;
  font-weight: 800; letter-spacing: 0.05em;
}
.cert-foot .fv { font-weight: 800; color: var(--text-title); font-size: 13px; margin-top: 2px; }
.cert-foot .fv.blue { color: #1D4ED8; font-family: var(--font-mono); }
.cert-foot .fv.green { color: var(--success); }

.cert-seal { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cert-seal .disc {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-light), var(--amber));
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(217,119,6,0.35);
  display: grid; place-items: center; color: #78350F;
}
.cert-seal .disc svg { width: 24px; height: 24px; }
.cert-seal .sl {
  font-size: 9px; font-weight: 800; color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px;
}

/* Certificate wallet grid */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cert-mini {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.cert-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cert-mini::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--amber); }
.cert-mini .ref { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #1D4ED8; }

/* ==========================================================================
   Trend sparkline
   ========================================================================== */

.spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.spark i {
  flex: 1; min-width: 3px;
  background: var(--primary-bg);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: background var(--t-fast);
}
.spark i > s { display: block; background: var(--primary); border-radius: inherit; width: 100%; position: absolute; bottom: 0; }
.spark i:hover { background: var(--primary-border); }

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tabs button, .tabs a {
  background: none; border: none; font-family: inherit;
  padding: 10px 15px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs button:hover, .tabs a:hover { color: var(--text-title); }
.tabs button.active, .tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.tab-panel { display: none; padding-top: 20px; }
.tab-panel.active { display: block; animation: fadeIn 0.22s ease both; }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-back {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  display: none; place-items: center;
  z-index: 90; padding: 24px;
}
.modal-back.open { display: grid; animation: fadeIn 0.18s ease both; }
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp 0.24s var(--t-normal) both;
  max-height: 90vh; overflow-y: auto;
}
.modal .mh { padding: 20px 22px 0; }
.modal .mh h3 { font-size: 16px; }
.modal .mb { padding: 14px 22px 20px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.modal .mf { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.pager .links { display: flex; gap: 8px; }

/* ==========================================================================
   Error page
   ========================================================================== */

.errpage { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; text-align: center; }
.errpage .code { font-size: 76px; font-weight: 700; color: var(--primary); letter-spacing: -0.05em; line-height: 1; opacity: 0.22; }
.errpage h1 { font-size: 24px; margin-top: 10px; }
.errpage p { font-size: 14px; color: var(--text-muted); max-width: 460px; margin: 12px auto 26px; line-height: 1.7; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .sidebar, .topbar, .learn-bar, .btn, .flashes, .no-print { display: none !important; }
  .main { margin-left: 0; }
  .content, .learn-body { padding: 0; }
  .card, .cert { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .player { grid-template-columns: 1fr; }
  .player-rail { position: static; }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
  .auth-form { align-items: center; padding: 40px 32px; }
  .auth-form .mark { display: block; }
  /* The mark is the only way back to the site on a phone, so its hit area is
     padded out to the 44px touch minimum and pulled back with a matching
     negative margin so nothing below it moves. */
  .auth-form .mark .brand { padding: 5px 0; margin: -5px 0; }
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { max-height: 260px; border-right: none; border-bottom: 1px solid var(--border); }
  .landing-main h1 { font-size: 32px; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--t-normal);
    width: 258px;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .content, .learn-body { padding: 18px 16px 48px; }
  .topbar { padding: 0 16px; }
  .menu-toggle { display: inline-flex !important; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .ring-card { flex-direction: column; text-align: center; }
  .cert-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .cert-foot .col.r { text-align: left; }
  .cert-name { font-size: 23px; }
  .learn-bar { padding: 0 16px; gap: 10px; }
  .learn-bar nav { margin-left: 0; }
  .learn-bar nav a { padding: 6px 10px; font-size: 12px; }
}

.menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
}
.menu-toggle svg { width: 18px; height: 18px; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 35; display: none;
}
.scrim.open { display: block; }
@media (min-width: 769px) { .scrim { display: none !important; } }

/* A locked section stays visible so the learner can see what is ahead, but
   reads as inert: no pointer, no hover, and the title dimmed. */
.lesson-nav li.locked .locked-step,
.lesson aside ol li.locked .locked-step {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: not-allowed; user-select: none;
}
.lesson aside ol li.locked .step {
  background: var(--bg-hover); color: var(--text-dim);
  border-color: var(--border);
}