/* ============================================================================
 * schedule.css — /schedule "Schedule a Demo" page.
 * Font: DM Sans (uniform with the logged-in dashboards).
 * Brand treatment: deep brand-blue (#0A1B3D) surfaces with red + white text
 * ("logo blue background, red/white fonts"). Red is only legible on the DARK
 * brand blue, not the bright #0A5FE0 — so backgrounds use the navy brand blue.

 #06345f
 * ==========================================================================*/
:root{
  --blue:#0A5FE0; --blue-dark:#0847AE;      /* bright accent: eyebrows, links, focus */
  --brand:#0a4c89;--brand-blue: #0A1B3D;                          /* deep brand blue: header, cards, footer */
  --red:#E63329; --red-hot:#F0433A; --red-dark:#C81E14;
  --navy:#0A1B3D; --text:#1b2740; --muted:#4b5a70; --line:#d8dde8; --bg:#f7f9fc;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;border:none;cursor:pointer;font-size:15px;font-family:inherit;transition:.18s;letter-spacing:.2px}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-red{background:var(--red)}.btn-red:hover{background:var(--red-dark)}
.btn-blue{background:var(--brand)}.btn-blue:hover{background:#16294a}

/* ── HEADER: brand-blue bar, equal-sized logo box + demo button ── */
header{background:var(--brand);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.18)}
nav{display:flex;justify-content:space-between;align-items:center;height:68px}
.logo,.demo-btn{height:46px;min-width:200px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.logo img{height:30px;width:auto;display:block}
.demo-btn{background:var(--red);color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px}
.demo-btn:hover{background:var(--red-dark)}

/* ── HERO (1st section) ── */
/* Dashboard artwork as the section background. The PNG carries its own blue
   gradient + the product mockups in its LEFT half — which is where the headline
   and icon cards sit — so a left-to-right wash keeps that copy area
   "whitespaced" and legible while the art still reads on the right. */
.hero{
  background:
    linear-gradient(90deg,
      rgba(247,249,252,.78) 0%,
      rgba(247,249,252,.62) 30%,
      rgba(247,249,252,.25) 56%,
      rgba(247,249,252,0) 100%),
    url("../img/schedule/2.png") center/cover no-repeat;
  padding:60px 0;position:relative;
}
/* ▼▼ HERO KNOBS — tweak these to try layouts ▼▼
   .grid  : column split. 2-col = "1.1fr .9fr" (text+cards | form).
            3-col would be "1.1fr 190px 1fr" (text | card stack | form).
            align-items: start = tops line up; center = vertically centred.
   h1     : headline size.
   .icons : repeat(4,1fr) = cards in a row; 1fr = stacked; repeat(2,1fr) = 2x2.
   .icon  : padding/gap = card chunkiness.                              */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
h1{font-size:52px;line-height:1.05;margin:0;font-weight:800;letter-spacing:-1px;color:var(--navy);
   /* Readability over the artwork: a WHITE halo (dark text on a light busy bg).
      Softer: drop the 3rd stop. Stronger: raise the alphas / blur radii.
      For a classic dark drop-shadow instead: 0 2px 6px rgba(10,27,61,.35)   */
   text-shadow:0 14px 30px rgba(165, 162, 162, 0.95),
               0 2px 14px rgba(70, 53, 53, 0.85),
               0 0 30px rgba(255,255,255,.6)}
.red{color:var(--red)}
.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:48px 0 0}
.icon{background:var(--brand);border-radius:16px;padding:18px 10px;box-shadow:0 6px 18px rgba(10,27,61,.12);
      display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
      color:#fff;font-size:12.5px;font-weight:700;line-height:1.3}
.icon svg{width:34px;height:34px;color:var(--red-hot)}
/* ▲▲ END HERO KNOBS ▲▲ */

/* ── FORM CARD (shared /marketing mandatory-fields form via demo_form macro) ── */
.form{background:#fff;padding:28px;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.form h2{margin:0 0 4px;font-size:22px;color:var(--navy)}
.form .sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form .field.full{grid-column:1/-1}
.form .field label{font-size:12.5px;font-weight:700;color:#2a3a54}
.form .field label .req{color:var(--red)}
.form input,.form select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;transition:.15s}
.form input:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,95,224,.12)}
.form .landing-demo-form .btn{width:100%;margin-top:6px;font-size:16px;padding:15px}
.privacy{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-size:12px;margin-top:12px}
.privacy svg{flex:none;width:14px;height:14px}
.landing-demo-msg{display:block;margin-top:10px;font-size:13px;font-weight:600;text-align:center;color:var(--muted)}
.landing-demo-msg.err{color:var(--red)}
.demo-thanks{text-align:center;padding:10px 4px}
.demo-thanks-ico{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:#E7F6EC;color:#1a9d54;font-size:26px;font-weight:800}
.demo-thanks h3{margin:0;font-size:21px;font-weight:800;color:var(--navy)}
.demo-thanks p{color:var(--muted);font-size:14px;margin:10px 0 16px}

/* ── 2nd section: centred, brand-blue stat cards (red icon + white fonts) ── */
.section{padding:70px 0}
.center{text-align:center}
.eyebrow{color:var(--red);font-weight:700;letter-spacing:1.5px;font-size:13px;text-transform:uppercase;margin:0}
.section h2{font-size:40px;margin:10px 0 0;color:var(--navy);letter-spacing:-.5px;line-height:1.1}
.lead{max-width:900px;margin:20px auto 0;color:var(--muted);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.card{background:var(--brand);border-radius:18px;padding:28px 18px;text-align:center;color:#fff;transition:.2s;box-shadow:0 6px 18px rgba(10,27,61,.16)}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(10,27,61,.26)}
.card .i svg{width:34px;height:34px;color:var(--red-hot)}
.card .stat{font-size:34px;font-weight:800;color:#fff;margin:12px 0 6px;line-height:1}
.card b{display:block;font-size:15px;color:#fff;margin-bottom:6px}
.card .desc{font-size:12.5px;color:#d3deee;line-height:1.4}
.band-cta{margin-top:44px}

/* ── why section (matches /campaign): roomy line spacing, centred ── */
.why{padding:80px 0}
.why-inner{max-width:900px;margin:0 auto;text-align:center}
.why h2{font-size:38px;margin:10px 0 0;color:var(--navy);letter-spacing:-.5px;line-height:1.2}
.why .lead{margin:22px auto 0;max-width:840px;line-height:1.75}
.why .lead+.lead{margin-top:20px}

/* ── 3rd section: left copy top-aligned with the form ── */
.bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.bottom h2{font-size:42px;margin:10px 0 0;color:var(--navy);letter-spacing:-.5px;line-height:1.1}
.checks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:10px;align-items:center;color:#22314a;font-weight:600;font-size:15px}
.checks li svg{flex:none;width:20px;height:20px;color:var(--blue)}

/* ── FOOTER: brand-blue, centred logo (white + red), tagline, copyright ── */
footer{background:var(--brand);color:#cdd8ea;padding:44px 0;text-align:center;font-size:14px}
.foot-logo img{height:36px;width:auto;display:block;margin:0 auto}
.foot-tag{margin-top:12px;font-size:14px;color:#cdd8ea}
.foot-copy{margin-top:10px;opacity:.6;font-size:13px}

@media(max-width:900px){
  .grid,.bottom{grid-template-columns:1fr}
  .cards,.icons{grid-template-columns:repeat(2,1fr)}
  h1{font-size:44px}.section h2,.bottom h2{font-size:30px}
  .logo,.demo-btn{min-width:0}
  nav{height:60px}
}
@media(max-width:560px){.cards,.icons{grid-template-columns:1fr}.logo{font-size:26px}}