/* =====================================================================
   FastDriver Plugin 1322 - Theory Test Hero
   Scoped under .fdth-hero. Colours & fonts come from the theme:
     --primary-color-one (#C1F11D lime)  --primary-color-two (#141414 ink)
     --creote-family-one (Spartan, headings)  --creote-family-two (Inter, body)
     --font-size-base (17px)             --text-color-dark
   Layout uses the theme Bootstrap grid (.container/.row/.col-*).
   ===================================================================== */
.fdth-hero, .fdth-hero *, .fdth-hero *::before, .fdth-hero *::after{ box-sizing:border-box; }
.fdth-hero{
  background:#F1F1EC;
  border-bottom:1px solid rgba(20,20,20,0.07);
  padding:72px 0 96px;
  font-family: var(--creote-family-two, "Inter", sans-serif);
  font-size: var(--font-size-base, 17px);
  color: var(--text-color-dark, #4a4e56);
  -webkit-font-smoothing:antialiased;
}
.fdth-container{ max-width:1280px; }
.fdth-grid{ --bs-gutter-x:56px; }

/* ── Left column ── */
.fdth-badge{
  display:inline-flex; align-items:center;
  background:#fff; border:1px solid rgba(20,20,20,0.1); border-radius:100px;
  padding:8px 16px; font-size:13px; font-weight:500; color: var(--primary-color-two, #141414);
}
.fdth-title{
  margin:24px 0 0;
  font-family: var(--creote-family-one, "Spartan", sans-serif);
  font-size:clamp(38px,4.6vw,64px); line-height:1.04; font-weight:600;
  letter-spacing:-0.03em; color: var(--primary-color-two, #141414);
}
.fdth-intro{
  margin:22px 0 0; max-width:56ch;
  font-size:19px; line-height:1.65; color:rgba(20,20,20,0.66);
}
.fdth-ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.fdth-btn{
  display:inline-block; border-radius:100px; font-weight:600; white-space:nowrap;
  font-family:inherit; line-height:1.2; transition:opacity .15s, background .15s, color .15s;
}
.fdth-btn--primary{
  background: var(--primary-color-two, #141414); color: var(--primary-color-one, #C1F11D);
  padding:18px 32px; font-size:16px;
}
.fdth-btn--primary:hover{ opacity:.92; color: var(--primary-color-one, #C1F11D); }
.fdth-btn--ghost{
  background:#fff; border:1px solid rgba(20,20,20,0.14); color: var(--primary-color-two, #141414);
  padding:18px 28px; font-size:16px; font-weight:500;
}
.fdth-btn--ghost:hover{ border-color: var(--primary-color-two, #141414); color: var(--primary-color-two, #141414); }

.fdth-stats{ margin-top:38px; display:flex; flex-wrap:wrap; gap:32px 44px; }
.fdth-stat__num{ font-size:34px; font-weight:600; letter-spacing:-0.02em; line-height:1; color: var(--primary-color-two, #141414); font-family: var(--creote-family-one, "Spartan", sans-serif); }
.fdth-stat__lbl{ margin-top:4px; font-size:14px; color:rgba(20,20,20,0.55); }

/* ── Right side card ── */
.fdth-card{
  background: var(--primary-color-two, #141414); color:#fff;
  border-radius:24px; padding:32px; box-shadow:0 24px 60px rgba(20,20,20,0.16);
}
.fdth-card__eyebrow{
  margin:0; font-size:13px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--primary-color-one, #C1F11D); font-family: var(--creote-family-two, "Inter", sans-serif);
}
.fdth-card__chips{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fdth-chip{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:14px; font-size:14px;
}
/* ── Side card: "at a glance" label/value rows ── */
.fdth-glance{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.fdth-glance__row{
  display:flex; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:14px 16px; font-size:15px;
}
.fdth-glance__k{ color:rgba(255,255,255,0.66); }
.fdth-glance__v{ color:#fff; text-align:right; }

.fdth-card__note{
  margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; gap:14px;
}
.fdth-card__badge{
  flex:none; padding:8px 14px; border-radius:100px;
  background: var(--primary-color-one, #C1F11D); color: var(--primary-color-two, #141414);
  font-weight:600; font-size:14px; line-height:1; white-space:nowrap;
}
.fdth-card__notetext{ margin:0; font-size:14px; line-height:1.5; color:rgba(255,255,255,0.62); }

/* ── Responsive ── */
@media(max-width:991px){
  .fdth-right{ margin-top:40px; }
}
@media(max-width:768px){
  .fdth-hero{ padding:44px 0 56px; }
  .fdth-card__chips{ grid-template-columns:1fr; }
}