:root{
  --bg:#f5f3ef;
  --paper:#ffffff;
  --ink:#121417;
  --muted:#5d6672;
  --navy:#0b2a6f;
  --navy2:#0a2258;
  --line:rgba(11,42,111,.18);
  --red:#b30000;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow2:0 6px 18px rgba(0,0,0,.08);
  --radius:14px;
  --radius2:12px;

  --lh:1.22; /* compact, but modern readable */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  line-height:var(--lh);
  background:
    radial-gradient(900px 450px at 15% 0%, rgba(11,42,111,.08), transparent 60%),
    radial-gradient(800px 400px at 105% 10%, rgba(179,0,0,.05), transparent 60%),
    var(--bg);
}
a{color:inherit}
.container{width:min(1100px, 92vw); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(245,243,239,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
}
.brand{
  font-weight:900;
  letter-spacing:.06em;
  font-size:12px;
  color:var(--navy);
  text-transform:uppercase;
  white-space:nowrap;
}
.progress{
  flex:1; display:flex; align-items:center; gap:10px;
}
.progress-track{
  height:10px; flex:1;
  background:rgba(11,42,111,.08);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--navy), var(--navy2));
}
.progress-step{
  font-weight:900; font-size:12px; color:var(--navy);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(11,42,111,.22);
  background:rgba(255,255,255,.65);
  color:var(--navy);
  box-shadow: var(--shadow2);
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{box-shadow:0 10px 24px rgba(0,0,0,.12)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg, var(--navy), var(--navy2));
  border-color:transparent;
  color:#fff;
}

.hero{padding:22px 0 16px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}
.card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.h1{
  font-size:30px;
  font-weight:950;
  letter-spacing:-.015em;
  margin:0 0 10px 0;
}
.sub{
  font-size:14px;
  font-weight:750;
  color:var(--muted);
  margin:0 0 12px 0;
}
.note{
  font-size:13px;
  font-weight:750;
  color:var(--muted);
  margin:0 0 14px 0;
}
.cta-stack{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.video-title{
  font-weight:900; font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 10px 0;
}
.video-wrap{
  border-radius:var(--radius2);
  overflow:hidden;
  background:rgba(11,42,111,.06);
  border:1px solid var(--line);
  position:relative;
  padding-top:56.25%;
}
.video-wrap iframe,.video-wrap video{position:absolute; inset:0; width:100%; height:100%; border:0}

.quiz{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.quiz-title{
  font-weight:900;
  color:var(--navy);
  font-size:13px;
  margin:0 0 10px 0;
}
.quiz-buttons{display:flex; flex-wrap:wrap; gap:10px}
.quiz-buttons .btn{padding:10px 12px; font-size:13px}

.main{padding:10px 0 26px}
.step{
  margin-top:16px;
}
.step-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.step-title{
  font-weight:950;
  color:var(--navy);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
}
.step-nav{display:flex; gap:10px}
.step-nav .btn{
  box-shadow:none;
  background:rgba(255,255,255,.75);
  padding:10px 12px;
  font-size:12px;
}

.pre{white-space:pre-wrap; word-break:break-word}
.p{font-size:14px; font-weight:650; margin:0}
.h2{font-size:16px; font-weight:950; color:var(--navy); margin:0}
.sp{height:8px}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.doc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.doc-table td{
  border-top:1px solid var(--line);
  padding:12px 14px;
  vertical-align:top;
}
.doc-table tr:first-child td{border-top:0}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.shot-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(11,42,111,.04);
}
.shot-frame.noimg{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shot-img{width:100%; height:auto; display:block}
.shot-cap{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
  font-weight:750;
}

.footer{
  border-top:1px solid var(--line);
  padding:16px 0 22px;
}
.legal{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}
.legal a{text-decoration:none; border-bottom:1px solid rgba(93,102,114,.35)}

.mobilebar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(245,243,239,.86);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  padding:10px 0;
  display:none;
  z-index:60;
}
.mobilebar .container{display:flex; gap:10px}
.mobilebar .btn{flex:1}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .h1{font-size:26px}
  .mobilebar{display:block}
  body{padding-bottom:78px}
}