/* =========================================================================
   USA Landing Page — dedicated stylesheet
   Independent from the Australia/city landing pages. Only the shared,
   site-wide base (css/landing/style.css) and footer (css/utils/footer.css)
   are reused here — nothing from css/landing/australia.css, city.css, or
   mobile.css is linked or modified.

   Typography/color/spacing values below are taken directly from the Figma
   dev-mode export supplied for this page. Figma's absolute px coordinates
   were translated into flex/grid layouts so the page stays responsive
   (a literal position:absolute port would lock it to a fixed 1440px
   canvas) — sizes, weights, line-heights, radii, shadows and colors match
   the export exactly.
   ========================================================================= */

/* ===== Section width fixes =====
   css/landing/style.css's generic `.landing-page section { max-width: 750px }`
   is meant for narrow text sections; wider USA sections need to line up
   with the 1400px services/hero grid instead of being clipped to 750px. */
.landing-page.usa-landing .usa-trusted {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Hero =====
   Mirrors the AU hero exactly: a single full-bleed banner image (heading,
   subtitle and feature icons are baked into the banner graphic itself,
   same as the AU page) with just the two CTA buttons absolutely
   positioned on top. Figma gives the buttons at left:113/390, top:512
   within a 1446x571 frame starting at top:91 — net of that 91px offset,
   that resolves to left:8% / bottom:20% of the banner, i.e. identical to
   the AU page's own .landing-hero-ctas position, so that's reused as-is. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-page.usa-landing .usa-hero {
  max-width: 1446px;
  width: 100%;
  margin: 0 auto;
  padding: 91px 0 0;
}

/* Same structure as the AU page's .landing-hero-banner (img in normal
   flow, width:100%/height:auto — no absolute positioning, no aspect-ratio
   box) so it fills the container exactly the same way AU's does.
   usa banner.png was exported with ~164px of fully-transparent dead
   canvas tacked onto the bottom (5760x2444, real content only fills the
   first ~2280px), which was showing through as blank page background
   under the buttons. Trimmed with a negative margin-bottom sized to that
   exact band (164/5760 of the image's own width, since percentage
   margins resolve against the containing block's width) instead of
   relying on an aspect-ratio box. */
.usa-hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.usa-hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -2.8472%;
}

.usa-hero-ctas {
  position: absolute;
  left: 7%;
  bottom: 12%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.usa-hero-btn-primary {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.usa-hero-btn-outline {
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.2));
}

.usa-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ===== Trusted By =====
   Spec allows each logo its own natural height (48-91px) instead of a flat
   cap, aligned on a shared center line. */
.usa-trusted .landing-trusted-logos {
  gap: 60px;
}

.usa-trusted .landing-trusted-logos img {
  height: auto;
  max-height: 50px;
}

/* ===== Comprehensive Offshore Accounting Services =====
   Spec: card 170x229, white, radius 13.45px, shadow instead of the shared
   stylesheet's plain border; title 14px/17px (shared default is 17px).
   .landing-services-inner is an independent copy of the shared
   css/landing/style.css rule (max-width:1400px; margin:0 auto;
   padding:26px 60px) — duplicated on purpose so the USA page never needs
   to touch the shared file again, even for a values-only tweak. Geometry
   is shared by both this section and Industries (below); only the
   background differs, so that's the only thing split into its own rule.

   The shared css/landing/style.css also gives `.landing-services` a
   grey #f7f9f8 background — overridden here to the requested
   rgba(250,250,250,1) instead. :not(.usa-industries) keeps this off the
   Industries section further down the page, which reuses the same
   .landing-services class but is required to stay pure white —
   without the exclusion this rule's two-class specificity would beat
   .usa-industries's own single-class white background below. */
.usa-landing .landing-services-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px 60px;
}

.usa-landing .landing-services:not(.usa-industries) {
  background: rgba(250, 250, 250, 1);
}

.usa-landing .landing-services:not(.usa-industries) .landing-services-inner {
  background: rgba(250, 250, 250, 1);
}

.usa-landing .landing-service-card {
  border: none;
  border-radius: 13.45px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.usa-landing .landing-service-title {
  font-size: 14px;
  min-height: 0;
  margin-bottom: 12px;
}

.usa-landing .landing-view-all .landing-btn-outline {
  color: #000000;
}

/* ===== Why USA Businesses Choose MoneyMate =====
   Rebuilt from scratch per Figma: outer section is a full #FAFAFA band
   (max 1446px), containing a horizontally-centered 1246px-wide content
   container with NO wrapping white card of its own. Inside that
   container, two columns sit side by side (never flex-direction:column
   on desktop): left = illustration + a stacked column of 4 stat cards,
   right = green label + heading + 6 feature items.
   Qualified with .landing-page.usa-landing on the outer section because
   it's a <section> — a bare single-class selector loses a specificity
   fight against the shared sitewide `.landing-page section { max-width:
   750px }` rule, which silently clips things back down to 750px. */
.landing-page.usa-landing .usa-why-section {
  max-width: 1446px;
  width: 100%;
  margin: 0 auto;
  padding: 90px 60px;
  background: rgba(250, 250, 250, 1);
}

.usa-why-container {
  max-width: 1246px;
  width: 100%;
  min-height: 729px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.usa-why-left {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Figma: the illustration's box runs left:0%/right:60.96% (~39% of the
   section width) and top:0%/bottom:0% — i.e. it spans the full height of
   the row rather than staying locked to its own square aspect, so it
   lines up flush with the top AND bottom of the stat-card column beside
   it. align-items:stretch above + height:100% here (not aspect-ratio)
   is what makes that happen. */
.usa-why-illustration {
  flex: 1 1 380px;
  min-width: 0;
}

.usa-why-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* justify-content:flex-start (not center) anchors the card stack to the
   top of the row instead of vertically centering it in the row's full
   stretched height (which is what made it sit visibly lower than the
   Figma). margin-top:35px then nudges it down to meet the heading
   exactly: .usa-why-right's own -24px margin-top plus the eyebrow
   label's height/margin above the heading put the heading's top 35px
   below the row's shared flex-start line, measured directly off the
   rendered layout. */
.usa-why-stats {
  flex: 0 0 126px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 35px;
}

/* Figma: icon sits to the left, vertically centered against the
   value+label stacked on its right (not icon-on-top). Grid (not flex)
   so the icon can span both text rows without an extra wrapper div
   around value+label in the markup. */
.usa-why-stat {
  width: 126px;
  min-height: 116px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 18px 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.usa-why-stat-icon {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
}

.usa-why-stat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.usa-why-stat-value {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: 'Inter-Regular';
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 2px;
}

.usa-why-stat-label {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: 'Inter-Regular';
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  color: #000000;
}

.usa-why-right {
  flex: 1 1 45%;
  min-width: 0;
  margin-top: -24px;
}

.usa-why-label {
  display: inline-block;
  background: #ffffff;
  box-shadow: inset 2.6px 2.6px 5.2px rgba(0, 0, 0, 0.1);
  border-radius: 12.14px;
  padding: 10px 3px;
  margin-bottom: 16px;
  font-family: 'Inter-Regular';
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3cac62;
}

.usa-why-heading {
  font-family: 'Inter-Regular';
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: #000000;
  margin-bottom: 24px;
}

.usa-why-heading .highlight {
  color: #3cac62;
}

.usa-why-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.usa-why-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.usa-why-feature-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f2f9f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usa-why-feature-text {
  font-family: 'Inter-Regular';
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}

.usa-why-feature-text strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 6px;
}

/* ===== Industries We Support =====
   Spec: card 172.45x146.62, radius 10.22px, softer shadow than the
   services grid above.
   Scoped as .usa-landing .usa-industries (two classes) to match the
   shared css/landing/style.css `.landing-page .landing-services`
   rule's own specificity (also two classes) — a bare .usa-industries
   loses that fight and the shared grey #f7f9f8 wins instead, which is
   exactly the bug this section hit when the "Our Services" override
   above was scoped away from Industries with :not(). */
.usa-landing .usa-industries {
  background: #ffffff;
}

.usa-industries-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 37px;
  margin-top: 32px;
}

.usa-industry-card {
  border: none;
  border-radius: 10.22px;
  padding: 18px 10px;
  text-align: center;
  background: #ffffff;
  box-shadow: 1.52px 1.52px 4.56px rgba(0, 0, 0, 0.1), inset 1.52px 1.52px 3.04px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.usa-industry-card:hover {
  transform: translateY(-4px);
}

.usa-industry-icon {
  width: 100%;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.usa-industry-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.usa-industry-card span {
  font-family: 'Inter-Regular';
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

/* ===== Serving Across the USA =====
   Qualified with .landing-page.usa-landing for the same reason as
   .usa-why-section above — bare .usa-states loses a specificity fight
   against the shared `.landing-page section` rule (max-width:750px).

   The artwork (serving-across-usa-map.png) is a real <img> (needed so it
   can carry the alt text required for accessibility/SEO), sized per the
   .usa-states-artwork rule below.

   Content position/width are percentages of the section (8.6111% /
   48.6111% of 1440px = 124px/700px at the Figma baseline) rather than
   fixed px, so the content column scales together with the artwork
   below 1440px instead of drifting into it as the box narrows — a
   fixed-px column here was the earlier bug: it stayed put while the
   artwork (and its 417px left inset) scaled down, so the two started
   overlapping well above the mobile breakpoint. */
.landing-page.usa-landing .usa-states {
  position: relative;
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  /* aspect-ratio (not a fixed min-height) is what keeps the box's own
     proportions locked to the 1440x590 Figma frame as it shrinks below
     1440px — since that ratio (2.44:1) is wider than the artwork's own
     (1023/590 = 1.734:1), the artwork stays height-bound at every
     scale, which is what keeps its relative position (and the 417px
     left-inset in particular) proportionally identical to the 1440px
     baseline instead of drifting as the box narrows. It's only a
     minimum, not a cap — real content taller than 590px (e.g. wrapped
     text at narrow widths) still grows the box further. */
  aspect-ratio: 1440 / 590;
  background-color: #ffffff;
  overflow: visible;
}

/* Sized off the section's WIDTH (71.0417% = 1023/1440), not its height —
   the section's height grows with content (heading/paragraph/grid can
   need more than the artwork's own 590px), and sizing off height would
   stretch the artwork past its real 1023x590 proportions whenever that
   happens. Width-based sizing keeps it pinned to the Figma spec at
   every scale regardless of how tall the content column gets. Vertical
   centering (top:50%/translateY) is applied at ≤1400px in
   usa-responsive.css — see that file for why. */
.usa-states-artwork {
  position: absolute;
  top: 0;
  right: 0;
  width: 71.0417%;
  max-width: 1023px;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* 8.6111%/48.6111% of 1440px = 124px/700px at the Figma baseline —
   700px comfortably fits the 692px-wide 4-column card grid, and clears
   the artwork's own leftmost reach (measured at ~48.7% into the artwork,
   i.e. section-x ≈ 908px at the 1440px baseline) at every width down to
   the mobile breakpoint below, since both scale off the same box. */
.usa-states-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  margin-left: 8.6111%;
  width: 48.6111%;
  min-width: 280px;
  padding: 60px 0;
  text-align: left;
}

.usa-states-content .landing-section-title {
  max-width: 500px;
  margin-bottom: 20px;
}

.usa-states-content .landing-section-subtitle {
  max-width: none;
  margin: 18px 0 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: rgba(0, 0, 0, 1);
}

/* 4 columns of 158px + 3x20px gaps = 692px, which is what the Figma
   spacing (20px column-gap, 25px row-gap between the 43px-tall cards)
   comes out to — fits inside the 700px content column with room to
   spare, so no overflow trick is needed here. No left margin of its own,
   so the grid lines up flush with the heading/paragraph above it. */
.usa-state-grid {
  display: grid;
  grid-template-columns: repeat(4, 158px);
  column-gap: 20px;
  row-gap: 25px;
  margin-bottom: 20px;
  justify-content: start;
  list-style: none;
  padding: 0;
}

.usa-state-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 158px;
  height: 43px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 1.52px 1.52px 4.56px rgba(0, 0, 0, 0.08), inset 1.52px 1.52px 3.04px rgba(0, 0, 0, 0.08);
  padding: 0 16px;
  font-family: 'Inter-Regular';
  font-size: 18px;
  font-weight: 400;
  color: #000000;
}

.usa-state-pill svg {
  flex-shrink: 0;
}

.usa-state-note {
  font-family: 'Inter-Regular';
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-top: 28px;
}

/* ===== Why Outsource =====
   Spec: checklist items 20px/24px medium weight, 23px vertical gap.
   Qualified with .landing-page.usa-landing — same specificity fix as
   .usa-why-section/.usa-states above. */
.landing-page.usa-landing .usa-outsource {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: #fafafa;
}

.usa-outsource-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
  text-align: left;
}

.usa-outsource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 280px;
  max-width: 340px;
}

.usa-outsource-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inter-Regular';
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 23px;
  line-height: 24px;
}

.usa-outsource-list .landing-check-icon {
  margin-top: 4px;
}

.usa-outsource-visual {
  flex: 1 1 320px;
  max-width: 360px;
}

.usa-outsource-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  min-height: 240px;
  object-fit: cover;
}

/* ===== Our Process =====
   Spec: a single wide illustration spans all 4 steps, with a short green
   divider line under each step title instead of per-step circle icons.
   Qualified with .landing-page.usa-landing — same specificity fix as
   .usa-why-section/.usa-states/.usa-outsource above. */
.landing-page.usa-landing .usa-process {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.usa-process-visual {
  max-width: 1132px;
  margin: 40px auto 0;
}

.usa-process-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  aspect-ratio: 1132 / 232;
  background: linear-gradient(135deg, #eafaf1 0%, #d7e7f3 100%);
  object-fit: cover;
}

.usa-process-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.usa-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;
  max-width: 100%;
  text-align: center;
}

.usa-process-step h3 {
  font-family: 'Inter-Regular';
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
}

.usa-process-divider {
  display: block;
  width: 31px;
  height: 0;
  border-top: 2px solid #3cac62;
  margin-bottom: 18px;
}

.usa-process-step p {
  font-family: 'Inter-Regular';
  max-width: 184px;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #000000;
}

/* ===== CTA Banner ===== */
.usa-landing .landing-cta-banner-title {
  text-transform: capitalize;
}

.usa-cta-btn.landing-btn-primary {
  color: #3cac62;
}

/* ===== Responsive =====
   All @media rules for this page live in the dedicated
   usa-responsive.css (loaded right after this file) — kept out of here
   so the two concerns (base layout vs. breakpoint overrides) stay easy
   to scan independently, and so the responsive file can be handed off
   or audited on its own. */