/* ============================================================
   B_001 — Bright Landing Page
   Mobile-first responsive. Desktop hero is 2-column ≥ 900px.
   Design tokens come straight from Figma.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --color-bg: #ffffff;
  --color-bg-soft: #f4f5f8;            /* Neutral 20 */
  --color-text: #0e1e14;               /* Primary 200 */
  --color-text-muted: #383c43;         /* Neutral 80 */
  --color-text-subtle: #5c626e;        /* Neutral 70 */
  --color-green: #3dc64a;              /* brand green */
  --color-malachite: #17c95f;          /* Primary/Malachite */
  --color-cta: #0e1e14;
  --color-cta-text: #ffffff;
  --color-border: #383c43;
  --color-placeholder-bg: #e7ebef;
  --color-placeholder-text: #5c626e;

  /* Benefits gradient (sky) */
  --grad-sky-from: #3ba2da;
  --grad-sky-to: #cfebff;
  /* Offering card gradient (lime) */
  --grad-lime-from: #fbffe6;
  --grad-lime-to: #bae8cb;

  /* Typography */
  --ff-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 8px 24px rgba(14, 30, 20, 0.06);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;

  /* Container max widths */
  --container-max: 1200px;
  --content-max: 1154px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button { font: inherit; }

ul { list-style: none; padding: 0; margin: 0; }

p { margin: 0; }

h1, h2, h3 { margin: 0; }

sup { font-size: 0.6em; vertical-align: super; line-height: 0; }

.weight-medium { font-weight: 500; }

/* ---------- Empty <img> placeholders ----------
   All <img> tags ship with empty src — we render a soft neutral box
   so layout is preserved until the real assets are wired in. */
img {
  background: var(--color-placeholder-bg);
  color: transparent;       /* hide broken-img alt glyph */
  font-size: 0;             /* suppress the broken-image icon glyph */
  text-indent: -9999px;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.section-heading {
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--color-bg);
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 99px) 0;
}

.hero__inner {
  max-width: 1200px;             /* B_002: Figma content area at 1440vw = 1200 (1440 - 120×2 padding) */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: start;            /* Logo anchors to top of column like a header */
}

@media (min-width: 900px) {
  .hero__inner {
    /* B_002: right column scales with viewport, reaching Figma 630px at 1440vw (43.75vw) */
    grid-template-columns: minmax(0, 1fr) clamp(360px, 43.75vw, 630px);
    gap: clamp(40px, 4.24vw, 61px);
  }
}

/* ---------- < 900px: tablet hero ----------
   Logo + heading centered, CTA stays a centered fixed-width button,
   ratings stay side-by-side on one row, spread to opposite ends. */
@media (max-width: 899px) {
  .hero__copy { align-items: center; text-align: center; }
  .hero__logo { align-self: center; }
  .hero__heading { text-align: center; }

  .hero__bullets {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .hero .hero__bullet {
    grid-template-columns: 16px 1fr;
    align-items: center;            /* tick vertically centered with text */
  }
  .hero .hero__check {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }

  .hero__cta-group { width: 100%; max-width: 420px; align-items: center; }
  .btn--primary { width: 286px; max-width: 286px; }   /* centered, not full width */

  .hero .ratings {
    width: 100%;
    flex-wrap: nowrap;                /* keep both ratings on a single row */
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;                  /* Figma: ratings frame has 20px x-padding */
  }

  /* Mobile rating — exact Figma values (node 5527-69239) */
  .hero .rating { gap: 5.657px; }
  .hero .rating__text {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2.037px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: -0.2px;
    color: #383C43;
  }
  .hero .rating__line { line-height: 1.15; }
  .hero .rating__line strong {
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.24px;
    color: #383C43;
  }
  .hero .rating__badge {
    width: 28px;
    height: 28px;
  }
}

/* ---------- ≤ 640px: mobile — fully fluid (414px design reference) ----------
   Every dimension scales linearly with viewport width using clamp(min, vw, max)
   so the hero stays intact down to ~316px without overflow. */
@media (max-width: 640px) {
  .hero {
    padding: clamp(20px, 5.797vw, 32px) clamp(12px, 4.831vw, 20px) 18px;
  }

  .hero__copy { gap: clamp(24px, 9.662vw, 40px); }
  .hero__content { gap: clamp(18px, 7.729vw, 32px); }

  .hero__logo { height: clamp(20px, 6.763vw, 28px); width: clamp(86px, 28.985vw, 120px); }
  .hero__logo-img { width: clamp(86px, 28.985vw, 120px); height: clamp(20px, 6.763vw, 28px); }

  .hero__heading {
    font-size: clamp(22px, 7.729vw, 32px);
    line-height: 1.11;                /* 111% on mobile (Figma spec) */
    letter-spacing: -0.03em;
  }

  .hero__bullets {
    gap: clamp(8px, 2.415vw, 10px);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero .hero__bullet {
    grid-template-columns: 16px 1fr;
    align-items: center;            /* tick vertically centered with text */
    gap: clamp(8px, 2.657vw, 11px);
    font-size: clamp(12px, 3.382vw, 14px);
    line-height: 1.3;
  }
  .hero .hero__check {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }

  .hero__cta-group {
    width: 100%;
    max-width: none;
    gap: clamp(16px, 5.797vw, 24px);
    align-items: center;
  }
  .btn {
    height: clamp(40px, 11.594vw, 48px);
    padding: clamp(6px, 1.932vw, 8px) clamp(16px, 5.797vw, 24px);
    font-size: clamp(13px, 3.382vw, 14px);
    gap: clamp(6px, 1.932vw, 8px);
  }
  .btn--primary,
  .hero .btn--primary { width: 100%; max-width: 100%; }
  .btn__icon { width: clamp(16px, 5.314vw, 22px); height: clamp(16px, 5.314vw, 22px); }
  .btn__arrow { width: clamp(18px, 5.797vw, 24px); height: clamp(18px, 5.797vw, 24px); }
  .btn--ghost {
    height: clamp(32px, 9.179vw, 38px);
    font-size: clamp(13px, 3.865vw, 16px);
    gap: clamp(8px, 2.899vw, 12px);
  }

  /* Mobile ratings — Figma node 5527-69239, scaled fluidly from 414px ref */
  .hero .ratings {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(8px, 3.865vw, 16px);
    padding: 0 clamp(12px, 4.831vw, 20px);
  }
  .hero .rating { gap: clamp(4px, 1.366vw, 5.657px); }
  .hero .rating__badge {
    width: clamp(22px, 6.763vw, 28px);
    height: clamp(22px, 6.763vw, 28px);
  }
  .hero .rating__text {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(1.5px, 0.492vw, 2.037px);
    font-size: clamp(8px, 2.415vw, 10px);
    line-height: 1.15;
    letter-spacing: -0.2px;
    color: #383C43;
  }
  .hero .rating__line { white-space: nowrap; line-height: 1.15; }
  .hero .rating__line strong {
    font-size: clamp(10px, 2.899vw, 12px);
    line-height: 1;
    letter-spacing: -0.24px;
    color: #383C43;
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);   /* Figma: 72px between logo and content block */
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;                     /* heading → bullets → CTA cluster */
}

.hero__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 28px;
  width: 120px;
}
.hero__logo-img { width: 120px; height: 28px; background: transparent; }

.hero__heading {
  font-weight: 300;
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.25;                  /* 64px × 1.25 = 80px at 1440vw (Figma spec) */
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: break-word;
}

.hero__heading-strong { font-weight: 600; }
.hero__heading-light  { font-weight: 300; }
.hero__sup            { font-size: 0.45em; font-weight: 700; }

.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}

.hero__bullet {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  align-items: flex-start;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.3;
}
.hero__bullet p { margin: 0; }
.hero__bullet strong { font-weight: 700; }

.hero__check {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-top: 2px;
  background: transparent;
}

/* CTA group */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 8px 24px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid rgba(61, 198, 74, 0.55);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-cta);
  color: var(--color-cta-text);
  width: 100%;
  max-width: 286px;
}
.btn--primary:hover {
  background: var(--color-malachite);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(23, 201, 95, 0.28);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  padding: 8px 12px 8px 0;
  height: 38px;
  gap: 12px;
  font-size: 16px;
}
.btn--ghost:hover { opacity: 0.7; }

.btn__icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
}
.btn__arrow {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: transparent;
  filter: brightness(0);
}

/* Ratings */
.ratings {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;            /* both ratings always live on one row */
  align-items: center;
}
.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.rating__badge {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  background: transparent;                    /* border + rounded corners are baked into the SVG */
  object-fit: contain;
}
.rating__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.15;
  display: flex;
  flex-direction: column;        /* desktop = two stacked lines (original Figma) */
  gap: 4px;
  min-width: 0;
}
.rating__line {
  margin: 0;
  white-space: nowrap;           /* never break a single line in two */
}
.rating__line strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Phone (hero) — single device image, no constructed frame */
.hero__phone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__phone-img {
  width: 100%;
  max-width: 630px;              /* Figma desktop (1440vw): 630 × 658 hero image slot */
  aspect-ratio: 2556 / 2632;     /* match the new v2 asset's intrinsic aspect (~0.971) */
  height: auto;
  background: transparent;
  object-fit: contain;           /* show the full image — its dark frame is baked into the
                                     asset, so no crop. Replaces the old cover/right-center
                                     trick that hid left-edge padding on the previous asset. */
  display: block;
}

/* Mobile uses a different image with portrait aspect (1640×2036 ≈ 4:5) */
@media (max-width: 640px) {
  .hero__phone-img {
    aspect-ratio: 1640 / 2036;
  }
}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits {
  padding: 18px 10px 10px;
  background: var(--color-bg);
}
.benefits__inner {
  position: relative;
  border-radius: 38px;
  padding: 76.032px clamp(40px, 12.5vw, 180px) 115.38px;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-placeholder-bg);
}
.benefits__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.benefits__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
.benefits__content {
  position: relative;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 38px;
}

.benefits__pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 6.764vw, 97.4px);
  background: rgba(255, 255, 255, 0.06);
  border: 1.564px solid #0E1E14;
  border-radius: 25.027px;
  padding: 9px 19.008px 9px 30.413px;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 22.81px;
  line-height: 1.1;
  letter-spacing: -0.4752px;
  color: #0E1E14;
  white-space: nowrap;
}
.benefits__pill > span:first-child {
  white-space: nowrap;
}
.benefits__pill-icon {
  width: 58.336px;
  height: 58.336px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  background: transparent;
}
.benefits__pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.benefits__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22.81px;
}
.benefits__list li {
  display: flex;
  align-items: center;
  gap: 11.405px;
  color: #0E1E14;
  font-family: 'Figtree', sans-serif;
  font-size: 15.206px;
  font-weight: 400;
  line-height: 22.81px;
  white-space: nowrap;
}
.benefits__tick {
  width: 22.81px;
  height: 22.81px;
  background: transparent;
  flex-shrink: 0;
  object-fit: contain;
}

/* Mobile breakpoint — all values fluid with viewport.
   Reference design width: 414px. At 414vw, every value below matches Figma exactly. */
@media (max-width: 640px) {
  .benefits__inner {
    padding: clamp(24px, 9.686vw, 40.1px) clamp(20px, 12.783vw, 52.92px) clamp(180px, 73.976vw, 306.26px);
  }
  .benefits__content {
    gap: clamp(14px, 4.961vw, 20.54px);
    align-items: flex-start;            /* pill + tick list share the same left edge */
  }
  .benefits__pill {
    gap: clamp(16px, 23.155vw, 95.86px);
    padding: clamp(4px, 1.304vw, 5.4px) clamp(8px, 2.835vw, 11.737px) clamp(4px, 1.304vw, 5.4px) clamp(14px, 5.67vw, 23.473px);
    border: 1.075px solid #0E1E14;
    border-radius: clamp(12px, 4.155vw, 17.204px);
    font-size: clamp(13px, 4.252vw, 17.605px);
    letter-spacing: -0.489px;
  }
  .benefits__pill-icon {
    width: clamp(28px, 9.686vw, 40.1px);
    height: clamp(28px, 9.686vw, 40.1px);
  }
  .benefits__list {
    align-items: flex-start;
    gap: clamp(10px, 3.78vw, 15.649px);
  }
  .benefits__list li {
    gap: clamp(8px, 2.835vw, 11.737px);
    font-size: clamp(11px, 3.307vw, 13.693px);
    line-height: 1.1;
    white-space: normal;
  }
  .benefits__tick {
    width: clamp(10px, 3.78vw, 15.649px);
    height: clamp(10px, 3.78vw, 15.649px);
    flex-shrink: 0;
  }
}

/* ============================================================
   FEATURED IN — desktop: white bg, single row (Figma 5520-65481)
                 mobile:  #F4F5F8 bg, 2 rows 3+2 (Figma 5739-228337)
   ============================================================ */
.featured {
  background: var(--color-bg);                  /* desktop: white, no bg color */
  /* top padding: 60px at 1440vw (4.167vw), scales down to 24px on narrower desktops */
  padding: clamp(24px, 4.167vw, 60px) clamp(20px, 4vw, 80px) clamp(32px, 4vw, 56px);
  text-align: center;
}
.featured__eyebrow {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;                              /* Figma desktop: Medium */
  font-size: 12px;
  letter-spacing: 1.68px;
  line-height: 19.5px;
  color: #0E1E14;
  margin: 0 0 clamp(16px, 2vw, 28px);
  text-transform: uppercase;
}
.featured__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.featured__logos picture {
  display: inline-block;
  height: clamp(36px, 4.2vw, 60.6px);
  width: clamp(123px, 14.3vw, 206.4px);
  flex: 0 0 auto;
}
.featured__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;                /* override the global img placeholder bg */
}

/* ---------- Mobile / tablet (< 1100px) — Figma 5739-228337 ----------
   3 logos in row 1, 2 logos in row 2 (centered).
   The desktop 5-in-row layout requires ≥1080px just for the logos, so
   anything narrower uses the mobile 3+2 layout.
   Each logo slot = 1/3 of (container - 2 gaps) so the layout holds from
   1099px all the way down to 320px without breaking. */
@media (max-width: 1099px) {
  .featured {
    background: #F4F5F8;                         /* mobile: Neutral 20 bg */
    margin: 0 clamp(20px, 5vw, 99px);            /* inset matches hero horizontal padding (B_003 has no .benefits section, hero is directly above) */
    padding: 12px clamp(12px, 4.5vw, 30px);      /* gap-to-hero handled by .hero padding-bottom */
  }
  .featured__eyebrow {
    font-weight: 700;                            /* Figma mobile: Bold */
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 20px;
    margin: 0 0 6px;                             /* Figma: gap-6 between eyebrow & logos */
  }
  .featured__logos {
    gap: clamp(6px, 2vw, 8px);                   /* Figma mobile: gap-8 (shrinks slightly below 414) */
    max-width: 386px;                            /* container max width @ Figma mobile */
    margin: 0 auto;
  }
  /* Logo slots (the <picture>) are 1/3 of (container width - 2 gaps) so the
     3-per-row layout holds from 1099px down to 320px. */
  .featured__logos picture {
    width: calc((100% - 2 * clamp(6px, 2vw, 8px)) / 3);
    height: auto;
    aspect-ratio: 123.335 / 36;                  /* Figma mobile logo proportions */
  }
  .featured__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ---------- ≤ 640px: mobile — match hero mobile horizontal padding ---------- */
@media (max-width: 640px) {
  .featured {
    margin: 0 clamp(12px, 4.831vw, 20px);        /* matches hero mobile horizontal padding */
  }
}

/* ============================================================
   PRODUCT OFFERINGS — desktop Figma 5739-166969, mobile 5739-228427
   The card visual (gradient + phone illustration + clouds) is a single
   image asset — no CSS gradient. .offering__visual is just a clipped frame.
   ============================================================ */
.offerings {
  background: var(--color-bg);
  padding: 40px 30px;                                /* mobile: Figma py-40 px-30 */
}
.offerings .section-heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;                                  /* Figma: SemiBold */
  font-size: 36px;                                   /* mobile */
  line-height: 44px;
  letter-spacing: -2px;
  color: #0E1E14;
  text-align: left;
  margin: 0 0 24px;                                  /* Figma mobile: gap-24 */
}

.offerings__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;                                         /* mobile: gap between cards */
}

.offering {
  display: flex;
  flex-direction: column;
  gap: 40px;                                         /* Figma: gap between image and body */
  align-items: flex-start;                           /* left-align all content */
}

/* Card visual — single image asset (no CSS gradient overlay) */
.offering__visual {
  position: relative;
  width: 100%;
  height: 240px;                                     /* mobile Figma: h-240 */
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-placeholder-bg);           /* only as placeholder until image loads */
}
.offering__device {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                                 /* image fills the card frame */
  border-radius: 24px;
}

.offering__body {
  display: flex;
  flex-direction: column;
  gap: 16px;                                         /* Figma mobile: gap-16 */
  align-items: flex-start;
  width: 100%;
  text-align: left;
}
.offering__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;                                  /* mobile: Bold */
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: #0E1E14;
  margin: 0;
}
.offering__copy {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;                                  /* Regular */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.24px;
  color: #0E1E14;
  margin: 0;
}

/* Ghost button overrides for offering CTAs — Figma: pr-12 py-8, h-38, rounded-12, gap-12 */
.offering .btn--ghost {
  height: 38px;
  padding: 8px 12px 8px 0;
  gap: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.24px;
  color: #0E1E14;
}

/* ---------- 2-column layout (≥450px) — Figma 5739-166969 ----------
   2 cards per row from 450px upward. Column gap, padding and heading size all
   scale fluidly so the layout stays usable from 450px → 1440px+.
   At the Figma reference (1440px wide) values resolve to:
     padding 60px 120px, heading 60/80, column-gap 120, row-gap 60, card 360px.
   Below 800px the heading stays left-aligned (mobile spec) and card body keeps
   the tighter mobile gap so 2 cards fit comfortably side-by-side. */
@media (min-width: 450px) {
  .offerings {
    padding: clamp(24px, 4.17vw, 60px) clamp(16px, 8.33vw, 120px);
  }
  .offerings .section-heading {
    font-size: clamp(28px, 4.17vw, 60px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -2px;
    margin: 0 0 clamp(24px, 4.17vw, 60px);
    font-feature-settings: "liga" 0;
  }
  .offerings__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
    column-gap: clamp(16px, 8.33vw, 120px);          /* Figma: 120px @ 1440px; scales down narrower */
    row-gap: clamp(24px, 4.17vw, 60px);              /* Figma: 60px @ 1440px */
  }
  .offering {
    width: 100%;
    max-width: 360px;
    gap: clamp(20px, 2.78vw, 40px);                  /* image ↔ body — tightens on narrow */
  }
  .offering__visual {
    aspect-ratio: 360 / 300;                         /* Figma desktop card: 360 × 300 */
    height: auto;
  }
  .offering__body {
    gap: clamp(12px, 1.67vw, 24px);                  /* 16/24 between narrow ↔ desktop */
  }
  .offering__title {
    font-size: clamp(20px, 2.5vw, 36px);
    line-height: 1.22;
    letter-spacing: -0.055em;                        /* scales with font (Figma: -2px on 36px ≈ -0.055em) */
    min-height: calc(1.22em * 2);                    /* reserve 2 lines so buttons align across row */
    font-feature-settings: "liga" 0;
  }
  .offering__copy {
    font-size: clamp(13px, 1.11vw, 16px);
    min-height: calc(1.5em * 2);                     /* line-height 1.5 × 2 lines */
    font-feature-settings: "liga" 0;
  }
}

/* ---------- ≥800px: switch heading to centered + bump weights to Figma desktop spec ---------- */
@media (min-width: 800px) {
  .offerings .section-heading {
    text-align: center;
  }
  .offering__title {
    font-weight: 600;                                /* Figma desktop: SemiBold (mobile is Bold/700) */
  }
}

/* ============================================================
   TRUST — desktop Figma 5739-167040 / mobile Figma 5739-224982
   Mobile (<800px): single column stacked. Heading+badges group, then
   checklist group. Badges spread `justify-between` across the row.
   Desktop (≥800px): two columns side-by-side, items-center justify-between.
   ============================================================ */
.trust {
  background: #FFFFFF;
  padding: 40px 30px;                              /* mobile: Figma py-40 px-30 (mobile section is self-contained) */
  max-width: var(--container-max);                 /* 1200 — the inner content area; centering provides the 120px outer margins at 1440 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;                                       /* mobile: gap-24 between heading-group & checklist */
}

.trust__col {
  display: flex;
  flex-direction: column;
  gap: 24px;                                       /* mobile: gap-24 inside each group */
  width: 100%;
}

.trust__heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;                                /* Figma: SemiBold */
  font-size: 36px;                                 /* mobile */
  line-height: 44px;
  letter-spacing: -2px;
  color: #0E1E14;
  margin: 0;
  font-feature-settings: "liga" 0;
}

/* ---------- Badges row ---------- */
.trust__badges {
  display: flex;
  justify-content: space-between;                  /* mobile: spread across container width */
  align-items: center;
  width: 100%;
  gap: 12px;
  margin: 0;
  flex-wrap: nowrap;
}
/* Each logo is a single image asset (user supplies the file).
   Figma frame: 92×92 rounded-16; the actual logo art fills it. */
.trust__badge-img {
  display: block;
  width: 92px;                                     /* mobile: Figma 92×92 */
  height: 92px;
  border-radius: 16px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}

/* ---------- Checklist ---------- */
.trust__points {
  display: flex;
  flex-direction: column;
  gap: 24px;                                       /* mobile: gap-24 */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.trust__points li {
  display: flex;
  align-items: center;
  gap: 12px;                                       /* mobile: gap-12 */
  font-family: 'Figtree', sans-serif;
  font-weight: 600;                                /* SemiBold */
  font-size: 20px;                                 /* mobile */
  line-height: 28px;
  letter-spacing: -0.5px;
  color: #0E1E14;
  font-feature-settings: "liga" 0;
}
.trust__icon {
  width: 32px;                                     /* mobile: 32×32 (Figma) */
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust__icon-img {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

/* ---------- Desktop ≥800px — Figma 5739-167040 ----------
   At 1440px Figma reference:
     heading 60/80 -2px (w-338), col gap-40,
     badge row gap-24, checklist gap-40,
     item gap-24, icon 44×44 (inner svg 24×24), text 32/40 -1px. */
@media (min-width: 800px) {
  /* Figma parent frame 5727-199600 @ 1440 reference:
     px-120 py-60 outer, inner row justify-between. The 120px x-padding in Figma
     represents the page-level margin — achieved here by centering a 1200px
     max-width container in the viewport (max-width:1200 + margin:0 auto).
     So the section itself only applies vertical padding; horizontal is 0. */
  .trust {
    padding: 60px 0;                               /* Figma: py-60 only — x-padding comes from outer centering */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;                /* Figma: cols at left/right edges of 1200 content */
    gap: 0;
  }
  .trust__col {
    width: auto;
    gap: 40px;                                     /* Figma desktop: col gap-40 */
  }
  .trust__col--left {
    flex-shrink: 0;
    width: 338px;                                  /* Figma w-338 for the heading column */
  }
  .trust__col--right {
    flex-shrink: 0;
  }
  .trust__heading {
    font-size: 60px;                               /* Figma desktop reference @ 1440 */
    line-height: 80px;                             /* Figma: leading-80 */
    letter-spacing: -2px;
    width: 338px;
    max-width: 338px;
  }
  .trust__badges {
    justify-content: flex-start;
    gap: 24px;                                     /* Figma desktop: gap-24 */
    width: auto;
  }
  .trust__badge-img {
    width: 92px;                                   /* Figma desktop: 92×92 fixed */
    height: 92px;
  }
  .trust__points {
    gap: 40px;                                     /* Figma desktop: gap-40 */
  }
  .trust__points li {
    gap: 24px;                                     /* Figma desktop: gap-24 */
    font-size: 32px;
    line-height: 40px;                             /* Figma: leading-40 */
    letter-spacing: -1px;
  }
  .trust__icon {
    width: 42px;                                   /* Figma desktop: 44×44 */
    height: 42px;
  }
}

/* ---------- Mid desktop (800–1200) — scale text down so cols don't collide ----------
   Below 1200px viewport the max-width container no longer constrains the section,
   so we add internal x-padding (substitutes for the page-level margin), and scale
   typography down to keep the two columns from colliding inside the 338px heading-col. */
@media (min-width: 800px) and (max-width: 1199.98px) {
  .trust {
    padding: clamp(40px, 4.17vw, 60px) clamp(30px, 8.33vw, 120px);
  }
  .trust__heading {
    font-size: clamp(40px, 4.17vw, 60px);
    line-height: 1.15;
    width: clamp(240px, 23.5vw, 338px);
    max-width: 338px;
  }
  .trust__col--left {
    width: clamp(240px, 23.5vw, 338px);
  }
  .trust__points li {
    font-size: clamp(20px, 2.22vw, 32px);
    line-height: 1.25;
  }
  .trust__points {
    gap: clamp(28px, 2.78vw, 40px);
  }
  .trust__icon {
    width: clamp(36px, 3.06vw, 44px);
    height: clamp(36px, 3.06vw, 44px);
  }
  .trust__badge-img {
    width: clamp(76px, 6.39vw, 92px);
    height: clamp(76px, 6.39vw, 92px);
  }
}

/* ============================================================
   FOOTER
   Like the trust section: the 120px page-level margin is provided by
   centering a 1200px max-width container; no internal x-padding at ≥1200.
   ============================================================ */
.footer {
  background: var(--color-bg);
  /* Figma 5727-199659 desktop (1440vw): pt 60 / pb 40; Figma 5739-225040 mobile (414vw): pt 40 / pb 20, 30px sides, 60 gap */
  padding: clamp(40px, 4.167vw, 60px) 0 clamp(20px, 2.778vw, 40px);
  max-width: var(--container-max);                 /* 1200 — outer 120px margins via centering */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.167vw, 60px);
}

/* Below max-width — centering no longer creates margins, so add internal x-padding here */
@media (max-width: 1199.98px) {
  .footer {
    /* Figma 5739-225040 mobile (414vw): 30px sides */
    padding-left: clamp(30px, 8.33vw, 120px);
    padding-right: clamp(30px, 8.33vw, 120px);
  }
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma 5727-199659 desktop & 5739-225040 mobile: 40px gap between heading and stores */
  gap: 40px;
  text-align: center;
}
.footer__heading {
  text-align: center;
  /* Desktop (≥450px): clamp(48, 4.167vw, 60) — 60px @ 1440vw, 48px floor */
  font-size: clamp(48px, 4.167vw, 60px);
  line-height: 1.333;
  letter-spacing: -2px;
}
/* Mobile (<500px): clamp(24, 8.392vw, 36) — 36px @ 429vw design base, 24px floor */
@media (max-width: 499.98px) {
  .footer__heading {
    font-size: clamp(24px, 8.392vw, 36px);
  }
}
.footer__heading-break { display: none; }
@media (max-width: 640px) {
  .footer__heading-break { display: inline; }
}

.footer__stores {
  display: flex;
  /* Figma desktop 5727-199659: 36px gap; mobile 5739-225040: 30px gap */
  gap: clamp(30px, 2.5vw, 36px);
  flex-wrap: nowrap;                               /* both badges always on one row */
  justify-content: center;
  width: 100%;
}

.store-badge {
  display: inline-block;
  /* Figma desktop 5727-199659: 192 × 58 @ 1440vw; mobile 5739-225040: 168 × 48 @ 414vw */
  width: clamp(168px, 13.333vw, 192px);
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
  line-height: 0;                                  /* prevent stray inline-baseline gap below img */
}
.store-badge:hover { opacity: 0.9; }
.store-badge:focus-visible {
  outline: 3px solid rgba(61, 198, 74, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.store-badge__img {
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 233;                         /* native badge ratio */
  background: transparent;
  object-fit: contain;
}

/* Legal */
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;                                  /* Figma 5727-199659: Figtree SemiBold for top legal block */
  color: var(--color-text);
}
.footer__legal a {
  text-decoration: underline;
  color: var(--color-text);
}
.footer__legal a:hover { opacity: 0.7; }

.footer__links { font-weight: 600; }
.footer__disclosures {
  margin-top: 14px;
  /* Figma 5727-199659: #5C626E, 10/14, -0.12 tracking, Figtree Regular */
  color: #5C626E;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: -0.12px;
  font-weight: 400;                                  /* override .footer__legal SemiBold — Figma: Figtree Regular */
}
.footer__disclosures strong { color: inherit; font-weight: 400; }

/* ============================================================
   Tablet refinements
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner { gap: 32px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}