/* ==========================================================================
   VOYA Landing — page-level styles (atop colors_and_type.css)
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }

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

/* ---------- Layout ---------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

.section {
  padding: 160px 0;
  position: relative;
}
@media (max-width: 833px) { .section { padding: 100px 0; } }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: inline-block;
  margin: 0 0 32px;
}

/* Display headline scale */
.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(40px, 5.6vw, 84px);
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(36px, 4.4vw, 64px);
}
.display-md {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
}

.soft { opacity: 0.55; }
.soft-strong { opacity: 0.40; }

.lede {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 24px 0 0;
  max-width: 52ch;
}
@media (min-width: 1024px) { .lede { font-size: 20px; } }

.section-rule {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
  margin: 0;
  border: 0;
}

/* ---------- Material Symbols ---------- */
.material-symbols-outlined {
  font-variation-settings: "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- Buttons (extending DS) ---------- */
.btn {
  height: 52px;
  padding: 0 28px;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }

/* ---------- Form (inline email) ---------- */
.form-inline {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  max-width: 520px;
  background: transparent;
  transition: border-color .25s ease;
}
.form-inline:focus-within { border-color: var(--text); }
[data-theme="dark"] .form-inline { border-color: rgba(255,255,255,0.25); }
[data-theme="dark"] .form-inline:focus-within { border-color: rgba(255,255,255,0.6); }

.form-inline input {
  flex: 1;
  height: 44px;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 18px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--text);
}
.form-inline input::placeholder {
  color: var(--text-tertiary);
}
.form-inline button {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.form-inline button:hover { opacity: 0.92; transform: scale(1.02); }
.form-inline button:active { transform: scale(0.98); }

.form-help {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 12px 4px 0;
}
/* LGPD consent — visually secondary to .form-help: smaller + more faded. */
.form-consent {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-tertiary);
  opacity: 0.72;
  margin: 5px 4px 0;
  max-width: 48ch;
  text-wrap: pretty;
}
.form-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  transition: opacity .2s ease;
}
.form-consent a:hover { opacity: 0.78; }

.form-success {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section 1 — Capa ---------- */
/* ---- Cover scroll progress (driven by JS, 0 → 1 across 100vh) ---- */
:root { --capa-p: 0; }

/* Header logo target geometry — read by JS to compute end transform */
.capa {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background: #000;
  color: #FFF;
  overflow: hidden;
  isolation: isolate;
}

/* Light scheme — pure white plate, photo centered editorial block. */
.capa--light { background: #FFFFFF; }
.capa--light .capa-fade-white { display: none; }
.capa-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  opacity: clamp(0, 1 - (var(--capa-p) - 0.0) / 0.8, 1);
}
.capa-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
}
/* Uniform dark veil — softens the photo so VOYA wordmark and tagline
   read as the primary focal point. Sits above the image, beneath the
   bottom gradient and all foreground elements. */
.capa-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.42);
  z-index: 0;
}
/* Bottom dark gradient — keep subtle since asphalt is already dark.
   Sits above the image, below the text/arrow. */
.capa-vignette {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}
@media (max-width: 833px) {
  .capa-portrait-img { object-position: 27% 18%; }
}
/* Bottom gradient darkens this area — render foreground white. */
.capa--light .capa-tagline,
.capa--light .scroll-cue,
.capa--light .scroll-cue .material-symbols-outlined { color: #FFFFFF; }
.capa--light .scroll-cue { border-color: rgba(255,255,255,0.7); }

/* Background image — opacity 1→0 (0–80%), scale 1→1.05 */
.capa-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform, opacity;
  transform: scale(calc(1 + var(--capa-p) * 0.05));
  opacity: clamp(0, 1 - (var(--capa-p) - 0.0) / 0.8, 1);
}
.capa-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.capa-bg-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.66);
  pointer-events: none;
}

/* Black fade — 80–100%. Capa lands on the same #000 the Hero uses,
   so there is no seam at the section boundary. */
.capa-fade-white {
  position: absolute; inset: 0;
  z-index: 1;
  background: #000;
  opacity: clamp(0, (var(--capa-p) - 0.8) / 0.2, 1);
  pointer-events: none;
}

/* Center → header logo, animated via CSS custom props set by JS.
   position: fixed so its coordinate space matches the .topnav-logo
   (also fixed) — dx/dy stay correct across the entire scroll range.
   Hidden once Capa exits viewport (the topnav logo takes over). */
.capa-logo {
  position: fixed;
  z-index: 1000; /* must sit above .topnav (z:50) so the docked wordmark
                    is never covered by the navbar background fade-in. */
  /* Default: centered, scaled up. JS overrides with computed transform. */
  top: 50%;
  left: 50%;
  transform:
    translate(calc(-50% + var(--logo-tx, 0px)), calc(-50% + var(--logo-ty, 0px)))
    scale(var(--logo-scale, 1));
  transform-origin: center center;
  transition: none;
  will-change: transform;
  display: block;
  line-height: 0;
}
.capa-logo img {
  height: 58px; /* ~+18%. JS scales toward header 14px exactly. */
  display: block;
  /* White SVG → black via invert. JS interpolates --logo-invert from 0 → 1. */
  filter: invert(var(--logo-invert, 0));
  transition: none;
  will-change: filter;
}

.capa-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* tagline + arrow fade out 0–25% */
  opacity: clamp(0, 1 - var(--capa-p) / 0.25, 1);
  transition: none;
  will-change: opacity;
}
.capa-tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13.5px;
  letter-spacing: 0.25em;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.scroll-cue {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  opacity: 0.6;
  animation: scrollPulse 2.4s ease-in-out infinite;
}
.scroll-cue .material-symbols-outlined { font-size: 18px; }
@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Mobile portrait — pull eye further into frame */
@media (max-width: 833px) {
  .capa-bg-img { object-position: 27% 18%; }
  .capa-logo img { height: 47px; }
  .capa-tagline { font-size: 12.5px; }
}

/* The morphed Capa wordmark stays visible throughout the entire page —
   it IS the navbar logo at the end of its scroll arc. Do not hide it. */

/* Center vertical balance: 1fr top + content + 1fr bottom, with the
   tagline+arrow pinned to a balanced bottom slot. */
.capa-stage-spacer { display: block; }

/* Tagline size bump (+15% from 13.5 → 15.5; mobile 12.5 → 14.5) */
.capa-tagline { font-size: 15.5px; }
@media (max-width: 833px) { .capa-tagline { font-size: 14.5px; } }

/* Reduced motion — snap to final state */
@media (prefers-reduced-motion: reduce) {
  .capa-bg { opacity: 0; }
  .capa-fade-white { opacity: 1; }
  .capa-bottom { opacity: 0; }
  .capa-logo { display: none; }
  .scroll-cue { animation: none; }
}

/* ---------- Section 2 — Hero (full-bleed liquid-wave background) ----------
   Image fills the section in natural colors (no dark overlay). Content sits
   in the upper white area where the wave hasn't reached yet, so dark text
   reads cleanly. Proportions follow the reference: tighter pill, button is
   a flush continuation of the pill, title ~5-6vw, content nudged upward. */
.hero {
  position: relative;
  background: #FFFFFF !important;
  color: var(--text);
  width: 100%;
  /* Match wave image aspect so it shows in full at most viewports. */
  aspect-ratio: 2368 / 1760;
  min-height: 720px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 833px) {
  /* Mobile uses the portrait wave image (1536x2752) — match its aspect so
     the whole image shows without cropping. */
  .hero {
    aspect-ratio: 1536 / 2752;
    min-height: 0;
    max-height: 100vh;
  }
}
.hero::before, .hero::after { display: none !important; }
.hero-beam { display: none !important; }
.hero-card,
.hero-card-sheen,
.hero-signature { display: none !important; }

/* Full-bleed wave image — natural colors, no dark veil */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-bg-veil { display: none; }

/* Fade-to-black at the bottom of the Hero — bridges into the dark
   Problema section beneath without a hard white-to-black seam. */
.hero-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0.85) 85%,
    #000 100%
  );
}
@media (max-width: 833px) {
  .hero-fade-bottom { height: 28%; }
}

/* Content stack — nudged into the upper portion of the image where the
   background is light/white so the dark headline reads cleanly. */
.hero .hero-stack {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 1100px;
  width: min(100%, 92vw);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 833px) {
  .hero .hero-stack { top: 8%; }
}
.hero-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #777777;
  margin: 0 0 20px;
  display: inline-block;
}
.hero .hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.04;
  font-size: clamp(36px, 5.0vw, 68px);
  margin: 0;
  color: #0A0A0A;
  text-wrap: balance;
}
.hero .hero-headline .line { display: block; }
.hero .hero-sub {
  margin: 18px auto 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
  max-width: 820px;
}
.hero .form-help {
  margin-top: 12px;
  color: #888888;
  text-align: center;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 12px;
}

/* Legacy splash strip — no longer used */
.hero-splash, .hero-splash-img { display: none !important; }
.hero-droplets {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.hero-drop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b3a1a 0%, #3a1d0a 70%, #1a0c04 100%);
}
.hero-drop--1 { width: 8px;  height: 10px; left: 22%; top: 56%; opacity: 0.36; transform: rotate(-12deg); border-radius: 50% 50% 60% 40%; }
.hero-drop--2 { width: 5px;  height: 6px;  left: 30%; top: 50%; opacity: 0.30; }
.hero-drop--3 { width: 11px; height: 14px; left: 70%; top: 54%; opacity: 0.38; transform: rotate(8deg); border-radius: 55% 45% 50% 50%; }
.hero-drop--4 { width: 6px;  height: 7px;  left: 78%; top: 48%; opacity: 0.32; }
.hero-drop--5 { width: 4px;  height: 5px;  left: 50%; top: 46%; opacity: 0.26; }

/* form-inline — Apple-style liquid glass pill: barely-tinted gray frost,
   soft inner refraction, almost-invisible edges. Button is the CTA. */
.hero .form-inline {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  margin: 0 auto !important;
  height: 48px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  width: 470px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(180,180,180,0.10) 100%),
    rgba(140, 140, 140, 0.14) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.08) !important;
  isolation: isolate;
}
/* Soft internal refraction — gentle top sheen + faint bottom catch-light,
   keeping the surface alive without a hard border. */
.hero .form-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.04) 38%,
      rgba(255,255,255,0)    62%,
      rgba(255,255,255,0.06) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 0;
}
.hero .form-inline:focus-within { border-color: rgba(0,0,0,0.18) !important; }
.hero .form-inline input[type="tel"],
.hero .form-inline input[type="email"],
.hero .form-inline input {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 14px 0 22px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: #0A0A0A !important;
  font-family: var(--font-text) !important;
  font-size: 13px !important;
  letter-spacing: 0.005em !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.hero .form-inline input::placeholder { color: rgba(10,10,10,0.45) !important; opacity: 1 !important; }
/* CTA — brand white-to-silver gradient, fills the full height of the pill,
   flush right. Same border-radius as the pill so its right end matches the
   pill's right curve perfectly (left side stays pill-rounded too, creating
   the "continuation" look). */
.hero .form-inline button {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 26px !important;
  background: linear-gradient(98.15deg, #FFFFFF -1.43%, #DCDCDC 50%, #A8A8A8 102%) !important;
  color: #0A0A0A !important;
  font-family: var(--font-text) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer !important;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 5px 14px rgba(0,0,0,0.24) !important;
}
.hero .form-inline button:hover { filter: brightness(1.06); transform: scale(1.015); }
.hero .form-inline button:active { transform: scale(0.985) !important; }
.hero .form-help { color: #888888 !important; }
.hero .form-consent { color: #9d9d9d !important; }

/* Hero success pill — match new slimmer pill geometry */
.hero .success-pill {
  width: 470px;
  height: 48px;
  font-size: 13px;
}

/* Hero capture success state — replaces the form pill in-place. */
.hero .success-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  width: 480px;
  max-width: 100%;
  height: 56px;
  padding: 4px 22px;
  box-sizing: border-box;
  border-radius: 30px;
  background: linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 50%, #000000 100%);
  color: #FFFFFF;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  animation: heroPillIn .42s cubic-bezier(.2,.7,.2,1) both;
}
.hero .success-pill > span { white-space: nowrap; }
@keyframes heroPillIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-old {
  position: relative;
  /* Match Capa overlay end-state: pure black so there is no seam between
     the Capa fade-to-black moment and the Hero. */
  background: #000;
  color: #FFF;
  padding: 200px 0 200px;
  overflow: hidden;
  isolation: isolate;
}
/* ===== Hero — Mobile (portrait wave image) ===== */
@media (max-width: 833px) {
  .hero {
    aspect-ratio: 1536 / 2752;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero-bg-img { object-fit: cover; object-position: center center; }

  /* Stack — positioned higher on mobile, in the white upper portion */
  .hero .hero-stack {
    top: 13%;
    width: min(100%, 94vw);
    padding: 0 8px;
    gap: 0;
  }
  .hero-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.26em !important;
    margin: 0 0 16px !important;
  }
  /* Override the inline 58px font-size on each line span */
  .hero .hero-headline { font-size: clamp(19px, 6.2vw, 28px) !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; }
  .hero .hero-headline .line { white-space: nowrap; }
  .hero .hero-headline .line > span,
  .hero .hero-headline .line-1 > span,
  .hero .hero-headline .line-2 > span {
    font-size: inherit !important;
  }
  /* Override the inline 25px / 700 on the subtitle */
  .hero .hero-sub {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.05em !important;
    margin: 14px auto 22px !important;
    max-width: 90% !important;
  }
  /* Slimmer pill that fits a 320-400px viewport */
  .hero .form-inline { width: min(360px, 92vw) !important; height: 46px !important; }
  .hero .form-inline button { padding: 0 18px !important; font-size: 10px !important; letter-spacing: 0.14em !important; }
  .hero .form-inline input { font-size: 12.5px !important; padding: 0 12px 0 18px !important; }
  .hero .success-pill { width: min(360px, 92vw); height: 46px; font-size: 12.5px; }
  .hero .form-help { font-size: 11px; margin-top: 10px; }
  .hero .form-consent { font-size: 10px; margin-top: 5px; }
}

/* Localized lower-area glow — atmospheric pool that lives entirely
   within the dark canvas. Anchored behind the card's lower-half,
   spreads outward and downward, fades back to dark before reaching
   the section's bottom edge. NOT a transition. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Anchor near the vertical middle so the glow's brightest point
     sits behind the card's lower-half, with the falloff completing
     before the section's bottom edge. */
  top: 38%;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Brightest core — anchored behind the card's lower-half. */
    radial-gradient(
      ellipse 28% 36% at 50% 28%,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0.12) 22%,
      rgba(255,255,255,0.05) 50%,
      rgba(255,255,255,0.015) 75%,
      rgba(255,255,255,0)    92%
    ),
    /* Wider, very diffuse lateral spread. Fades back to dark well
       before the section's bottom edge. */
    radial-gradient(
      ellipse 60% 55% at 50% 38%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 38%,
      rgba(255,255,255,0.01) 65%,
      rgba(255,255,255,0)    88%
    );
  filter: blur(28px);
}

/* Soft ambient halo — two-layer radial: a wide low-opacity bloom that
   envelops the entire copy block, plus a tighter brighter core behind
   the headline. No hard edges, no beam, no top-anchored source. */
.hero-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1400px, 96vw);
  aspect-ratio: 1.4 / 1;
  pointer-events: none;
  z-index: 0;
  /* Outer wide bloom (depth) */
  background:
    radial-gradient(
      ellipse 55% 55% at 50% 50%,
      rgba(255,255,255,0.09) 0%,
      rgba(255,255,255,0.05) 36%,
      rgba(255,255,255,0.02) 60%,
      rgba(255,255,255,0) 82%
    );
  filter: blur(14px);
}
.hero-beam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Tighter, brighter core behind the headline */
  width: 70%;
  aspect-ratio: 1.5 / 1;
  background:
    radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.18) 26%,
      rgba(255,255,255,0.07) 54%,
      rgba(255,255,255,0) 82%
    );
  filter: blur(8px);
}

.hero .container { position: relative; z-index: 1; }

/* ---------- Glassmorphic card wrapping all Hero content ----------
   White-translated from the Insight AI reference. Strictly monochrome. */
.hero-card {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 52px;
  border-radius: 28px;
  /* Subtle vertical gradient on the surface — top slightly lighter,
     bottom slightly darker. "Lit from above" volumetric feel. */
  background:
    linear-gradient(
      180deg,
      rgba(28,28,28,0.62) 0%,
      rgba(15,15,15,0.60) 50%,
      rgba(8,8,8,0.62)    100%
    );
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  /* Faint full-perimeter border + brighter top-edge highlight +
     soft outer drop. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 30px 60px rgba(0,0,0,0.45);
  isolation: isolate;
  overflow: visible;
}

/* Top-edge horizontal highlight — bright sheen along the top edge
   tapering toward the corners. Sits just above the border. */
.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0)    100%
  );
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 3;
}

/* Outer ambient bloom — SINGLE continuous wide glow filling the
   lower area below the card, with subtle lateral side bleeds and a
   barely-there hint above. Even distribution, no gaps. */
.hero-card::after {
  content: "";
  position: absolute;
  inset: -40px -180px -300px -180px;
  background:
    /* CONTINUOUS lower glow — wide elliptical pool spanning the
       full lower area below the card. Brightest just below the
       card's bottom edge, evenly across the width. */
    radial-gradient(
      ellipse 60% 36% at 50% 74%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.16) 18%,
      rgba(255,255,255,0.10) 36%,
      rgba(255,255,255,0.04) 60%,
      rgba(255,255,255,0)    86%
    ),
    /* Wider, very diffuse fog reinforcing the lower pool laterally
       and downward. Smooth even falloff. */
    radial-gradient(
      ellipse 80% 48% at 50% 78%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.05) 32%,
      rgba(255,255,255,0.02) 60%,
      rgba(255,255,255,0)    88%
    ),
    /* LEFT lateral bleed along the card's left side. */
    radial-gradient(
      ellipse 14% 38% at 18% 50%,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.06) 40%,
      rgba(255,255,255,0)    82%
    ),
    /* RIGHT lateral bleed along the card's right side. */
    radial-gradient(
      ellipse 14% 38% at 82% 50%,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.06) 40%,
      rgba(255,255,255,0)    82%
    ),
    /* Barely-there hint above the card. */
    radial-gradient(
      ellipse 16% 5% at 50% 6%,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.015) 55%,
      rgba(255,255,255,0)    88%
    );
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

/* Interior sheen — subtle inner top wash extending ~100px down,
   plus a faint bottom trace. Center stays dark. */
.hero-card-sheen {
  position: absolute;
  inset: 1px 1px 1px 1px;
  border-radius: inherit;
  background:
    /* Inner top sheen — paired with the top-edge highlight. */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0.015) 60%,
      rgba(255,255,255,0)     100%
    ),
    /* Faint bottom trace inside the card. */
    linear-gradient(
      180deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0)    72%,
      rgba(255,255,255,0.04) 92%,
      rgba(255,255,255,0.06) 100%
    );
  pointer-events: none;
  z-index: 1;
}
.hero-card .hero-stack {
  position: relative;
  z-index: 2;
}

@media (max-width: 833px) {
  .hero-card { padding: 44px 26px; border-radius: 22px; }
}
@media (max-width: 640px) {
  .hero-card { padding: 40px 22px; border-radius: 22px; }
}

.hero-stack {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.hero-stack .eyebrow {
  margin: 0 0 32px;
  color: rgba(255,255,255,0.55);
}

/* Brand-signature line — closing stamp at the very end of Hero, below
   helper text. No flanking rules. */
.hero-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 56px auto 0;
}
.hero-signature-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* Headline — smaller, generous line-height for diacritics, top padding
   so tildes/circumflexes never clip on the line-1 reveal slot. */
.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.14;
  font-size: clamp(28px, 3.6vw, 50px);
  margin: 0;
  text-wrap: balance;
  color: #FFF;
  padding-top: 0.18em; /* breathing room above tilde glyphs */
}
.hero-headline .line {
  display: block;
  overflow: visible; /* allow diacritics to extend above */
}
.hero-headline .line-clip {
  display: block;
  overflow: hidden;
  padding-top: 0.18em;
  margin-top: -0.18em;
}
.hero-headline .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: kineticReveal .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-headline .line-1 > span { animation-delay: .15s; }
.hero-headline .line-2 > span { animation-delay: .42s; }
.hero-headline .soft-line > span { color: #888; }
@keyframes kineticReveal {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline .line > span { transform: none; animation: none; }
}

.hero-sub {
  margin: 28px auto 28px;
  font-family: var(--font-text);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 520px;
  text-wrap: pretty;
}

/* ---------- Form on dark hero ---------- */
.hero .form-inline {
  border-color: rgba(255,255,255,0.18);
  background: transparent;
  margin: 0 auto;
}
.hero .form-inline:focus-within {
  border-color: rgba(255,255,255,0.55);
}
.hero .form-inline input {
  color: #FFF;
}
.hero .form-inline input::placeholder {
  color: rgba(255,255,255,0.40);
}
.hero .form-inline button {
  background: linear-gradient(98.15deg, #FFFFFF -1.43%, #959595 82.35%);
  color: #000;
  transition: filter .25s ease, transform .25s ease;
}
.hero .form-inline button:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}
.hero .form-help {
  color: #B0B0B0;
}
.hero .form-success {
  color: rgba(255,255,255,0.7);
}

/* Vocation A — sachet on black void */
.vocation-a {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #000;
  border-radius: var(--radius-large);
  overflow: hidden;
  display: grid; place-items: center;
}
.vocation-a::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.sachet {
  position: relative;
  width: 32%;
  min-width: 110px;
  aspect-ratio: 110 / 320;
  background: linear-gradient(180deg, #d8d8d8 0%, #8a8a8a 50%, #2e2e2e 100%);
  border-radius: 80px;
  box-shadow:
    inset -22px 0 50px rgba(0,0,0,0.6),
    inset 18px 0 40px rgba(255,255,255,0.06),
    0 60px 120px rgba(0,0,0,0.5);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
.sachet::after {
  content: "VOYA";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 0.32em;
  color: rgba(0,0,0,0.55);
}
.vocation-a .vocation-caption {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ---------- Section 3 — Problema (dark) ----------
   Black background that lands seamlessly on the dark bottom of the Hero
   wave. Title at the top, three liquid-glass pillar cards in the middle,
   single closing line about café da manhã at the bottom. Bottom corners
   are rounded so the section "lifts off" into the white Solução below. */
.problema {
  background: #000;
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  border-bottom-left-radius: clamp(32px, 5vw, 64px);
  border-bottom-right-radius: clamp(32px, 5vw, 64px);
  overflow: hidden;
}
.problema .container {
  padding-top: clamp(80px, 9vw, 140px);
  padding-bottom: clamp(96px, 10vw, 160px);
}

/* TOP — title only (descriptor removed) */
.problema-bar {
  margin-top: 0;
}
.problema-bar-text { min-width: 0; max-width: 1100px; }
.problema-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  font-size: clamp(34px, 4vw, 56px);
  margin: 0;
  color: #fff;
  text-align: left;
}
.problema-title .soft { color: rgba(255,255,255,0.45); display: inline; }

/* MIDDLE — lead + 3 liquid-glass pillar cards */
.problema-body {
  margin-top: clamp(64px, 7vw, 112px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 64px);
}
.problema-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  width: 100%;
  max-width: none;
}
.problema-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.4vw, 24px);
}

/* Liquid-glass card — barely-tinted frost surface with soft inner sheen.
   Looks like Apple-style liquid glass: very subtle gradient surface, faint
   bright top edge, hairline border, gentle inner highlight. */
.problema-pillar {
  position: relative;
  padding: 32px 28px 32px;
  border-radius: 22px;
  background-color: rgba(255,255,255,0.025);
  background-image:
    linear-gradient(155deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.028) 48%,
      rgba(255,255,255,0.012) 100%);
  border: none;
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 24px 50px -24px rgba(0,0,0,0.66);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Fine grain texture — lifts the card off the flat dark background without a border. */
.problema-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}
/* Top-edge bright sheen — gives the card the liquid glass refraction look. */
.problema-pillar-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 20% -10%,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.04) 35%,
      rgba(255,255,255,0) 60%),
    radial-gradient(80% 50% at 100% 110%,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
}
.problema-pillar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.problema-pillar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}
.problema-pillar-body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* BOTTOM — single closing line, café da manhã punch */
.problema-closing {
  margin: clamp(80px, 9vw, 140px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.55);
  width: 100%;
  max-width: none;
}
.problema-closing-emphasis {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 833px) {
  .problema-pillars {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Hide deprecated old problema blocks */
.problema-hero,
.problema-manifesto,
.problema-head,
.problema-descriptor,
.diagnostic-grid { display: none !important; }
.diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
@media (min-width: 834px) {
  .diagnostic-grid { grid-template-columns: repeat(3, 1fr); }
}
.diagnostic-cell {
  background: var(--background);
  padding: 48px 36px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 320px;
}
.diagnostic-cell .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--text-tertiary);
}
.diagnostic-cell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}
.diagnostic-cell p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Section 4 — Solução (BENTO) ---------- */
.solucao {
  background: var(--background);
  color: var(--text);
  padding-bottom: 80px;
}
.solucao-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.solucao-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-size: clamp(40px, 4vw, 48px);
  margin: 0;
  color: var(--text);
  max-width: none;
}
.solucao-title .soft { color: var(--text-secondary); display: inline; }
.pill-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pill-cta:hover { background: var(--text); color: var(--background); border-color: var(--text); }
@media (max-width: 720px) {
  .solucao-header { flex-direction: column; align-items: flex-start; }
}

/* Bento grid: 3 cols × 2 rows, asymmetric. */
.bento-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 640px;
}
.bento-tall { grid-column: 1; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .bento-tall { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-tall { min-height: 280px; }
}

.bento-card {
  position: relative;
  background: #f6f5f2;
  border-radius: 16px;
  padding: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 240px;
  isolation: isolate;
}
.bento-card .bento-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bento-card .bento-copy { position: relative; z-index: 1; }

/* Photo cards — full-bleed image with bottom scrim and white copy */
.bento-photo { justify-content: flex-end; }
.bento-art--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bento-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.08) 62%,
    rgba(0,0,0,0.18) 100%
  );
}
.bento-photo .bento-headline { color: #fff; }
.bento-photo .bento-sub { color: rgba(255,255,255,0.84); }
.bento-headline {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--text);
}
.bento-headline em { font-style: normal; font-weight: 600; }
.bento-sub {
  font-family: var(--font-text);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 32ch;
}

/* Card 1 — soft monochrome wash, mass in upper portion only */
.bento-art--radial {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, #cccccc 0%, #dddddd 28%, rgba(238,238,238,0.6) 55%, rgba(246,245,242,0) 78%),
    #f6f5f2;
}

/* Card 2 — stat cluster: NO card container. The 4 stat squares fill the
   whole quadrant themselves (transparent cell, just the squares + their gaps). */
.bento-stats {
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  justify-content: stretch;
  align-items: stretch;
}
.bento-stat-cluster {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.bento-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ecebe6;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 96px;
}
/* Fine grain texture over every stat tile — adds a tactile, premium surface. */
.bento-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.bento-stat .bento-stat-num,
.bento-stat .bento-stat-label { position: relative; z-index: 1; }

/* Differentiated emphasis — sculpted tiles: top sheen + inner depth + lift.
   Grayscale only, matching the original soft-white treatment. */
.bento-stat--invert {
  color: #fff;
  background:
    radial-gradient(120% 92% at 50% -12%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(158deg, #2b2b2b 0%, #000 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -12px 26px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.06),
    0 12px 30px rgba(0,0,0,0.18);
}
.bento-stat--invert .bento-stat-label { color: rgba(255,255,255,0.55); }

.bento-stat--dark {
  color: #fff;
  background:
    radial-gradient(120% 92% at 50% -12%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(158deg, #5c5c5c 0%, #393939 76%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -12px 26px rgba(0,0,0,0.42),
    0 1px 2px rgba(0,0,0,0.06),
    0 12px 30px rgba(0,0,0,0.13);
}
.bento-stat--dark .bento-stat-label { color: rgba(255,255,255,0.6); }

.bento-stat--mid {
  color: #000;
  background:
    radial-gradient(120% 92% at 50% -12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(158deg, #c4c4c4 0%, #999 78%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -12px 26px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.05),
    0 12px 30px rgba(0,0,0,0.1);
}
.bento-stat--mid .bento-stat-label { color: #444; }

.bento-stat--light {
  color: #000;
  background:
    radial-gradient(120% 92% at 50% -12%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(158deg, #f8f8f6 0%, #e1e0db 80%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -12px 26px rgba(0,0,0,0.08),
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 30px rgba(0,0,0,0.08);
}
.bento-stat--light .bento-stat-label { color: #666; }
.bento-stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bento-stat-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Card 3 — soft orbs, upper portion only, low opacity */
.bento-art--orbs { background: #f6f5f2; }
.bento-art--orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
}
.bento-art--orbs .orb-1 { top: -8%;  left: 12%;  width: 130px; height: 130px; background: radial-gradient(circle, #aaa 0%, rgba(204,204,204,0) 70%); opacity: 0.42; }
.bento-art--orbs .orb-2 { top: -4%;  right: 8%;  width: 110px; height: 110px; background: radial-gradient(circle, #cccccc 0%, rgba(204,204,204,0) 70%); opacity: 0.38; }
.bento-art--orbs .orb-3 { top: 18%;  left: 46%;  width: 90px;  height: 90px;  background: radial-gradient(circle, #bbbbbb 0%, rgba(204,204,204,0) 70%); opacity: 0.32; }
.bento-art--orbs .orb-4 { display: none; }

/* Card 4 — soft radial wash in upper-right quadrant */
.bento-art--swirl {
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, #cccccc 0%, #dddddd 28%, rgba(238,238,238,0.5) 55%, rgba(246,245,242,0) 80%),
    #f6f5f2;
}

/* Card 5 — soft blobs, upper portion only, low opacity */
.bento-art--blobs { background: #f6f5f2; }
.bento-art--blobs .blob {
  position: absolute;
  filter: blur(24px);
  opacity: 0.4;
}
.bento-art--blobs .blob-1 { top: -6%;  left: 14%;  width: 130px; height: 110px; border-radius: 60% 40% 50% 50% / 55% 45% 55% 45%; background: radial-gradient(ellipse, #aaaaaa 0%, rgba(204,204,204,0) 75%); }
.bento-art--blobs .blob-2 { top: -2%;  right: 12%; width: 110px; height: 120px; border-radius: 40% 60% 45% 55% / 50% 50% 50% 50%; background: radial-gradient(ellipse, #cccccc 0%, rgba(204,204,204,0) 75%); opacity: 0.34; }
.bento-art--blobs .blob-3 { top: 16%;  left: 44%;  width: 90px;  height: 80px;  border-radius: 55% 45% 60% 40% / 60% 40% 60% 40%; background: radial-gradient(ellipse, #bbbbbb 0%, rgba(204,204,204,0) 75%); opacity: 0.3; }

/* Hide deprecated old solução blocks */
.solucao .solucao-head,
.solucao .stats-grid,
.solucao .attr-row { display: none; }
.solucao-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.solucao-head .lede { margin-left: auto; margin-right: auto; }

/* Typographic 2x2 stats grid replacing the old product-stage block.
   Cross/plus pattern of thin dividers between the four cells. */
.stats-grid {
  margin: 80px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stat-cell {
  position: relative;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 200px;
}
/* Vertical divider between left and right columns. */
.stat-cell[data-pos="0"]::after,
.stat-cell[data-pos="2"]::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: var(--border-subtle);
}
/* Horizontal divider between top and bottom rows. */
.stat-cell[data-pos="0"]::before,
.stat-cell[data-pos="1"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border-subtle);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7.2vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.stat-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell { padding: 40px 28px; min-height: 0; }
  /* Reset desktop dividers, apply single horizontal divider only. */
  .stat-cell[data-pos="0"]::after,
  .stat-cell[data-pos="2"]::after { content: none; }
  .stat-cell[data-pos="0"]::before,
  .stat-cell[data-pos="1"]::before,
  .stat-cell[data-pos="2"]::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--border-subtle);
  }
}

.product-stage {
  margin: 80px auto 0;
  max-width: 720px;
  aspect-ratio: 5 / 4;
  position: relative;
  background: #000;
  border-radius: var(--radius-large);
  overflow: hidden;
  display: grid; place-items: center;
}
.product-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.10) 0%, transparent 65%);
}
.product-stage .sachet {
  width: 22%;
  min-width: 130px;
}
.product-stage .product-meta {
  position: absolute;
  left: 32px; bottom: 28px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.product-stage .product-meta-r {
  position: absolute;
  right: 32px; bottom: 28px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.attr-row {
  margin: 64px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 880px;
}
.attr-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}
.attr-pill .material-symbols-outlined { font-size: 18px; opacity: 0.6; }

/* ---------- Section 5 — Forma de usar ---------- */
.ritual {
  /* Inset rounded panel — slightly darker neutral than the pure-white
     neighbours so the section reads as its own card. */
  background: #EFEFEF;
  color: var(--text);
  border-radius: 48px;
  margin: 0 24px;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
  /* Anchor jump stops below the fixed navbar so the whole rounded panel
     (top corners included) is in view, not tucked under the bar. */
  scroll-margin-top: 96px;
}
@media (max-width: 833px) {
  .ritual {
    margin: 0 12px;
    border-radius: 28px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Header row — title left, pill CTA right (mirrors Solução header) */
.ritual-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.ritual-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-size: clamp(40px, 4vw, 48px);
  margin: 0;
  color: var(--text);
  max-width: none;
}
.ritual-title .soft { color: var(--text-secondary); display: inline; }
@media (max-width: 720px) {
  .ritual-header { flex-direction: column; align-items: flex-start; }
}

/* Pill CTA with arrow — solid outline variant */
.pill-cta--arrow {
  height: 48px;
  padding: 0 26px;
  border: 1px solid #000;
  border-radius: 30px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #000;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  flex-shrink: 0;
}
.pill-cta--arrow:hover { background: #000; color: #fff; }
.pill-cta--arrow .material-symbols-outlined { font-size: 18px; }

/* 3-card horizontal layout */
.ritual-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 833px) {
  .ritual-cards { grid-template-columns: 1fr; gap: 32px; }
}
.ritual-card {
  display: flex;
  flex-direction: column;
}
.ritual-card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ritual-card-visual .material-symbols-outlined {
  font-size: 48px;
  color: #000;
  position: relative;
  z-index: 1;
  font-variation-settings: "wght" 300;
}
.ritual-card-visual svg {
  width: 34px;
  height: 34px;
  color: var(--text);
  position: relative;
  z-index: 1;
}
/* Subtle monochromatic wash — same treatment for all 3 cards.
   Lightest point centered behind the icon; gentle fade to neutral edge. */
.ritual-visual-1,
.ritual-visual-2,
.ritual-visual-3 {
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, #ffffff 0%, #f4f4f4 45%, #eeeeee 75%, #e6e6e6 100%);
}
.ritual-card-text {
  padding: 24px 0 0 0;
}
.ritual-card-label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
  margin: 0 0 8px;
}
.ritual-card-desc {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #666;
  margin: 0;
  max-width: 30ch;
}

/* Hide deprecated old ritual blocks */
.ritual-head,
.steps-grid { display: none; }
.steps-grid {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 834px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}
.step-cell {
  background: var(--background);
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 280px;
}
.step-cell .icon {
  display: inline-flex;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  align-items: center; justify-content: center;
}
.step-cell .icon .material-symbols-outlined { font-size: 18px; opacity: 0.7; }
.step-cell .step-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.step-cell .step-desc {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.step-cell .step-verb {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.step-cell .step-micro {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 6px 0 0;
  max-width: 22ch;
}
.step-cell .step-desc { display: none; }

/* Contexts of use — three image-led cards. */
.contexts-block { margin-top: 144px; }
.contexts-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  margin: 0 0 40px;
  text-align: center;
}
.contexts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 834px) {
  .contexts-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.context-card {
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  overflow: hidden;
}
.context-photo {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 100%),
    radial-gradient(ellipse at 50% 40%, #2a2a2a 0%, #161616 70%, #0c0c0c 100%);
}
.context-label {
  padding: 18px 22px 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}

.ritual-closer-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 80px;
  padding: 48px 24px;
  background: #F4F4F4;
}
.ritual-closer-band .ritual-closer {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}
@media (max-width: 833px) {
  .ritual-closer-band { padding: 32px 20px; margin-top: 56px; }
}

.ritual-closer {
  margin: 80px auto 0;
  text-align: center;
  max-width: 720px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: balance;
}
.ritual-closer-OLD {
  display: none;
}

/* Closer paragraph — soft elevated pill (same family as the Hero form pill,
   tuned for a light background). White-to-pale-gray gradient, hairline top
   highlight, soft drop shadow for elevation. No tint. */
.ritual-closer-pill {
  position: relative;
  display: block;
  width: fit-content;
  max-width: min(720px, calc(100% - 32px));
  margin: 88px auto 0;
  padding: 18px 40px;
  border-radius: 999px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 28px -10px rgba(0, 0, 0, 0.14);
  color: #1a1a1a;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
@media (max-width: 833px) {
  .ritual-closer-pill {
    margin-top: 56px;
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* time-lapse moment under the steps — DEPRECATED, hidden */
.timelapse { display: none; }
.timelapse {
  margin-top: 64px;
  position: relative;
  height: 280px;
  background: #0a0a0a;
  border-radius: var(--radius-large);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.timelapse .frame {
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.timelapse .frame:last-child { border-right: 0; }
.timelapse .frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.08), transparent 65%);
}
.timelapse .swirl {
  position: absolute;
  inset: 20% 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 35%, transparent 60%),
    conic-gradient(from var(--rot, 0deg), rgba(140,90,60,0.35), rgba(80,55,40,0.15), rgba(140,90,60,0.30), rgba(80,55,40,0.10), rgba(140,90,60,0.35));
  filter: blur(6px);
  opacity: 0.55;
}
.timelapse .frame:nth-child(1) .swirl { --rot: 0deg; opacity: 0.25; filter: blur(2px); }
.timelapse .frame:nth-child(2) .swirl { --rot: 60deg; opacity: 0.50; filter: blur(8px); }
.timelapse .frame:nth-child(3) .swirl { --rot: 130deg; opacity: 0.65; filter: blur(14px) saturate(0); }
.timelapse .label {
  position: absolute;
  bottom: 18px; left: 18px;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ---------- Section 6 — Benefícios ---------- */
.beneficios {
  position: relative;
  background: #FFFFFF;
  color: var(--text);
}

/* Coffee-pour transition between Section 6 (white, above) and Section 7 (black, below).
   Full-bleed image: white top blends into Section 6's white, black bottom into
   Section 7's black, so the photographic liquid edge bridges the two seamlessly. */
.coffee-transition {
  width: 100%;
  display: block;
  aspect-ratio: 6336 / 2688;
  background-image: url("/assets/coffee-transition.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  /* Pull the image up over Section 6's bottom padding so the wave sits closer
     to the content. White top overlaps Section 6's white with no seam. */
  margin-top: -160px;
  margin-bottom: -1px;
}
@media (max-width: 833px) {
  /* On narrow phones the wide image would get squished. Instead keep the full
     vertical extent of the wave (white top → black bottom) and crop the LEFT/RIGHT
     edges via cover, so the transition stays smooth and undistorted. */
  .coffee-transition {
    margin-top: -100px;
    aspect-ratio: auto;
    height: clamp(240px, 64vw, 380px);
    background-size: cover;
  }
}

.beneficios {
  padding: 160px 0;
}
@media (max-width: 833px) {
  .beneficios { padding: 100px 0; }
}

/* Asymmetric two-column — 45% text / 55% figure */
.bene-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 64px;
  align-items: stretch;
}
@media (max-width: 833px) {
  .bene-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* LEFT — title + descriptor + stacked cards */
.bene-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.bene-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(40px, 4.5vw, 52px);
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bene-title-line-1 { color: var(--text); }
.bene-title-line-2 { color: var(--text-secondary); }
.bene-body {
  margin: 32px 0 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

/* RIGHT — anatomical figure card (visual anchor) */
.bene-figure { width: 100%; height: 100%; }
.anatomy-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  background: #FAFAF8;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.anatomy-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Enlarge the figure ~30% inside the (unchanged) frame */
  transform: scale(1.3);
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 833px) {
  .anatomy-card { aspect-ratio: 4 / 5; min-height: 0; height: auto; }
}

/* Stacked cards inside left column */
/* Stacked cards — bottom-left on desktop (placed via grid), last on mobile */
.bene-cards {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Desktop: keep the original 2-column look — text top-left, cards bottom-left,
   figure on the right spanning both rows. */
@media (min-width: 834px) {
  .bene-grid { grid-template-rows: auto auto; }
  .bene-text   { grid-column: 1; grid-row: 1; }
  .bene-cards  { grid-column: 1; grid-row: 2; }
  .bene-figure { grid-column: 2; grid-row: 1 / 3; }
}
.bene-card {
  position: relative;
  background: #FAFAF8;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.bene-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bene-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
/* Subtle monochromatic gradient washes — mass in the upper portion only,
   matching the Solução bento card treatment. Three orientations for variety.
   Intensity dialed down: faint atmospheric breath, not visible blobs. */
.bene-art--top-left {
  background:
    radial-gradient(ellipse 95% 80% at 0% -10%, rgba(170,170,170,0.18) 0%, rgba(204,204,204,0.10) 30%, rgba(238,238,238,0.04) 60%, rgba(250,250,248,0) 85%),
    #FAFAF8;
}
.bene-art--top-right {
  background:
    radial-gradient(ellipse 90% 75% at 100% -10%, rgba(170,170,170,0.18) 0%, rgba(204,204,204,0.10) 32%, rgba(238,238,238,0.04) 62%, rgba(250,250,248,0) 86%),
    #FAFAF8;
}
.bene-art--top-center {
  background:
    radial-gradient(ellipse 110% 70% at 50% -20%, rgba(170,170,170,0.16) 0%, rgba(204,204,204,0.09) 30%, rgba(238,238,238,0.04) 60%, rgba(250,250,248,0) 85%),
    #FAFAF8;
}
.bene-card-num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #AAA;
}
.bene-card-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
}
.bene-card-label .material-symbols-outlined {
  font-size: 24px;
  color: #000;
  font-variation-settings: "wght" 400;
}
.bene-card-title {
  margin: 24px 0 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: #000;
  text-transform: none;
  letter-spacing: 0;
}
.bene-card-body {
  margin: 12px 0 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #666;
}

/* Hide deprecated old beneficios blocks */
.beneficios-head,
.beneficios-grid { display: none; }
.anatomy-svg { display: none; }
.beneficios-grid {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 834px) {
  .beneficios-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.benefit-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
  border-radius: var(--radius-large);
  overflow: hidden;
}

/* Compressed lede — single-line treatment for Benefícios. */
.lede-tight {
  max-width: 64ch;
  text-wrap: balance;
}

/* Abstract scientific figures — monochrome, premium. */
.benefit-figure .fig-art {
  position: absolute;
  inset: 0;
  background: #0e0e0e;
}

/* Card 1 — gut-brain axis: vertical neural pathway with intestinal
   coil silhouette at the base. SVG-as-data-uri keeps it crisp. */
.benefit-figure.fig-axis .fig-art {
  background:
    /* central vertical pathway gradient */
    radial-gradient(ellipse 38% 70% at 50% 50%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%),
    /* faint corona at top — "brain" */
    radial-gradient(circle 28% at 50% 22%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 28%, rgba(255,255,255,0) 60%),
    /* faint pool at bottom — "gut" */
    radial-gradient(ellipse 46% 22% at 50% 82%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%),
    #0e0e0e;
}
.benefit-figure.fig-axis .fig-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24%;
  bottom: 30%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.10));
}
.benefit-figure.fig-axis .fig-art::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14%;
  height: 28%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 -8px 14px rgba(255,255,255,0.04),
    0 0 28px rgba(255,255,255,0.06);
  /* coil suggestion */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0 8px,
      rgba(255,255,255,0.04) 8px 9px
    );
  filter: blur(0.4px);
}

/* Card 2 — microbiota / fiber fermentation: cellular cluster
   abstraction. Multiple soft circular nuclei with diffuse halos. */
.benefit-figure.fig-microbiota .fig-art {
  background:
    radial-gradient(circle 12% at 32% 38%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 70%),
    radial-gradient(circle 9% at 62% 30%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0) 75%),
    radial-gradient(circle 14% at 56% 62%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 75%),
    radial-gradient(circle 8% at 28% 72%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 80%),
    radial-gradient(circle 10% at 78% 78%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 80%),
    radial-gradient(circle 6% at 78% 48%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 80%),
    #0e0e0e;
  filter: blur(0.3px);
}
.benefit-figure.fig-microbiota .fig-art::before {
  content: "";
  position: absolute;
  inset: 0;
  /* faint connecting lines suggesting fermentation pathways */
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.06) 50%, transparent 62%),
    linear-gradient(60deg, transparent 42%, rgba(255,255,255,0.04) 52%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Card 3 — neurotransmitter pathway: chained nodes along a curve
   suggesting serotonin signaling. */
.benefit-figure.fig-serotonin .fig-art {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 75%),
    #0e0e0e;
}
.benefit-figure.fig-serotonin .fig-art::before {
  /* curved pathway via large border-radius arc */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 22%;
  bottom: 22%;
  border-top: 1px solid rgba(255,255,255,0.30);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-radius: 60% 40% 0 0 / 80% 60% 0 0;
  filter: blur(0.2px);
}
.benefit-figure.fig-serotonin .fig-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* nodes along the arc */
    radial-gradient(circle 6% at 14% 60%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0) 70%),
    radial-gradient(circle 5% at 30% 32%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 75%),
    radial-gradient(circle 5% at 50% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0) 75%),
    radial-gradient(circle 5% at 70% 32%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 75%),
    radial-gradient(circle 6% at 86% 60%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0) 70%);
}

/* Old layered athlete elements removed — kept for backwards-compat. */
.benefit-figure .athlete,
.benefit-figure .blur,
.benefit-figure .figure-label { display: none; }
/* Vocation B — athlete in motion blur, neutral grayscale.
   Implemented as layered gradients to suggest a figure in motion
   without using a real photograph. */
.benefit-figure .athlete {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(220,220,220,0.18) 0%, transparent 38%),
    radial-gradient(ellipse at 70% 75%, rgba(120,120,120,0.18) 0%, transparent 50%),
    linear-gradient(160deg, #2a2a2a 0%, #0a0a0a 100%);
  filter: blur(0px);
}
.benefit-figure .blur {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 30%, transparent 60%),
    linear-gradient(120deg, transparent 50%, rgba(0,0,0,0.4) 100%);
  mix-blend-mode: screen;
}
.benefit-figure .grain {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 2px);
  pointer-events: none;
}
.benefit-figure .figure-label {
  position: absolute; bottom: 20px; left: 20px;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.benefit-figure .figure-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.6);
}
.benefit-card .benefit-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.benefit-card .benefit-icon .material-symbols-outlined { font-size: 18px; }
.benefit-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
}
.benefit-card p {
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 36ch;
}

/* ---------- Section 7 — Embasamento (mandatory dark) ---------- */
.embasamento {
  background: #000;
  color: #fff;
}
.embasamento .container { text-align: center; }
.emb-statement {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(40px, 6vw, 92px);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.emb-statement .line-2 { opacity: 0.7; display: block; }
.emb-philosophy {
  margin: 56px auto 0;
  max-width: 56ch;
  font-family: var(--font-text);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
}
.credibility-row {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (min-width: 834px) {
  .credibility-row { grid-template-columns: repeat(3, 1fr); }
}
.credibility-cell {
  background: #000;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.credibility-cell .material-symbols-outlined { font-size: 20px; opacity: 0.7; }

/* ---------- Section 8 — Finalização ---------- */
.finalizacao {
  background: var(--background);
  color: var(--text);
  padding: 200px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 833px) { .finalizacao { padding: 120px 0 0; } }

/* Localized DARK ambient bloom under the card — inverse of the
   Hero's white glow on dark canvas. Lives entirely within the light
   background, fades back to background well before footer. */
.finalizacao::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 36%;
  bottom: 22%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 60% 36% at 50% 60%,
      rgba(0,0,0,0.13) 0%,
      rgba(0,0,0,0.08) 22%,
      rgba(0,0,0,0.04) 48%,
      rgba(0,0,0,0.015) 72%,
      rgba(0,0,0,0)    92%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 64%,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.025) 36%,
      rgba(0,0,0,0)    86%
    );
  filter: blur(28px);
}
.finalizacao .container { position: relative; z-index: 1; }

/* Light glassmorphic card mirroring Hero card, inverted tonally. */
.final-card {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 52px;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.66) 0%,
    rgba(255,255,255,0.58) 50%,
    rgba(248,248,248,0.62) 100%
  );
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  /* Faint full-perimeter dark border + brighter top-edge inset +
     soft outer drop shadow for elevation. */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(0,0,0,0.14),
    0 30px 60px rgba(0,0,0,0.12);
  isolation: isolate;
  overflow: visible;
}
@media (max-width: 833px) {
  .final-card { padding: 44px 26px; border-radius: 22px; }
}
@media (max-width: 640px) {
  .final-card { padding: 40px 22px; }
}

/* Top-edge dark sheen tapering toward corners (inverted Hero). */
.final-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0)    100%
  );
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 3;
}

/* Lateral dark side bleed extending into the surrounding background. */
.final-card::after {
  content: "";
  position: absolute;
  inset: -20px -120px -40px -120px;
  background:
    radial-gradient(
      ellipse 14% 38% at 18% 50%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.04) 40%,
      rgba(0,0,0,0)    82%
    ),
    radial-gradient(
      ellipse 14% 38% at 82% 50%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.04) 40%,
      rgba(0,0,0,0)    82%
    );
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

/* Internal sheen — subtle lighter wash near the top, faint dark
   trace at the bottom for depth. */
.final-card-sheen {
  position: absolute;
  inset: 1px 1px 1px 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.10) 30%,
      rgba(255,255,255,0)    60%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0)    72%,
      rgba(0,0,0,0.04) 92%,
      rgba(0,0,0,0.06) 100%
    );
  pointer-events: none;
  z-index: 1;
}

.final-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.final-stack .eyebrow {
  margin: 0 0 28px;
  color: var(--text-tertiary);
}

/* Headline — same scale and rhythm as the Hero headline,
   inverted to dark text on light card. */
.final-headline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.14;
  font-size: clamp(28px, 3.6vw, 50px);
  margin: 0;
  text-wrap: balance;
  color: var(--text);
  padding-top: 0.18em;
}
.final-headline .line {
  display: block;
  overflow: visible;
}
.final-headline .line > span {
  display: inline-block;
}
.final-headline .soft-line > span { color: #999; }

.finalizacao .form-inline { margin: 36px auto 0; }
.final-stack .form-help, .final-stack .form-success {
  margin-top: 14px;
}

.footer {
  margin-top: 200px;
  padding: 64px 0 48px;
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 833px) { .footer { margin-top: 120px; } }
.footer .wordmark {
  display: flex;
  justify-content: center;
}
.footer .wordmark img { height: 14px; }
.footer .meta-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.footer .meta-row a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer .meta-row a:hover { opacity: 0.6; }
/* LGPD disclaimer — small, low-contrast, aligned with the rest of the footer. */
.footer .footer-disclaimer {
  margin: 14px auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--font-text);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  opacity: 0.72;
  text-wrap: pretty;
}
.footer .footer-disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity .2s ease;
}
.footer .footer-disclaimer a:hover { opacity: 0.7; }
.footer .meta-row .dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- Top nav (sticky, light, very minimal) ---------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }
.topnav.is-light { color: #000; }
.topnav.is-dark  { color: #fff; }
.topnav.is-scrolled.is-light {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.topnav.is-scrolled.is-dark {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Topnav slot — invisible layout placeholder. The morphed Capa wordmark
   docks onto this rect at the end of its scroll arc. Keep dimensions for
   JS measurement but hide it visually so only the morphed logo renders. */
.topnav-logo { display: inline-flex; line-height: 0; }
.topnav-logo img { height: 14px; display: block; }

.topnav .links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.topnav .links a {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  text-decoration: none;
  transition: opacity .2s ease;
}
.topnav .links a:hover { opacity: 1; }

/* ---- Mobile hamburger + dropdown menu ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Neutral, scheme-aware tint — mirrors the nav links (white over the
     cover photo, near-black once scrolled). Prevents the iOS default
     button blue from tinting the bars. */
  color: color-mix(
    in oklab,
    #FFFFFF calc((1 - var(--capa-p, 0)) * 100%),
    #0A0A0A
  );
}
/* While the menu is open the panel is dark — force white bars (the X). */
.topnav.menu-open .nav-toggle { color: #FFFFFF; }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.topnav.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.topnav.menu-open .nav-toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  flex-direction: column;
  padding: 64px 24px 22px;
  /* Translucent — the page stays visible underneath, blurred. */
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transform: translateY(-110%);
  transition: transform .34s cubic-bezier(0.65,0,0.35,1);
  z-index: -1;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 833px) {
  .topnav .links { display: none; }
  .topnav { padding: 16px 18px; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; }
}

/* Navbar — always slightly frosted so links read over any hero, still translucent. */
.topnav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .3s ease, color .3s ease;
}
.topnav.is-light {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.topnav.is-dark {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.topnav.is-light .links a { color: #0A0A0A !important; }
.topnav.is-dark .links a { color: #FFFFFF !important; }

/* ==========================================================================
   Closing — Embasamento + Lista merged framed card
   ========================================================================== */

.closing {
  position: relative;
  width: 100%;
  background:
    /* Thin pure-black band at the very top so the transition image's black bottom
       docks flush; decorative gradient resumes just below. */
    linear-gradient(180deg, #000 0%, #000 60px, rgba(0,0,0,0) 220px),
    radial-gradient(ellipse 60% 80% at 22% 50%, #585858 0%, rgba(88,88,88,0) 60%),
    linear-gradient(110deg, #000 0%, #1c1c1c 35%, #444 65%, #222 100%);
  color: #FFFFFF;
  padding: 120px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.closing::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* fine grain texture across the dark frame — matches Problema */
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.closing-shell {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.closing-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 28px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  /* Darkening lives ON the card background so it reaches edge-to-edge
     (no bright rim): uniform base + heavy edge vignette over the photo. */
  background:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
    radial-gradient(ellipse 135% 120% at 50% 50%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.88) 100%),
    #0A0A0A url("/assets/closing-bg.png") center / cover no-repeat;
  min-height: 640px;
}
@media (max-width: 833px) {
  .closing-card {
    grid-template-columns: 1fr;
    border-radius: 20px;
    min-height: 74vh;
  }
}

.closing-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 72px 56px;
  background: transparent;
  isolation: isolate;
}
.closing-content::before {
  /* focused dark pad behind the text block for legibility (card bg already
     handles edge darkening) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 58% at 50% 50%, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0) 72%);
  pointer-events: none;
  z-index: 0;
}
.closing-content > * { position: relative; z-index: 1; }
@media (max-width: 833px) {
  .closing-content { padding: 44px 18px; }
  /* Title must comfortably fit + wrap within the narrow card so it centers */
  .closing-content .closing-title {
    font-size: clamp(18px, 5.2vw, 23px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  .closing-sub { font-size: 13.5px !important; margin-top: 12px !important; }
  .closing-lead { font-size: 13.5px !important; margin: 24px auto 14px !important; }
  /* Pill fits the viewport instead of forcing 470px overflow */
  .closing-content .form-inline { width: 100% !important; max-width: 320px !important; }
  .closing-content .form-inline input { font-size: 12.5px !important; padding: 0 10px 0 16px !important; }
  .closing-content .form-inline button { padding: 0 14px !important; font-size: 9.5px !important; letter-spacing: 0.1em !important; }
  .closing-content .form-help { font-size: 10.5px !important; }
  .closing-content .form-consent { font-size: 10px !important; }
}

.closing-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8A8A;
  display: inline-block;
  margin: 0 0 20px;
}

.closing-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: #FFFFFF !important;
}
.closing-content .closing-title { color: #FFFFFF !important; }
.closing-title .soft { color: rgba(255,255,255,0.62) !important; display: inline; }
.closing-content .closing-title .soft { color: rgba(255,255,255,0.62) !important; }

.closing-sub {
  margin: 16px auto 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
}

.closing-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  letter-spacing: normal;
  text-align: center;
  color: rgba(255,255,255,0.78);
  margin: 32px auto 16px;
  max-width: 100%;
}

/* Form pill — EXACT Hero treatment (glass pill + white→silver CTA) */
.closing-content .form-inline {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  margin: 0 auto !important;
  height: 48px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  width: 470px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(180,180,180,0.10) 100%),
    rgba(140, 140, 140, 0.14) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.18) !important;
  isolation: isolate;
}
.closing-content .form-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.04) 38%,
      rgba(255,255,255,0)    62%,
      rgba(255,255,255,0.06) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 0;
}
.closing-content .form-inline input[type="tel"],
.closing-content .form-inline input {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 14px 0 22px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: #FFFFFF !important;
  font-family: var(--font-text) !important;
  font-size: 13px !important;
  letter-spacing: 0.005em !important;
}
.closing-content .form-inline input::placeholder { color: rgba(255,255,255,0.55) !important; opacity: 1 !important; }
.closing-content .form-inline button {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 26px !important;
  background: linear-gradient(98.15deg, #FFFFFF -1.43%, #DCDCDC 50%, #A8A8A8 102%) !important;
  color: #0A0A0A !important;
  font-family: var(--font-text) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer !important;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 5px 14px rgba(0,0,0,0.24) !important;
}
.closing-content .form-inline button:hover {
  filter: brightness(1.06);
  transform: scale(1.015);
}
.closing-content .form-help {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  color: #B0B0B0;
}
.closing-content .form-help { color: #B0B0B0 !important; }
.closing-content .form-consent {
  color: #8c8c8c !important;
  text-align: center;
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
}

/* Success pill — same gradient as hero */
.closing-content .success-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  width: 470px;
  max-width: 100%;
  height: 56px;
  padding: 4px 22px;
  box-sizing: border-box;
  border-radius: 30px;
  background: linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 50%, #000000 100%);
  color: #FFFFFF;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  animation: heroPillIn .42s cubic-bezier(.2,.7,.2,1) both;
}

/* Right column — coffee foam macro photo */
.closing-texture {
  position: relative;
  overflow: hidden;
  background: #2A1810;
  box-shadow: inset 8px 0 24px -16px rgba(0,0,0,0.25);
}
.closing-texture-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 833px) {
  .closing-texture { height: 220px; }
}

/* Footer — sits inside dark closing surround */
.closing .footer.closing-footer {
  margin-top: 96px;
  padding: 48px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  position: relative;
  z-index: 1;
}
.closing .footer.closing-footer .wordmark img { height: 14px; filter: none; }
.closing .footer.closing-footer .meta-row {
  margin-top: 20px;
  color: rgba(255,255,255,0.45);
}
.closing .footer.closing-footer .meta-row a { color: rgba(255,255,255,0.65); }
.closing .footer.closing-footer .meta-row a:hover { opacity: 0.9; }
.closing .footer.closing-footer .footer-disclaimer {
  color: rgba(255,255,255,0.34);
}
.closing .footer.closing-footer .footer-disclaimer a { color: rgba(255,255,255,0.5); }
.closing .footer.closing-footer .footer-disclaimer a:hover { opacity: 0.85; }
@media (max-width: 833px) {
  .closing { padding: 80px 0 0; }
  .closing .footer.closing-footer { margin-top: 64px; padding: 40px 20px; }
}

/* ==========================================================================
   GLOBAL TITLE NORMALIZATION
   All section titles share: Supreme · 700 · UPPERCASE · -0.005em · 1.2 · m0
   Line 1 = #000000  ·  Line 2 (.soft / .line-2 / .bene-title-line-2) = #666666
   Per-section font-size is intentionally preserved.
   ========================================================================== */
.problema-title,
.solucao-title,
.ritual-title,
.bene-title,
.emb-statement,
.closing-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  font-size: clamp(24px, 2.2vw, 31px) !important;
  margin: 0 !important;
  color: #000000 !important;
}

/* Hero headline has its own (larger, white) treatment — see Section 2 above. */

/* Line 1 — pure black */
.problema-title,
.solucao-title,
.ritual-title,
.bene-title-line-1,
.emb-statement .line-1,
.closing-title {
  color: #000000 !important;
}

/* Line 2 — exact #888888 across every section */
.problema-title .soft,
.solucao-title .soft,
.ritual-title .soft,
.bene-title-line-2,
.emb-statement .line-2,
.closing-title .soft {
  color: #888888 !important;
  opacity: 1 !important; /* override emb-statement's 0.7 opacity treatment */
}

/* Problema is dark — override the global normalization so the title reads
   white on black with a softer secondary. */
.problema .problema-title {
  color: #ffffff !important;
  font-size: clamp(24px, 2.2vw, 31px) !important;
  line-height: 1.2 !important;
}
.problema .problema-title .soft {
  color: rgba(255,255,255,0.45) !important;
}

/* ==========================================================================
   HERO — line 1 single-line on desktop + splash overlays
   ========================================================================== */
@media (min-width: 834px) {
  .hero-headline .line-1 { white-space: nowrap; }
}

/* Coffee splash: darken bottom (coffee pool). Watermark removed in the asset itself. */
.hero-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.30) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   Steps layout — numbered circles connected by a thin rule
   Horizontal on desktop, vertical on mobile. Numbered circles connected by
   a thin rule; verb + description below each circle.
   ========================================================================== */
.steps-row {
  --circle-size: 64px;
  --line-color: rgba(0, 0, 0, 0.14);
  --circle-border: rgba(0, 0, 0, 0.16);
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}

.step-item {
  position: relative;
  display: grid;
  grid-template-rows: var(--circle-size) auto auto;
  row-gap: 28px;
  justify-items: center;
  text-align: center;
  padding: 0 24px;
}

/* Connecting rule — drawn from circle edge to next circle edge.
   Each item (except the last) extends a line to its right neighbor. */
.step-item::after {
  content: "";
  position: absolute;
  top: calc(var(--circle-size) / 2);
  left: calc(50% + var(--circle-size) / 2 + 8px);
  right: calc(-50% + var(--circle-size) / 2 + 8px);
  height: 1px;
  background: var(--line-color);
  transform: translateY(-0.5px);
  pointer-events: none;
}
.step-item:last-child::after { display: none; }

.step-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background-color .4s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}

.step-num {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  /* Gradient text — dark at top, lighter mid-tone at bottom */
  background: linear-gradient(180deg, #111111 0%, #3a3a3a 55%, #8a8a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: color .4s ease;
}

/* Inverted dot state — black circle, white number. Shared by desktop :hover
   and mobile .is-centered. */
.step-item:hover .step-circle,
.step-item.is-centered .step-circle {
  background-color: #111111;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.45);
}
.step-item:hover .step-num,
.step-item.is-centered .step-num {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

.step-verb {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #111;
  margin: 0;
  letter-spacing: -0.005em;
}

.step-desc {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #6b6b6b;
  margin: 0;
  max-width: 28ch;
  text-wrap: pretty;
}

/* Mobile — vertical stack with vertical connecting rule on left of circles. */
@media (max-width: 833px) {
  .steps-row {
    --circle-size: 56px;
    margin-top: 56px;
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .step-item {
    grid-template-columns: var(--circle-size) 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 8px;
    text-align: left;
    justify-items: start;
    padding: 0;
  }
  .step-circle {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }
  .step-verb {
    grid-column: 2;
    align-self: end;
  }
  .step-desc {
    grid-column: 2;
    align-self: start;
    max-width: none;
  }
  /* Vertical connector — from this circle's bottom to next item's circle. */
  .step-item::after {
    top: calc(var(--circle-size) + 8px);
    bottom: -48px;
    left: calc(var(--circle-size) / 2);
    right: auto;
    width: 1px;
    height: auto;
    transform: translateX(-0.5px);
  }
}

/* ==========================================================================
   SECTION 7 (#closing) — MOBILE FIX (placed last so it wins the cascade)
   Root cause it solves: `grid-template-columns: 1fr` resolves to
   minmax(auto, 1fr); the 470px fixed-width form forced the track's min-content
   to 470px, blowing the card past the phone viewport (content clipped right).
   minmax(0,1fr) lets the track shrink to the viewport; the high-specificity
   selectors below override the earlier base `.closing-content .form-inline`
   (470px) which previously won on source order.
   ========================================================================== */
@media (max-width: 833px) {
  .closing .closing-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 74vh;
    /* Mobile-only product photo (different framing than desktop) */
    background:
      linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
      radial-gradient(ellipse 135% 120% at 50% 50%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.88) 100%),
      #0A0A0A url("/assets/closing-bg-mobile.png") center / cover no-repeat !important;
  }
  .closing .closing-content {
    padding: 44px 18px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .closing .closing-content .closing-title {
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
  }
  .closing .closing-content .closing-sub {
    font-size: 13.5px !important;
    margin: 12px auto 0 !important;
    max-width: 100% !important;
  }
  .closing .closing-content .closing-lead {
    font-size: 13.5px !important;
    margin: 22px auto 14px !important;
    max-width: 100% !important;
  }
  /* Pill must NOT carry a fixed 470px width on mobile — fit the card */
  .closing .closing-content .form-inline {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .closing .closing-content .form-inline input {
    font-size: 12.5px !important;
    padding: 0 8px 0 16px !important;
  }
  .closing .closing-content .form-inline button {
    padding: 0 13px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }
  .closing .closing-content .form-help { font-size: 10.5px !important; }
  .closing .closing-content .form-consent { font-size: 10px !important; }
  .closing .closing-content .success-pill {
    width: fit-content !important;
    max-width: 92vw !important;
    height: auto !important;
    padding: 14px 22px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    text-wrap: balance;
  }
}

/* ==========================================================================
   MICRO-INTERACTIONS — site-wide scroll motion + desktop hover
   --------------------------------------------------------------------------
   Three independent layers compose into ONE transform per element so they
   never fight each other:
     --rv   reveal entrance offset (animates 22px -> 0 on .is-in)
     --py   scroll parallax drift  (driven every frame by useScrollMotion)
     --lift hover lift             (0 -> negative on :hover)
     --cscale hover scale
   Registered as typed custom properties so --rv / --lift / --cscale can be
   transitioned smoothly; --py is updated per-frame and intentionally untweened.
   ========================================================================== */
@property --py     { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rv     { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lift   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cscale { syntax: "<number>"; inherits: false; initial-value: 1; }

/* Smoother global reveal easing (applies to all simple .reveal elements). */
.reveal {
  transition:
    opacity .85s cubic-bezier(.2, .7, .2, 1),
    transform .85s cubic-bezier(.2, .7, .2, 1);
}

/* Composed-motion elements: cards, steps. Reveal + parallax + hover in one
   transform. Higher specificity (.reveal.mfx) than base .reveal.is-in, and
   placed later in source, so it owns the transform once revealed. */
.reveal.mfx {
  --rv: 22px;
  transform: translate3d(0, calc(var(--rv) + var(--py, 0px) + var(--lift, 0px)), 0) scale(var(--cscale, 1));
  transition:
    --rv .85s cubic-bezier(.2, .7, .2, 1),
    --lift .45s cubic-bezier(.2, .7, .2, 1),
    --cscale .45s cubic-bezier(.2, .7, .2, 1),
    opacity .85s cubic-bezier(.2, .7, .2, 1),
    box-shadow .45s ease,
    border-color .35s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.mfx.is-in { --rv: 0px; }

/* Simple parallax-only elements (headings, figure): translate by --py. */
[data-parallax]:not(.mfx) {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
/* Anatomy figure keeps its base 1.3 scale while drifting. */
.anatomy-img[data-parallax] {
  transform: scale(1.3) translateY(var(--py, 0px));
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

/* ---- Desktop-only hover affordances ---- */
@media (hover: hover) and (pointer: fine) {
  /* Liquid-glass pillars — lift + sheen sweep + brighter edge */
  .problema-pillar { cursor: default; }
  .problema-pillar:hover {
    --lift: -8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 38px 70px -26px rgba(0, 0, 0, 0.85);
  }
  .problema-pillar .problema-pillar-sheen {
    opacity: 0.85;
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .problema-pillar:hover .problema-pillar-sheen {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }

  /* Bento cards — lift + photo zoom */
  .bento-card { cursor: default; }
  .bento-card:hover {
    --lift: -6px;
    box-shadow: 0 30px 54px -26px rgba(0, 0, 0, 0.32);
  }
  .bento-card .bento-art--photo {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  .bento-card:hover .bento-art--photo { transform: scale(1.06); }

  /* Benefit cards — lift + art drift */
  .bene-card:hover {
    --lift: -6px;
    box-shadow: 0 30px 56px -28px rgba(0, 0, 0, 0.16);
  }
  .bene-card .bene-card-art {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  .bene-card:hover .bene-card-art { transform: scale(1.08); }

  /* Ritual step circles — gentle pop */
  .step-item .step-circle {
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .35s ease;
  }
  .step-item:hover .step-circle { transform: scale(1.08); }

  /* Anatomy figure — slow zoom on card hover (composes with parallax) */
  .anatomy-card:hover .anatomy-img { transform: scale(1.38) translateY(var(--py, 0px)); }
}

/* ---- Respect reduced-motion: snap everything, no parallax ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal.mfx,
  .reveal.mfx.is-in { transform: none; transition: opacity .4s ease; }
  [data-parallax]:not(.mfx) { transform: none; }
  .anatomy-img[data-parallax] { transform: scale(1.3); }
}

/* ==========================================================================
   FORM FEEDBACK — error shake + red message, success CTA green→black
   ========================================================================== */

/* Wrong number: red frame + a short horizontal shake on the pill. */
.form-inline.is-error,
.hero .form-inline.is-error,
.closing-content .form-inline.is-error {
  border-color: rgba(255,90,90,0.85) !important;
  animation: formShake .42s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes formShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* Error help text in red — beats the .hero / .closing-content grey overrides. */
.form-error,
.hero .form-help.form-error,
.closing-content .form-help.form-error {
  color: #ff6b6b !important;
}

/* Success CTA: flash green, settle to black. Author !important outranks
   @keyframes, so we drive this with TRANSITIONS (which DO outrank !important)
   across two timed class states. background-image:none clears the silver
   gradient so the color shows. */
.form-inline button.is-confirming,
.hero .form-inline button.is-confirming,
.closing-content .form-inline button.is-confirming {
  color: #ffffff !important;
  cursor: default;
}
.form-inline button.is-confirming:hover,
.hero .form-inline button.is-confirming:hover,
.closing-content .form-inline button.is-confirming:hover {
  filter: none !important;
  transform: none !important;
}
.form-inline button.cta-green,
.hero .form-inline button.cta-green,
.closing-content .form-inline button.cta-green {
  background-image: none !important;
  background-color: #18b35f !important;
  transition: none !important;
}
.form-inline button.cta-black,
.hero .form-inline button.cta-black,
.closing-content .form-inline button.cta-black {
  background-image: none !important;
  background-color: #0a0a0a !important;
  transition: background-color .45s ease !important;
}

/* ---------- Material Symbols (self-hosted) ---------- */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols.woff2") format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}