/* First agreed adaptation: identity, typography, shared navbar and hero media. */
:root {
  --elev-body-font: "Geist", sans-serif;
  --elev-display-font: "Schibsted Grotesk", sans-serif;
}

body, #main .framer-text {
  font-family: var(--elev-body-font) !important;
  --framer-font-family: var(--elev-body-font) !important;
}

#main h1.framer-text, #main h2.framer-text,
#main h3.framer-text, #main h4.framer-text,
#main h5.framer-text, #main h6.framer-text,
#main h1.framer-text *, #main h2.framer-text *,
#main h3.framer-text *, #main h4.framer-text * {
  font-family: var(--elev-display-font) !important;
  --framer-font-family: var(--elev-display-font) !important;
}

/* These are the original template's navbar, remix widget, logo and loader. */
#main .framer-ZZZEO,
#main .framer-1swg9it-container,
#main [data-framer-name="Logo Content"],
#main [data-framer-name="Loader"] {
  display: none !important;
}

/* Platform badge removed from the local preview at the user's request. */
#__framer-badge-container {
  display: none !important;
}

#elev-navbar-mount {
  display: block;
  position: relative;
  height: 0;
  z-index: 10000;
  visibility: hidden;
}
#elev-navbar-mount[data-ready="true"] { visibility: visible; }

/* Also injected into the head for the first paint, ahead of module loading. */
#main [data-framer-name="ImageSequence-01"] > div > div {
  background: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)), url("/body-recode/media/hero-first-frame.webp") center / cover no-repeat;
}
#main [data-framer-name="ImageSequence-01"] div[style*="font-size:14px"],
#main [data-framer-name="ImageSequence-01"] div[style*="font-size: 14px"] { display: none; }
#main section[data-framer-name="Hero"] [data-framer-name="Hero Image"] { display: none !important; }
#main [data-elev-hero-video] { filter: brightness(.76); }

/* Keep the line breaks and paragraph separation supplied for the hero note. */
#main .framer-1o28nx7-container .framer-17gd8iu p {
  white-space: pre-line;
}
#main .framer-1o28nx7-container img {
  object-position: 50% 22% !important;
}

@media (min-width: 810px) {
  #main .framer-1lexs21 {
    min-height: calc(var(--hero-note-height, 280px) + 56px);
  }
  #main .framer-1vd800a-container {
    position: absolute;
    top: calc(var(--hero-note-height, 280px) + 16px);
    right: 0;
    bottom: auto;
  }
}

@media (max-width: 767px) {
  #main [data-framer-name="ImageSequence-01"] > div > div {
    background-image: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)), url("/body-recode/media/hero-first-frame-mobile.webp");
  }
}

/* Remove the four small caption-and-plus groups, preserving each scroll beat. */
#main .framer-16kydk8-container,
#main .framer-1phquc5-container,
#main .framer-r731vo-container,
#main .framer-1j1fkul-container { display: none !important; }

#main .elev-emerald { color: #4dcc85 !important; --framer-text-color: #4dcc85 !important; }

/* Same title metrics and responsive scale as components/clinic/Recode.tsx. */
#main .elev-recode-intro {
  position: relative;
  width: 100%;
  height: 190svh;
  flex: none;
  overflow: visible;
  background: #fff;
  z-index: 0;
}
#main .elev-recode-screen {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 24px;
  box-sizing: border-box;
}
#main .elev-recode-inner { width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; }
#main .elev-recode-title {
  margin: 0;
  color: #15171c;
  font-family: "Schibsted Grotesk", system-ui, sans-serif !important;
  font-weight: 500;
  font-size: clamp(20px, min(3.4vw, 5svh), 46px);
  line-height: 1.15;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#main .elev-recode-signature { white-space: nowrap; opacity: 0; visibility: hidden; }
#main .elev-recode-by { font-size: .62em; opacity: .55; letter-spacing: 0; text-transform: lowercase; }

/* Three sequential paragraphs in one pinned 100svh gray screen. */
#main .elev-recode-gray {
  position: relative;
  width: 100%;
  height: 460svh;
  flex: none;
  background: #e8e9eb;
  z-index: 1;
}
#main .elev-recode-gray-screen {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  background: #e8e9eb;
  box-sizing: border-box;
  padding: clamp(80px, 10svh, 104px) 32px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 28px;
}
#main .recode-story-label {
  margin: 0; color: #626770; font-family: "Geist",sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  line-height: 1.3; text-transform: uppercase; text-align: center;
}
#main .recode-story-stage { position: relative; width: 100%; max-width: 940px; margin: 0 auto; }
#main .recode-story-paragraph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; font-family: "Geist",system-ui,sans-serif; font-size: clamp(18px,1.8vw,24px);
  font-weight: 400; line-height: 1.45; letter-spacing: -.015em; color: #15171c;
  text-align: center; text-wrap: pretty; opacity: 0;
}
#main .recode-story-position { display: flex; align-items: center; justify-content: center; gap: 14px; font: 500 11px/1.3 "Geist",sans-serif; letter-spacing: .08em; color: #626770; }
#main .recode-story-track { width: 96px; height: 2px; background: #c9cdd1; overflow: hidden; }
#main .recode-story-track i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #157a48; }
#main .elev-recode-includes { position: relative; z-index: 1; width: 100%; padding-bottom: 100svh; background: #e8e9eb; }
#main .elev-features-mount { display: block; width: 100%; }
#main .elev-recode-how { position: relative; z-index: 1; width: 100%; background: #e8e9eb; }
#main .elev-how-mount { display: block; width: 100%; }
@media(max-width:767px) {
  #main .elev-recode-gray-screen { padding: 88px 24px 36px; gap: 20px; }
  #main .recode-story-paragraph { font-size: clamp(16px,2svh,17px); }
}

/* A 100svh overlap keeps the gray screen behind the incoming dark mask.
 * Inset clips 10% on each side at entry (80% visible width), reaching zero
 * as the panel's top reaches the viewport top. The content scales with
 * that same progress, preserving its internal proportions and line breaks. */
#main section[data-framer-name="Stats Content"] {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
  background: #0e0f12;
  border-radius: 32px;
  clip-path: inset(0 var(--elev-stats-inset, 10%) 0 round 32px);
  color: #f4f2ee;
  --token-05ba60ad-ea69-4607-b99c-a3c987c679f6: #f4f2ee;
  --token-f62c5ef4-1357-4bf4-adbe-1cc0f610e788: #b5b9c2;
  --token-c99e5463-8d82-492c-9b0b-139778e84822: rgba(255,255,255,.16);
  --token-ba5c18f7-3d59-43f3-a78d-ab5535fe6229: #0e0f12;
}
#main section[data-framer-name="Stats Content"] > .framer-zh7qo8 {
  transform: scale(var(--elev-stats-content-scale, .8));
  transform-origin: center top;
}
#main section[data-framer-name="Stats Content"] .framer-600uzo { display: none !important; }
#main section[data-framer-name="About Teaser"] { padding-top: 96px; }
#main section[data-framer-name="About Teaser"] .framer-600uzo { display: none !important; }
/* Existing Soul 2.0 portrait from Clinic, framed for the small author avatar. */
#main .framer-itdirg-container .framer-87leta { overflow: hidden; }
#main .framer-itdirg-container { max-width: 100%; min-width: 0; }
#main .framer-itdirg-container .framer-Y83kN { max-width: 100%; height: auto !important; min-height: 48px; }
#main .framer-itdirg-container .framer-f576t0 { min-width: 0; flex: 1 1 auto; width: auto; }
#main .framer-itdirg-container .framer-qhphfp { max-width: 260px; white-space: normal; }
#main .framer-itdirg-container .framer-qhphfp p { white-space: normal !important; }
#main .framer-itdirg-container img {
  object-position: 50% 30% !important;
  transform: scale(2.2);
  transform-origin: 50% 16%;
}
@media (max-width: 767px) {
  #main section[data-framer-name="About Teaser"] { padding-top: 64px; }
}
@media (min-width: 768px) { #main .elev-recode-screen { padding-inline: 32px; } }
@media (prefers-reduced-motion: reduce) {
  #main .elev-recode-intro { height: 100svh; }
  #main .elev-recode-screen { position: relative; }
  #main .elev-recode-signature { opacity: 1; visibility: visible; }
  #main .elev-recode-gray { height: auto; min-height: 100svh; }
  #main .elev-recode-gray-screen { position: relative; height: auto; min-height: 100svh; padding-block: 80px; }
  #main .recode-story-stage { display: grid; gap: 32px; }
  #main .recode-story-paragraph { position: static; opacity: 1; }
  #main .recode-story-position { display: none; }
  #main .elev-recode-includes { padding-bottom: 0; }
  #main section[data-framer-name="Stats Content"] { margin-top: 0; clip-path: inset(0 0 0 round 32px); }
  #main section[data-framer-name="Stats Content"] > .framer-zh7qo8 { transform: none; }
}

/* The shared Clinic film follows the three explanatory paragraphs. */
#main .elev-recode-film { position:relative; width:100%; background:#0e0f12; }
#main .elev-film-mount { display:block; width:100%; }
#main .elev-film-fallback { position:relative; height:180svh; background:#0e0f12; }
#main .elev-film-fallback picture { position:sticky; top:0; display:block; height:100svh; }
#main .elev-film-fallback img { display:block; width:100%; height:100%; object-fit:cover; }
@media(prefers-reduced-motion:reduce) {
  #main .elev-film-fallback { height:100svh; }
  #main .elev-film-fallback picture { position:relative; }
}

#main .framer-nh9x8h p, #main .framer-nh9x8h p span { color: #fff !important; --framer-text-color: #fff !important; }

/* ELEV Clinic typography.
 * Sources: app/globals.css; components/clinic/HeroClinic.tsx,
 * Numeros.tsx, Jornada.tsx, ServicosClinic.tsx and components/home/Footer.tsx.
 * Applied after the template styles, including CMS-generated content.
 * Framer variables must match the CSS properties: animated words and inline
 * emphasis read these variables instead of inheriting the computed size.
 */
#main {
  --clinic-body: "Geist", system-ui, sans-serif;
  --clinic-display: "Schibsted Grotesk", system-ui, sans-serif;
  --clinic-h2: clamp(28px, 3.2vw, 46px);
  --clinic-number: clamp(34px, 4.4vw, 54px);
}

/* Body copy, controls and fallback labels must use the same local family. */
#main .framer-text,
#main input, #main textarea, #main select, #main button {
  font-family: var(--clinic-body) !important;
  --framer-font-family: var(--clinic-body) !important;
}
#main :is(h1,h2,h3,h4).framer-text * {
  font-family: inherit !important;
  --framer-font-family: inherit !important;
}

/* Hero: exact type scale, weight and tracking of #clinic-title. */
#main h1.framer-styles-preset-m2fi2l {
  font-family: var(--clinic-display) !important;
  font-size: clamp(34px, min(5.8vw, 8svh), 84px) !important; --framer-font-size: clamp(34px, min(5.8vw, 8svh), 84px) !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1 !important; --framer-line-height: 1 !important;
  letter-spacing: -.035em !important; --framer-letter-spacing: -.035em !important;
}
#main .framer-styles-preset-1l65hyl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px !important; --framer-font-size: 12px !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: .08em !important; --framer-letter-spacing: .08em !important;
}
#main .framer-styles-preset-1l65hyl::before {
  content: "";
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("/body-recode/brand/icone-clinic-escuro.png") center / contain no-repeat;
}

/* Section headings: Clinic's text-h2, including headings inside articles. */
#main h2.framer-styles-preset-18b4vsu {
  font-family: var(--clinic-display) !important;
  font-size: var(--clinic-h2) !important; --framer-font-size: var(--clinic-h2) !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.14 !important; --framer-line-height: 1.14 !important;
  letter-spacing: -.022em !important; --framer-letter-spacing: -.022em !important;
}

/* Supporting card and step titles follow Clinic's Jornada hierarchy. */
#main h3.framer-styles-preset-1bwed9s,
#main h3.framer-styles-preset-i0ugw4,
#main .framer-styles-preset-km91no {
  font-family: var(--clinic-body) !important;
  font-size: 18px !important; --framer-font-size: 18px !important;
  font-weight: 600 !important; --framer-font-weight: 600 !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: -.015em !important; --framer-letter-spacing: -.015em !important;
}

/* Introductory paragraphs use Clinic's body/lead rhythm. */
#main .framer-styles-preset-1casspo {
  font-size: 18px !important; --framer-font-size: 18px !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1.55 !important; --framer-line-height: 1.55 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}
#main .framer-yixvb8 .framer-text {
  font-size: 15px !important; --framer-font-size: 15px !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}

/* Scroll statements: same display-text scale as DestaquesMetodo. */
#main .framer-styles-preset-1shhny8 {
  font-size: 20px !important; --framer-font-size: 20px !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}
#main section[data-framer-name="Hero"] .framer-styles-preset-1shhny8 {
  font-size: clamp(22px, 3vw, 40px) !important; --framer-font-size: clamp(22px, 3vw, 40px) !important;
  line-height: 1.1 !important; --framer-line-height: 1.1 !important;
  letter-spacing: -.02em !important; --framer-letter-spacing: -.02em !important;
}
#main section[data-framer-name="Stats Content"] .framer-styles-preset-1shhny8 {
  font-size: 18px !important; --framer-font-size: 18px !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1.55 !important; --framer-line-height: 1.55 !important;
}

/* Supporting text, lists, testimonial cards and FAQ answers. */
#main .framer-styles-preset-rcomlw,
#main .framer-styles-preset-1ii3ww5,
#main p.framer-text:not([class*="framer-styles-preset-"]) {
  font-size: 15px !important; --framer-font-size: 15px !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}
#main .framer-styles-preset-dwnt13 {
  font-size: 15px !important; --framer-font-size: 15px !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}

/* Metadata and small labels: preserve names/dates in their existing case. */
#main .framer-styles-preset-1thwr89,
#main .framer-styles-preset-m25lqk {
  font-size: 12px !important; --framer-font-size: 12px !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: .08em !important; --framer-letter-spacing: .08em !important;
}

/* Template CTAs take the same 15px/500 used by Clinic's card actions. */
#main .framer-styles-preset-4h4rit,
#main .framer-styles-preset-1tnwrdv {
  font-size: 15px !important; --framer-font-size: 15px !important;
  font-weight: 500 !important; --framer-font-weight: 500 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}

/* Remove Playfair from live counters and normalize numeric hierarchy. */
#main [style*="Playfair Display"],
#main .framer-styles-preset-1srvl3g {
  font-family: var(--clinic-display) !important;
  --framer-font-family: var(--clinic-display) !important;
  font-size: var(--clinic-number) !important; --framer-font-size: var(--clinic-number) !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1 !important; --framer-line-height: 1 !important;
  letter-spacing: -.03em !important; --framer-letter-spacing: -.03em !important;
}
/* The four compact biography counters use the h3 step, keeping suffixes
 * together within their narrower columns instead of forcing display size. */
#main section[data-framer-name="About Teaser"] [style*="Playfair Display"] {
  font-size: 28px !important; --framer-font-size: 28px !important;
  line-height: 1.2 !important; --framer-line-height: 1.2 !important;
  letter-spacing: -.02em !important; --framer-letter-spacing: -.02em !important;
}

/* Footer uses Clinic's contact/footer scale instead of template display sizes. */
#main .framer-styles-preset-1a95vp4 {
  font-family: var(--clinic-display) !important;
  font-size: 21px !important; --framer-font-size: 21px !important;
  font-weight: 600 !important; --framer-font-weight: 600 !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: -.02em !important; --framer-letter-spacing: -.02em !important;
}
#main footer h3.framer-text {
  font-family: var(--clinic-display) !important;
  font-size: 21px !important; --framer-font-size: 21px !important;
  font-weight: 600 !important; --framer-font-weight: 600 !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: -.02em !important; --framer-letter-spacing: -.02em !important;
}
#main .framer-styles-preset-7wunqk {
  font-size: 15px !important; --framer-font-size: 15px !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}
#main .framer-pw5hfc-container p {
  font-family: var(--clinic-body) !important;
  font-size: 12px !important; --framer-font-size: 12px !important;
  line-height: 1.3 !important; --framer-line-height: 1.3 !important;
  letter-spacing: .08em !important; --framer-letter-spacing: .08em !important;
}
#main input, #main textarea, #main select {
  font-size: 16px !important; --framer-font-size: 16px !important;
  font-weight: 400 !important; --framer-font-weight: 400 !important;
  line-height: 1.5 !important; --framer-line-height: 1.5 !important;
  letter-spacing: normal !important; --framer-letter-spacing: normal !important;
}

@media (min-width: 640px) {
  #main h3.framer-styles-preset-1bwed9s,
  #main h3.framer-styles-preset-i0ugw4,
  #main .framer-styles-preset-km91no { font-size: 20px !important; --framer-font-size: 20px !important; }
}
@media (min-width: 768px) {
  #main .framer-yixvb8 .framer-text {
    font-size: 21px !important; --framer-font-size: 21px !important;
    line-height: 1.3 !important; --framer-line-height: 1.3 !important;
    letter-spacing: -.015em !important; --framer-letter-spacing: -.015em !important;
  }
}

/* The dark panel now contains only counters and narrative text. */
#main section[data-framer-name="Stats Content"] :is(.framer-1lbhbwx-container, .framer-135gwzr-container, .framer-r0z1el-container, .framer-14ek4r5-container, .framer-1mhz9ao),
#main section[data-framer-name="Stats Content"] [data-framer-name="Lives changed"] > .ssr-variant {
  display: none !important;
}
#main section[data-framer-name="Stats Content"] [data-framer-name="Lives changed"] { gap: 0; }
#main section[data-framer-name="Stats Content"] .framer-yx15qm p > span:nth-last-of-type(-n+4) {
  font-weight: 400 !important;
  --framer-font-weight: 400 !important;
  color: var(--token-05ba60ad-ea69-4607-b99c-a3c987c679f6) !important;
  --framer-text-color: var(--token-05ba60ad-ea69-4607-b99c-a3c987c679f6) !important;
}
@media (min-width: 810px) {
  #main section[data-framer-name="Stats Content"] [data-framer-name="Lives changed"] {
    padding-block: 0;
    justify-content: center;
  }
}
#main section[data-framer-name="Stats Content"] :is([data-framer-name="Stat 1"], [data-framer-name="Stat 2"], [data-framer-name="Stat 3"], [data-framer-name="Stat 4"]) > div {
  font-family: var(--clinic-display) !important;
  --framer-font-family: var(--clinic-display) !important;
  font-size: calc(var(--clinic-number) * 3) !important;
  --framer-font-size: calc(var(--clinic-number) * 3) !important;
  font-weight: 400 !important;
  --framer-font-weight: 400 !important;
  line-height: 1 !important;
  --framer-line-height: 1 !important;
  letter-spacing: -.03em !important;
  --framer-letter-spacing: -.03em !important;
}
@media (max-width: 767px) {
  #main section[data-framer-name="Stats Content"] .framer-lsztef-container { position: relative; inset: auto; }
  #main section[data-framer-name="Stats Content"] .framer-uhvts2 { gap: 12px; }
}

.br-features, .br-features * { box-sizing: border-box; }
.br-features {
  background: #e8e9eb; color: #15171c;
  font-family: "Geist", system-ui, sans-serif;
  width: 100%; padding: 96px 32px 56px;
}
.br-features-layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.br-features-label { margin: 0 0 24px; font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #626770; }
.br-features h2 { margin: 0 0 40px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: clamp(28px,3.2vw,46px); font-weight: 500; line-height: 1.14; letter-spacing: -.022em; }
.br-features-tabs { display: flex; flex-direction: column; border-top: 1px solid #cbd0d4; }
.br-feature-tab {
  appearance: none; border: 0; border-bottom: 1px solid #cbd0d4; border-radius: 0;
  width: 100%; background: transparent; color: #626770; padding: 18px 12px;
  display: grid; grid-template-columns: 28px 1fr 18px; gap: 14px; align-items: center;
  font-family: inherit; text-align: left; font-size: 16px; line-height: 1.4; font-weight: 500;
  cursor: pointer; transition: background-color 200ms ease,color 200ms ease;
}
.br-feature-tab:hover { background: rgba(255,255,255,.28); color: #15171c; }
.br-feature-tab.is-active { background: rgba(255,255,255,.6); color: #15171c; }
.br-feature-tab:focus-visible { outline: 2px solid #157a48; outline-offset: 4px; }
.br-feature-index { font-size: 12px; letter-spacing: .06em; color: #747a83; }
.br-feature-tab.is-active .br-feature-index { color: #157a48; }
.br-feature-mark { font-size: 21px; font-weight: 400; text-align: center; }
.br-feature-visual { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 730px; min-height: 540px; overflow: hidden; border-radius: 32px; background: #c9cdce; isolation: isolate; }
.br-feature-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.br-feature-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 38%,rgba(6,13,12,.28)); pointer-events: none; }
.br-feature-card { position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 26px; background: rgba(246,248,247,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.8); border-radius: 24px; box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.br-feature-card-label { display: block; color: #3f6554; font-size: 11px; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 14px; }
.br-feature-card h3 { margin: 0 0 14px; font-family: "Schibsted Grotesk",system-ui,sans-serif; font-size: clamp(22px,2vw,28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.br-feature-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #3a3e46; }
.br-features-notice { max-width: 920px; margin: 36px auto 0; font-size: 12px; line-height: 1.5; color: #626770; text-align: center; }
@media(max-width: 1023px) {
  .br-features { padding: 72px 24px 48px; }
  .br-features-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .br-feature-visual { max-width: 760px; margin-inline: auto; }
  .br-feature-tab { padding: 16px 8px; gap: 8px; font-size: 15px; }
  .br-feature-card { left: 16px; right: 16px; bottom: 16px; padding: 22px; }
}
@media(max-width: 767px) {
  .br-features { padding: 64px 24px 40px; }
  .br-features-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .br-features h2 { margin-bottom: 28px; }
  .br-feature-visual { aspect-ratio: 3 / 4; min-height: 550px; max-height: none; border-radius: 24px; }
  .br-feature-card { padding: 20px; border-radius: 20px; }
  .br-feature-card h3 { font-size: 23px; }
  .br-feature-card p { font-size: 14px; line-height: 1.5; }
  .br-features-notice { text-align: left; margin-top: 28px; }
}
@media(prefers-reduced-motion: reduce) { .br-feature-tab { transition: none; } }

.br-how, .br-how * { box-sizing: border-box; }
.br-how { width:100%; padding:112px 32px 104px; background:#e8e9eb; color:#15171c; font-family:"Geist",system-ui,sans-serif; }
.br-how-inner { width:100%; max-width:1280px; margin:0 auto; }
.br-how-header { text-align:center; max-width:880px; margin:0 auto; }
.br-how-label { margin:0 0 24px; font-size:12px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:#626770; }
.br-how h2 { margin:0; font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:clamp(32px,3.2vw,46px); font-weight:500; line-height:1.14; letter-spacing:-.022em; }
.br-how-support { max-width:640px; margin:24px auto 0; font-size:18px; line-height:1.6; color:#626770; }
.br-how-timeline { position:relative; list-style:none; padding:0; margin:88px 0 0; display:flex; flex-direction:column; gap:64px; }
.br-how-line { position:absolute; left:50%; width:2px; margin-left:-1px; background:#cbd0d4; pointer-events:none; list-style:none; }
.br-how-line > span { display:block; width:100%; height:100%; background:#157a48; }
.br-how-step { position:relative; list-style:none; }
.br-how-node { position:relative; z-index:1; margin:0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#d8dcdd; color:#626770; outline:8px solid #e8e9eb; transition:background-color .3s,color .3s; }
.br-how-node.is-reached { background:#157a48; color:#fff; }
.br-how-card { width:44%; margin-top:20px; background:#f5f6f6; border:0; border-radius:32px; overflow:hidden; box-shadow:0 16px 40px -12px rgba(21,23,28,.16),0 3px 10px rgba(21,23,28,.04); }
.br-how-step.is-right .br-how-card { margin-left:auto; }
.br-how-card-copy { padding:30px 30px 26px; }
.br-how-step-label { margin:0 0 18px; color:#3f6554; font-size:12px; line-height:1.4; letter-spacing:.045em; }
.br-how h3 { margin:0 0 16px; font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:clamp(24px,2vw,28px); line-height:1.2; font-weight:500; letter-spacing:-.02em; }
.br-how-card-copy > p:last-child { margin:0; font-size:16px; line-height:1.65; color:#626770; }
.br-how-image { aspect-ratio:16/10; margin:0 8px 8px; overflow:hidden; border-radius:24px; background:#d8dcdd; }
.br-how-image img { display:block; width:100%; height:100%; object-fit:cover; }
.br-how-footer { display:flex; justify-content:center; margin-top:72px; }
.br-how-footer .cta { --cta-h:52px; --cta-fs:15px; --cta-pl:24px; --cta-inset:5px; --cta-arrow:18px; max-width:100%; }
.br-how-fallback-cta { display:inline-flex; align-items:center; gap:24px; border-radius:99px; padding:15px 20px 15px 24px; background:#15171c; color:white; font-size:15px; text-decoration:none; }
.br-how-fallback-cta span { font-size:20px; }
@media(max-width:767px) {
 .br-how { padding:72px 24px; }
 .br-how-header { text-align:left; }
 .br-how h2 { font-size:32px; }
 .br-how-support { font-size:16px; margin-top:20px; }
 .br-how-timeline { margin-top:48px; gap:40px; }
 .br-how-line { left:16px; }
 .br-how-node { position:absolute; left:0; top:0; width:32px; height:32px; margin:0; outline-width:5px; }
 .br-how-node svg { width:17px; height:17px; }
 .br-how-card, .br-how-step.is-right .br-how-card { width:calc(100% - 48px); margin:0 0 0 48px; border-radius:24px; }
 .br-how-card-copy { padding:22px 20px; }
 .br-how h3 { font-size:23px; }
 .br-how-card-copy > p:last-child { font-size:15px; line-height:1.6; }
 .br-how-step-label { font-size:11px; margin-bottom:14px; }
 .br-how-image { border-radius:18px; margin:0 6px 6px; }
 .br-how-footer { margin-top:48px; }
 .br-how-footer .cta { --cta-fs:13px; --cta-pl:16px; --cta-h:48px; }
}
@media(prefers-reduced-motion:reduce) { .br-how-node { transition:none; } }