/* /training — broker training videos. Brand tokens match /app/app.css (the securemyoffer.com site kit, Nov 2026).
   Header and footer come from /site-chrome.css. No JavaScript on this page. */
:root{
  --gold:#CCA565; --gold-pale:#F7F1E6; --navy:#242424; --ink:#0A080B; --text:#242424; --muted:#4F3E31;
  --bg:#FFFFFF; --bg-alt:#F0EAE1; --border:#E1D6C2; --focus:0 0 0 3px rgba(204,165,101,.45);
  --font:"Inter",sans-serif; --font-head:"Articulat CF","Inter",sans-serif; --font-eyebrow:"Syne","Inter",sans-serif;
  --radius:15px; --radius-card:25px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}   /* below the sticky header */
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font)}
a{color:var(--navy);text-underline-offset:2px}
a:focus-visible,video:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;font-weight:800;z-index:100}
.skip:focus{left:16px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.hero{padding:48px 0 24px;max-width:720px}
.eyebrow{margin:0 0 12px;color:var(--muted);font-family:var(--font-eyebrow);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
h1,h2{font-family:var(--font-head)}
h1{margin:0 0 12px;color:var(--navy);font-weight:800;font-size:clamp(30px,5vw,44px);line-height:1.15}
.lede{margin:0 0 20px;font-weight:400;font-size:19px}
.note{background:var(--gold-pale);border-left:4px solid var(--gold);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 12px}
.small{font-size:14px;color:var(--muted);margin:0}
.videos{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.video{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column}
.video--lead{grid-column:1/-1}
.video video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink)}
.meta{padding:14px 18px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline}
.meta h2{margin:0;font-size:17px;line-height:1.35;color:var(--navy);font-weight:800}
.meta p{grid-column:1/-1;margin:4px 0 0;font-size:15px}
.num{background:var(--navy);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap}
.video--lead .num{background:var(--gold);color:var(--ink)}
.len{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.rules{margin:48px 0;padding:28px;border:1px solid var(--border);border-radius:var(--radius-card);max-width:760px}
.rules h2{margin:0 0 10px;color:var(--navy);font-size:20px}
.rules ul{margin:0 0 12px;padding-left:20px}
.rules li{margin:6px 0}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .hero{padding-top:32px}
  .videos{grid-template-columns:1fr;gap:20px}
  .rules{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}