/* ============================================================
   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 on both desktop and mobile —
     both are permanently pill-shaped, no scroll-triggered shape
     change (desktop's scroll trigger now only arms hide-on-scroll,
     see .hero-cleared/header.js). */
  --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;
  /* Shared by .hero-card and the nav pill so they're always the same
     width by definition, not by two copies of the same numbers
     happening to match. */
  --hero-card-max-width: 1600px;
}

* { 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);
  /* --mint, not --surface — every real section now sets its own mint
     background explicitly, so this is only ever visible at the very
     edges (e.g. iOS overscroll bounce) or for an instant before CSS
     paints; still shouldn't be straight white when it is. */
  background: var(--mint);
  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; }
/* One shared rule for every page-section h2 (paydemo/Use cases/FAQ/
   Contact), rather than four copies of the same size+weight+colour —
   each section-specific h2 rule below now only carries what's still
   genuinely different per section (max-width). Doesn't reach
   .fs-head h2 (the fee-splitter's own compact in-card heading,
   deliberately much smaller) — that rule's class-qualified selector
   outranks this bare-element one regardless of source order. */
/* Page-title h1 (About/Contact) — one step above the shared h2 so a page
   title never reads smaller than the section headings under it. The
   homepage hero's h1 has its own class-qualified rule, unaffected. */
h1 { font-size: clamp(2.2rem, 5.5vw, 56px); font-weight: 700; color: var(--text); }
h2 { font-size: clamp(1.8rem, 4vw, 45px); font-weight: 700; color: var(--text); }
/* Centred signup button under a section's content (share cards, FAQ,
   About story). */
.section-cta { margin-top: 40px; text-align: center; }
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 pill shape; this shell only positions/hides it. */
  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),
              transform .3s cubic-bezier(.2,.7,.3,1);
}

/* .hero and .site-header-bar shared this one gradient declaration so
   they'd read as one continuous sweep instead of each restarting the
   diagonal at its own top-left corner (background-attachment:fixed
   paints against the viewport itself, so both are just a window onto
   the same underlying image). .hero's own background is hidden for
   now (see its rule below), but .site-header-bar (the pill itself)
   keeps this fill — only .site-header-spacer was dropped from this
   shared rule, since with .hero's fill gone it was showing as a
   stray full-width dark strip behind the now-floating pill. */
.site-header-bar {
  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;
  /* Both breakpoints' media queries now unconditionally set the real
     pill values (height/padding/radius/shadow, border-bottom:none) —
     these base values are permanently overridden, dead weight kept
     only so this rule still declares every property the pill state
     touches, in one place, for anyone scanning the cascade. */
  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. --mint, matching .hero's own
   fill just below it — the pill itself (.site-header-bar, see comment
   above) keeps its own forest-green background regardless. */
.site-header-spacer {
  height: var(--header-clearance);
  background: var(--mint);
}

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

@media (min-width: 861px) {
  /* Grid, not flex — 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). Capped at the hero-card width and centred, unconditionally
     — content stays this width whether the bar itself is the full-
     width flush bar or the inset pill (see .hero-cleared below); only
     the bar's own background/shape changes between those two. */
  .site-header .wrap {
    /* Same formula as .hero-card (90% of the viewport, capped) — 90vw,
       not 90%, and deliberately not just the max-width cap alone.
       .hero-card's 90% is relative to the (full-viewport-width) hero
       section; this wrap's containing block is .site-header-bar,
       which is narrower than the viewport once .hero-cleared insets
       it into the pill. A plain 90% would compute against that already
       -narrower bar and come out smaller than the hero card there —
       90vw always measures against the true viewport, so this matches
       the hero card exactly in both the flush and pill shapes. */
    width: 90vw;
    max-width: var(--hero-card-max-width);
    margin: 0 auto;
    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; }

  /* Two shapes again (like the old .pinned did), but now gated by
     .hero-cleared instead: flush full-width bar by default/while
     still above the hero (the base .site-header/.site-header-bar
     rules above already are this flush styling), pill once cleared.
     Combined with header.js's hide-on-scroll-down / reveal-on-scroll-
     up (only active once .hero-cleared too — see that file), the pill
     in practice only ever appears via an up-scroll reveal: arriving
     at the threshold while still scrolling down goes hero-cleared+
     nav-hidden almost immediately, so the pill's first real showing
     is always the reveal. */
  .site-header.hero-cleared {
    top: var(--header-pill-top);
    left: var(--header-pill-inset);
    right: var(--header-pill-inset);
  }
  .site-header.hero-cleared .site-header-bar {
    height: var(--header-h-pill);
    padding: 0;
    border-bottom: none;
    max-width: 100%;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pill);
  }
  /* Shrinks going into the pill — .hero-cleared adds a class to the
     selector, not just a media query, so (unlike the last attempt at
     this) it's higher specificity than the base rule below and wins
     regardless of source order. */
  .site-header.hero-cleared .brand img {
    height: 21.74px;
  }

  /* Slides fully off-screen above rather than fading — only ever
     applied while .hero-cleared is also set (see header.js), so it
     never hides the header while still within/above the hero. */
  .site-header.nav-hidden {
    transform: translateY(calc(-1 * (var(--header-pill-top) + var(--header-h-pill) + 24px)));
  }
}

.site-header .brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header .brand img {
  /* This is the effective desktop *flush/wide-nav* value (≥861px) —
     the pill state overrides it smaller again via
     .site-header.hero-cleared .brand img above, so the logo visibly
     shrinks on the flush-to-pill transform. 27.18px = 21.74px +25%.
     Mobile's own later, equal-specificity media-query rule overrides
     this to 26px there regardless of either desktop value. */
  height: 27.18px;
  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, same as desktop now. The
     scroll-listener JS already computes/toggles .hero-cleared and
     .nav-hidden on mobile too (simpler than branching by viewport
     width there) — same hide-past-the-hero-on-scroll-down / reveal-
     on-scroll-up behavior as desktop now applies here too, via the
     .nav-hidden rule below (previously a no-op on this breakpoint). */
  .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);
  }
  .site-header.nav-hidden {
    /* Can only ever coincide with the drawer being closed — opening it
       requires tapping the (visible) hamburger, and scroll is body-
       locked while it's open, so .nav-hidden can't newly apply mid-
       way through that. No special-casing against .menu-open needed. */
    transform: translateY(calc(-1 * (var(--header-pill-top) + var(--header-h-pill) + 24px)));
  }

  /* 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;
  }

  /* 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-nav { padding: 40px 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: 30px 0 75px; /* top was 50px — 40% less, tightens the gap to the nav pill */
  /* Second background layer, .hero only (not shared with .site-header-bar/
     .site-header-spacer above) — fades the hero into the next section's
     --mint background rather than cutting hard at the edge. Solid/
     unfaded until the vertical midpoint, then transitions down to --mint
     by the 4/5 mark, staying solid --mint for the last 1/5 down to the
     bottom edge. Needs its own "scroll" attachment (not "fixed" like the
     diagonal layer below it) so its 0-100% range tracks this element's
     own height, not the viewport's — background-attachment's second
     value applies to the second (--hero-gradient) layer, keeping that
     one's continuity with the header intact. */
  background-image:
    linear-gradient(to bottom, transparent 0%, transparent 33%, var(--mint) 80%, var(--mint) 100%),
    var(--hero-gradient);
  background-attachment: scroll, fixed;
}

/* Forest-green background hidden for now, per request — overrides the
   two background properties above without deleting them, so this is a
   one-block revert later. .hero-card's own background (photo + scrim)
   is separate and untouched, so its text stays fully readable either
   way; this only affects the section's own fill around/below the card.
   --mint (not transparent) so that area reads as the site's normal
   off-white/green wash rather than stark white. */
.hero {
  background-color: var(--mint);
  background-image: none;
}

.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. width:90% is unchanged from
   the earlier decision to drop the old 75%-of-1160px cap (way too small
   once compared to the actual screen, not the narrower content column).
   max-width:1600px is a different, much larger ceiling added separately —
   90% alone let the card keep growing indefinitely on ultrawide monitors
   while its content-driven height stayed roughly fixed, flattening it out
   (confirmed via Section Select HTML/hero-card-width-variations.html,
   option A). Mobile keeps its own full-bleed-minus-margin treatment
   further down, untouched. */
@media (min-width: 861px) {
  .hero-card {
    width: 90%;
    max-width: var(--hero-card-max-width);
    margin: 0 auto;
  }
}

/* Extra vertical breathing room once the card is wide enough for the
   flattened proportions to actually be noticeable — left/right padding
   stays the same, only top/bottom grows, adding real height rather than
   relying on width alone. Gated behind 1440px (not the 861px desktop
   floor above) so normal laptop/desktop widths render pixel-identical
   to before this change. */
@media (min-width: 1440px) {
  .hero-card {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* One tier further, roughly where the max-width:1600px cap above actually
   starts pinning the card's width (1600 / 90% ≈ 1778px) — past that point
   the card stops growing wider while the viewport keeps growing, so it
   gets another 50px top/bottom on top of the 1440px tier's 90px. */
@media (min-width: 1800px) {
  .hero-card {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.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: 18px 0 64px; } /* top was 30px — same 40% reduction as desktop */
  .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;
}

/* ============================================================
   Interactive payment demo ("How Your Customers Pay You")
   Ported from Concepts/withease-hero-demo-functionality_24.html —
   only the customer-profile + payment-page screens (2 of its 3
   tabs), no admin/seller controls. Every colour/radius/shadow below
   is remapped onto this site's own tokens, not the source file's
   own --accent/--offwhite/--ink names. Selectors are namespaced
   under .paydemo as a descendant, not renamed, so the markup below
   stays a near-verbatim port of the source (confirmed zero
   collisions with the rest of this file for names like .card,
   .field, .actions, .link).
   ============================================================ */
.paydemo-section {
  /* Must stay --mint, not just for looks — .hero's own fade layer
     (see .hero's background-image above) resolves to solid --mint
     by its bottom edge specifically so it flows into whatever
     section comes right after it. This is that section; anything
     else here reintroduces the hard seam the fade exists to avoid. */
  background: var(--mint);
  padding: 90px 0;
  /* Keeps the demo's internal stacking self-contained, safely under
     the fixed header's z-index:100. */
  isolation: isolate;
}
@media (max-width: 860px) { .paydemo-section { padding: 60px 0; } }

.paydemo-layout {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 861px) {
  .paydemo-layout { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; }
  .paydemo-copy { max-width: 560px; }
}

.paydemo-lede { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
/* Stacked icon + label + one-liner steps (was a single row of short
   labels, which left the copy column floating beside the tall phone).
   The first three are buttons that switch the phone screen; the active
   one is synced from setView() in paydemo.js. */
.paydemo-steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paydemo-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
}
button.paydemo-step { cursor: pointer; transition: background-color .15s, border-color .15s; }
button.paydemo-step:hover { background: rgba(255,255,255,.6); }
.paydemo-step.is-active {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.paydemo-step-icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--leaf-tint);
  color: var(--forest);
}
.paydemo-step-txt { display: flex; flex-direction: column; gap: 2px; }
.paydemo-step-txt strong { font-size: 18px; font-weight: 600; }
.paydemo-step-txt span { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.paydemo-cta { margin-top: 28px; }

.paydemo-stage { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.paydemo-caption { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); text-align: center; max-width: 300px; }

/* ---- Tab strip — rebuilt for a light/mint section. Source styled
   this white-on-translucent-dark for a hero background, which is
   effectively invisible on --mint. ---- */
.paydemo .screen-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  max-width: 100%;
}
.paydemo .stab {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.paydemo .stab:hover { background: var(--forest-tint); }

/* Mobile: one row of three equal pills, strip stretched to the stage's
   full width — the labels used to wrap onto two rows at ~390px. */
@media (max-width: 860px) {
  .paydemo-stage { width: 100%; }
  .paydemo .screen-tabs { display: flex; width: 100%; flex-wrap: nowrap; }
  .paydemo .stab { flex: 1; padding: 9px 6px; font-size: 11.5px; }
}
.paydemo .stab[aria-selected="true"] { background: var(--forest); color: var(--mint); }

/* ---- Phone frame ---- */
.paydemo .phone {
  width: 300px;
  max-width: 100%;
  background: #0F1714;
  border-radius: 38px;
  padding: 10px;
  /* Source used rgba(6,16,13,.55) — tuned for a dark hero background;
     on --mint that read as a heavy grey smudge. Lighter value below
     matches App Concept Build's own light-background phone shadow. */
  box-shadow: 0 24px 60px rgba(38,64,58,0.18), 0 2px 8px rgba(38,64,58,0.06);
}
.paydemo .screen {
  /* --mint, matching the source's own --offwhite value exactly
     (#F3F8EC both) — the phone's "app" background, not the section
     background repeated by coincidence. */
  background: var(--mint);
  border-radius: 29px;
  overflow: hidden;
  position: relative;
  height: 566px;
  display: flex;
  flex-direction: column;
}
.paydemo .screen-head {
  flex: none;
  background-image: var(--hero-gradient);
  background-color: var(--forest);
  padding: 14px;
  text-align: center;
}
.paydemo .screen-head img { height: 22px; width: auto; display: block; margin: 0 auto; }
.paydemo .scr {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  scrollbar-width: none;
}
.paydemo .scr::-webkit-scrollbar { width: 0; }
/* flex column + min-height:100% so a child can use margin-top:auto to
   pin itself to the bottom of the panel (used by the share screen's
   preview button) — doesn't change stacking/spacing for panels that
   don't opt into that. */
.paydemo .scr-body { position: relative; z-index: 2; padding: 20px 20px 24px; display: flex; flex-direction: column; min-height: 100%; }

.paydemo .cover { position: absolute; top: 0; left: 0; right: 0; height: 172px; z-index: 0; overflow: hidden; }
.paydemo .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paydemo .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28,45,40,.62) 0%,
    rgba(30,49,43,.55) 40%,
    rgba(102,131,113,.55) 62%,
    rgba(220,232,210,.88) 84%,
    var(--mint) 100%);
}

.paydemo .biz { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 14px; }
.paydemo .biz-logo {
  width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; box-shadow: 0 4px 14px rgba(10,25,20,.3); flex: none;
}
.paydemo .biz-txt { min-width: 0; text-align: left; }
.paydemo .biz-name {
  font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(10,25,20,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.paydemo .biz-loc {
  font-size: 11.5px; margin-top: 1px; color: rgba(255,255,255,.82); text-shadow: 0 1px 6px rgba(10,25,20,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.paydemo .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }



.paydemo .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.paydemo .actions.one { grid-template-columns: 1fr; }
.paydemo .act {
  display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-input); padding: 11px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--forest); cursor: pointer;
  font-family: inherit; white-space: nowrap; line-height: 1;
}
.paydemo .act:hover { border-color: var(--border-strong); }
.paydemo .act.act-accent { border-color: var(--leaf-strong); color: var(--leaf-strong); }
.paydemo .act.act-accent:hover { background: var(--leaf-tint); border-color: var(--leaf-strong); }
.paydemo .ic {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Share screen (QR code + copy-link chip) ---- */
.paydemo .qr-card {
  width: 64%;
  margin: 4px auto 12px;
  border: 2px solid var(--forest);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.paydemo .qr-face { background: var(--surface); padding: 14px; display: flex; justify-content: center; }
.paydemo .qr-holder { position: relative; width: 100%; max-width: 150px; }
.paydemo .qr-holder svg { width: 100%; height: auto; display: block; }
.paydemo .qr-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--forest); border-radius: 7px; padding: 5px 6px;
  box-shadow: 0 0 0 3px var(--surface); display: flex; align-items: center; justify-content: center;
}
.paydemo .qr-badge img { height: 9px; width: auto; display: block; }
.paydemo .qr-foot { background: var(--forest); padding: 10px; text-align: center; }
.paydemo .qr-cap { font-size: 12.5px; color: var(--mint); letter-spacing: .14em; font-weight: 700; line-height: 1; }

.paydemo .linkchip {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 4px; padding: 11px 14px;
  background-image: var(--btn-accent-gradient);
  color: #fff;
  border: none; border-radius: var(--radius-pill);
  font-family: inherit; cursor: pointer;
}
.paydemo .linkchip:hover { background-image: var(--btn-accent-gradient-hover); }
.paydemo .linkchip span {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.paydemo .amt-card { padding: 18px 16px; text-align: center; margin-bottom: 14px; box-shadow: var(--shadow-pop); cursor: text; }
.paydemo .amt-label { font-size: 11px; color: var(--text-muted); letter-spacing: .08em; font-weight: 600; margin-bottom: 6px; }
.paydemo .amt-wrap { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.paydemo .amt-cur { font-size: 26px; font-weight: 700; color: var(--text-muted); line-height: 1; }
.paydemo .amt {
  caret-color: var(--forest); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  border: none; background: none; font-family: inherit; color: var(--text); text-align: left;
  width: 5.2ch; padding: 0; min-width: 0;
}
.paydemo .amt:focus { outline: none; }
.paydemo .amt::placeholder { color: var(--border-strong); }

/* Fake blinking caret, visible whenever the field ISN'T actively
   focused — a live text cursor already blinks correctly on its own
   once focused, so this hides then rather than doubling up. Position
   is tracked via a hidden mirror span (same font/size/spacing as the
   input) rather than guessed, since the input's own value length
   varies per random business/typed amount — paydemo.js keeps the
   mirror's text and the caret's left offset in sync on every render. */
.paydemo .amt-input-shell { position: relative; display: inline-block; }
.paydemo .amt-mirror {
  position: absolute; left: 0; top: 0;
  visibility: hidden;
  white-space: pre;
  font-size: 40px; font-weight: 700; letter-spacing: -.03em;
}
.paydemo .amt-caret {
  position: absolute; top: 2px; bottom: 2px; left: 0;
  width: 2px;
  background: var(--forest);
  animation: paydemo-caret-blink 1s step-end infinite;
  pointer-events: none;
}
.paydemo .amt:focus ~ .amt-caret { display: none; }
@keyframes paydemo-caret-blink { 50% { opacity: 0; } }

.paydemo .fees { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface); }
.paydemo .fee-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); padding: 3px 0; }
.paydemo .fee-row span:last-child { font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.paydemo .fee-row.lead { font-size: 11.5px; font-weight: 600; color: var(--text); padding-bottom: 1px; }
.paydemo .fee-row.lead span:last-child { color: var(--text); }
.paydemo .fee-row.grand { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 13px; color: var(--text); font-weight: 600; }
.paydemo .fee-row.grand span:last-child { color: var(--text); font-size: 14px; }
.paydemo .fee-note { font-size: 10.5px; color: var(--text-muted); line-height: 1.35; margin: 0; padding: 0 0 2px; text-align: left; }

.paydemo .field { margin-bottom: 10px; }
.paydemo .field.bare label { display: none; }
.paydemo .field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.paydemo .field input,
.paydemo .field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-input); padding: 9px 10px;
  font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface);
}
.paydemo .field input:focus,
.paydemo .field textarea:focus {
  /* Same focus idiom as .form-field in the real contact form below —
     not a new pattern invented for this component. */
  outline: 2px solid var(--leaf-strong);
  outline-offset: 1px;
}
.paydemo .field textarea { resize: none; height: 64px; }

.paydemo .pay-btn {
  background-image: var(--btn-accent-gradient); color: #fff; text-align: center; font-size: 15px;
  font-weight: 600; padding: 15px; border-radius: var(--radius-input);
}
.paydemo .secured { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 16px; }


/* ============================================================
   Use cases — "how you share your page"
   Three icon cards (photos dropped per request). Desktop: 3-up grid,
   heading + lede centred as a block. Mobile: the same cards become a
   swipeable side-scroll row — scroll-snap gives native paging without
   any JS.
   ============================================================ */
.usecase-section { background: var(--mint); padding: 90px 0; }
.usecase-section h2 { max-width: 640px; }
.usecase-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 560px; }

.usecase-cards {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 861px) {
  .usecase-section h2,
  .usecase-lede {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
.usecase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
}
.usecase-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--leaf-tint);
  color: var(--forest);
}
.usecase-card-icon svg { width: 28px; height: 28px; }
.usecase-card h3 {
  margin: 20px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.usecase-card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .usecase-section { padding: 60px 0; }
  .usecase-cards {
    margin-top: 32px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
    margin-left: -4px;
    margin-right: -4px;
  }
  .usecase-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 28px 24px;
  }
}

/* ============================================================
   Who it's for — industry icon tiles. Compact (icon + text, no
   photos) so it doesn't compete with the share cards above.
   3×2 on desktop, 2 columns on mobile.
   ============================================================ */
.industry-section { background: var(--mint); padding: 90px 0; }
.industry-section h2 { max-width: 640px; }
.industry-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 560px; }
@media (min-width: 861px) {
  .industry-section h2,
  .industry-lede { margin-left: auto; margin-right: auto; text-align: center; }
}
.industry-grid {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.industry-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* Photo on top (Unsplash placeholders until real ones are shot), icon
   badge overlapping its bottom-left corner, copy below. */
.industry-media { aspect-ratio: 3 / 2; background: var(--leaf-tint); }
.industry-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.industry-body { padding: 0 22px 24px; }
.industry-icon {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-top: -22px;
  border-radius: 12px;
  background: var(--leaf-tint);
  color: var(--forest);
  box-shadow: 0 0 0 3px var(--surface);
}
.industry-tile h3 { margin: 12px 0 0; font-size: 17px; font-weight: 600; color: var(--text); }
.industry-tile p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

@media (max-width: 860px) {
  .industry-section { padding: 60px 0; }
  .industry-grid { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .industry-media { aspect-ratio: 4 / 3; }
  .industry-body { padding: 0 14px 18px; }
  .industry-icon { width: 36px; height: 36px; padding: 8px; margin-top: -18px; }
  .industry-tile h3 { font-size: 15.5px; }
  .industry-tile p { font-size: 13px; }
}

/* ============================================================
   Fees — "Who pays the card fee?" widget
   Ported from Concepts/fee-splitter.html, tokens remapped onto this
   site's real palette (its own --leaf-a/--leaf-b was the pale-lime
   accent already rejected site-wide — see --btn-accent-from/to's own
   comment — so the split-bar uses --btn-accent-gradient instead).
   Section wrapper is eyebrow-only per copy/homepage.md section 6:
   the widget carries its own heading/explainer, a second outer h2
   would just repeat it. Selectors prefixed .fs- throughout (both for
   CSS and its JS data-fs-* hooks) since this widget's own class names
   (.field, .row, .note, .total…) are exactly the kind of generic
   names likely to collide with something else on the page later.
   ============================================================ */
.fees-section { background: var(--mint); padding: 90px 0; }

.fee-splitter {
  max-width: 720px;
  margin: 40px auto 0;
  /* Same treatment as .hero-card/.site-header-bar — flat --forest as
     the fallback, --hero-gradient laid over it for the "some
     temperature, not flat" diagonal lift, rather than one solid fill. */
  background-color: var(--forest);
  background-image: var(--hero-gradient);
  border-radius: var(--radius-card);
  /* --shadow-hero, not --shadow-card — this is now a large surface on
     a same-colour-family section background (mint section, forest
     card), exactly the case that token's own comment describes. */
  box-shadow: var(--shadow-hero);
  padding: 32px;
}

/* .fs-head now sits outside .fee-splitter (a real section heading on
   the section's own mint background, like every other section),
   not an in-card label — so its h2 gets no size/weight override of
   its own any more and just inherits the shared global h2 rule
   (45px/700) everyone else uses, rather than the old deliberately-
   small 19px/600 in-card treatment. */
.fs-head { margin-bottom: 48px; text-align: center; }
.fs-head p {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: 17px; /* was 14px — "slightly larger" per request */
  line-height: 1.6;
  color: var(--text-muted);
}
.fs-head strong { color: var(--forest); font-weight: 700; }

/* Controls (left) | amounts (right) — a divider, not a gap, reads as
   one panel split in two rather than two separate blocks. */
.fs-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
}
.fs-controls { display: flex; flex-direction: column; gap: 12px; padding-right: 28px; }
.fs-amounts { border-left: 1px solid rgba(255,255,255,.18); padding-left: 28px; }

.fs-field-label { display: block; font-size: 13px; font-weight: 600; color: #fff; }

/* Number inputs (% cover, price) stay light "cutout" fields rather
   than going dark-on-dark — every other input on the site is a light
   field with dark text, and typed numbers need to stay easy to read
   regardless of the card's own colour, so this keeps that same
   legible pattern instead of inventing a dark-input style. */
.fs-pct-wrap { position: relative; }
.fs-pct-wrap input {
  width: 100%;
  padding: 11px 32px 11px 14px;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-pct-wrap input:hover { border-color: var(--leaf); }
.fs-pct-wrap input:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(111,174,63,.35);
}
.fs-pct-wrap span {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--text-muted); pointer-events: none;
}

.fs-pills { display: flex; gap: 8px; flex-wrap: wrap; }
/* Inactive pills: the site's existing "ghost button on a dark
   background" pattern (.btn.ghost) — transparent fill, white text, a
   translucent white border — not the light/white-filled pill this
   used against the old white card. Active pill: the site's real
   accent green (--btn-accent-gradient), not --forest — a forest-
   green active pill would now just blend into the card underneath it. */
.fs-pill {
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fs-pill:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }
.fs-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fs-pill[aria-pressed="true"] {
  background-image: var(--btn-accent-gradient);
  border-color: transparent;
  color: #fff;
}

/* Track + "theirs" portion switch to translucent white/mint — the
   source values here (--border, --forest) would both read as
   near-invisible against this card's own forest background. --leaf
   accent stays as "yours", already high-contrast against forest. */
.fs-splitbar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: rgba(255,255,255,.18); margin: 0 0 8px; }
.fs-bar-yours { background-image: var(--btn-accent-gradient); transition: width .28s cubic-bezier(.4,0,.2,1); }
.fs-bar-theirs { background: var(--mint); transition: width .28s cubic-bezier(.4,0,.2,1); }

.fs-splitkey { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.75); margin-bottom: 24px; }
.fs-splitkey b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.fs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.fs-dot.a { background: var(--leaf-strong); }
.fs-dot.b { background: var(--mint); }

.fs-ledger { border-top: 1px solid rgba(255,255,255,.18); }
.fs-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 14.5px; }
.fs-row .fs-k { color: rgba(255,255,255,.75); }
.fs-row .fs-v { color: #fff; font-variant-numeric: tabular-nums; }

.fs-price-input {
  width: 110px; text-align: right;
  padding: 7px 10px;
  font: inherit; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-price-input:hover { border-color: var(--leaf); }
.fs-price-input:focus {
  outline: none; background: var(--surface);
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(111,174,63,.35);
}

.fs-totals { padding-top: 18px; }
.fs-total { display: flex; justify-content: space-between; align-items: baseline; }
.fs-total + .fs-total { margin-top: 12px; }
.fs-total .fs-k { font-size: 14.5px; color: rgba(255,255,255,.75); }
.fs-total .fs-v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
/* Renamed from the ported source's own ".hero" modifier — that bare
   name collided with this site's actual .hero (homepage hero section)
   class and was silently pulling in its forest-gradient background.
   Now genuinely on a forest-gradient card of its own (a different
   rule, deliberately) — plain white, not --forest, which is what
   this rule used before this card went dark and would now disappear
   into it entirely. */
.fs-total.fs-total-primary .fs-k { color: #fff; font-weight: 600; }
.fs-total.fs-total-primary .fs-v { font-size: 30px; letter-spacing: -.02em; color: #fff; }

.fs-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.75); }

@media (max-width: 860px) {
  .fees-section { padding: 60px 0; }
  .fee-splitter { padding: 22px 18px; }
  .fs-body { grid-template-columns: 1fr; }
  .fs-controls { padding-right: 0; margin-bottom: 24px; }
  .fs-amounts { border-left: none; padding-left: 0; }
  .fs-total.fs-total-primary .fs-v { font-size: 26px; }
}

/* ============================================================
   FAQs
   ============================================================ */
.faq-section {
  background: var(--mint);
  padding: 90px 0;
  text-align: center;
}
.faq-section h2 {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.faq-list {
  margin: 36px auto 0;
  max-width: 720px;
  border-top: 1px solid var(--border-strong);
  /* The section itself is centred (heading + this list's own
     horizontal position), but question/answer text and the +/- toggle
     stay left/right as they were — centring every line of an
     accordion would fight its own space-between row layout below. */
  text-align: left;
}
.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 {
  background: var(--mint);
  padding: 90px 0;
}

/* Dark forest-gradient card, same "temperature" pattern as .hero-card /
   .fee-splitter — heading, lede and form all live inside it, centered. */
.contact-card {
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--forest);
  background-image: var(--hero-gradient);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hero);
  padding: 56px;
  text-align: center;
}
.contact-intro {
  max-width: 460px;
  margin: 0 auto 32px;
}
.contact-intro h2 { color: #fff; }
.contact-intro p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.form-field { display: flex; flex-direction: column; }
/* Spam honeypot — off-screen rather than display:none, which some bots skip. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; font-weight: 600; text-align: center; color: #fff; }
.form-status.is-error { color: #FFD7CC; }
.callback-form .form-status { color: var(--forest); }
.callback-form .form-status.is-error { color: #B3261E; }
.form-status[hidden] { display: none; }
.contact-form, .callback-form { position: relative; }
/* Inputs stay light "cutout" fields (not translucent-on-dark) so
   placeholder text and typed input both stay legible on the forest bg. */
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }
.form-field select { color: var(--text-muted); }
.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: center;
  margin-top: 8px;
}

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

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--forest);
  padding-top: 56px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand img { height: 27px; }
.footer-brand p {
  margin: 12px 0 0;
  max-width: 260px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.65);
}
/* Same two actions as the header, ghost restyled for the dark footer
   (same treatment as .hero-cta .btn.ghost). */
.footer-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-cta .btn.ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}
.footer-cta .btn.ghost:hover { background: rgba(255,255,255,.1); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-nav a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.footer-nav a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact a,
.footer-contact button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.footer-contact a:hover,
.footer-contact button:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Site-wide call sheet (footer phone button). Sizes borrowed from
   the demo phone's old Email/Call sheets; bottom sheet on mobile, centred card on
   desktop. z-index above the fixed header's 100. ---- */
.call-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.call-modal[hidden] { display: none; }
.call-modal-bg { position: absolute; inset: 0; background: rgba(16,28,24,.55); border: none; padding: 0; cursor: default; }
.call-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 14px 20px 24px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.2);
  animation: call-sheet-up .22s ease-out;
}
.call-modal-sheet:focus { outline: none; }
@keyframes call-sheet-up { from { transform: translateY(14%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.call-modal-grab { width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 0 auto 12px; }
.call-modal-title { font-size: 16px; font-weight: 700; text-align: center; color: var(--text); }
.call-modal-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  letter-spacing: -.02em;
  margin: 6px 0 16px;
  text-decoration: none;
}
.call-modal-num:hover { color: var(--forest); text-decoration: underline; }
.call-modal .btn { display: flex; width: 100%; justify-content: center; }
.call-modal-ghost {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.call-modal-ghost:hover { background: var(--forest-tint); }
.callback-form { display: grid; gap: 8px; margin-top: 10px; }
.callback-form[hidden], .callback-done[hidden] { display: none; }
.callback-form input,
.callback-form select {
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.callback-done { margin: 12px 0 0; font-size: 14px; font-weight: 600; text-align: center; color: var(--forest); }
.call-modal-hours { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.call-modal-hours-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 7px; }
.call-modal-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); padding: 3px 0; }
.call-modal-row span:last-child { color: var(--text-muted); }
.call-modal-cancel {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}
body.call-open { overflow: hidden; }
@media (min-width: 861px) {
  .call-modal { align-items: center; padding: 24px; }
  .call-modal-sheet { border-radius: var(--radius-card); animation: none; padding: 24px 24px 20px; }
  .call-modal-grab { display: none; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 20px 0;
}
.footer-bottom .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
}
.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.footer-credit a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-credit a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 860px) {
  .site-footer { padding-top: 40px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 32px; }
  .footer-bottom .wrap { flex-direction: column; text-align: center; }
}

/* ============================================================
   Interior pages — About / Contact / Demo
   ============================================================ */
.page-intro {
  background: var(--mint);
  padding: 90px 0 0;
  text-align: center;
}
.page-intro p {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Founder bios (About) — real photos/names now, bios still placeholder. ---- */
.founders-section { background: var(--mint); padding: 56px 0 90px; }
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
}
.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
  text-align: center;
}
.founder-photo {
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--forest-tint);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.founder-card h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.founder-role { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--leaf-strong); }
.founder-card p { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 860px) {
  .founders-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- About story ---- */
.about-story { background: var(--mint); padding: 0 0 90px; text-align: center; }
.about-story h2 { max-width: 640px; margin: 0 auto; }
.about-story p {
  margin: 20px auto 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ---- Contact page hero — same radius/shadow as .hero-card, smaller,
   with a landscape photo + scrim instead of the flat forest gradient. ---- */
.contact-hero {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  min-height: 280px;
  margin: 24px auto 0;
  border-radius: 32px;
  box-shadow: var(--shadow-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
}
.contact-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38,64,58,.35) 0%, rgba(38,64,58,.6) 100%);
  z-index: 1;
}
.contact-hero-content { position: relative; z-index: 2; }
.contact-hero h1 { color: #fff; }
.contact-hero p {
  margin: 12px auto 0;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
}
.contact-hero-pills {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.contact-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--forest);
  background: var(--surface);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background-color .15s;
}
.contact-hero-pill:hover { background: var(--leaf-tint); transform: translateY(-1px); }
.contact-hero-pill svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 860px) {
  .contact-hero { margin: 16px 16px 0; min-height: 220px; padding: 36px 24px; border-radius: 24px; }
}

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