/* ============================================================
   TRIPPAPPS — style.css  v1
   Orange #f56437 · Teal #00897b · Amber #FFC857
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cream); color: #111; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --- Tokens --- */
:root {
  --orange:    #f56437;
  --orange-dk: #c9611a;
  --teal:      #00897b;
  --teal-dk:   #006b60;
  --amber:     #FFC857;
  --black:     #0d0d0d;
  --cream:     #F5F1EB;
  --cream-dk:  #EDE8DF;
  --gray-50:   #f7f7f7;
  --gray-100:  #efefef;
  --gray-200:  #e0e0e0;
  --gray-400:  #bbb;
  --gray-500:  #888;
  --gray-700:  #444;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;
}

/* --- Utility --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.c-orange { color: var(--orange); }
.c-teal   { color: var(--teal); }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: #fff;
  /* 5px teal→orange→amber gradient separator under the nav (matches the
     hero accent stripe) — sticks with the header so it never scrolls away.
     Replaces what used to be a per-page teal border-top on hero sections. */
  border-bottom: 5px solid var(--teal);
  border-image: linear-gradient(90deg, var(--teal), var(--orange) 55%, var(--amber)) 1;
  transition: box-shadow .2s;
}
.nav.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.nav__inner {
  display: flex; align-items: center; height: 80px; gap: 0;
}
.nav__brand { flex-shrink: 0; }
.nav__logo  { height: 41px; width: auto; display: block; }

.nav__links {
  display: flex; align-items: center; gap: 28px;
  margin-left: 53px;
  /* Guarantee breathing room before the Plan a Trip CTA even when the
     row is full (the CTA's margin-left:auto collapses once links fill
     the width). */
  margin-right: 40px;
}
.nav__links > a,
.nav__links .nav__item > a {
  font-size: .88rem; font-weight: 500; color: var(--gray-700);
  line-height: 1;
  position: relative;
  transition: color .15s;
}
/* Teal text + simple underline on hover, applied uniformly to nav text
   links + .nav__login (My Account, signed-out) + .nav__user-link--account
   (My Account, signed-in) so the hover treatment is consistent. */
.nav__links > a,
.nav__login,
.nav__user-link--account {
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.nav__links > a:hover,
.nav__links .nav__item:hover > a,
.nav__login:hover,
.nav__user-link--account:hover,
.nav__links > a.is-active,
.nav__login.is-active,
.nav__user-link--account.is-active {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--teal);
}

/* Try It CTA lives OUTSIDE .nav__links, between the links and the Log In
   button, so it sits on the right side of the nav. Drawer variant appears
   just before the Log In row in the mobile drawer column. */
a.nav__cta { color: #fff; }
a.nav__cta:hover { color: #fff; }
.nav__drawer a.nav__cta {
  border-bottom: none;
  padding: 10px 18px;
  align-self: flex-start;
  margin-top: 8px;
}

/* Plan a Trip CTA absorbs the auto-left so it (and the My Account link
   that follows) sit pinned to the right edge of the nav. */
.nav__cta { flex-shrink: 0; margin-left: auto; }
.nav__cta.btn--sm { padding: 5px 24px; }

/* "My Account" link — sits to the right of Plan a Trip. Both signed-in
   (.nav__user) and signed-out (.nav__login) renderings share the same
   visual; auth.js only one of them visible at a time. Vertical-centered
   in the 80px nav row to read as a primary nav item. */
.nav__user, .nav__login {
  margin-left: 24px;
  align-self: center;
}
.nav__login { flex-shrink: 0; }
/* `.btn`'s `display: inline-flex` outranks the UA `[hidden]` rule, so we
   need an explicit selector to actually hide the Log In CTA when auth.js
   marks it hidden for signed-in users. */
.nav__login[hidden] { display: none !important; }
/* Pre-paint hide: an inline <head> script on every page reads the
   Supabase auth-token from localStorage and toggles `html.is-signed-in`
   BEFORE the nav HTML renders. That lets us hide the "Log In" CTA from
   the very first paint instead of waiting for auth.js (which loads at
   end-of-body and produces a visible flash on long pages like /try/).
   The My Account widget still appears via JS injection — but appearing
   feels less jarring than the wrong CTA flickering off. */
html.is-signed-in .nav__login,
html.is-signed-in .nav__drawer-login { display: none !important; }

/* ─── Signed-in utility strip ───────────────────────────────────────────
   When auth.js detects a signed-in user it injects .nav__utility above
   .nav__inner with the user's name + My Account + Sign Out, pinned to
   the right. The strip is hidden when signed out (stays in the DOM).
   Net effect: nav grows by ~36px when signed in; the existing nav row
   shifts down to make room. */
.nav__utility {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.nav__utility[hidden] { display: none; }
.nav__utility-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 36px;
}
.nav__user {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* Inline-flex / flex outranks UA [hidden] so we need an explicit hide. */
.nav__user[hidden] { display: none !important; }
.nav__user-name {
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0;
}
.nav__user-sep {
  color: var(--gray-200);
  font-weight: 400;
}
.nav__user-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-700);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.nav__user-link:hover { color: var(--teal); }
.nav__user-icon { display: inline-block; }

/* My Account link (signed-out state) — auth.js re-adds .btn classes when
   signing out, so we override those to keep it as a plain text nav link
   matching .nav__links a styling. */
.nav__login.btn,
.nav__login.btn--outline,
.nav__login.btn--sm {
  background: transparent;
  border-color: transparent;
  color: var(--gray-700);
  padding: 0;
  font-weight: 500;
  font-size: .88rem;
  box-shadow: none;
  transform: none;
  position: relative;
}
.nav__login.btn:hover,
.nav__login.btn--outline:hover {
  background: transparent;
  border-color: transparent;
  color: var(--teal);
  box-shadow: none;
  transform: none;
}

/* Drawer (mobile) signed-in block — same name + My Account + Sign Out
   set as the desktop utility strip, but stacked as drawer rows. */
.nav__drawer-user {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 6px;
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
}
.nav__drawer-user[hidden] { display: none; }
.nav__drawer-link {
  background: none;
  border: none;
  padding: 10px 0;
  text-align: left;
  color: var(--gray-700);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.nav__drawer-link:hover { color: var(--orange); }

.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
.nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--black); border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__drawer {
  display: none; flex-direction: column;
  border-top: 1px solid var(--gray-200); background: #fff;
  padding: 8px 32px 24px;
}
.nav__drawer.open { display: flex; }
.nav__drawer a {
  padding: 13px 0; font-size: .95rem; font-weight: 500;
  color: var(--gray-700); border-bottom: 1px solid var(--gray-100);
}
.nav__drawer a:last-child { border-bottom: none; }
.nav__drawer .btn { margin-top: 16px; text-align: center; justify-content: center; }
.nav__drawer-label {
  padding: 12px 0 5px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-400); border-bottom: 1px solid var(--gray-100);
}
.nav__drawer-sub { padding-left: 16px !important; font-size: .88rem !important; color: var(--gray-500) !important; }

/* Drawer collapsible toggle (Apps row in mobile menu). Styled to read like
   the other top-level drawer links plus a caret that rotates open. */
.nav__drawer-toggle {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav__drawer-caret {
  display: inline-block;
  transition: transform .15s ease;
  font-size: .85em;
  color: var(--gray-500);
}
.nav__drawer-toggle[aria-expanded="true"] .nav__drawer-caret {
  transform: rotate(180deg);
}
.nav__drawer-subs { display: flex; flex-direction: column; }
.nav__drawer-subs[hidden] { display: none; }

/* ─── Nav dropdown (desktop) ──────────────────────────────────────────────── */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a {
  font-size: .88rem; font-weight: 500; color: var(--gray-700);
  transition: color .15s; display: flex; align-items: center; gap: 5px;
}
.nav__item > a:hover { color: var(--orange); }
.nav__item > a:hover .nav__caret { color: var(--orange); }
/* Prominent down chevron on the Apps dropdown.
   CSS border triangle — sharper and larger than the ▾ unicode glyph,
   flips to an up chevron on hover for affordance. */
.nav__caret {
  display: inline-block;
  width: 0; height: 0;
  font-size: 0;                  /* hide the unicode ▾ inside the span */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-top: 3px;
  transition: transform .18s;
}
.nav__item:hover .nav__caret { transform: rotate(-180deg); }
.nav__dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r);
  padding: 6px; padding-top: 16px; min-width: 172px;
  box-shadow: 0 8px 28px rgba(0,0,0,.1); z-index: 10;
  margin-top: 0;
}
/* Invisible bridge covers the gap so hover doesn't break */
.nav__dropdown-menu::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: transparent;
}
.nav__item:hover .nav__dropdown-menu { display: flex; flex-direction: column; }
.nav__dropdown-menu a {
  padding: 8px 12px; border-radius: 7px;
  color: var(--gray-700); font-size: .85rem; font-weight: 500;
  transition: background .1s, color .1s;
}
.nav__dropdown-menu a:hover { background: var(--gray-50); color: var(--orange); }
/* App-icon thumbnails on the per-app dropdown links (not "View All Apps") */
.nav__dropdown-menu a[href^="/apps/"]:not([href="/apps/"]) { display: flex; align-items: center; gap: 10px; }
.nav__dropdown-menu a[href^="/apps/"]:not([href="/apps/"])::before {
  content: ''; flex: none; width: 22px; height: 22px; border-radius: 6px;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.nav__dropdown-menu a[href="/apps/mototripp/"]::before { background-image: url(/images/icon-mototripp.png); }
.nav__dropdown-menu a[href="/apps/roadtripp/"]::before { background-image: url(/images/icon-roadtripp.png); }
.nav__dropdown-menu a[href="/apps/electripp/"]::before { background-image: url(/images/icon-electripp.png); }
.nav__dropdown-divider { height: 1px; background: var(--gray-200); margin: 4px 0; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: .88rem;
  padding: 11px 22px; border-radius: var(--r); border: 2px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn--lg { padding: 14px 30px; font-size: .95rem; border-radius: var(--r-lg); }
.btn--sm { padding: 7px 14px; font-size: .78rem; }

.btn--orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--orange:hover { background: var(--orange-dk); border-color: var(--orange-dk); }

.btn--teal   { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--teal:hover { background: var(--teal-dk); border-color: var(--teal-dk); }

.btn--black  { background: var(--black); color: #fff; border-color: var(--black); }
.btn--black:hover { background: #222; border-color: #222; }

.btn--outline { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn--outline:hover { background: var(--orange); color: #fff; }

.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--full { width: 100%; justify-content: center; }


/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px; padding: 4px 11px;
}
.badge--teal   { background: rgba(0,137,123,.12); color: var(--teal-dk); }
.badge--orange { background: rgba(237,125,50,.12); color: var(--orange-dk); }
.badge--amber  { background: var(--amber); color: #6a3c00; }
.badge--gray   { background: var(--gray-100); color: var(--gray-500); }

.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: pulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,137,123,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(0,137,123,.0); }
}


/* ============================================================
   SECTION WRAPPERS + HEADERS
   ============================================================ */
.section-white { padding: 48px 0 96px; background: var(--cream); }
.section-gray  { padding: 48px 0 96px; background: var(--cream-dk); }

/* ─── Promise band — UNUSED since 2026-04-18 (marketing messaging retired) ─ */
.section-promise {
  padding: 96px 0;
  background: linear-gradient(180deg, #fffaf3 0%, #fff4e6 100%);
  border-top: 1px solid rgba(237,125,50,.12);
  border-bottom: 1px solid rgba(237,125,50,.12);
}
.promise-head {
  text-align: center; max-width: 640px;
  margin: 0 auto 56px;
}
.promise-head .section-squiggle { justify-content: center; margin-bottom: 14px; }
.promise-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900; letter-spacing: -.025em;
  color: var(--black); margin-bottom: 14px;
}
.promise-head p {
  font-size: 1rem; color: var(--gray-700); line-height: 1.65;
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.promise-card {
  background: #fff;
  border: 1.5px solid rgba(237,125,50,.2);
  border-radius: 18px;
  padding: 32px 28px 28px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.promise-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: 0 16px 40px rgba(237,125,50,.12);
}
.promise-card__icon {
  font-size: 32px; line-height: 1;
  margin-bottom: 14px;
}
.promise-card h3 {
  font-size: 1.3rem; font-weight: 900; letter-spacing: -.015em;
  color: var(--black); margin-bottom: 10px;
}
.promise-card p {
  font-size: .92rem; color: var(--gray-700); line-height: 1.6;
}
.promise-footnote {
  text-align: center;
  font-size: .88rem; color: var(--gray-500); line-height: 1.6;
  max-width: 620px; margin: 0 auto;
}
.promise-footnote a {
  color: var(--orange); font-weight: 700;
  text-decoration: none;
}
.promise-footnote a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .promise-grid { grid-template-columns: 1fr; gap: 16px; }
  .promise-card { padding: 26px 24px; }
  .section-promise { padding: 64px 0; }
}
.section-dark  { padding: 48px 0 96px; background: var(--black); color: #fff; }

.section-eyebrow {
  font-size: .92rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::before {
  content: '✦'; font-size: .72rem; color: var(--teal);
}
.section-eyebrow--teal::before { color: var(--teal); }
.section-head .section-eyebrow { justify-content: center; }

.section-head { text-align: center; margin-bottom: 52px; }
.section-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.1; margin-bottom: 12px; color: var(--black);
}
.section-head p {
  font-size: 1rem; color: var(--gray-500); max-width: 480px; margin: 0 auto; line-height: 1.65;
}
.section-head--light h2 { color: #fff; }
.section-head--light p  { color: rgba(255,255,255,.6); }


/* ============================================================
   HERO — traditional two-column, white background
   ============================================================ */
.hero {
  padding: 96px 0 80px;
  min-height: 560px;
  /* Anchor near the image's bottom, but shifted ~240px below the hero bottom
     so the lower strip of road is cropped — keeps the road foreground in
     view while letting mountains/sky sit behind the headline. `cover` is
     used at ≥1920px so the 2× monitor isn't quilted on the sides; below
     that width the image stays at its natural 1920×892 (see the narrow-
     viewport rule below the hero block) so vertical overflow is always
     332px and the shift has plenty of headroom. */
  /* The leading linear-gradient is a flat ~30% black overlay layered over
     the photo to darken it; gradient layers fill the element regardless of
     background-size, so the narrow-viewport `background-size: auto` rule
     below only affects the image layer. */
  background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), #0d0d0d url('/images/home-hero-background.webp') center calc(100% + 240px) / cover no-repeat;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: relative; overflow: hidden;
  /* Stacking context so the button's overlay-blend dropshadow pseudo
     (z-index: -1) lands behind the button but above the hero photo,
     blending only with the photo and not escaping upward. */
  isolation: isolate;
}

/* Below the image's native 1920px width, drop `cover` and use the image at
   its natural size. `cover` would otherwise shrink the image to match the
   viewport width, eating into the 332px of vertical overflow we rely on
   for the 240px shift — and at intermediate widths (~1280–1550px) leave
   the #0d0d0d fallback exposed at the top. Natural-size means the image
   is always 1920×892 regardless of viewport, so the shift has consistent
   headroom and narrow viewports just see the centered middle slice of
   the photo. */
@media (max-width: 1919px) {
  .hero { background-size: auto; }
}

.hero__inner {
  position: relative;
  display: block;
}

/* Copy */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 22px;
}
.hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  animation: pulse 2s ease-in-out infinite; flex-shrink: 0;
}

.hero__h1 {
  font-size: clamp(1.45rem, 5vw, 4.25rem);
  font-weight: 900; line-height: 1.06; letter-spacing: -.03em;
  color: #fff; margin-bottom: 20px;
  white-space: nowrap;
  position: relative;
}

.hero__sub {
  font-size: 1.35rem; color: #ffffff; line-height: 1.65;
  max-width: 100%; margin-bottom: 32px;
  position: relative;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero__actions .btn--lg {
  font-size: 1.15rem;
  padding: 14px 72px;
}
.hero__promise {
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.65);
  margin-bottom: 0; letter-spacing: .01em;
  position: relative;
}

/* Photoshop-style "Overlay" blend-mode dropshadow on the white hero
   lettering. The trick: text-shadow can't be blended (it's part of text
   rendering, not a separate compositing layer), so we duplicate the text
   as a positioned ::before pseudo with `mix-blend-mode: overlay`. The
   real text sits above on a relatively-positioned <span>, hugging the
   pseudo so the shadow only blends with the photo behind, not with the
   text itself.
   The mix-blend-mode operates against the hero's painted background
   (the JPG), giving the same contrast-aware result as Photoshop's
   Overlay: dark areas of the photo darken further under the shadow,
   light areas screen back toward white. */
.hero__h1 > span,
.hero__sub > span,
.hero__promise > span {
  position: relative;
  z-index: 1;
}
.hero__h1::before,
.hero__sub::before,
.hero__promise::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  color: #000;
  filter: blur(6px);
  /* Even glow — no downward offset, just a soft dark halo all around */
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Extra darkening on the long sub paragraph — the overlay-blend halo
   reads fainter on smaller body text than on the headline, so we layer
   a regular dark text-shadow under the visible span as well. */
.hero__sub > span {
  /* Even dark glow — symmetric blur, no offset */
  text-shadow: 0 0 14px rgba(0,0,0,0.85), 0 0 28px rgba(0,0,0,0.7);
}

/* Drop-shadow on the hero CTA itself (button shape, not text). Same
   Photoshop-Overlay technique used on the lettering: a duplicate of
   the button's footprint sits behind it, blurred + offset, with
   mix-blend-mode: overlay so its halo blends with the hero photo
   rather than darkening into a flat patch. .hero gets isolation:
   isolate so this z-index:-1 pseudo doesn't escape past the photo. */
.hero__actions .btn--lg {
  position: relative;
}
.hero__actions .btn--lg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  filter: blur(10px);
  /* Even dark glow around the button — no offset */
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.hero__promise--dark {
  color: rgba(255,255,255,.55);
  margin-top: 18px; margin-bottom: 0;
}

.hero__proof {
  display: flex; align-items: center;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18);
}
.hero__proof-item {
  display: flex; flex-direction: column; padding-right: 28px;
}
.hero__proof-item strong {
  font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1;
}
.hero__proof-item span { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.hero__proof-divider { width: 1px; height: 32px; background: rgba(255,255,255,.18); margin-right: 28px; }

.phone-mockup {
  width: 264px;
  background: #111;
  border-radius: 48px;
  padding: 14px;
  box-shadow:
    0 0 0 1px #2a2a2a,
    0 0 0 3px #111,
    0 32px 80px rgba(0,0,0,.28),
    0 8px 24px rgba(0,0,0,.15);
  position: relative;
}
/* Side buttons */
.phone-mockup::before {
  content: '';
  position: absolute; right: -3px; top: 96px;
  width: 3px; height: 64px;
  background: #222; border-radius: 0 3px 3px 0;
  box-shadow: 0 80px 0 #222;
}

.phone-screen {
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  min-height: 480px;
  display: flex; flex-direction: column;
}

/* Notch bar */
.phone-bar {
  background: var(--black);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 8px;
}
.phone-bar__time { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.8); }
.phone-bar__icons { font-size: .55rem; color: rgba(255,255,255,.6); letter-spacing: 2px; }

/* App top bar */
.phone-appbar {
  background: var(--black);
  padding: 0 16px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.phone-appbar img { height: 20px; width: auto; }
.phone-appbar__badge {
  font-size: .55rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--teal);
  background: rgba(0,137,123,.15); border-radius: 99px;
  padding: 3px 8px;
}

/* Trip header */
.phone-trip {
  background: var(--black);
  padding: 12px 16px 16px;
}
.phone-trip__route {
  font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: 4px;
}
.phone-trip__meta {
  font-size: .68rem; color: rgba(255,255,255,.5);
}

/* Stop list */
.phone-stops {
  flex: 1; background: var(--cream);
  padding: 8px 0;
}
.phone-stop {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.phone-stop:last-child { border-bottom: none; }
.phone-stop__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.phone-stop__dot--teal   { background: var(--teal); }
.phone-stop__dot--orange { background: var(--orange); }
.phone-stop__dot--gray   { background: var(--gray-400); }
.phone-stop__label { font-size: .72rem; font-weight: 600; color: var(--black); flex: 1; }
.phone-stop__dist  { font-size: .66rem; color: var(--gray-500); }

/* Stats row */
.phone-stats {
  display: flex; background: #fff;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.phone-stat { flex: 1; text-align: center; padding: 10px 0; }
.phone-stat + .phone-stat { border-left: 1px solid var(--gray-100); }
.phone-stat__val { font-size: .82rem; font-weight: 800; color: var(--black); }
.phone-stat__lbl { font-size: .6rem; color: var(--gray-500); margin-top: 1px; }

/* Export button */
.phone-export {
  background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 700; text-align: center;
  padding: 12px; letter-spacing: .01em;
}

/* Home indicator */
.phone-home {
  background: #fff; padding: 8px 0;
  display: flex; justify-content: center; align-items: center;
}
.phone-home::after {
  content: ''; display: block;
  width: 100px; height: 4px; border-radius: 2px; background: #e0e0e0;
}


/* ============================================================
   ANNOUNCE BAR
   ============================================================ */
.announce {
  background: var(--amber); min-height: 48px;
  display: flex; align-items: center;
}
.announce__inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: 100%;
}
.announce__tag {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(0,0,0,.45);
  background: rgba(0,0,0,.08); border-radius: 99px;
  padding: 3px 10px; white-space: nowrap;
}
.announce__text { font-size: .9rem; font-weight: 500; color: var(--black); flex: 1; }
.announce__link {
  font-size: .88rem; font-weight: 700; color: var(--black);
  text-decoration: underline; white-space: nowrap;
}
.announce__link:hover { color: #6a3c00; }


/* ============================================================
   LOGO STRIP  (all 9 app names in a row)
   ============================================================ */
.logo-strip {
  padding: 36px 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.logo-strip__label {
  text-align: center; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-400); margin-bottom: 20px;
}
.logo-strip__logos {
  display: flex; justify-content: center; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.logo-strip__logos a { opacity: .5; transition: opacity .2s; }
.logo-strip__logos a:hover { opacity: 1; }
.logo-strip__logos img { height: 22px; width: auto; }


/* ============================================================
   APP GRID  3×3
   ============================================================ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.app-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--r-xl); padding: 28px 20px 24px; gap: 10px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s;
}
.app-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.app-card--featured {
  border-color: var(--teal);
  background: rgba(0,137,123,.06);
  box-shadow: 0 4px 20px rgba(0,137,123,.1);
}

/* App icon — rounded square */
.app-card__icon {
  width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0;
  background: var(--gray-200); border: 1px solid transparent;
  object-fit: cover; display: block;
}
.app-card__icon--teal { background: rgba(0,137,123,.15); }
.app-card--featured .app-card__icon { background: rgba(0,137,123,.12); }

/* App name */
.app-card__name {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; color: var(--black);
}

.app-card__desc {
  font-size: .82rem; color: var(--gray-700); line-height: 1.55; flex: 1;
}

.app-card__arrow {
  font-size: .88rem; color: var(--gray-400);
  transition: color .15s, transform .15s;
}
.app-card:hover .app-card__arrow { color: var(--orange); transform: translateX(3px); }


/* ============================================================
   APP GRID — dark panel
   ============================================================ */
.section-apps {
  padding: 96px 0;
  background: var(--black);
}
.section-apps .section-head h2 { color: #fff; }
.section-apps .section-head p  { color: rgba(255,255,255,.55); }
.section-apps .section-head .section-eyebrow { color: var(--amber); }
.section-apps .section-head .section-eyebrow::before { color: var(--amber); }

/* Three apps → one row, three equal columns */
.section-apps .app-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Each app item — vertical, centered, no box */
.section-apps .app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 36px 28px;
  box-shadow: none;
  transition: background .15s;
}
/* Vertical dividers between columns (not after the last) */
.section-apps .app-card:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.07);
}
.section-apps .app-card:hover {
  background: rgba(255,255,255,.04);
  box-shadow: none;
  transform: none;
}

.section-apps .app-card .app-card__icon {
  width: 84px; height: 84px;
  border-radius: 20px;
  margin: 0;
  background: transparent;
}

/* Logo image replaces text name */
.section-apps .app-card .app-card__logo {
  height: 24px; width: auto;
  margin: 0;
  display: block;
}

.section-apps .app-card__name {
  color: #fff;
}
.section-apps .app-card__desc {
  color: rgba(255,255,255,.5);
  margin: 0;
}
.section-apps .app-card__actions {
  display: flex; align-items: center; justify-content: center; margin-top: 4px;
}
.section-apps .app-card .btn--orange {
  padding: 4px 18px; font-size: .72rem; border-radius: 6px; gap: 6px;
}
.section-apps .app-card .btn--orange:hover {
  box-shadow: none; transform: none;
}

/* ============================================================
   HOMEPAGE — light app cards  (replaces the old dark .section-apps
   band that read as a false bottom). Each card: icon, logo, tagline,
   marketing copy, then the vehicle "fleet" line-up + one CTA. Sells
   "any vehicle, one planner" — replaced the old three mode cards.
   ============================================================ */
.home-apps { padding: 88px 0; background: var(--cream); }

/* Vehicle "mode" columns — used on the /roadtripp/ flagship page (the homepage
   itself uses .home-fleet below). Line-drawing icons replace the old square app
   icons; borderless 3-up columns → 1 column on mobile, with one shared CTA below
   (reuses .home-fleet__cta). */
.modes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 40px; margin-top: 44px; }
.mode { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Equalize the differently-proportioned line drawings: align them on a common
   baseline (flex-end) so the short EV doesn't float and the names line up. */
.mode__icon-wrap { display: flex; align-items: flex-end; min-height: 60px; margin-bottom: 18px; }
.mode__icon {
  display: block; height: auto; max-width: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .06));
}
.mode__name { font-size: 1.15rem; font-weight: 800; color: var(--black); margin: 0 0 14px; }
.mode__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; text-align: left; }
.mode__bullets li { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.45; color: var(--gray-700); }
.mode__bullets li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* Vehicle line drawings, baseline-aligned on a faint teal "road" line and sized
   to a common height so the wide pickup-and-trailer rig anchors the right end. */
.home-fleet {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(18px, 3.5vw, 44px);
  margin: 38px auto 0; max-width: 1040px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(0, 137, 123, .22);
}
/* Sized by each <img>'s own width/height attributes — every drawing was
   exported at the SAME 0.60x factor, so relative vehicle sizes and line
   weights are preserved (a motorcycle reads smaller than the trailer rig). */
.home-fleet__veh {
  display: block; height: auto; max-width: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .06));
}

.home-fleet__cta { text-align: center; margin-top: 36px; }

@media (max-width: 860px) {
  .home-apps { padding: 60px 0; }
  /* On phones the fleet wraps onto multiple lines (no horizontal scroll); drop
     the road line since it'd look clipped under a multi-row, centered layout. */
  .home-fleet {
    flex-wrap: wrap; justify-content: center;
    gap: 22px 26px; padding-bottom: 18px; border-bottom: none;
  }
  /* Let the wide trailer rig shrink to fit a narrow line if needed. */
  .home-fleet__veh { flex: 0 1 auto; }
}

/* ============================================================
   APPS PAGE — light intro + app picker  (/apps/, replaces the
   old dark band that read as a false bottom near the top)
   ============================================================ */
.apps-intro { background: var(--cream); padding: 64px 0 84px; }
.apps-intro__head { margin-bottom: 56px; }
.apps-intro__head h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 900; line-height: 1.12;
  letter-spacing: -.03em; margin-bottom: 0;
}
.apps-intro__points {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  padding: 0; margin: 22px 0 0;
  font-size: 1rem; font-weight: 600; color: var(--gray-700);
}
.apps-intro__points li { display: inline-flex; align-items: center; }
.apps-intro__points li:not(:last-child)::after {
  content: "\2022"; margin: 0 14px; color: var(--teal); font-weight: 700;
}

/* De-boxed app row — clean columns with hairline dividers, no cards/buttons */
.apps-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.apps-row__item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  padding: 12px 28px; text-decoration: none; color: inherit;
}
.apps-row__item:not(:last-child) { border-right: 1px solid var(--gray-200); }
.apps-row__icon { width: 80px; height: 80px; border-radius: 20px; display: block; }
.apps-row__logo { height: 26px; width: auto; display: block; opacity: .9; transition: opacity .2s; }
.apps-row__item:hover .apps-row__logo { opacity: 1; }
.apps-row__desc { font-size: .9rem; color: var(--gray-700); line-height: 1.6; margin: 0; max-width: 30ch; }

@media (max-width: 860px) {
  .apps-intro { padding: 48px 0 64px; }
  .apps-row { grid-template-columns: 1fr; gap: 8px; max-width: 420px; margin: 0 auto; }
  .apps-row__item { padding: 28px 20px; }
  .apps-row__item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--gray-200); }
}

/* ============================================================
   APPS PAGE — feature detail columns + Epic Trips curation
   ============================================================ */
.app-details { padding: 88px 0; background: var(--cream); }

.feat-grid { display: grid; gap: 32px; }
.feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feat-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feat-col h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; color: var(--black); }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.feat-list li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.55; color: var(--gray-700); }
.feat-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 800; }

.curation { padding: 88px 0; background: var(--cream-dk); }
.curation__col { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); padding: 30px 28px; }
.curation__col--curated  { border-color: rgba(245,100,55,.3); }
.curation__col--computed { border-color: rgba(0,137,123,.3); }
.curation__tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.curation__col--curated .curation__tag  { color: var(--orange); }
.curation__col--computed .curation__tag { color: var(--teal); }
.curation__cta { text-align: center; margin-top: 40px; }

@media (max-width: 860px) {
  .app-details, .curation { padding: 60px 0; }
  .feat-grid--3, .feat-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   SPLIT SECTIONS  (how it works / why teasers)
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.split--flip .split__copy  { order: 2; }
.split--flip .split__visual { order: 1; }

.split__copy h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 900; letter-spacing: -.022em; line-height: 1.15;
  color: var(--black); margin-bottom: 14px;
}
.split__copy > p { font-size: .97rem; color: var(--gray-700); line-height: 1.72; margin-bottom: 24px; }

/* Numbered steps inside split */
.split-steps { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.split-step  { display: flex; gap: 14px; align-items: flex-start; }
.split-step__num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal); color: #fff;
  font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.split-step strong { display: block; font-size: .92rem; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.split-step p { font-size: .85rem; color: var(--gray-700); line-height: 1.55; margin: 0; }

/* Why list */
.why-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.why-list__item { display: flex; gap: 14px; align-items: flex-start; }
.why-list__check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,137,123,.12); color: var(--teal);
  font-size: .9rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.why-list__icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; width: 28px; margin-top: 2px; }
.why-list__item strong { display: block; font-size: .92rem; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.why-list__item p { font-size: .85rem; color: var(--gray-700); line-height: 1.55; margin: 0; }

/* Itinerary card (how it works visual) */
.itin-card {
  background: var(--cream); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 5px 5px 0 rgba(0,0,0,.12);
}
.itin-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--gray-100);
}
.itin-row--active { background: rgba(0,137,123,.07); }
.itin-row__icon { font-size: .65rem; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; }
.itin-row__icon--orange { color: var(--orange); }
.itin-row__icon--gray   { color: var(--gray-400); }
.itin-row__title { font-size: .86rem; font-weight: 600; color: var(--black); }
.itin-row__sub   { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }
.itin-export {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; background: var(--orange);
  color: #fff; font-size: .86rem; font-weight: 700;
}

/* Compare table */
.compare-table {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 5px 5px 0 rgba(0,0,0,.12);
}
.compare-row {
  display: grid; grid-template-columns: 1fr 90px 90px;
  padding: 12px 20px; border-bottom: 1px solid var(--gray-100);
  font-size: .86rem; align-items: center; gap: 8px;
}
.compare-row:last-child { border-bottom: none; }
.compare-row--head {
  background: rgba(0,137,123,.08); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--teal);
}
.compare-row span:first-child { color: var(--teal); font-weight: 600; }
.compare-no      { color: var(--gray-400); text-align: center; font-size: 1.3rem; line-height: 1; }
.compare-yes     { color: var(--teal); font-weight: 700; text-align: center; font-size: 1.3rem; line-height: 1; }
.compare-partial { color: var(--gray-500); font-size: .8rem; text-align: center; }
.compare-yes__note { font-size: .8rem; font-weight: 600; }
.compare-col     { text-align: center; }
.compare-col--orange { color: var(--orange); font-weight: 700; }


/* ============================================================
   DARK EMAIL SIGNUP
   ============================================================ */
.signup-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}
.signup-block__copy h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 900; letter-spacing: -.025em; color: #fff; margin-bottom: 14px;
}
.signup-block__copy p { font-size: .97rem; color: rgba(255,255,255,.65); line-height: 1.72; margin-bottom: 28px; }

.signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form__input {
  flex: 1; min-width: 200px; padding: 13px 18px;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: #fff;
  font-family: inherit; font-size: .95rem; outline: none;
  transition: border-color .15s;
}
.signup-form__input::placeholder { color: rgba(255,255,255,.38); }
.signup-form__input:focus { border-color: rgba(255,255,255,.38); }
.signup-form__note { font-size: .75rem; color: rgba(255,255,255,.38); margin-top: 10px; }

/* App notify grid */
.app-notify-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-notify {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 16px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.app-notify--live { border-color: var(--teal); background: rgba(0,137,123,.1); }
.app-notify img { height: 36px; width: auto; object-fit: contain; }
.app-notify__name { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75); }
.app-notify__status {
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.4); background: rgba(255,255,255,.07);
  border-radius: 99px; padding: 2px 8px;
}
.app-notify__status--live { background: var(--teal); color: #fff; }


/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--black); color: rgba(255,255,255,.55); }
.footer__inner { display: flex; gap: 64px; padding-top: 64px; padding-bottom: 48px; }
.footer__brand { flex: 1; min-width: 0; }
.footer__logo  { height: 30px; width: auto; margin-bottom: 14px; opacity: .85; }
.footer__brand p { font-size: .88rem; line-height: 1.6; }
.footer__tagline { font-size: .78rem; color: rgba(255,255,255,.3); font-style: italic; margin-top: 6px; }
.footer__tagline span { color: var(--orange); }
.footer__tagline .outline { color: var(--teal); }

.footer__cols { display: flex; gap: 48px; flex-shrink: 0; }
.footer__col  { display: flex; flex-direction: column; gap: 10px; min-width: 110px; }
.footer__col-head {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.28); margin-bottom: 2px;
}
.footer__col a { font-size: .86rem; color: rgba(255,255,255,.5); transition: color .15s; }
.footer__col a:hover { color: var(--orange); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 20px 0; }
.footer__bottom-inner {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: rgba(255,255,255,.25); flex-wrap: wrap; gap: 6px;
}


/* ============================================================
   APP DETAIL PAGES
   ============================================================ */
.app-hero {
  background: linear-gradient(180deg, rgba(13,13,13,.8) 0%, rgba(13,13,13,.4) 100%), url('/images/asphaltbg.webp') center/cover no-repeat;
  color: #fff;
  padding: 56px 0 66px; position: relative; overflow: hidden;
}
.app-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--orange) 55%, var(--amber));
}
.app-hero__inner > * { position: relative; z-index: 1; }
.app-hero__inner {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: center;
}
.app-hero__logo   { height: 36px; width: auto; margin-bottom: 22px; }
.app-hero__h1     { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 16px; }
.app-hero__sub    { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.72; margin-bottom: 28px; }
.app-hero__bullets { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.app-hero__bullets li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.1rem; color: rgba(255,255,255,.82); line-height: 1.5; }
.app-hero__bullets li > span:first-child { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); margin-top: 8px; }
.app-hero__bullets-txt { flex: 1; }
.app-hero__bullets strong { color: #fff; font-weight: 700; }
.app-hero__visual { display: flex; align-items: center; justify-content: center; }
.app-hero__sample { width: 100%; max-width: 600px; height: auto; transform: translateX(65px); }
.app-screen-placeholder {
  width: 220px; aspect-ratio: 9/18; border-radius: 28px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font-size: .78rem; color: rgba(255,255,255,.28); font-weight: 500; line-height: 1.5;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.app-features { padding: 88px 0; background: var(--cream); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card {
  border-radius: var(--r-lg); padding: 30px 26px;
  border: 1px solid var(--gray-200); background: var(--gray-50);
}
.feature-card--orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.feature-card--black  { background: var(--black);  color: #fff; border-color: var(--black); }
.feature-card--teal   { background: var(--teal);   color: #fff; border-color: var(--teal); }
.feature-card__icon { font-size: 1.8rem; margin-bottom: 14px; line-height: 1; }
.feature-card__icon svg { width: 30px; height: 30px; }
.feature-card h3 { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.feature-card p  { font-size: .84rem; line-height: 1.65; }
.feature-card:not(.feature-card--orange):not(.feature-card--black):not(.feature-card--teal) p { color: var(--gray-700); }

.app-how { padding: 88px 0; background: var(--cream-dk); }
.app-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.app-how-step__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.app-how-step__num { font-size: clamp(3.4rem, 6vw, 4.8rem); font-weight: 900; color: var(--teal); line-height: 1; letter-spacing: -.05em; }
.app-how-step__word { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-500); }
.app-how-step h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 9px; color: var(--black); }
.app-how-step p  { font-size: .92rem; color: var(--gray-700); line-height: 1.65; }

.app-cta { background: var(--black); color: #fff; padding: 88px 0; text-align: center; }
.app-cta h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.025em; margin-bottom: 14px; }
.app-cta p  { font-size: .97rem; color: rgba(255,255,255,.65); max-width: 460px; margin: 0 auto 32px; line-height: 1.7; }
.app-cta__form {
  display: flex; gap: 10px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; justify-content: center;
}
.app-cta__input {
  flex: 1; min-width: 190px; padding: 12px 16px;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07); color: #fff;
  font-family: inherit; font-size: .9rem; outline: none; transition: border-color .15s;
}
.app-cta__input::placeholder { color: rgba(255,255,255,.38); }
.app-cta__input:focus { border-color: rgba(255,255,255,.4); }
.app-cta__note { font-size: .75rem; color: rgba(255,255,255,.38); margin-top: 10px; }

/* ---- Google Play store badge ---- */
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 13px;
  padding: 9px 20px 9px 16px; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.store-badge:hover { background: #1b1b1b; border-color: rgba(255,255,255,.55); }
.store-badge__glyph { width: 26px; height: 26px; flex: none; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.04; text-align: left; }
.store-badge__text small { font-size: .58rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.store-badge__text strong { font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
/* Coming-soon badge: rendered as a non-interactive <span>, reads as "not yet live". */
.store-badge--soon { cursor: default; opacity: .82; border-style: dashed; }
.store-badge--soon:hover { background: #000; border-color: rgba(255,255,255,.3); }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badges__soon-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--amber); align-self: center;
}

/* ---- Hero install lockup (icon + logo + badge) ---- */
.app-install-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  padding: 42px 36px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  backdrop-filter: blur(2px);
}
.app-install-card__icon {
  width: 96px; height: 96px; border-radius: 23px; margin-bottom: 22px;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
}
.app-install-card__logo { height: 30px; width: auto; margin-bottom: 12px; }
.app-install-card__line { font-size: .85rem; color: rgba(255,255,255,.58); margin-bottom: 22px; line-height: 1.5; }
.app-install-card__note { font-size: .72rem; color: rgba(255,255,255,.42); margin-top: 15px; letter-spacing: .02em; }

/* ---- Layered planning section ---- */
.plan-layers { padding: 56px 0 88px; background: var(--cream); }
.plan-layers__pref {
  max-width: 620px; margin: 0 auto 44px; text-align: center;
  font-size: 1.02rem; color: var(--gray-700); line-height: 1.7;
}
.plan-layers__pref strong { color: var(--black); font-weight: 800; }
.layer-stack { max-width: 680px; margin: 0 auto; }
.layer-row {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--gray-200);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-lg); padding: 22px 26px;
}
.layer-row--meal  { border-left-color: var(--teal); }
.layer-row--hotel { border-left-color: var(--amber); }
.layer-row__chip {
  font-size: 1.7rem; line-height: 1; flex: none;
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,100,55,.1);
}
.layer-row--meal  .layer-row__chip { background: rgba(0,137,123,.1); }
.layer-row--hotel .layer-row__chip { background: rgba(255,200,87,.18); }
.layer-row__body { flex: 1; }
.layer-row__body h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 5px; color: var(--black); }
.layer-row__body p  { font-size: .87rem; color: var(--gray-700); line-height: 1.6; }
.layer-row__tag {
  flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-700); background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 999px; padding: 5px 12px;
}
.layer-join { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--gray-400); margin: 10px 0; line-height: 1; }
.layer-result {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #fff; color: var(--black);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); padding: 22px 26px; text-align: center;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
}
.layer-result span { font-size: 1.5rem; line-height: 1; }
.layer-result svg { width: 27px; height: 27px; flex: none; color: var(--teal); }
@media (max-width: 560px) {
  .layer-row { flex-wrap: wrap; gap: 14px; padding: 18px 20px; }
  .layer-row__tag { order: 3; }
}

/* Horizontal build-up layout (wide containers) */
.layer-build { max-width: 1080px; margin: 0 auto; }
.layer-cards { display: flex; align-items: stretch; gap: 14px; }
.layer-card {
  flex: 1; background: #fff; border: 1px solid var(--gray-200);
  border-top: 4px solid var(--orange); border-radius: var(--r-lg);
  padding: 26px 26px 28px; display: flex; flex-direction: column;
}
.layer-card--meal  { border-top-color: var(--teal); }
.layer-card--hotel { border-top-color: var(--amber); }
.layer-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.layer-card__chip {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,100,55,.1); color: var(--orange);
}
.layer-card--meal  .layer-card__chip { background: rgba(0,137,123,.1); color: var(--teal); }
.layer-card--hotel .layer-card__chip { background: rgba(255,200,87,.2); color: #b9830a; }
.layer-card__chip svg { width: 26px; height: 26px; }
.layer-card__tag {
  flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-700); background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 999px; padding: 5px 12px;
}
.layer-card h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 9px; color: var(--black); }
.layer-card p  { font-size: .92rem; color: var(--gray-700); line-height: 1.62; }
.layer-plus { display: flex; align-items: center; flex: none; font-size: 2.4rem; font-weight: 800; color: var(--gray-400); }
.layer-equals { text-align: center; font-size: 2.4rem; font-weight: 800; color: var(--gray-400); margin: 16px 0; line-height: 1; }
@media (max-width: 820px) {
  .layer-cards { flex-direction: column; }
  .layer-plus { justify-content: center; padding: 4px 0; }
}

/* ============================================================
   EPIC TRIPS TEASER (homepage)
   ============================================================ */
.epic-teaser { padding: 88px 0; background: var(--black); color: #fff; }
.epic-teaser .section-head h2 { color: #fff; }
.epic-teaser .section-head p { color: rgba(255,255,255,.62); }
.epic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.epic-card {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.08);
}
.epic-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.epic-card:hover .epic-card__img { transform: scale(1.05); }
.epic-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12) 55%, transparent); }
.epic-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; z-index: 1; }
.epic-card__region { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); margin-bottom: 5px; }
.epic-card__name { font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.epic-teaser__cta { text-align: center; }
@media (max-width: 860px) { .epic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .epic-grid { grid-template-columns: 1fr; } }


/* ============================================================
   BULK-COPY / EDITORIAL SECTIONS (apps overview, etc.)
   ============================================================ */
.copy-section { padding: 76px 0; }
.copy-section--cream { background: var(--cream); }
.copy-block { max-width: 680px; }
.copy-block h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 22px; color: var(--black); }
.copy-block p { font-size: 1.05rem; color: var(--gray-700); line-height: 1.8; margin-bottom: 20px; }
.copy-block p:last-child { margin-bottom: 0; }
.copy-block strong { color: var(--black); font-weight: 700; }
.copy-block .section-squiggle { margin: 6px 0 16px; }
.copy-photo { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 4 / 5; display: block; }


/* ============================================================
   PREFERENCES SHOWCASE (app personalization)
   ============================================================ */
.pref-section { padding: 64px 0 80px; background: var(--cream-dk); }
.pref-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.pref-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pref-grid--2 { grid-template-columns: 1fr 1fr; }
.pref-card {
  background: var(--cream); border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); padding: 24px 24px 26px;
}
.pref-card__label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--teal); margin-bottom: 14px;
}
.pref-card--interactive { transition: border-color .15s, background .15s; }
.pref-card h3 { font-size: 1.04rem; font-weight: 800; color: var(--black); margin-bottom: 6px; letter-spacing: -.01em; }
.pref-card p  { font-size: .85rem; color: var(--gray-700); line-height: 1.55; }
.pref-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pref-list li { position: relative; padding-left: 20px; font-size: .94rem; color: var(--gray-700); line-height: 1.4; }
.pref-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

.pref-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--gray-200); }
.pref-stat:last-child { border-bottom: none; padding-bottom: 0; }
.pref-stat__k { font-size: .88rem; color: var(--gray-700); }
.pref-stat__v { font-size: 1.05rem; font-weight: 800; color: var(--black); }
.pref-stat__v span { font-size: .72rem; font-weight: 600; color: var(--gray-500); margin-left: 3px; }

.pref-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-chip {
  font-size: .82rem; font-weight: 600; color: var(--black);
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 7px 14px;
  cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, color .12s;
}
.pref-chip:hover { border-color: rgba(0,137,123,.5); }
.pref-chip--on, .pref-chip--on:hover { background: rgba(0,137,123,.12); border-color: rgba(0,137,123,.5); color: #006b61; }

.rating-pills { display: flex; gap: 8px; }
.rating-pill {
  flex: 1; text-align: center; font-size: .92rem; font-weight: 800;
  color: var(--gray-700); background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 11px 6px;
  cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, color .12s;
}
.rating-pill:hover { border-color: rgba(0,137,123,.5); }
.rating-pill--on, .rating-pill--on:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

.dining-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--cream); border: 1px solid var(--gray-200);
  border-radius: var(--r-xl); padding: 38px;
  transition: border-color .15s, background .15s;
}
.dining-feature h3 { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--black); margin-bottom: 12px; line-height: 1.15; }
.dining-feature p  { font-size: .95rem; color: var(--gray-700); line-height: 1.65; margin-bottom: 14px; }
.dining-feature .dining-hint { font-size: .78rem; color: var(--gray-500); margin-bottom: 0; }

.dm-grid { display: grid; grid-template-columns: 74px repeat(5, 1fr); gap: 7px; max-width: 410px; margin: 0 auto; width: 100%; }
.dm-head { font-size: .72rem; font-weight: 700; color: var(--gray-700); text-align: center; line-height: 1.12; align-self: end; padding-bottom: 6px; white-space: pre-line; }
.dm-rowlabel { font-size: .92rem; font-weight: 800; color: var(--black); display: flex; align-items: center; }
.dm-cell {
  aspect-ratio: 1 / .8; border-radius: 12px; border: 2px solid var(--gray-200);
  background: #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; line-height: 1;
  transition: background .12s, border-color .12s;
}
.dm-cell.is-on   { background: var(--teal);  border-color: var(--teal); }
.dm-cell.is-star { background: var(--amber); border-color: var(--amber); }
.dm-cell--na { background: transparent; border-color: transparent; cursor: default; }
.dm-cell:not(.is-on):not(.is-star):not(.dm-cell--na):hover { border-color: rgba(0,137,123,.5); background: rgba(0,137,123,.06); }
.dm-cell.is-on:hover   { background: var(--teal-dk); border-color: var(--teal-dk); }
.dm-cell.is-star:hover { background: #eeb53c; border-color: #eeb53c; }
.sample-tag { font-size: .72rem; font-style: italic; color: var(--gray-500); margin: 13px 0 0; }
@media (max-width: 860px) {
  .pref-grid--3, .pref-grid--2 { grid-template-columns: 1fr; }
  .dining-feature { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
  .dm-grid { grid-template-columns: 64px repeat(5, 1fr); gap: 6px; }
  .dm-head { font-size: .64rem; }
  .dm-rowlabel { font-size: .82rem; }
  .dm-cell { font-size: 1.05rem; }
}


/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */
.hiw-page { padding: 48px 0 80px; background: var(--cream); }
.hiw-list  { display: flex; flex-direction: column; border-radius: var(--r-xl); border: 1px solid var(--gray-200); overflow: hidden; }
.hiw-item  { display: grid; grid-template-columns: 88px 1fr; border-bottom: 1px solid var(--gray-200); }
.hiw-item:last-child { border-bottom: none; }
.hiw-item__num {
  background: var(--gray-50); display: flex; align-items: flex-start; justify-content: center;
  padding: 36px 0 0; font-size: 2rem; font-weight: 900; color: var(--orange);
  border-right: 1px solid var(--gray-200); letter-spacing: -.04em;
}
.hiw-item__body { padding: 36px 44px; }
.hiw-item__body h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: 8px; color: var(--black); }
.hiw-item__body p  { font-size: .92rem; color: var(--gray-700); line-height: 1.7; max-width: 580px; }

.hiw-apps-note { padding: 72px 0; background: var(--cream-dk); }
.hiw-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hiw-note-card { background: var(--cream); border: 1px solid var(--gray-200); border-top: 3px solid var(--orange); border-radius: var(--r-lg); padding: 26px; }
.hiw-note-card:nth-child(2) { border-top-color: var(--teal); }
.hiw-note-card:nth-child(3) { border-top-color: var(--amber); }
.hiw-note-card__tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); margin-bottom: 6px; }
.hiw-note-card h3 { font-size: .95rem; font-weight: 800; color: var(--black); margin-bottom: 6px; }
.hiw-note-card p  { font-size: .84rem; color: var(--gray-700); line-height: 1.6; }


/* ============================================================
   WHY TRIPPAPPS PAGE
   ============================================================ */
.why-page { padding: 48px 0 80px; background: var(--cream); }
.why-reasons { display: flex; flex-direction: column; }
.why-reason {
  display: grid; grid-template-columns: 72px 1fr; gap: 28px; align-items: start;
  padding: 48px 0; border-bottom: 1px solid var(--gray-200);
}
.why-reason:last-child { border-bottom: none; }
.why-reason__num { font-size: 2.6rem; font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -.04em; padding-top: 4px; }
.why-reason__body h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: 10px; color: var(--black); }
.why-reason__body p  { font-size: .95rem; color: var(--gray-700); line-height: 1.75; max-width: 620px; }

.why-compare { padding: 80px 0; background: var(--black); color: #fff; }
.why-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
.compare-box { border-radius: var(--r-lg); padding: 32px; }
.compare-box--dim { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.compare-box--orange { background: var(--orange); }
.compare-box h3 { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; opacity: .6; }
.compare-box ul { display: flex; flex-direction: column; gap: 11px; }
.compare-box li { font-size: .9rem; padding-left: 20px; position: relative; line-height: 1.4; }
.compare-box li::before { position: absolute; left: 0; font-weight: 700; }
.compare-box--dim li   { color: rgba(255,255,255,.5); }
.compare-box--dim li::before   { content: '—'; color: rgba(255,255,255,.2); }
.compare-box--orange li { color: #fff; }
.compare-box--orange li::before { content: '✓'; color: rgba(255,255,255,.85); }


/* ============================================================
   SQUIGGLES + CREATIVE UTILITIES
   ============================================================ */

/* SVG squiggle above section headlines */
.section-squiggle {
  display: flex; justify-content: center; margin-bottom: 14px;
}
.section-squiggle--left { justify-content: flex-start; }

/* Outline text (headline accent) */
.c-outline-orange {
  -webkit-text-stroke: 3px var(--orange);
  color: transparent;
}
.c-outline-teal {
  -webkit-text-stroke: 3px var(--teal);
  color: transparent;
}

/* Flat (no-blur) shadow helpers */
.flat-shadow-orange { box-shadow: 5px 5px 0 var(--orange-dk); }
.flat-shadow-teal   { box-shadow: 5px 5px 0 var(--teal-dk); }

/* Feature cards — accent top border on plain cards */
.feature-card:not(.feature-card--orange):not(.feature-card--black):not(.feature-card--teal) {
  border-top: 3px solid var(--orange);
}
.feature-card:not(.feature-card--orange):not(.feature-card--black):not(.feature-card--teal):nth-child(even) {
  border-top-color: var(--teal);
}

/* App cards — flat shadow on hover (light sections only) */
.app-card:hover {
  box-shadow: 5px 5px 0 var(--orange-dk);
  transform: translate(-2px, -2px);
}
.app-card--featured:hover {
  box-shadow: 5px 5px 0 var(--teal-dk) !important;
}
/* Dark section overrides the above */
.section-apps .app-card:hover,
.section-apps .app-card--featured:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Hero eyebrow — teal dot */
.hero__eyebrow { color: var(--gray-700); }
.hero__eyebrow-dot { background: var(--teal); }


/* ============================================================
   TEAL ACCENTS
   ============================================================ */

/* Section eyebrow teal variant */
.section-eyebrow--teal { color: var(--teal); }

/* Hero proof stat numbers → teal */
.hero__proof-item strong { color: var(--teal); }

/* Footer link hover → teal (pops on dark bg) */
.footer__col a:hover { color: var(--teal); }

/* Nav dropdown app-link hover → teal */
.nav__dropdown-menu a:hover { background: rgba(0,137,123,.06); color: var(--teal); }

/* Featured app card arrow → teal */
.app-card--featured .app-card__arrow { color: rgba(0,137,123,.35); }
.app-card--featured:hover .app-card__arrow,
.section-apps .app-card--featured:hover .app-card__arrow { color: var(--teal); }


/* Itinerary card teal icon (origin dot) */
.itin-row__icon--teal { color: var(--teal); }

/* How It Works page — even step numbers teal */
.hiw-item:nth-child(even) .hiw-item__num { color: var(--teal); }

/* Itinerary export row — teal variant */
.itin-export--teal { background: var(--teal); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  /* Nav */
  .nav__links, .nav__cta, .nav__login, .nav__user { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero { padding: 100px 0 88px; }
  /* Allow the headline to wrap below desktop so it can't clip (the nbsp's in
     the markup control where it breaks). Without this the 641–960px band keeps
     white-space:nowrap and the last word is cut off by .hero's overflow:hidden. */
  .hero__h1 { white-space: normal; }

  /* RoadTripp mode columns */
  .modes-row { grid-template-columns: 1fr; gap: 34px; max-width: 360px; margin-left: auto; margin-right: auto; }

  /* App grid */
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .section-apps { padding: 72px 0; }
  .section-apps .app-grid { grid-template-columns: 1fr; }
  /* Stacked: dividers run horizontally between rows, not vertically */
  .section-apps .app-card:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .section-apps .app-card .app-card__icon { width: 76px; height: 76px; }

  /* Splits */
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__copy  { order: 1; }
  .split--flip .split__visual { order: 2; }

  /* Signup */
  .signup-block { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .footer__inner { flex-direction: column; gap: 40px; }
  .footer__cols  { gap: 28px; }
  .footer__bottom-inner { flex-direction: column; }

  /* App pages */
  .app-hero__inner { grid-template-columns: 1fr; }
  .app-hero__visual { margin-top: 36px; }
  .app-hero__sample { transform: none; }
  .app-install-card { max-width: 100%; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .app-how-steps { grid-template-columns: 1fr 1fr; }

  /* How-it-works page */
  .hiw-note-grid { grid-template-columns: 1fr 1fr; }

  /* Why page */
  .why-compare-grid { grid-template-columns: 1fr; }

  /* Announce */
  .announce__inner { justify-content: center; text-align: center; }
  .announce__text { flex: none; }

  /* Logo strip */
  .logo-strip__logos { gap: 18px; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section-white, .section-gray, .section-dark { padding: 64px 0; }

  .hero {
    padding: 60px 0 52px;
  }
  .hero__h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
    /* Wrap is intended on mobile; non-breaking spaces in the markup
       force it to break after "and" rather than after "live". */
    white-space: normal;
  }
  .hero__sub { font-size: 1rem; line-height: 1.55; }
  .hero__proof { flex-wrap: wrap; gap: 14px; }
  .hero__proof-divider { display: none; }
  .hero__proof-item { padding-right: 0; }

  .app-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .app-card { padding: 22px 14px 18px; }

  .features-grid { grid-template-columns: 1fr; }
  .app-how-steps { grid-template-columns: 1fr; }
  .hiw-note-grid { grid-template-columns: 1fr; }

  .hiw-item { grid-template-columns: 60px 1fr; }
  .hiw-item__num { font-size: 1.5rem; padding: 24px 0 0; }
  .hiw-item__body { padding: 24px 20px; }

  .why-reason { grid-template-columns: 1fr; gap: 6px; }
  .why-reason__num { font-size: 2rem; }

  .footer__cols { flex-direction: column; gap: 20px; }

  .logo-strip__logos img { height: 18px; }
  .logo-strip__logos { gap: 14px; }

  .app-notify-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* Compare table: shrink the two value columns + padding so the checkmark
     columns don't get clipped by .compare-table's overflow:hidden on phones. */
  .compare-row { grid-template-columns: 1fr 48px 48px; padding: 11px 12px; gap: 6px; font-size: .8rem; }
  .compare-row--head { font-size: .62rem; }
  .compare-no, .compare-yes { font-size: 1.05rem; }

  /* The hero CTA padding rule (.hero__actions .btn--lg) isn't scoped to .hero,
     so it also gives the app-hero (e.g. /roadtripp/) an over-wide button on
     phones — rein it back in. */
  .app-hero .btn--lg { padding-left: 30px; padding-right: 30px; }
}