/* ==========================================================================
   Ask Sid marketing landing page
   Standalone stylesheet (not part of the app design system).
   Palette: navy #071F3D / blue #0B6CB4 / gold #FFC524
   Type: Sora (body) + Barlow Semi Condensed (headers, eyebrows)
   Font files are the app's own self-hosted set in public/fonts/ (served at
   /fonts/), so the two surfaces stay on one brand set with zero duplication.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sora-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sora-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sora-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sora-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/sora-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/sora-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/sora-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/sora-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-800-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-800-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-900-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-900-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #071F3D;
  font-family: Sora, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #0E2A4F;
}
a { color: #0B6CB4; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
section[id] { scroll-margin-top: 72px; }

/* No overflow:hidden here (it would break the sticky header). Sections that
   need clipping (the blue band) clip themselves. The hero stays unclipped so
   the phone shadows can bleed across the seam into the tour band. */
.sl-page { background: #071F3D; }
.sl-spacer { flex: 1; }

/* ---------- Shared type ---------- */
.sl-eyebrow {
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.sl-eyebrow-gold { color: #FFC524; }
.sl-eyebrow-blue { color: #0B6CB4; }

/* Headers run in Barlow Semi Condensed; a condensed face needs no extra
   squeezing, so tracking stays a gentle -.01em. */
.sl-h1 {
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 74px;
  line-height: 1.02;
  letter-spacing: -.01em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.sl-h2 {
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.sl-h2-small { font-size: 38px; line-height: 1.1; margin: 0 0 46px; max-width: 620px; }
.sl-h2-cta { font-size: 50px; line-height: 1.04; }
.sl-ink { color: #0E2A4F; }
.sl-white { color: #fff; }

.sl-body { font-size: 18px; line-height: 1.55; margin: 22px 0 0; text-wrap: pretty; }
.sl-body-grey { color: #40587A; }
.sl-body-onblue { color: rgba(255,255,255,.82); }
.sl-body-onnavy { color: rgba(255,255,255,.72); }

/* ---------- Buttons ---------- */
.sl-btn-primary {
  background: #FFC524;
  color: #07223F;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, background .18s ease;
  display: inline-block;
}
.sl-btn-primary:hover { transform: translateY(-2px); color: #07223F; }
.sl-btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: 100px;
  transition: background .18s ease;
  display: inline-block;
}
.sl-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Header ---------- */
.sl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7,31,61,.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sl-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.sl-logo { display: flex; align-items: center; gap: 9px; color: #fff; }
.sl-logo:hover { color: #fff; }
/* The mark is the app icon itself (public/icons/icon-192.png), the same art the
   iOS and Android tiles are generated from, so the site and the home-screen icon
   can't drift apart. The art is a square; the corners are rounded here at the
   icon's own 25% ratio. The gold behind it is the art's own background, showing
   only if the image ever fails to load. */
.sl-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #FFC524 url("/icons/icon-192.png") center / cover no-repeat;
  display: block;
  flex: none;
}
.sl-logo-mark-sm { width: 26px; height: 26px; border-radius: 7px; }
.sl-logo-word { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.sl-logo-word-sm { font-size: 14px; font-weight: 700; color: #fff; }
.sl-nav-links { display: flex; gap: 26px; margin-left: 8px; }
.sl-nav-links a { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.72); transition: color .15s ease; }
.sl-nav-links a:hover { color: #fff; }
.sl-btn-header {
  background: #FFC524;
  color: #07223F;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 100px;
  transition: background .15s ease;
}
.sl-btn-header:hover { background: #fff; color: #07223F; }

/* ---------- Hero ---------- */
/* The hero must NOT clip: its gradient ends on the same #0B6CB4 the tour band
   starts on, and the phone shadows are meant to bleed across that seam so the
   two sections read as one surface. */
.sl-hero {
  position: relative;
  background: linear-gradient(180deg, #071F3D 0%, #0A4E86 55%, #0B6CB4 100%);
  padding: 96px 24px 0;
  text-align: center;
}
/* Full-bleed layer with explicit radii (the old 900x520 farthest-corner box
   worked out to 636x368 centered 100px down); keeping the ellipse inside the
   box is what lets the hero go unclipped. */
.sl-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 636px 368px at 50% 100px, rgba(255,197,36,.16), transparent 62%);
  pointer-events: none;
}
.sl-hero-copy { position: relative; max-width: 880px; margin: 0 auto; }
.sl-hero-copy .sl-eyebrow { font-size: 14.5px; margin-bottom: 22px; }
.sl-hero-sub {
  font-size: 21px;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  max-width: 660px;
  margin: 26px auto 0;
  text-wrap: pretty;
}
.sl-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 38px 0 24px;
}
.sl-hero-note { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; }

.sl-hero-phones {
  position: relative;
  max-width: 1000px;
  margin: 56px auto 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
}
.sl-phone { background: #061426; }
.sl-phone img { width: 100%; }
.sl-phone-side {
  width: 236px;
  margin-bottom: 52px;
  border-radius: 19px;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  opacity: .92;
}
.sl-phone-side img { border-radius: 16px; }
.sl-phone-center {
  width: 312px;
  border-radius: 23px;
  padding: 8px;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
  animation: sl-float 7s ease-in-out infinite;
}
.sl-phone-center img { border-radius: 19px; }

/* ---------- Tour video ---------- */
.sl-tour { background: #0B6CB4; padding: 84px 24px 110px; }
.sl-tour-inner { max-width: 1080px; margin: 0 auto; }
.sl-tour-poster {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
  aspect-ratio: 16/9;
  background-color: #062A52;
}
/* The whole poster is one button: local thumbnail under the caption overlay,
   swapped for the YouTube iframe on tap. */
.sl-tour-cue {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.sl-tour-cue:focus-visible { outline: 3px solid #FFC524; outline-offset: -3px; }
.sl-tour-cue:hover .sl-play-btn { transform: scale(1.08); }
.sl-tour-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sl-tour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.sl-tour-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  text-align: left;
  background: linear-gradient(180deg, rgba(6,26,48,0) 45%, rgba(6,26,48,.72) 100%);
}
.sl-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background: #FFC524;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-right: 16px;
  transition: transform .18s ease;
}
.sl-play-tri {
  width: 0;
  height: 0;
  border-left: 16px solid #07223F;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
  display: block;
}
.sl-tour-caption { display: block; }
.sl-tour-title { display: block; margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.sl-tour-sub { display: block; margin: 3px 0 0; font-size: 14px; color: rgba(255,255,255,.72); }

/* Field-texture placeholder (footage band). Swap for real media by
   replacing the element's background / contents. */
.sl-field-texture {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(11,108,180,.5), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 2px, transparent 2px, transparent 96px),
    linear-gradient(115deg, rgba(255,255,255,.04), transparent 45%);
}

/* ---------- Stat band ---------- */
.sl-stats { background: #F4F7FA; padding: 78px 24px; }
/* Explicit column counts, never auto-fit: four cards may only sit 4x1, 2x2,
   or 1x1. An auto-fit grid happily wraps 3+1 at awkward widths. */
.sl-stats-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1020px) {
  .sl-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .sl-stats-grid { grid-template-columns: 1fr; }
}
.sl-stat-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 1px 3px rgba(10,42,78,.1);
}
.sl-stat-big {
  margin: 0;
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #0B6CB4;
  line-height: 1;
}
.sl-stat-text { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: #40587A; }

/* ---------- Feature sections (split layout) ---------- */
.sl-section { padding: 110px 24px; }
.sl-bg-white { background: #fff; }
.sl-bg-light { background: #F4F7FA; }
.sl-bg-blue { background: #0B6CB4; position: relative; overflow: hidden; }
.sl-bg-navy { background: #071F3D; }

.sl-split {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
.sl-split-flip { grid-template-columns: .95fr 1.05fr; }
.sl-split-flip .sl-split-media { order: 2; }
.sl-split-media { display: flex; justify-content: center; }

.sl-phone-feature {
  width: 308px;
  border-radius: 23px;
  padding: 8px;
  box-shadow: 0 30px 70px rgba(10,42,78,.28);
}
.sl-phone-feature img { border-radius: 19px; }
/* Tall screenshots crop inside the screen, not at the frame: the height cap
   rides on the img so the bezel still wraps the bottom edge. Caps keep the
   old outer heights (640/660) after adding the 16px of vertical padding. */
.sl-phone-crop img { max-height: 624px; object-fit: cover; object-position: top; }
.sl-phone-darkest { background: #04101f; box-shadow: 0 34px 80px rgba(0,0,0,.5); }
#gameplan .sl-phone-feature { width: 288px; border-radius: 22px; box-shadow: 0 34px 80px rgba(0,0,0,.35); }
#gameplan .sl-phone-feature img { border-radius: 18px; }
#playbook .sl-phone-feature { width: 300px; border-radius: 22px; }
#playbook .sl-phone-feature img { border-radius: 18px; }
#gameplan .sl-phone-crop img, #playbook .sl-phone-crop img { max-height: 644px; }

.sl-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.sl-bullet { display: flex; gap: 12px; align-items: flex-start; }
.sl-bullet p { margin: 0; font-size: 16px; line-height: 1.45; color: #0E2A4F; }
.sl-dot { width: 7px; height: 7px; border-radius: 100px; background: #FFC524; margin-top: 8px; flex: none; }

.sl-quote-card {
  font-size: 16px;
  line-height: 1.5;
  color: #0E2A4F;
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 28px 0 0;
  box-shadow: 0 1px 3px rgba(10,42,78,.1);
}

.sl-minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.sl-minicard {
  background: rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
}
/* Inlined Material Symbols (Outlined) paths, gold like the brand accents. */
.sl-minicard-icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: #FFC524;
  margin-bottom: 10px;
}
.sl-minicard-title { margin: 0; font-size: 15.5px; font-weight: 700; color: #fff; }
.sl-minicard-text { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.72); }

.sl-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.sl-pill {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.1);
  padding: 9px 16px;
  border-radius: 100px;
}

/* ---------- Assistant ---------- */
.sl-assistant {
  background: #062A52;
  padding: 110px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sl-assistant-inner { position: relative; max-width: 760px; margin: 0 auto; }
.sl-mic { position: relative; width: 88px; height: 88px; margin: 0 auto 34px; }
.sl-mic-pulse {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: rgba(255,197,36,.35);
  animation: sl-pulse 2.6s ease-out infinite;
  display: block;
}
.sl-mic-btn {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: #FFC524;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Material Symbols mic (filled), inlined like the minicard icons. */
.sl-mic-glyph { width: 40px; height: 40px; fill: #07223F; display: block; }
.sl-assistant-sub { font-size: 19px; max-width: 600px; margin-left: auto; margin-right: auto; }
.sl-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 38px auto 0;
  text-align: left;
}
.sl-question {
  margin: 0;
  background: rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 16.5px;
  color: #fff;
}
/* The Sid demo clip below the questions. Breaks a little wider than the
   question column on purpose; the cue riding on top reuses the tour block's
   overlay pieces so the two video blocks read as one family. */
.sl-assistant-clip {
  position: relative;
  max-width: 640px;
  margin: 44px auto 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
  background-color: #07223F;
}
.sl-clip-media { display: block; width: 100%; height: auto; }

/* ---------- Footage quote band ---------- */
.sl-footage { background-color: #071F3D; position: relative; height: 520px; }
.sl-footage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 90px;
  background: linear-gradient(180deg, rgba(7,31,61,.72), rgba(7,31,61,.4) 60%, rgba(7,31,61,.15));
}
.sl-footage-quote {
  margin: 0;
  max-width: 820px;
  text-align: center;
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

/* ---------- Everything else grid ---------- */
.sl-wide { max-width: 1080px; margin: 0 auto; }
/* Same rule as the stat band: eight cards sit 4x2, 2x4, or single file. */
.sl-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1020px) {
  .sl-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .sl-feature-grid { grid-template-columns: 1fr; }
}
.sl-feature-card { border: 1px solid rgba(10,42,78,.1); border-radius: 18px; padding: 26px; }
.sl-feature-icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: #FFC524;
  margin-bottom: 12px;
}
.sl-feature-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0E2A4F; }
.sl-feature-text { margin: 0; font-size: 15px; line-height: 1.45; color: #40587A; }

/* ---------- Signup ---------- */
.sl-signup { background: linear-gradient(180deg, #0B6CB4, #071F3D); padding: 110px 24px 96px; }
.sl-signup-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.sl-signup-sub { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.78); margin: 20px 0 34px; }
.sl-signup-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sl-input {
  flex: 1 1 260px;
  min-width: 220px;
  font-family: Sora, sans-serif;
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.sl-input::placeholder { color: rgba(255,255,255,.55); }
.sl-input:focus { border-color: #FFC524; background: rgba(255,255,255,.18); }
.sl-btn-submit {
  font-family: Sora, sans-serif;
  background: #FFC524;
  color: #07223F;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 30px;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.sl-btn-submit:hover { background: #fff; }
.sl-signup-note { font-size: 14px; color: rgba(255,255,255,.6); margin: 16px 0 0; }

/* ---------- Footer ---------- */
.sl-footer { background: #04162C; padding: 44px 24px; }
.sl-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.sl-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.sl-footer-links a { font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .15s ease; }
.sl-footer-links a:hover { color: #FFC524; }
.sl-copyright { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.4); }

/* ---------- Legal pages ---------- */
/* One navy title band over a single white reading column. The prose styles are
   scoped to .sl-legal-inner so a legal page can be written as plain h2/p/ul
   without carrying a class on every line. */
.sl-legal-hero { background: #071F3D; padding: 78px 24px 60px; text-align: center; }
.sl-legal-hero-inner { max-width: 760px; margin: 0 auto; }
.sl-legal-hero .sl-h1 { font-size: 58px; }
.sl-legal-stamp { margin: 20px 0 0; font-size: 13.5px; color: rgba(255,255,255,.55); }

.sl-legal { background: #fff; padding: 66px 24px 92px; }
.sl-legal-inner { max-width: 760px; margin: 0 auto; }
.sl-legal-lede { margin: 0; font-size: 18px; line-height: 1.6; color: #0E2A4F; text-wrap: pretty; }
.sl-legal-inner h2 {
  font-family: 'Barlow Semi Condensed', Sora, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 700;
  color: #0E2A4F;
  margin: 46px 0 0;
}
.sl-legal-inner h3 { margin: 26px 0 0; font-size: 15px; font-weight: 700; color: #0E2A4F; }
.sl-legal-inner p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #40587A; text-wrap: pretty; }
.sl-legal-inner ul { margin: 14px 0 0; padding-left: 20px; }
.sl-legal-inner li { margin: 9px 0 0; font-size: 16px; line-height: 1.6; color: #40587A; }
.sl-legal-inner li strong, .sl-legal-inner p strong { color: #0E2A4F; font-weight: 700; }
.sl-legal-inner a { text-decoration: underline; text-underline-offset: 2px; }
.sl-legal-note {
  margin-top: 44px;
  padding: 20px 22px;
  border-radius: 14px;
  background: #F4F7FA;
  border-left: 3px solid #FFC524;
}
.sl-legal-note p { margin: 0; font-size: 15px; }

/* ---------- Animations ---------- */
@keyframes sl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes sl-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sl-phone-center, .sl-mic-pulse { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sl-split { gap: 48px; }
}
@media (max-width: 860px) {
  .sl-nav-links { display: none; }
  .sl-split, .sl-split-flip { grid-template-columns: 1fr; gap: 44px; }
  .sl-split-media { order: 2; }
  .sl-h1 { font-size: 44px; }
  .sl-h2 { font-size: 32px; }
  .sl-h2-cta { font-size: 38px; }
  .sl-section { padding: 72px 20px; }
  .sl-hero { padding-top: 72px; }
  .sl-tour { padding: 56px 20px 72px; }
  .sl-stats { padding: 56px 20px; }
  .sl-assistant { padding: 72px 20px; }
  .sl-signup { padding: 80px 20px 72px; }
  .sl-legal-hero { padding: 54px 20px 44px; }
  .sl-legal-hero .sl-h1 { font-size: 40px; }
  .sl-legal { padding: 46px 20px 68px; }
  .sl-legal-inner h2 { font-size: 26px; }
  .sl-footage { height: 420px; }
  .sl-footage-quote { font-size: 28px; }
  .sl-hero-sub { font-size: 18px; }
}
@media (max-width: 760px) {
  .sl-phone-side { display: none; }
  .sl-phone-center { width: 272px; }
}
@media (max-width: 560px) {
  .sl-minigrid { grid-template-columns: 1fr; }
}