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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-deep);
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
  /* frame is 13444; footer ends at 13364 */
}

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

/* that display:block beats the UA sheets [hidden] rule, so hidden imgs kept
   showing — the carousel logo never cleared between slides */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--green-pill);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 1px + overflow:hidden is enough and is universally supported; clip-path
   reads as "partial" on the project floor, so it is deliberately omitted. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--flush {
  padding-inline: 100px;
}

/* ---- type scale (Figma text styles) ----
   Tracking is in em, not px: Figma stores it as a percentage of the size, so
   em is the literal value and it stays correct at the mobile sizes. */
.t-hero {
  font-size: 72px;
  line-height: 80px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.t-statement {
  font-size: 64px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.t-h2 {
  font-size: 56px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.t-metric {
  font-size: 48px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.t-h3 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.t-quote {
  font-size: 28px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.t-h4 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.t-lead {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.t-body-l {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.t-eyebrow {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}

.t-button {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.t-body-m {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

.t-strong {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
}

.t-caption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* ---- section pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  background: var(--green-pill);
  color: var(--ink-deep);
  padding: 8px 12px;
  border-radius: 8px;
  /* Figma: py-4 around a 32px text box */
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}

/* ---- buttons (Figma Button/* components) ---- */
.btn {
  /* Figmas --button-padding-block (20) is additive in Auto Layout but the
     component height is fixed at 72 with a 40px icon, so height wins and the
     effective vertical padding is 16. Applying both overflows the button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  padding-inline: var(--button-padding-inline);
  border-radius: var(--button-radius);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .18s ease, opacity .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.btn--dark {
  background: var(--button-ink);
  color: var(--button-white);
  height: 72px;
}

.btn--dark-sm {
  height: 60px;
}

/* Header per component doc */
.btn--lime {
  background: var(--button-lime);
  color: var(--button-ink);
  height: 72px;
  border: 2px solid;
}

.btn--ghost {
  color: var(--button-tour-ink);
  padding-inline: var(--button-padding-inline);
  height: 72px;
}

.btn--whatsapp {
  padding: 0;
  gap: var(--button-gap);
}

.btn--whatsapp-ink {
  color: var(--button-ink);
}

.btn--whatsapp-lime {
  color: var(--button-lime);
}

/* ---- button states: Figma Components / Buttons (2145:2),
   Default → Hover (:hover) → Pressed (:active) → Disabled (aria-disabled / :disabled) ---- */
.btn__icon-bg { fill: var(--btn-icon-bg, var(--button-lime)); }
.btn__icon-fg { fill: var(--btn-icon-fg, #050504); }

.btn--dark:hover { background: var(--button-hover-ink); --btn-icon-bg: var(--button-hover-lime); }
.btn--dark:active { background: var(--button-ink); --btn-icon-bg: var(--button-pressed-lime); }

.btn--lime:hover { background: var(--button-hover-lime); --btn-icon-bg: var(--button-hover-lime); }
.btn--lime:active { background: var(--button-pressed-lime); --btn-icon-bg: var(--button-pressed-lime); }

.btn--ghost:hover { color: #226030; --btn-icon-bg: var(--button-hover-lime); }
.btn--ghost:active { color: var(--button-hover-ink); --btn-icon-bg: var(--button-pressed-lime); }

.btn--whatsapp-ink:hover { color: var(--button-hover-ink); }
.btn--whatsapp-ink:active { color: var(--button-tour-ink); opacity: .72; }
.btn--whatsapp-lime:hover { color: var(--button-hover-lime); }
.btn--whatsapp-lime:active { color: var(--button-pressed-lime); }

.btn[aria-disabled="true"],
.btn:disabled {
  pointer-events: none;
  --btn-icon-bg: #b3bab3;
  --btn-icon-fg: var(--button-muted-ink);
}
.btn--dark[aria-disabled="true"], .btn--dark:disabled { background: var(--button-muted-surface); color: var(--button-muted-content); }
.btn--lime[aria-disabled="true"], .btn--lime:disabled { background: var(--button-muted-content); color: var(--button-muted-ink); }
.btn--ghost[aria-disabled="true"], .btn--ghost:disabled { color: var(--button-muted-ink); }
.btn--whatsapp-ink[aria-disabled="true"], .btn--whatsapp-ink:disabled { color: var(--button-muted-ink); opacity: .5; }
.btn--whatsapp-lime[aria-disabled="true"], .btn--whatsapp-lime:disabled { color: var(--button-muted-content); }

/* ---- section shells ---- */
.section {
  margin-inline: auto;
  max-width: var(--card-w);
}

/* The 1392 card is a cap, not a floor: below it the shells were edge-to-edge.
   width holds the gutter, the per-section max-width still caps the design. */
.section,
.howitworks,
.results,
.case,
.cvp,
.ctst,
.awards,
.closing,
.footer {
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section--dark {
  background: var(--ink);
  border-radius: var(--radius-section);
}

.section--pad {
  padding: 69px var(--card-pad) 76px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}