/* ── FuelHop Landing Page ───────────────────────────────────────────────── */

:root {
  --green:       #79A02E;
  --green-dark:  #6B8E23;
  --cream:       #F7F6F1;
  --black:       #1A1A1A;
  --text:        #282828;
  --text-light:  #666666;
  --border:      #E0DED6;
  --white:       #ffffff;
  --font:        'Inter', sans-serif;
  --mono:        'DM Mono', monospace;
  --pill-ratio:  186.11 / 45.47;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.accent-green { color: var(--green); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Pill buttons (shared) ─────────────────────────────────────────────── */
.pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  aspect-ratio: var(--pill-ratio);
  text-decoration: none;
  transition: opacity 0.15s;
}
.pill-btn:hover { opacity: 0.9; }
.pill-btn-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.pill-btn-label {
  position: relative;
  z-index: 1;
  padding-left: 9%;
  padding-right: 30%;
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill-btn-label--light { color: var(--white); }

.pill-btn--top    { width: 180px; }
.pill-btn--top .pill-btn-label { font-size: 14px; }
.pill-btn--bottom { width: 200px; }
.pill-btn--bottom .pill-btn-label { font-size: 13px; }

/* ================= HERO ================= */
.hero {
  position: relative;
  background: url('FH_Header2.jpg') center / cover no-repeat;
  min-height: 620px;
  display: flex;
  align-items: stretch;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 65%);
  z-index: 0;
}

/* The inner column is now the positioning anchor for BOTH the text block
   and the phone mockup, so they move together and stay lined up with
   each other no matter how wide the browser window is. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically centres the heading+button group */
  align-items: flex-start;
}

/* Logo sits on its own, pinned near the top of the hero, independent of
   the centred heading/button group below it. */
.hero-logo {
  position: absolute;
  top: 40px;
  left: 72px;
  height: 42px;
  width: auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 460px;
  margin-left: 70px;
}
.hero-heading {
  font-size: 42px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Bottom-anchored so the phone's base lines up with the bottom edge of
   the hero photo, rather than floating at an arbitrary vertical spot. */
.hero-phone {
  position: absolute;
  bottom: 0;
  right: 200px;
  width: 320px;
  z-index: 1;
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 340px; }
  .hero-inner { padding: 32px 24px; justify-content: flex-start; }
  .hero-logo { position: static; height: 30px; margin-bottom: 20px; }
  .hero-heading { font-size: 32px; line-height: 1.15; }
  .hero-content { max-width: 100%; margin-left: 0; }
  .hero-phone {
    width: 220px;
    left: 50%;
    right: auto;
    bottom: -20px;
    transform: translateX(-50%);
  }
}

/* ================= DATA TRUST ================= */
.data-trust {
  padding: 88px 32px;
}
.data-trust-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.data-trust-text { flex: 1; max-width: 640px; }
.data-trust-heading {
  font-size: 52px;
  font-weight: 800;
  line-height: 54px;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.data-trust-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
}
.data-trust-payoff { font-weight: 600; margin-bottom: 0; }
.data-trust-mark {
  height: 216px;   /* matches the 4-line heading: 4 x 54px line-height */
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .data-trust { padding: 56px 24px; }
  .data-trust-inner { flex-direction: column; gap: 24px; }
  .data-trust-heading { font-size: 28px; line-height: 1.2; }
  .data-trust-mark { width: 72px; height: auto; align-self: flex-end; margin-top: -100px; opacity: 0.7; }
}

/* ================= AVAILABILITY ================= */
/* .availability stays full-bleed cream (so wide monitors get cream
   gutters, not white ones — same pattern as the other sections).
   .availability-row is the part that's actually capped in width, so
   the photo can't just keep growing forever on a big screen. Inside
   that capped row, the text keeps its original vertical padding
   (which is what sets the block's height), and the photo stretches
   to match that height via align-items:stretch + object-fit:cover. */
.availability {
  background: var(--cream);
}
.availability-row {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.availability-text {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  padding: 88px 40px 88px 72px;
  text-align: left;
}
.availability-heading {
  font-size: 42px;
  font-weight: 800;
  line-height: 44px;
  margin-bottom: 20px;
}
.availability-sub {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 40px;
}
.availability-sub a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.availability-cards {
  display: flex;
  justify-content: flex-start;
  gap: 32px;
}
.availability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s;
}
.availability-card:hover { transform: translateY(-2px); }
.availability-card img {
  width: 120px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.availability-photo {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 800px) {
  .availability-row { flex-direction: column; max-width: 100%; }
  .availability-text { max-width: 100%; padding: 56px 24px; text-align: center; }
  .availability-heading { font-size: 24px; line-height: 1.25; }
  .availability-cards { justify-content: center; gap: 20px; }
  .availability-card img { width: 100px; }
  .availability-photo { height: 220px; }
}

/* ================= ROUTEHOP ================= */
.routehop { padding: 96px 32px 0; overflow: hidden; }
.routehop-intro {
  text-align: left;
  margin-bottom: 8px;
  margin-left: 168px; /* + the section's own 32px padding ≈ 200px from the screen edge */
}
.routehop-eyebrow { font-size: 44px; font-weight: 700; margin-bottom: 4px; }
.routehop-wordmark {
  width: 330px;   /* 220px + 50% */
  height: auto;
  margin: 0;
}

/* Breaks out of .routehop's own 32px side padding and stretches to the
   full width of the viewport, capped at 1920px and re-centred if the
   screen is ever wider than that. */
.routehop-road-wrap {
  width: 100vw;
  max-width: 1920px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.routehop-road {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.routehop-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 225px 0 96px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.routehop-text { flex: 1; max-width: 480px; margin-left: 80px; }
.routehop-heading {
  font-size: 42px;
  font-weight: 800;
  line-height: 44px;
  margin-bottom: 20px;
}
.routehop-text p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.routehop-price { font-weight: 700; margin-bottom: 28px; }

.routehop-screen {
  width: 300px;
  flex-shrink: 0;
  border-radius: 16px;
  position: relative;
  left: -150px;
}

@media (max-width: 900px) {
  .routehop { padding: 64px 24px 0; }
  .routehop-intro { text-align: center; margin-left: 0; }
  .routehop-eyebrow { font-size: 24px; }
  .routehop-wordmark { width: 200px; }
  .routehop-inner { flex-direction: column-reverse; align-items: center; text-align: center; padding: 32px 0 64px; }
  .routehop-text { max-width: 100%; margin-left: 0; }
  .routehop-heading { font-size: 26px; line-height: 1.2; }
  .routehop-price { margin-bottom: 20px; }
  .routehop-screen { width: 240px; left: 0; }
}

/* ================= CLOSER ================= */
.closer { padding: 122px 32px; background: var(--cream); } /* 72px + 50px added top & bottom */
.closer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.closer-logo-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}
.closer-logo { height: 66px; width: auto; } /* 132px reduced by 50% */
.closer-quote {
  font-size: 42px;
  font-weight: 800;
  line-height: 44px;
  text-align: left;
  max-width: 480px;
  margin-left: -70px;
}

@media (max-width: 800px) {
  .closer { padding: 98px 24px; } /* 48px + 50px added top & bottom */
  .closer-inner { flex-direction: column; text-align: center; gap: 24px; }
  .closer-logo { height: 64px; }
  .closer-quote { text-align: center; font-size: 22px; line-height: 1.3; max-width: 100%; margin-left: 0; }
}

/* ================= FOOTER BAR ================= */
.site-footer {
  background: var(--green);
  color: var(--white);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.site-footer a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 500px) {
  .site-footer { flex-direction: column; gap: 6px; text-align: center; }
}