/* ============================================================
   Landing page (index.html). Loaded after styles.css, which still
   provides the form, dial picker and privacy modal styles.
   ============================================================ */
.lp{
  --lp-navy:   #0A1B3A;
  --lp-navy-2: #12264A;
  --lp-cyan:   #26C3F2;
  --lp-bg:     #F3F6FA;
  --lp-ink:    #0B1220;
  --lp-muted:  #5B6B80;
  --lp-line:   #E3E9F0;
  --lp-head:   'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  margin:0; background:var(--lp-bg); color:var(--lp-ink);
  font-family:'DM Sans', system-ui, sans-serif;
}
.lp *, .lp *::before, .lp *::after{ box-sizing:border-box; }
.lp-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.lp-accent{ color:var(--lp-cyan); }
.lp-ic{ width:20px; height:20px; flex:none; }

/* ---------- buttons ---------- */
.lp-btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:inherit; font-weight:700; border-radius:12px; padding:16px 30px; font-size:17px;
  transition:transform .15s, background-color .15s;
}
.lp-btn:hover{ transform:translateY(-1px); text-decoration:none; }
.lp-btn--sm{ padding:11px 20px; font-size:14px; border-radius:999px; }
.lp-btn--navy{ background:var(--lp-navy); color:#fff; }
.lp-btn--cyan{ background:var(--lp-cyan); color:var(--lp-navy); }
.lp-ic--arrow{ width:18px; height:18px; }

/* ---------- top bar ---------- */
.lp-top{ background:#fff; border-bottom:1px solid var(--lp-line); position:sticky; top:0; z-index:50; }
.lp-top__inner{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.lp-logo img{ display:block; width:130px; height:auto; }
.lp-logo--sm img{ width:116px; }
/* ---------- hero ---------- */
.lp-hero{ background:var(--lp-navy); color:#fff; padding:72px 0 88px; scroll-margin-top:84px; }
.lp-hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.lp-live{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:var(--lp-navy-2); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.lp-live i{ width:8px; height:8px; border-radius:50%; background:#FF4D4D; box-shadow:0 0 0 4px rgba(255,77,77,.18); }
.lp-h1{
  font-family:var(--lp-head); font-weight:800; font-size:clamp(40px, 5.2vw, 64px);
  line-height:1.02; letter-spacing:-.035em; margin:26px 0 22px; color:#fff;
}
.lp-lead{ font-size:20px; color:#C9D4E3; margin:0 0 26px; }
.lp-facts{ list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; max-width:520px; }
.lp-facts li{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:16px; }
.lp-facts .lp-ic{ color:var(--lp-cyan); }
.lp-host{ display:flex; align-items:center; gap:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); max-width:520px; }
.lp-host img{ width:112px; height:112px; border-radius:50%; object-fit:cover; border:3px solid var(--lp-cyan); }
.lp-host__tag{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9FB0C6; margin-bottom:2px; }
.lp-host__name{ margin:0; font-size:18px; color:#DDE6F2; }
.lp-host__name b{ color:#fff; }

/* the form card (form markup and field styles come from styles.css) */
.lp-card{ background:#fff; color:var(--lp-ink); border-radius:22px; box-shadow:0 30px 60px rgba(0,0,0,.28); }
.lp-card .form-panel{ background:#fff; border:0; box-shadow:none; border-radius:22px; padding:38px 38px 30px; }
.lp-card .form-head .ty-h2{ font-family:var(--lp-head); font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--lp-ink); }
.lp-card .form-head__sub{ color:var(--lp-muted); }
.lp-card .field input, .lp-card .dial__btn{ background:#F6F8FB; font-family:'DM Sans', system-ui, sans-serif; }
.lp-card .slot, .lp-card .ty-btn{ font-family:'DM Sans', system-ui, sans-serif; }
.lp-card .slot[aria-checked="true"]{ background:var(--lp-navy); border-color:var(--lp-navy); }
/* The single webinar date: looks like a selected slot, but isn't clickable. */
.slot-date span{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'DM Sans', system-ui, sans-serif; font-size:15px; font-weight:600;
  padding:15px 12px; border-radius:12px; cursor:default;
  background:var(--lp-navy); color:#fff; border:1.5px solid var(--lp-navy);
}
.slot-date svg{ width:18px; height:18px; flex:none; color:var(--lp-cyan); }
.lp-card .ty-btn--cyan{ background:var(--lp-cyan); border-color:var(--lp-cyan); color:var(--lp-navy); font-weight:700; }

/* ---------- sections ---------- */
.lp-section{ padding:88px 0 0; }
.lp-section--tight{ padding-top:72px; }
.lp-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; }
.lp-h2{ font-family:var(--lp-head); font-weight:800; font-size:clamp(30px, 3.6vw, 46px); letter-spacing:-.03em; line-height:1.1; margin:0; }
.lp-h2--sm{ font-size:clamp(26px, 2.6vw, 34px); margin-bottom:28px; }
.lp-muted{ color:var(--lp-muted); margin:0; font-size:18px; }

.lp-points{
  list-style:none; margin:0; padding:40px 44px; background:#fff; border:1px solid var(--lp-line);
  border-radius:22px; display:grid; grid-template-columns:1fr 1fr; gap:30px 48px;
  box-shadow:0 1px 2px rgba(10,27,58,.04), 0 16px 40px rgba(10,27,58,.06);
}
.lp-points li{ display:flex; align-items:flex-start; gap:16px; }
.lp-check{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--lp-cyan); color:var(--lp-navy);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.lp-check .lp-ic{ width:18px; height:18px; }
.lp-points h3{ font-family:var(--lp-head); font-size:20px; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin:0 0 6px; }
.lp-points p{ margin:0; color:var(--lp-muted); font-size:16px; line-height:1.55; text-wrap:pretty; }

.lp-qa{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.lp-qa > div{ border-top:2px solid var(--lp-ink); padding-top:22px; }
.lp-qa h3{ font-size:18px; font-weight:700; margin:0 0 10px; }
.lp-qa p{ margin:0; color:var(--lp-muted); font-size:16px; }

.lp-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--lp-navy); color:#fff; border-radius:24px; padding:56px 72px;
}
.lp-cta__title{ font-family:var(--lp-head); font-weight:800; font-size:clamp(32px, 3.8vw, 48px); letter-spacing:-.03em; margin:0 0 10px; }
.lp-cta p{ margin:0; color:#C9D4E3; font-size:18px; }

/* ---------- footer ---------- */
.lp-foot{ padding:72px 0 48px; }
.lp-foot__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.lp-foot__links{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:30px; flex-wrap:wrap; color:var(--lp-muted); font-size:15px; }
.lp-foot__links li{ display:flex; align-items:center; gap:8px; }
.lp-foot__links .lp-ic{ width:18px; height:18px; color:#1491C8; }
.lp-foot__links a{ color:#0B4C8C; font-weight:600; text-decoration:none; }
.lp-foot__site{ text-decoration:underline !important; }

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  .lp-hero__grid{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width: 640px){
  .lp-wrap{ padding:0 16px; }
  .lp-top__inner{ height:68px; }
  .lp-logo img{ width:112px; }
  .lp-hero{ padding:44px 0 56px; scroll-margin-top:68px; }
  .lp-live{ font-size:11.5px; letter-spacing:.06em; gap:8px; padding:8px 12px; }
  .lp-lead{ font-size:18px; }
  .lp-facts{ grid-template-columns:1fr; }
  .lp-host img{ width:88px; height:88px; }
  .lp-card .form-panel{ padding:28px 20px 22px; }
  .lp-section{ padding-top:60px; }
  .lp-section__head{ flex-direction:column; align-items:flex-start; }
  .lp-points{ grid-template-columns:1fr; gap:22px; padding:26px 20px; }
  .lp-points h3{ font-size:18px; }
  .lp-qa{ grid-template-columns:1fr; gap:24px; }
  .lp-cta{ padding:36px 24px; }
  .lp-foot__links{ gap:14px; flex-direction:column; align-items:flex-start; }
}
