/* ============================================================
   WithEase — marketing site
   Shares the "Kiwi" brand system with the app (App Concept Build/style.css):
   forest green = structure & trust, leaf green = the single action colour,
   mint = soft background wash. Same tokens kept here so the marketing site
   and the app never visually drift apart.
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --forest:         #2E4A44;
  --forest-ink:     #26403A;
  --forest-tint:    #E7EFE7;
  --forest-mid:       #3B5A53; /* Sign in's solid-fill resting state, header pill only */
  --forest-mid-hover: #456660;

  --leaf:           #6FAE3F;
  --leaf-strong:    #5E9A32;
  --leaf-hover:     #538A2C;
  --leaf-ink:       #3B6115;
  --leaf-tint:      #E2F0D6;

  /* Accent-button fill only (Create account, drawer/hero CTAs) — a
     barely-there gradient. Was a pale lime (#ACD654->#A4D250); moved back
     to the site's own --leaf/--leaf-strong as the gradient stops ("option
     B" from the accent-green-variations.html comparison) since the lime
     read too far off-brand and gave weaker contrast against the white
     button label than a proper green does. Kept as its own token pair
     rather than using --leaf/--leaf-strong directly everywhere, since
     those are still also used standalone (checkmarks, icon strokes)
     where a gradient doesn't apply. */
  --btn-accent-from:       var(--leaf);
  --btn-accent-to:         var(--leaf-strong);
  --btn-accent-from-hover: #7DBB52;
  --btn-accent-to-hover:   var(--leaf);
  --btn-accent-gradient:       linear-gradient(135deg, var(--btn-accent-from), var(--btn-accent-to));
  --btn-accent-gradient-hover: linear-gradient(135deg, var(--btn-accent-from-hover), var(--btn-accent-to-hover));

  /* Subtle diagonal lift for the hero/header's dark green — replaces the
     flat --forest fill on .hero/.site-header-bar/.site-header-spacer.
     --forest itself is untouched and still used as the solid fallback
     and everywhere else that needs a flat colour (hero-card's scrim,
     text colours, etc). */
  --hero-gradient: linear-gradient(135deg, #3A5B53 0%, #29423C 70%);

  --mint:           #F3F8EC;
  --surface:        #FFFFFF;
  --border:         #DDE7D5;
  --border-strong:  #C6D4BC;

  --text:           #26403A;
  --text-secondary: #3D5249;
  --text-muted:     #5E6E62;

  /* ---- Shape & radius ---- */
  --radius-card:  16px;
  --radius-input: 12px;
  --radius-pill:  999px;
  --radius-sm:    10px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(38,64,58,0.04), 0 4px 12px rgba(38,64,58,0.05);
  --shadow-pop:  0 8px 24px rgba(38,64,58,0.12);
  /* Colour-neutral (black, not forest-tinted) + a light hairline ring —
     reads against light AND dark/same-colour backgrounds alike, unlike
     --shadow-pop. Used by the nav pill in both its states: desktop's
     scroll-triggered .pinned, and mobile's always-on pill. */
  --shadow-pill: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.28);
  /* Same idea as --shadow-pill (colour-neutral ring + drop shadow) but
     roughly doubled, for the hero card specifically — it's a much larger
     surface sitting on a same-colour-family section background, so it
     needs a more pronounced lift than the small nav pill does to read as
     a distinct, elevated surface rather than blending in. */
  --shadow-hero: 0 0 0 1.5px rgba(255,255,255,0.22), 0 16px 40px rgba(0,0,0,0.42);

  /* ---- Layout ---- */
  --header-h:  69px; /* measured: padding:10px 0 + content + 1px border */
  --header-h-pill:     60px;
  --header-pill-inset: 16px;
  --header-pill-top:   12px;
  /* The larger of the two states' occupied bands — used anywhere content
     needs guaranteed clearance from the header regardless of which
     visual state it's in (the spacer, scroll-padding-top). Now that the
     flush bar (69px) is shorter than the pill's own occupied band
     (12px top + 60px tall = 72px), --header-h alone is no longer enough
     on its own — this stays correct automatically if either value ever
     changes again, no need to hand-recompute which one is bigger. */
  --header-clearance: max(var(--header-h), calc(var(--header-pill-top) + var(--header-h-pill)));
  --page-max:  1160px;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: var(--header-clearance);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: none;
  background-color: var(--btn-accent-to); /* fallback for browsers/contexts without gradient support */
  background-image: var(--btn-accent-gradient);
  color: #fff;
  cursor: pointer;
  transition: background-image 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:hover { background-image: var(--btn-accent-gradient-hover); }
.btn:active { transform: scale(0.98); }

.btn.ghost {
  background: transparent;
  color: var(--text);
}
.btn.ghost:hover { background: var(--forest-tint); }

/* ============================================================
   Site header
   ============================================================ */
/* Header is 3 layers, the same shape MBC's own pill nav uses (just the
   opposite transform direction): .site-header is the fixed-position shell
   only; .site-header-bar is the visual shape (background/height/radius/
   shadow) that actually animates into a pill on scroll; .wrap stays the
   content row, always capped at --page-max, so the logo/links/buttons
   never redistribute as the bar narrows underneath them. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* No background here on purpose — .site-header-bar alone paints the
     visible shape. It narrows/rounds when .pinned; this shell doesn't,
     so giving the shell its own fill created a same-colour square "flap"
     on either side of the pill at wide viewports, flattening it back
     into what looked like a plain full-width bar. */
  transition: top .3s cubic-bezier(.2,.7,.3,1),
              left .3s cubic-bezier(.2,.7,.3,1),
              right .3s cubic-bezier(.2,.7,.3,1);
}

/* .hero, .site-header-bar and .site-header-spacer share this one gradient
   declaration (not three separate copies) specifically so they read as
   one continuous sweep instead of each restarting the diagonal at its
   own top-left corner. background-attachment:fixed is what makes that
   work: a fixed-attachment background paints against the viewport itself
   (like a wallpaper) rather than each element's own box, so every
   element using the identical declaration is just a window onto the
   same underlying image — wherever it sits on screen, it shows the
   correctly-aligned slice. .site-header-bar is already inside a
   position:fixed shell, so this also keeps it aligned with .hero as the
   page scrolls beneath it. */
.hero,
.site-header-bar,
.site-header-spacer {
  background-color: var(--forest);
  background-image: var(--hero-gradient);
  background-attachment: fixed;
}

.site-header-bar {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  padding: 10px 0;
  /* A crisp 1px hairline, not a blurred shadow — this sits right where
     the bar meets the hero section beneath it, both the same forest
     green, so a soft shadow would just blend in the same way the shadow
     on .pinned had to be fixed for. A sharp line of a lighter tone reads
     clearly regardless of what colour is on either side of it. */
  border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: max-width .3s ease, border-radius .3s ease, padding .3s ease;
}

/* Removed from normal document flow now that .site-header is fixed — this
   reserves the space it would otherwise occupy. Uses --header-clearance
   (the larger of the two states' occupied bands), not --header-h alone —
   see that variable's own comment for why. That means it's ~3px taller
   than the flush bar's own actual height; background matches the header
   so that excess reads as a continuation of it, not a gap of page-white
   underneath. */
.site-header-spacer {
  height: var(--header-clearance);
}

.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 861px) {
  /* Grid, not flex, and identical in both pinned and flush states — this
     is what makes the logo/nav/actions drift smoothly during the scroll
     transition instead of snapping. Grid centres the nav dead-centre
     regardless of the logo/actions columns having different widths
     (flex space-between only centres a middle item when both outer items
     are equal width). Keeping max-width:none/padding:25px constant across
     both states (rather than swapping to page-max/28px when pinned) means
     .wrap never itself makes a discontinuous jump — the visual narrowing
     comes entirely from .site-header-bar's own max-width transition
     (100% -> --page-max, already transitioned below), which recalculates
     the grid's 1fr columns every frame as it animates, so the logo and
     buttons glide inward with it rather than teleporting to a new spot
     the instant .pinned toggles. */
  .site-header .wrap {
    max-width: none;
    padding: 0 25px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header .wrap .brand { justify-self: start; }
  .site-header .wrap .site-nav { justify-self: center; }
  .site-header .wrap .site-header-actions { justify-self: end; }

  .site-header.pinned {
    top: var(--header-pill-top);
    left: var(--header-pill-inset);
    right: var(--header-pill-inset);
  }
  .site-header.pinned .site-header-bar {
    height: var(--header-h-pill);
    padding: 0;
    border-bottom: none;
    max-width: var(--page-max);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pill);
  }
  .site-header.pinned .brand img {
    height: 26px;
  }
}

.site-header .brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header .brand img {
  height: 34px;
  width: auto;
  display: block;
  transition: height .3s ease;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-nav a {
  position: relative;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  transition: color 120ms ease;
}
.site-nav a:hover { color: #fff; }

/* Hover cue is a thin accent-green underline sweeping in under the label
   (::after, sized to the text's own padding box) instead of a background
   fill — ties the hover state to the same accent colour used on the
   Create account button rather than a generic translucent-white wash. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--btn-accent-to);
  transform: scaleX(0);
  transition: transform 150ms ease;
}
.site-nav a:hover::after { transform: scaleX(1); }

/* Subtle divider between links, same technique as MBC's own nav —
   a short line in the gap before each link (skipping the first), not a
   border on the link itself, so it doesn't sit against/interfere with
   the hover underline. Offset re-tuned to sit centred in the wider gap
   above (was -2px for a 4px gap, now -6px for a 10px gap). */
.site-nav a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.25);
}

/* Sign in + Create account read as one split pill. Create account stays
   a full, normal pill (border-radius: var(--radius-pill) on both sides,
   via the base .btn rule — no override here) — the seam is gapless
   because the overlap below is set to Create account's own actual
   rendered corner radius (measured: 48px tall buttons -> 24px radius).
   Overlap == radius is what makes this exact rather than approximate:
   at the very top/bottom of the corner, Create account's rounded fill
   normally recedes by exactly its own radius before reaching the seam,
   so shifting the whole button left by that same amount brings its
   fill back flush with the seam at every height — its convex curve
   ends up bulging slightly onto Sign in's flat corner instead of
   leaving a gap there. Sign in's own extra right padding below exists
   so its label keeps clear of that bulge. */
.header-cta { display: flex; align-items: stretch; }

.site-header-actions .btn.ghost {
  color: var(--mint);
  background: var(--forest-mid);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding-left: 63px;
  padding-right: 62px;
}
.site-header-actions .btn:not(.ghost) {
  margin-left: -23px;
}
.site-header-actions .btn.ghost:hover { background: var(--forest-mid-hover); }

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Same chip shape as .mobile-nav-toggle (below) — mobile-only shortcut
   straight to login, sitting beside the hamburger rather than inside it,
   since it's a different action (go to the app) not a nav item. */
.account-icon-link {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: none;
  /* Same off-white green wash .btn.ghost uses on hover, reused here as
     the resting fill — these are icon-only chips, not text buttons, so
     they need a fill to read as tappable rather than a hover-only cue. */
  background: var(--forest-tint);
  color: var(--text);
  flex-shrink: 0;
}
.account-icon-link svg { width: 20px; height: 20px; }

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--forest-tint);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  position: relative;
  border-radius: 2px;
}
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 180ms ease, top 180ms ease;
}
.mobile-nav-toggle span::before { top: -6px; }
.mobile-nav-toggle span::after  { top: 6px; }

.mobile-nav-toggle.open span { background: transparent; }
.mobile-nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.mobile-nav-toggle.open span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .wrap { padding: 0 18px; }

  .site-nav { display: none; }
  .site-header-actions .btn { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .account-icon-link { display: inline-flex; }

  /* Mobile is always the floating pill — not scroll-triggered like
     desktop. Same values desktop's .pinned state uses; applied
     unconditionally here instead of gated behind that class (the
     scroll-listener JS still toggles .pinned on mobile too, it's just
     inert — this rule doesn't depend on it either way). */
  .site-header {
    top: var(--header-pill-top);
    left: var(--header-pill-inset);
    right: var(--header-pill-inset);
  }
  .site-header-bar {
    height: var(--header-h-pill);
    padding: 0;
    border-bottom: none;
    max-width: var(--page-max);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pill);
  }

  /* Logo stays compact for the pill (matches desktop's pinned size) and
     only grows once the full-screen drawer opens below — the base 34px
     size is tuned for the wide flush desktop bar, too big for the
     always-narrow mobile pill. */
  .site-header .brand img {
    height: 26px;
  }

  /* While the full-screen drawer is open, the header stops reading as a
     floating pill and becomes a flush full-width bar instead — matching
     the edge-to-edge takeover panel sitting right below it, rather than
     looking like a narrow capsule floating over a full-width sheet.
     header.js toggles this class alongside the drawer's own .open class. */
  .site-header.menu-open {
    left: 0;
    right: 0;
  }
  .site-header.menu-open .site-header-bar {
    max-width: 100%;
    border-radius: 0;
  }
  .site-header.menu-open .brand img {
    height: 34px;
  }

  /* Full-screen takeover, not a dropdown — fills everything below the
     header down to the bottom of the viewport. header.js body-locks
     scroll while this is open, since (unlike the old short dropdown) it
     now covers enough of the screen for background scroll to matter. */
  .mobile-nav-panel {
    position: fixed;
    top: var(--header-clearance);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .mobile-nav-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .drawer-images { display: flex; }
  .drawer-img-tile {
    flex: 1; height: 130px; background: var(--leaf-strong); display: flex;
    align-items: center; justify-content: center; text-align: center; padding: 10px;
    border-right: 1px solid rgba(255,255,255,.2);
  }
  .drawer-img-tile:last-child { border-right: none; }
  .drawer-img-note {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
    color: rgba(255,255,255,.75);
  }

  .drawer-nav { padding: 30px 24px 10px; }
  .drawer-nav a {
    display: flex; align-items: center; gap: 14px;
    font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
    padding: 14px 0; color: var(--text);
  }
  .drawer-nav a svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--leaf-ink, var(--leaf-strong)); }

  .drawer-auth {
    background: var(--mint); margin: 20px 24px; border-radius: var(--radius-card);
    padding: 24px; text-align: center;
  }
  .drawer-auth p { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
  .drawer-auth .btn { width: 100%; margin-bottom: 8px; }

  .drawer-social {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    padding: 8px 24px 30px;
  }
  .drawer-social a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  }
  .drawer-social svg { width: 18px; height: 18px; }
}

@media (min-width: 861px) {
  .mobile-nav-panel { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 50px 0 75px;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  margin: 0 24px;
  /* --shadow-hero (not --shadow-pill) — the card is a much larger surface
     than the nav pill, sitting on a same-colour-family section background,
     so it needs a more pronounced lift to read as a separate floating
     card rather than blending in. */
  box-shadow: var(--shadow-hero);
  /* Two background layers: the green wash on top, the photo underneath.
     Wash starts near-black on the left (where the text sits) — deepened
     from a flat forest tone specifically so it reads as unambiguously
     darker than the section background behind it (same colour family,
     but the section never goes this dark) — then fades through the
     original forest tone before reaching the photo, so the photo still
     reads as a real photo, not just a tinted rectangle. */
  background:
    linear-gradient(to right, rgba(10,20,10,0.75) 0%, rgba(24,40,24,0.67) 25%, rgba(46,74,68,0.45) 55%, rgba(46,74,68,0.12) 80%, rgba(46,74,68,0.04) 100%),
    url("https://images.unsplash.com/photo-1636928332639-cdacb553f502?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") 72% 38% / cover no-repeat;
  padding: 50px 48px;
}

/* Desktop only — narrower than full-bleed. Plain percentage of the
   viewport, no extra cap: an earlier version capped this at 75% of
   --page-max (1160px), which reads as way less than "75%" once you
   compare it to the actual screen, not the already-narrower content
   column below. Mobile keeps its own full-bleed-minus-margin treatment
   further down, untouched. */
@media (min-width: 861px) {
  .hero-card {
    width: 90%;
    margin: 0 auto;
  }
}

.hero-content {
  max-width: 50%;
  /* Query container so the H1 below can size itself off this element's
     own actual width (cqw) instead of the viewport's (vw) — the two
     diverge once max-width:50% is in play, which is exactly why the H1
     used to wrap to two lines at narrower desktop widths despite still
     having plenty of viewport width to spare. */
  container-type: inline-size;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.hero-eyebrow-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.8);
}
.hero-eyebrow-icon { width: 15px; height: 15px; flex-shrink: 0; }
.hero-eyebrow-divider { color: rgba(255,255,255,0.4); }

.hero-content h1 {
  /* 8.5cqw keeps "Take In Person Payments" on one line at every desktop
     width — tuned against the container's own width (see container-type
     above), not the viewport, and verified down to the 861px floor. */
  font-size: clamp(1.4rem, 8.5cqw, 4.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
}
.hero-h1-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(1.4175rem, 2.6325vw, 1.92375rem);
  font-weight: 400;
  line-height: 1.25; /* now a longer sentence wrapping multiple lines, not
                         a short tagline — body line-height (1.6) read too
                         loose for text sized and weighted like a heading */
  color: rgba(255,255,255,0.82);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-cta .btn.ghost {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.hero-cta .btn.ghost:hover { background: rgba(255,255,255,0.1); }

.hero-ticks {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  row-gap: 12px;
}
.hero-ticks li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.hero-ticks li::before {
  content: "✓";
  color: var(--btn-accent-from);
  font-weight: 700;
}

@media (max-width: 860px) {
  .hero { padding: 30px 0 64px; }
  .hero-card { padding: 40px 24px; border-radius: 24px; margin: 0 16px; }
  .hero-content { max-width: none; }
  /* 25% bigger than the base clamp (same 8.5cqw fit ratio, every bound
     just scaled by 1.25) — mobile-only per request. */
  .hero-content h1 { font-size: clamp(1.75rem, 10.625cqw, 5.625rem); }
  /* 4-across is too cramped at mobile widths — back to 2 columns (a
     clean 2x2 for the current 4 ticks). */
  .hero-ticks { grid-template-columns: repeat(2, 1fr); }
}

/* Shared small label above a section heading — Reviews, FAQs, Support,
   etc. One rule, reused by every section below instead of each one
   redefining its own copy of the same style. */
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--leaf-ink);
  margin-bottom: 12px;
}

/* ============================================================
   Trust / reviews section
   ============================================================ */
.trust-section {
  background: var(--mint);
  padding: 90px 0;
}
.trust-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--text);
  max-width: 560px;
}
.trust-lede {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 560px;
}
.trust-points {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.trust-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 260px;
}
.trust-point svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--leaf-strong);
}
.trust-point p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 860px) {
  .trust-section { padding: 60px 0; }
  .trust-points { flex-direction: column; gap: 20px; }
}

/* ============================================================
   FAQs
   ============================================================ */
.faq-section {
  background: var(--mint);
  padding: 90px 0;
}
.faq-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--text);
  max-width: 560px;
}
.faq-list {
  margin-top: 36px;
  max-width: 720px;
  border-top: 1px solid var(--border-strong);
}
.faq-item {
  border-bottom: 1px solid var(--border-strong);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--leaf-strong);
  transition: transform 150ms ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
}

@media (max-width: 860px) {
  .faq-section { padding: 60px 0; }
}

/* ============================================================
   Contact / Get in touch
   ============================================================ */
.contact-section {
  padding: 90px 0;
}
.contact-intro {
  max-width: 560px;
  margin-bottom: 36px;
}
.contact-intro h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--text);
}
.contact-intro p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.form-field em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--leaf-strong);
  outline-offset: 1px;
}
.form-field textarea { resize: vertical; }
.form-field--full { grid-column: 1 / -1; }

.contact-form .btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .contact-section { padding: 60px 0; }
  .contact-form { grid-template-columns: 1fr; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}