:root {
  --ink: #16141c;
  --ink-soft: #5b5566;
  --ink-faint: #8a849490;
  --surface: #ffffff;
  --surface-alt: #faf8fc;
  --border: rgba(22, 20, 28, 0.09);
  --shadow: 0 24px 60px -20px rgba(35, 20, 60, 0.28);
  --shadow-sm: 0 10px 30px -14px rgba(35, 20, 60, 0.22);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --depth-blue: #cfe3ff;
  --depth-green: #d9ecd6;
  --depth-terracotta: #f6dccb;
  --font: -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(--ink);
  background:
    radial-gradient(1100px 600px at 15% -10%, #f2e8ff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 10%, #ffe9f2 0%, transparent 55%),
    #fbf9fc;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

section { padding: 96px 24px; max-width: 1180px; margin: 0 auto; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover {
  background: #2a2733;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--surface-alt);
  transform: translateY(-1px);
}
.btn-lg {
  padding: 14px 26px;
  font-size: 1rem;
}

/* Header / floating nav */
.site-header {
  position: sticky;
  top: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

.nav-pill {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-sm);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  margin-right: auto;
  /* The name never wraps; when space runs short, the section links go
     first (see the 900px rule). */
  white-space: nowrap;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-links a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Log In is a normal .btn-dark and stays in the bar at every width: a
   returning contractor on a phone shouldn't have to open the menu to find
   the way back in. Its look comes entirely from .btn/.btn-dark — adding a
   color here would win over .btn-dark and put dark text on a dark button. */

/* Styled as the page's supporting copy — the same size, weight, color and
   line height as the closing section's subtitle — rather than as fine print.
   Both instances share one rule: the closing section's generic "p" style
   previously leaked into the lower one, so the same line rendered at two
   different sizes. */
.trial-note,
.final-cta .trial-note {
  margin: 16px 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}

.nav-login[hidden],
.trial-note[hidden] { display: none; }

.lang-toggle {
  display: flex;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.lang-btn {
  border: none;
  background: transparent;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-btn.is-active {
  background: var(--ink);
  color: #fff;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 900px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-sm);
}
.mobile-menu a {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--ink);
}
.mobile-menu a:hover { background: var(--surface-alt); }
.mobile-menu a.btn-dark { color: #fff; }
.mobile-menu a.btn-dark:hover { background: #2a2733; }
.mobile-menu .btn { justify-content: center; margin-top: 6px; }
.mobile-menu:not([hidden]) { display: flex; }

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 56px;
}

.hero-copy {
  max-width: 720px;
}

.hero-copy h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Hero visual / video placeholder */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 18px;
}

.depth-card {
  position: absolute;
  inset: 28px 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: float 7s ease-in-out infinite;
}
.depth-card-a {
  background: var(--depth-blue);
  transform: rotate(-6deg) translateY(6px);
  animation-delay: 0s;
}
.depth-card-b {
  background: var(--depth-terracotta);
  transform: rotate(5deg) translateY(-4px);
  animation-delay: 1.2s;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.video-frame {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.video-body {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f2e8ff 0%, #ffe9f2 100%);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hidden unless the video genuinely fails to load — never shown over a
   playing video. Toggled by .video-body.is-fallback in main.js. */
.video-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  pointer-events: none;
}
.video-body.is-fallback .video-fallback {
  display: flex;
}
.play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Tap-to-zoom affordance */
.video-zoom-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px;
  border: none;
  background: none;
  font: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.video-zoom-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-zoom-btn:hover .video-zoom-badge,
.video-zoom-btn:focus-visible .video-zoom-badge {
  background: #fff;
  transform: translateY(-2px);
}

.video-zoom-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Zoomed product demo */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-lightbox:not([hidden]) { display: flex; }

body.lightbox-open { overflow: hidden; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 15, 26, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Crops the 16:9 video down to just the phone in frame */
.lightbox-stage {
  --crop-x: 0.370833;
  --crop-y: 0.024074;
  --crop-w: 0.258333;
  --crop-h: 0.95;

  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 496 / 1026;
  width: min(94vw, calc((100vh - 40px) * 496 / 1026));
  width: min(94vw, calc((100dvh - 40px) * 496 / 1026));
  border-radius: 20px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6);
  background: #f4f2f6;
}

.lightbox-video {
  position: absolute;
  width: calc(100% / var(--crop-w));
  height: calc(100% / var(--crop-h));
  object-fit: cover;
  left: calc(-100% * var(--crop-x) / var(--crop-w));
  top: calc(-100% * var(--crop-y) / var(--crop-h));
}

/* Features */
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.features .section-head {
  max-width: 900px;
}

.section-head h2.flow-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 14px;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
}

.flow-step {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.flow-arrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0.42em;
  color: var(--ink-faint);
}

.flow-arrow svg {
  display: block;
  width: 0.66em;
  height: 0.66em;
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.feature-card {
  flex: 1 1 300px;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.feature-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* How it works */
.steps {
  display: grid;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
}
.steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.steps p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Final CTA */
.final-cta {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 72px 32px;
  box-shadow: var(--shadow-sm);
}
.final-cta h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.final-cta p {
  color: var(--ink-soft);
  margin: 0 0 28px;
  font-size: 1.02rem;
}

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--border);
}
.footer-brand .brand-name {
  font-weight: 600;
  display: block;
}
.footer-brand p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 4px 0 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.footer-links a {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer-links a:hover { color: var(--ink); }
.footer-copy {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0;
  width: 100%;
  order: 3;
}

/* Responsive */
@media (min-width: 900px) {
  .hero { padding-top: 96px; }
}

/* Tablet widths can't hold the full name, both section links, the language
   toggle and both buttons: at 768px in Spanish that's ~45px too many, and
   the name was wrapping onto two lines to make room. The section links are
   the least needed — the page scrolls to both — so they go first. */
@media (max-width: 900px) {
  .nav-links { display: none; }
}

@media (max-width: 760px) {
  /* The phone bar is brand, language and menu. Log In and the free-trial
     button (My Quotes once signed in) live inside the menu, which leaves the
     full "Unlimited Quotes" name room in the bar. */
  .nav-links,
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-pill { gap: 8px; padding: 7px 7px 7px 12px; }
  .nav-actions { gap: 6px; }
  /* Scales down on the narrowest phones so the name stays on one line
     beside the language toggle and the menu, which now holds Log In and
     so must never be the thing that gets dropped. */
  .brand { white-space: nowrap; gap: 7px; font-size: clamp(0.8rem, 4.1vw, 0.95rem); }
  .lang-btn { padding: 5px 8px; }

  /* Hero rhythm on a phone: the more separate two things are, the bigger the
     gap — a button and its caption (~14px), the headline and its button
     (32px), and one shared size between blocks (~40px: bar to headline,
     caption to video). The desktop values left the video ~80px away,
     double everything else, so it read as unrelated to the copy above it.
     Measured to the visible text, and to the edge of the tilted cards behind
     the video, since that's where the eye sees each block start. */
  /* No bottom padding: the next section's own top padding is the break, so
     the video sits ~70px above "Create → Quote → …" instead of ~127px —
     clearly a new section, without tripling the gaps inside the hero. */
  .hero { padding-top: 56px; gap: 24px; padding-bottom: 0; }
  .hero-copy h1 { margin-bottom: 32px; }
  .trial-note,
  .final-cta .trial-note { margin-top: 10px; }
  section { padding: 64px 20px; }

  .section-head h2.flow-title {
    flex-wrap: nowrap;
    font-size: clamp(0.85rem, 5.1vw, 2rem);
  }
  .flow-arrow {
    margin: 0 0.28em;
  }
  .flow-arrow svg {
    width: 0.6em;
    height: 0.6em;
  }
}

@media (max-width: 480px) {
  .lang-toggle { order: -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .depth-card { animation: none; }
  .btn, .feature-card { transition: none; }
}