/* MyMortgageMate Training Centre
   Site chrome (nav, mobile menu, footer) copied from mymortgagemate.ca so these pages match the rest of the site.
   Training components below use the same colour variables. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: clip; }
:root {
  --navy: #1a2744;
  --navy-dark: #0c1929;
  --navy-card: #1e2d3d;
  --navy-border: #3d4f63;
  --gold: #f59e0b;
  --gold-light: #f5a817;
  --green: #10b981;
  --green-light: #34d399;
  --orange: #ea580c;
  --red: #dc2626;
  --white: #ffffff;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --blue-soft: #93c5fd;
  --red-soft: #fca5a5;
  --wash-green: rgba(16, 185, 129, 0.14);
  --wash-gold: rgba(245, 158, 11, 0.14);
  --wash-blue: rgba(96, 165, 250, 0.12);
  --wash-red: rgba(248, 113, 113, 0.14);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 14px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  color: var(--white);
  background: var(--navy-dark);
}
a { color: var(--gold); }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Site chrome (from mymortgagemate.ca) ---------- */
nav.site-nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(12, 25, 41, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-border);
}
.nav-container { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--white); font-size: 1.2rem; font-weight: 600; }
.logo:hover { color: var(--white); }
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #f59e0b, #f5a817); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.logo-icon img { width: 32px; height: 32px; object-fit: contain; }
.logo-text .gold { color: var(--gold); }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { color: var(--gray-300); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--gold); font-weight: 600; }
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle { color: var(--gray-300); font-size: 0.95rem; transition: color 0.2s; cursor: pointer; background: none; border: 0; font: inherit; font-size: 0.95rem; }
.nav-dropdown-toggle:hover { color: var(--white); }
.nav-dropdown-toggle.is-active { color: var(--gold); font-weight: 600; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: -10px; background: rgba(12, 25, 41, 0.98); backdrop-filter: blur(10px); border: 1px solid var(--navy-border); border-radius: 8px; min-width: 220px; padding: 0.5rem 0; z-index: 1001; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown-menu a { display: block; padding: 0.75rem 1.5rem; color: var(--gray-300); text-decoration: none; font-size: 0.9rem; }
.nav-dropdown-menu a:hover { background: var(--navy-card); color: var(--white); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px 6px; z-index: 1001; background: none; border: 0; }
.hamburger span { width: 25px; height: 3px; background: var(--white); border-radius: 3px; transition: all 0.3s; display: block; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
.mobile-menu { display: none; }
.mobile-menu-overlay { display: none; position: fixed; inset: 0; top: var(--nav-h, 70px); background: rgba(0, 0, 0, 0.5); z-index: 999; }
.mobile-menu-overlay.active { display: block; }
footer.site-footer { background: var(--navy-dark); border-top: 1px solid var(--navy-border); padding: 2.5rem 2rem 1.5rem; }
.footer-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-brand .logo-icon { width: 32px; height: 32px; }
.footer-brand .logo-icon img { width: 28px; height: 28px; }
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a { color: var(--gray-400); text-decoration: none; font-size: 0.85rem; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { max-width: 1400px; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--navy-border); text-align: center; color: var(--gray-500); font-size: 0.8rem; }
.maple-leaf { color: var(--red); }
@media (max-width: 968px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: none; position: fixed; top: var(--nav-h, 70px); left: 0; right: 0; background: rgba(12, 25, 41, 0.98); backdrop-filter: blur(10px); padding: 1rem; border-bottom: 1px solid var(--navy-border); z-index: 1002; }
  .mobile-menu.active { display: flex; flex-direction: column; gap: 0.5rem; }
  .mobile-menu a { color: var(--gray-200); text-decoration: none; padding: 0.75rem 1rem; border-radius: 8px; }
  .mobile-menu a:hover, .mobile-menu a.active { background: var(--navy-card); color: var(--white); }
  .nav-container { padding: 0.85rem max(1rem, env(safe-area-inset-right, 0px)) 0.85rem max(1rem, env(safe-area-inset-left, 0px)); }
}

/* ---------- Layout ---------- */
.tc-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.tc-section { padding-block: 56px; display: flex; flex-direction: column; gap: 26px; }
.tc-section.tight { padding-block: 28px; }
.tc-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tc-eyebrow.green { color: var(--green); }
.tc-h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.tc-h1 .gold { color: var(--gold); }
.tc-h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.tc-h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 800; }
.tc-lede { font-size: 1.15rem; color: var(--gray-300); max-width: 640px; }
.tc-sub { font-size: 1.05rem; color: var(--gray-300); }
.tc-muted { color: var(--gray-400); }
.tc-small { font-size: 0.875rem; }
.tc-head { display: flex; flex-direction: column; gap: 8px; }
.tc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tc-between { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; justify-content: space-between; }

/* ---------- Buttons and chips ---------- */
.tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.2; padding: 14px 22px; border-radius: 10px; border: 0; text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; min-height: 48px; }
.tc-btn:hover { transform: translateY(-1px); }
.tc-btn.gold { background: var(--gold); color: var(--navy-dark); }
.tc-btn.gold:hover { box-shadow: 0 10px 28px rgba(245, 158, 11, 0.28); color: var(--navy-dark); }
.tc-btn.green { background: var(--green); color: var(--navy-dark); }
.tc-btn.green:hover { box-shadow: 0 10px 28px rgba(16, 185, 129, 0.28); color: var(--navy-dark); }
.tc-btn.ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--navy-border); }
.tc-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gray-400); color: var(--white); }
.tc-btn.small { font-size: 0.9rem; padding: 10px 16px; min-height: 42px; }
.tc-btn.block { width: 100%; }
.tc-btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.tc-link { background: none; border: 0; font: inherit; font-weight: 700; color: var(--gold); cursor: pointer; padding: 6px 0; text-decoration: none; }
.tc-link:hover { color: var(--gold-light); text-decoration: underline; }
.tc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--navy-card); border: 1px solid var(--navy-border); font-size: 0.82rem; color: var(--gray-300); white-space: nowrap; }
.tc-pill { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tc-pill.free { background: var(--wash-green); color: var(--green); }
.tc-pill.code { background: var(--wash-gold); color: var(--gold); }
.tc-pill.soon { background: transparent; color: var(--gray-400); box-shadow: inset 0 0 0 1px var(--navy-border); }
.tc-pill.done { background: var(--wash-green); color: var(--green); }
.tc-pill.now { background: var(--wash-gold); color: var(--gold); }
.tc-pill.todo { color: var(--gray-400); box-shadow: inset 0 0 0 1px var(--navy-border); }

/* ---------- Cards ---------- */
.tc-card { background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: 16px; padding: 24px; }
.tc-grid-2 { display: flex; flex-wrap: wrap; gap: 24px; }
.tc-grid-2 > * { flex: 1 1 440px; min-width: 0; }
.tc-steps3 { display: flex; flex-wrap: wrap; gap: 20px; }
.tc-steps3 > * { flex: 1 1 260px; min-width: 0; }
.tc-num { width: 36px; height: 36px; border-radius: 999px; background: var(--gold); color: var(--navy-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }

/* Hero */
.tc-hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-block: 72px 48px; }
.tc-hero-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.tc-hero-side { flex: 1 1 340px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
.tc-progress { height: 8px; border-radius: 999px; background: var(--navy-dark); overflow: hidden; }
.tc-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width 0.4s; }
.tc-progress.gold > span { background: var(--gold); }
.tc-progress.big { height: 10px; }
.tc-bar-label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }

/* Track cards */
.tc-track { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.tc-track-tag { display: flex; align-items: center; gap: 12px; }
.tc-icon-tile { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.tc-icon-tile.green { background: var(--wash-green); color: var(--green); }
.tc-icon-tile.gold { background: var(--wash-gold); color: var(--gold); }
.tc-offer { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--navy-dark); border: 1px solid var(--navy-border); }
.tc-offer > div { flex: 1; min-width: 0; }
.tc-offer b { display: block; font-size: 0.95rem; }
.tc-offer span.tc-muted { font-size: 0.82rem; }

/* Learning Hub card */
.tc-hub { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; text-decoration: none; color: var(--white); padding: 20px 24px; transition: border-color 0.15s; }
.tc-hub:hover { border-color: var(--gold); color: var(--white); }
.tc-hub-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-hub-text b { font-size: 1.1rem; }
.tc-hub-text .tc-muted { font-size: 0.92rem; }
.tc-hub-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--gold); white-space: nowrap; }

/* Method table */
.tc-method { overflow-x: auto; border: 1px solid var(--navy-border); border-radius: 16px; }
.tc-method table { width: 100%; min-width: 760px; border-collapse: collapse; }
.tc-method th { text-align: left; padding: 16px 20px; background: var(--navy-card); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.tc-method th.res { color: var(--green); }
.tc-method th.com { color: var(--gold); }
.tc-method td { padding: 18px 20px; border-top: 1px solid var(--navy-border); color: var(--gray-300); vertical-align: top; }
.tc-method td:first-child { color: var(--white); font-weight: 700; white-space: nowrap; width: 220px; }
.tc-method td:first-child span { color: var(--gold); margin-right: 10px; font-weight: 800; }
.tc-answers { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tc-ans { font-size: 0.85rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; }
.tc-ans.go { background: var(--wash-green); color: var(--green); }
.tc-ans.fix { background: var(--wash-gold); color: var(--gold); }
.tc-ans.fringe { background: var(--wash-blue); color: var(--blue-soft); }
.tc-ans.no { background: var(--wash-red); color: var(--red-soft); }
@media (max-width: 720px) {
  .tc-method { overflow: visible; border: 0; border-radius: 0; }
  .tc-method table, .tc-method tbody, .tc-method tr, .tc-method td { display: block; min-width: 0; width: auto; }
  .tc-method thead { display: none; }
  .tc-method tr { background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: 14px; padding: 6px 0; margin-bottom: 12px; }
  .tc-method td { border-top: 0; padding: 8px 16px; }
  .tc-method td:first-child { width: auto; white-space: normal; padding-top: 12px; }
  .tc-method td[data-label]::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
  .tc-method td[data-label="Residential"]::before { color: var(--green); }
  .tc-method td[data-label="Commercial"]::before { color: var(--gold); }
}
.tc-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: var(--wash-blue); border: 1px solid rgba(147, 197, 253, 0.35); }
.tc-callout p { color: var(--gray-200); }
.tc-callout svg { flex: none; margin-top: 3px; color: var(--blue-soft); }

/* Track page */
.tc-crumb { font-size: 0.9rem; color: var(--gray-400); display: flex; gap: 8px; flex-wrap: wrap; }
.tc-crumb a { color: var(--gray-400); }
.tc-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.tc-feature { display: flex; flex-wrap: wrap; gap: 24px; padding: 20px; }
.tc-feature .tc-player { flex: 1 1 420px; }
.tc-feature .tc-feature-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.tc-player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--navy-dark); border: 1px solid var(--navy-border); }
.tc-player video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--navy-dark); }
.tc-player .tc-soon { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--gray-400); font-size: 0.9rem; background: var(--navy-dark); }
.tc-tag-start { align-self: flex-start; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--navy-dark); background: var(--gold); padding: 4px 10px; border-radius: 6px; }
.tc-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tc-videos.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tc-video { background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.tc-video .tc-player { border-radius: 0; border: 0; border-bottom: 1px solid var(--navy-border); }
.tc-video-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tc-video-num { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; color: var(--gold); }
.tc-video h3 { font-size: 1rem; line-height: 1.3; font-weight: 800; }
.tc-video p { font-size: 0.88rem; color: var(--gray-400); }
.tc-watched { margin-top: auto; padding-top: 4px; display: none; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--green); font-weight: 700; }
.is-watched .tc-watched { display: inline-flex; }

/* Course panel */
.tc-course { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.tc-course-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tc-course-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tc-continue { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: var(--navy-dark); background: var(--green); border-radius: 12px; padding: 16px 18px; }
.tc-continue:hover { color: var(--navy-dark); box-shadow: 0 10px 28px rgba(16, 185, 129, 0.28); }
.tc-continue small { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; }
.tc-continue strong { font-size: 1.05rem; }
.tc-sessions { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tc-sessions li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--navy-dark); border: 1px solid var(--navy-border); }
.tc-sessions li.locked { align-items: flex-start; padding: 18px; }
.tc-sessions .n { width: 32px; height: 32px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; background: var(--navy-card); color: var(--gray-300); box-shadow: inset 0 0 0 1px var(--navy-border); }
.tc-sessions li.locked .n { color: var(--gold); }
.tc-sessions .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-sessions .t b { font-size: 0.95rem; }
.tc-sessions .t span { font-size: 0.85rem; color: var(--gray-400); line-height: 1.5; }
.tc-files { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tc-files li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.tc-files .id { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--gold); width: 56px; flex: none; }
.tc-files .name { flex: 1; min-width: 0; color: var(--gray-200); }
.tc-files .tick { color: var(--green); visibility: hidden; }
.tc-files li.matched .tick { visibility: visible; }
.tc-lock { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tc-lock > div { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Account in nav */
.tc-account { position: relative; }
.tc-avatar { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--navy-card); color: var(--white); font: inherit; font-weight: 800; font-size: 0.85rem; box-shadow: inset 0 0 0 1px var(--navy-border); cursor: pointer; }
.tc-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--green); font-weight: 700; white-space: nowrap; }
.tc-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: 12px; padding: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); z-index: 1003; display: flex; flex-direction: column; }
.tc-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--navy-border); margin-bottom: 6px; font-size: 0.85rem; color: var(--gray-400); }
.tc-menu .who b { display: block; color: var(--white); font-size: 0.95rem; }
.tc-menu button, .tc-menu a { text-align: left; background: none; border: 0; font: inherit; font-size: 0.92rem; color: var(--gray-200); padding: 10px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.tc-menu button:hover, .tc-menu a:hover { background: var(--navy-dark); color: var(--white); }
@media (max-width: 640px) { .tc-saved .label { display: none; } .nav-right .tc-btn.small { padding: 9px 12px; } }

/* Modal */
.tc-modal-back { position: fixed; inset: 0; z-index: 2000; background: rgba(3, 8, 15, 0.78); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: max(40px, env(safe-area-inset-top, 0px)) 16px 40px; }
.tc-modal { width: 100%; max-width: 480px; background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }
.tc-modal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tc-modal-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.tc-modal-brand .logo-icon { width: 30px; height: 30px; }
.tc-modal-brand .logo-icon img { width: 26px; height: 26px; }
.tc-x { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gray-300); background: none; border: 1px solid var(--navy-border); cursor: pointer; }
.tc-x:hover { color: var(--white); border-color: var(--gray-400); }
.tc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; background: var(--navy-dark); border-radius: 12px; }
.tc-tabs button { font: inherit; font-weight: 600; font-size: 0.95rem; padding: 10px; border-radius: 9px; border: 0; background: transparent; color: var(--gray-400); cursor: pointer; }
.tc-tabs button[aria-selected="true"] { background: var(--navy-card); color: var(--white); font-weight: 700; }
.tc-view { display: flex; flex-direction: column; gap: 16px; }
.tc-view h2 { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.tc-view p { color: var(--gray-300); font-size: 0.95rem; }
.tc-field { display: flex; flex-direction: column; gap: 6px; }
.tc-field label { font-size: 0.88rem; font-weight: 600; color: var(--gray-200); }
.tc-input { font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--navy-border); background: var(--navy-dark); color: var(--white); width: 100%; }
.tc-input::placeholder { color: var(--gray-500); }
.tc-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.tc-input.code { font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tc-input[aria-invalid="true"] { border-color: var(--red-soft); }
.tc-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; color: var(--gray-300); cursor: pointer; }
.tc-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); flex: none; }
.tc-view .tc-error { color: var(--red-soft); font-size: 0.88rem; font-weight: 600; }
.tc-view .tc-note { text-align: center; font-size: 0.82rem; color: var(--gray-400); }
.tc-icon-big { width: 56px; height: 56px; border-radius: 16px; background: var(--wash-green); color: var(--green); display: flex; align-items: center; justify-content: center; }
.tc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-preview-note, .tc-view .tc-preview-note { font-size: 0.82rem; padding: 10px 12px; border-radius: 10px; background: var(--wash-gold); color: var(--gold); }
.tc-view > div:first-child:not(.tc-field) { display: flex; flex-direction: column; gap: 6px; }

/* Toast */
.tc-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy-card); color: var(--white); border: 1px solid var(--navy-border); padding: 12px 18px; border-radius: 12px; font-size: 0.92rem; font-weight: 600; z-index: 2100; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); max-width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==== v2 start ==== */
/* MyMortgageMate Training Centre menu (grouped drop-down, phone menu, Training Centre bar) */
.nav-dropdown-menu.mmm-grouped{min-width:340px;padding:8px 0 10px}
.nav-dropdown-menu.mmm-grouped a{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap}
.nav-dropdown-menu.mmm-grouped a.mmm-home{color:#fff;font-weight:700}
.nav-dropdown-menu.mmm-grouped a.mmm-sub{padding:.55rem 1.5rem .55rem 2.2rem}
.nav-dropdown-menu.mmm-grouped a[aria-current="page"]{color:#f59e0b}
.nav-dropdown-menu.mmm-grouped .mmm-grp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 1.5rem 4px;margin-top:6px;border-top:1px solid #3d4f63;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;white-space:nowrap;line-height:1.4}
.mmm-pill{display:inline-flex;align-items:center;border-radius:999px;font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:3px 8px;line-height:1.2;white-space:nowrap;text-transform:uppercase}
.mmm-pill.free{background:rgba(16,185,129,.15);color:#10b981}
.mmm-pill.code{background:rgba(245,158,11,.15);color:#f59e0b}
.mmm-pill.soon{background:transparent;color:#94a3b8;box-shadow:inset 0 0 0 1px #3d4f63}
.mmm-tc-dd .nav-dropdown-menu.mmm-grouped{left:auto;right:-10px}
.mmm-m-grp{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f59e0b;padding:14px 1rem 4px;margin-top:4px;border-top:1px solid #3d4f63}
a.mmm-m-sub[aria-current="page"]{color:#f59e0b !important}
a.mmm-m-sub{margin-left:14px}
.mmm-m-end{border-top:1px solid #3d4f63;margin:6px 0 4px;height:0;padding:0}
.mmm-tcbar{background:#1a2744;border-bottom:1px solid #3d4f63;position:relative;z-index:5}
.mmm-tcbar-in{margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:28px;height:52px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mmm-tcbar-in::-webkit-scrollbar{display:none}
.mmm-tcbar-brand{flex:none;display:flex;align-items:center;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f59e0b !important;text-decoration:none !important;padding-right:24px;border-right:1px solid #3d4f63;height:24px}
.mmm-tcbar-in a.mmm-tcbar-link{flex:none;color:#cbd5e1;text-decoration:none;font-size:.92rem;font-weight:600;height:52px;display:flex;align-items:center;border-bottom:3px solid transparent;white-space:nowrap;box-sizing:border-box;padding-top:3px}
.mmm-tcbar-in a.mmm-tcbar-link:hover{color:#fff}
.mmm-tcbar-in a.mmm-tcbar-link[aria-current="page"]{color:#fff;border-bottom-color:#f59e0b}
.mmm-tcbar .mmm-m{display:none}
@media (max-width:768px){.mmm-tcbar-in{padding:0 1rem;gap:22px;height:46px}.mmm-tcbar-brand{display:none}.mmm-tcbar-in a.mmm-tcbar-link{height:46px;font-size:.86rem}.mmm-tcbar .mmm-d{display:none}.mmm-tcbar .mmm-m{display:inline}}

.tc-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tc-door { display: flex; flex-direction: column; gap: 14px; }
.tc-door-h { font-size: 1.4rem; font-weight: 800; color: var(--white); line-height: 1.2; margin: 0; }
.tc-door-btns { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 6px; }
.tc-door-btns .tc-btn { justify-content: space-between; width: 100%; }
@media (max-width: 960px) { .tc-doors { grid-template-columns: 1fr; } }
.tc-progress-card { display: flex; flex-direction: column; gap: 18px; }
.tc-prog3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 720px) { .tc-prog3 { grid-template-columns: 1fr; } }
.tc-seg { display: inline-flex; background: var(--navy-dark); border: 1px solid var(--navy-border); border-radius: 999px; padding: 4px; }
.tc-seg a { padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--gray-300); text-decoration: none; }
.tc-seg a:hover { color: var(--white); }
.tc-seg a.on { background: var(--green); color: var(--navy-dark); }
.tc-seg a.on.gold { background: var(--gold); }
.tc-anchor { scroll-margin-top: calc(var(--nav-h, 70px) + 12px); }
.tc-free { display: flex; align-items: flex-start; gap: 16px; }
.tc-free .tc-icon-tile { flex: none; }
/* ==== v2 end ==== */