/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home-v2.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ---------------------------------------------------------------------------
   Home v2 — bento design system.
   Built on the existing globals.css tokens (--cream, --ink, --paper,
   --co-accent-soft, --serif/--sans, --ease). Everything here is prefixed `v2-`
   so it can't collide with the accumulated `co-` page styles.

   The visual language is bento: every section is a grid of rounded tiles that
   carry their own ground (photo, video, gradient or flat), with floating white
   chips layered on top and a caption anchored to the bottom-left.
--------------------------------------------------------------------------- */

.v2 {
  --v2-r: 22px;          /* tile radius */
  --v2-r-sm: 14px;       /* inner chip radius */
  --v2-gap: 14px;
  --v2-pad: 26px;
  --v2-max: 1240px;
  --v2-line: #E4E4E8;
  --v2-control-line: #B7B7BE;
  --v2-ground: #FAFAFB;
  --v2-tile: #F1F1F3;
  --v2-ink: #1D1D1F;
  --v2-ink-soft: #3A3A3C;
  --v2-ink-mute: #6E6E73;
  --v2-accent: #faf6cf;
  --v2-gold: #c99a2e;

  /* Headings use the original Newsreader serif, not the Plus Jakarta remap
     that globals.css aliases --serif to. Scoped here so it also reaches the
     inline `var(--serif)` usages inside this subtree. */
  --serif: var(--font-newsreader), ui-serif, Georgia, serif;
  /* Anything depicting a product surface uses the app's face, not the site's
     display serif — numerals especially. */
  --v2-appface: var(--font-plus-jakarta), ui-sans-serif, system-ui, sans-serif;

  background: var(--v2-ground);
  color: var(--v2-ink);
  font-family: var(--sans);
  position: relative;
}

/* Drives the navbar's bare↔pill state. Sits at the depth where the bar stops
   overlapping the hero; once it scrolls out of view the pill takes over. */
.v2-sentinel {
  position: absolute;
  top: 40px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

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

.v2-wrap {
  max-width: var(--v2-max);
  margin: 0 auto;
  /* 20px was fine for a text column and too tight for the full-width media
     cards — a 420px-tall banner with a 26px radius reads as touching the
     window at that inset. Phones keep 20px, where the width is worth more
     than the margin; everything above gets progressively more room. */
  padding: 0 clamp(20px, 2.6vw, 36px);
}

/* ---- type ---------------------------------------------------------------- */

.v2 h1, .v2 h2, .v2 h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}
/* Zero-specificity, like the paragraph reset above. `.v2 h1 { margin: 0 }`
   is (0,1,1) and was silently beating page classes like `.gift-h1` at (0,1,0),
   which killed their `margin: … auto` and shoved centred headlines left. */
:where(.v2) :is(h1, h2, h3) { margin: 0; }
.v2 h1 { font-size: clamp(40px, 6.4vw, 74px); }
.v2 h2 { font-size: clamp(30px, 4.1vw, 46px); line-height: 1.08; }
.v2 h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
/* :where() keeps this reset at zero specificity so single-class rules
   below (.v2-hero-sub, .v2-tile-sub, …) can still set their own margins. */
:where(.v2) p { margin: 0; }

/* Every section label on the site uses this: a muted pill rather than bare
   caps floating on the page. Dark sections get the inverse below. */
/* `inline-flex` alone still stretches inside a flex column (align-items
   defaults to stretch), which is what made these pills run full width. */
.v2-eyebrow,
.v2-method-eyebrow,
.v2 .co-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.045);
  border: 1px solid rgba(29, 29, 31, 0.07);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
/* ScienceStrip brings its own eyebrow markup — give it the same treatment. */
.v2 .co-eyebrow {
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.045);
  border: 1px solid rgba(29, 29, 31, 0.07);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2 .co-eyebrow .dot { display: none; }

/* centred section heads keep their pill centred rather than left-hugging */
.v2-method-head .v2-method-eyebrow,
.v2-method-head .v2-eyebrow,
.v2-method-head .mb-tag,
.qm-hero-copy .v2-eyebrow { align-self: center; }

/* on dark grounds */
.v2-testi .v2-eyebrow,
.v2-tile--ink .v2-eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
}

.v2-sec-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
  margin-bottom: 30px;
}
.v2-sec-head p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--v2-ink-mute);
  max-width: 54ch;
}

.v2-section { padding: 84px 0; }
.v2-section--tight { padding: 56px 0; }

/* One heading weight across the page, no italics, no highlight pads. These
   override the `co-` classes that reused components bring with them. */
.v2 :is(h1, h2, h3, .co-d1, .co-d2, .co-d3) { font-weight: 400; }
.v2 :is(em, i, .co-serif-i, .italic-em) { font-style: normal; }
.v2 .co-mark,
.v2 .italic-em,
.v2 .co-serif-i {
  background-image: none;
  padding: 0;
}

/* ---- buttons ------------------------------------------------------------- */

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 26px;
  border-radius: 9999px;
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--sans);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease), opacity 0.22s var(--ease);
}
.v2-btn:hover { transform: translateY(-1px); }
.v2-btn:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 3px; }

.v2-btn--fill { background: var(--v2-ink); color: #fff; }
.v2-btn--fill:hover { background: #000; }

.v2-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
}
.v2-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }

.v2-btn--line { background: transparent; color: var(--v2-ink); border-color: var(--v2-control-line); }
.v2-btn--line:hover { border-color: var(--v2-ink); }

.v2-btn--light { background: #fff; color: var(--v2-ink); }
.v2-btn--soft { background: var(--v2-tile); color: var(--v2-ink); }
.v2-btn--soft:hover { background: #e7e7ea; }

/* ---- header -------------------------------------------------------------- */

/* Two states. At the top of the page the bar is bare and full-width — no
   ground, links spread across the container. Once you scroll it contracts
   into a floating glass pill that hugs its own content. Everything that
   moves is animatable (max-width, background, radius, padding), so the
   transition is one continuous motion rather than a swap. */

.v2-header {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
  transition: top 0.42s var(--ease);
}
.v2-header.is-stuck { top: 14px; }

.v2-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 36px;
  height: 62px;
  width: 100%;
  max-width: 1120px;
  padding: 0 4px 0 6px;
  border-radius: 9999px;
  background: rgba(29, 29, 31, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0);
  transition:
    max-width 0.52s var(--ease),
    padding 0.52s var(--ease),
    background 0.36s var(--ease),
    border-color 0.36s var(--ease),
    backdrop-filter 0.36s var(--ease),
    box-shadow 0.36s var(--ease);
}
.v2-header.is-stuck .v2-nav {
  max-width: var(--pill-w, var(--v2-max));
  padding: 0 14px 0 38px;
  background: rgba(29, 29, 31, 0.72);
  border-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.55);
}

/* Hidden twin of the contracted bar. Measuring this instead of reflowing the
   live nav is what keeps the contraction animation smooth — the real element
   is never forced to max-content mid-transition. */
.v2-nav--ghost {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  width: -moz-max-content;
  width: max-content;
  max-width: none;
  padding: 0 14px 0 38px;
  transition: none;
}

.v2-logo { display: flex; align-items: center; height: 26px; flex: none; }
.v2-logo img { height: 25px; width: auto; display: block; }

/* The link group carries the slack at the top state, which is what lets the
   bar spread edge-to-edge and then collapse to its natural width. */
.v2-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex: 1 1 auto;
}
.v2-nav-links a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.18s var(--ease);
  white-space: nowrap;
}
.v2-nav-links a:hover { color: #fff; }
.v2-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
/* The two right-hand groups cross-fade: pills in the bare state, the plain
   link once contracted. Both stay mounted so the bar morphs rather than
   swapping its contents mid-transition. */
.v2-nav-collapse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  max-width: 400px;
  opacity: 1;
  transition: max-width 0.5s var(--ease), opacity 0.28s var(--ease), margin-right 0.5s var(--ease);
}
.v2-header.is-stuck .v2-nav-collapse {
  max-width: 0;
  opacity: 0;
  margin-right: -10px;
  pointer-events: none;
}

.v2-nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 9999px;
  padding: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-width 0.5s var(--ease),
    padding 0.5s var(--ease),
    border-color 0.36s var(--ease),
    background 0.2s var(--ease),
    opacity 0.3s var(--ease) 0.12s;
}
.v2-header.is-stuck .v2-nav-login {
  max-width: 150px;
  padding: 0 20px;
  border-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 1080px) {
  .v2-header.is-stuck .v2-nav-login { max-width: 0; opacity: 0; pointer-events: none; }
}
.v2-nav-login:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }

/* Outlined glass pills used only in the top state. The country chip lives here
   so visitors can see and change their market on arrival; once the bar
   contracts it drops away and Ingresar reverts to a plain link. */
.v2-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.v2-nav-pill:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.7); }
.v2-nav-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2-nav-pill svg,
.v2-nav-pill img { display: block; border-radius: 3px; }
.v2-nav-cta {
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  background: #fff;
  color: var(--v2-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s var(--ease);
}
.v2-nav-cta:hover { transform: translateY(-1px); }
/* Same trick for the bar controls: 40px visually, 44px to the thumb. */
.v2-nav-cta,
.v2-burger,
.v2-nav-login { position: relative; }
.v2-nav-cta::after,
.v2-burger::after,
.v2-nav-login::after {
  content: '';
  position: absolute;
  inset: -3px -2px;
}

.v2-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.v2-burger span { display: block; width: 15px; height: 1.6px; background: var(--v2-ink); border-radius: 2px; }

/* Nav ladder.
   >1080  full bar
   1080–860 centre links collapse into the burger; chip + Empezar stay
   860–620  Ingresar pill drops (it lives in the sheet)
   <620     logo + country chip + burger only */
@media (max-width: 1080px) {
  .v2-nav-links { display: none; }
  .v2-nav { gap: 12px; padding-right: 6px; }
  .v2-burger { display: flex; }
  .v2-header { top: 26px; }
}
@media (max-width: 860px) {
  .v2-nav-pill--login { display: none; }
}
@media (max-width: 620px) {
  .v2-header { top: 14px; padding: 0 12px; }
  .v2-header.is-stuck { top: 10px; }
  .v2-nav { height: 56px; gap: 8px; padding: 0 6px 0 14px; }
  .v2-header.is-stuck .v2-nav { padding: 0 6px 0 16px; }
  .v2-nav-cta { display: none; }
  .v2-logo img { height: 22px; }
  .v2-nav-pill { height: 38px; padding: 0 12px; font-size: 13.5px; }
}

.v2-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--v2-ground);
  padding: 88px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Scoped to a class, not `a`. As a type-qualified selector this outranked
   .v2-btn--fill and repainted the CTA's label dark-on-dark, which is why the
   button looked empty. */
.v2-sheet-link {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  text-decoration: none;
  padding: 17px 0;
  border-bottom: 1px solid var(--v2-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-sheet-link::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1.6px solid var(--v2-ink-mute);
  border-right: 1.6px solid var(--v2-ink-mute);
  transform: rotate(45deg);
}
.v2-sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.v2-sheet-actions .v2-btn { width: 100%; height: 54px; font-size: 16px; }
.v2-sheet-country {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--v2-ink-mute);
  cursor: pointer;
}
.v2-sheet-close {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid var(--v2-line);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--v2-ink);
}

/* ---- hero ---------------------------------------------------------------- */

/* Big inset video card with the nav pill floating over its top edge — the
   established Humanolab hero. Headline left, sub + CTAs right, three value
   props on a divided strip along the bottom. */

/* Inset card: margins on all four sides, rounded corners, nav floating over
   its top area. The nav sits low enough (see .v2-header top) to clear the
   card's corner radius rather than straddling it. */
.v2-hero { background: var(--v2-ground); padding: 16px; }

.v2-hero-card {
  position: relative;
  transform-origin: 50% 0;
  will-change: transform;
  border-radius: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  min-height: clamp(640px, 92vh, 1000px);
  display: flex;
  isolation: isolate;
}
.v2-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  transform-origin: 50% 40%;
}
.v2-hero-media video,
.v2-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}
.v2-hero-body { will-change: transform, opacity; }
.v2-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 26, 0.6) 0%,
    rgba(12, 16, 26, 0.4) 22%,
    rgba(12, 16, 26, 0.3) 46%,
    rgba(10, 14, 24, 0.55) 74%,
    rgba(8, 12, 22, 0.82) 100%
  );
}
.v2-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) 20px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.v2-hero-main {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(40px, 6vh, 64px);
}
.v2-hero h1 {
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 13ch;
}
/* No drop shadow — the veil carries the contrast. */
.v2-hero h1 em { font-weight: 400; }
.v2-hero-side { max-width: 480px; justify-self: end; width: 100%; }
.v2-hero-sub {
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 30px;
}
.v2-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.v2-btn--yellow { background: var(--yellow, #ffff8c); color: var(--v2-ink); }
.v2-btn--yellow:hover { background: #f2f070; }
.v2-btn--yellow:focus-visible { outline-color: #fff; }
.v2-btn-arrow { display: inline-block; transition: transform 0.22s var(--ease); }
.v2-btn:hover .v2-btn-arrow { transform: translateX(3px); }

.v2-hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.v2-hero-feature {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 30px 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.v2-hero-feature:first-child { border-left: 0; }
.v2-hero-feat-icn { color: #fff; opacity: 0.92; flex: none; margin-top: 1px; }
.v2-hero-feat-title { font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.v2-hero-feat-sub { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); margin-top: 3px; }

/* Tablet — headline and copy stack, feature strip halves. */
@media (max-width: 1000px) {
  .v2-hero-card { min-height: clamp(600px, 84vh, 820px); }
  .v2-hero-body { padding-top: clamp(96px, 13vh, 132px); }
  .v2-hero-main { grid-template-columns: 1fr; gap: 22px; padding-bottom: clamp(30px, 4vh, 46px); }
  .v2-hero-side { max-width: 100%; justify-self: start; }
  .v2-hero h1 { max-width: 16ch; }
  .v2-hero-sub { margin-bottom: 26px; max-width: 56ch; }
  .v2-hero-feature { padding: 24px 18px; }
}

/* The strip is three-across or a full vertical stack — never a 2 + 1 orphan
   row, which is what a plain 2-column grid produces with three items. */
@media (max-width: 820px) {
  .v2-hero-features { grid-template-columns: 1fr; }
  .v2-hero-feature {
    border-left: 0;
    justify-content: flex-start;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .v2-hero-feature:first-child { border-top: 0; }
  .v2-hero-feature:last-child { padding-bottom: 26px; }
}

/* Phone — tighter inset, single-column strip, full-width CTAs. */
@media (max-width: 620px) {
  .v2-hero { padding: 8px; }
  .v2-hero-card { min-height: 92vh; border-radius: 18px; }
  .v2-hero-body { padding: clamp(84px, 14vh, 110px) 18px 0; }
  .v2-hero h1 { font-size: clamp(32px, 8.6vw, 44px); max-width: 100%; }
  .v2-hero-sub { font-size: 15px; margin-bottom: 22px; }
  .v2-hero-ctas { width: 100%; gap: 10px; }
  .v2-hero-ctas > * { flex: 1 1 auto; justify-content: center; height: 48px; padding: 0 18px; }
  .v2-hero-feat-title { font-size: 14.5px; }
  .v2-hero-feat-sub { font-size: 12.5px; }
}

/* Short landscape phones — the strip would eat the headline. */
@media (max-height: 560px) and (max-width: 900px) {
  .v2-hero-card { min-height: 620px; }
  .v2-hero-features { display: none; }
}

/* ---- bento primitives ---------------------------------------------------- */

.v2-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--v2-gap);
}

.v2-tile {
  position: relative;
  border-radius: var(--v2-r);
  background: var(--v2-tile);
  overflow: hidden;
  isolation: isolate;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--v2-pad);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.v2-tile--paper { background: var(--paper, #fff); border-color: var(--v2-line); }
.v2-tile--ink { background: var(--v2-ink); color: #fff; }

a.v2-tile:hover,
.v2-tile--hover:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(24, 24, 45, 0.4); }

.v2-tile-media,
.v2-tile-media video,
.v2-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.v2-tile--scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.04) 22%, rgba(18, 18, 20, 0.5) 68%, rgba(18, 18, 20, 0.86) 100%);
}
.v2-tile-cap {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.v2-tile--scrim .v2-tile-cap { color: #fff; }
.v2-tile-sub {
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  color: var(--v2-ink-mute);
  margin-top: 6px;
}
.v2-tile--scrim .v2-tile-sub { color: rgba(255, 255, 255, 0.8); }
.v2-tile--ink .v2-tile-sub { color: rgba(255, 255, 255, 0.68); }

/* floating white chip layered on a tile ground */
.v2-chip {
  background: #fff;
  border-radius: var(--v2-r-sm);
  padding: 14px 16px;
  box-shadow: 0 12px 30px -18px rgba(24, 24, 45, 0.34);
}

/* span helpers */
.v2-s2 { grid-column: span 2; }
.v2-s3 { grid-column: span 3; }
.v2-s4 { grid-column: span 4; }
.v2-s6 { grid-column: span 6; }

@media (max-width: 1000px) {
  .v2-bento { grid-template-columns: repeat(4, 1fr); }
  .v2-s2, .v2-s3 { grid-column: span 2; }
  .v2-s4, .v2-s6 { grid-column: span 4; }
}
@media (max-width: 660px) {
  .v2-bento { grid-template-columns: repeat(2, 1fr); }
  .v2-s2, .v2-s3, .v2-s4, .v2-s6 { grid-column: span 2; }
  .v2-tile { min-height: 220px; padding: 20px; }
}

/* ---- the membership section ---------------------------------------------- */
/* One offer, stated once. Copy left, product right. */

.v2-plan {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 900px) {
  .v2-plan { grid-template-columns: 1fr; gap: 30px; }
}

.v2-plan-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.v2-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2-plan h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.025em; }
  .v2-plan-desc {
  font-size: 17px;
  line-height: 1.62;
  color: var(--v2-ink-mute);
  max-width: 46ch;
}
.v2-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  color: var(--v2-ink-soft);
}
.v2-plan-list li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 9999px;
  background: var(--v2-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.7 8.4 9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.v2-plan-visual {
  position: relative;
  border-radius: var(--v2-r);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 8px 0;
  background:
    radial-gradient(85% 70% at 50% 8%, rgba(255, 255, 255, 0.85) 0%, transparent 62%),
    linear-gradient(165deg, #f6f2e8 0%, #efe9dc 52%, #e8e0cf 100%);
}
@media (max-width: 900px) {
  .v2-plan-visual { padding: 30px 12px 0; margin: 0 -6px; }
}

/* Neutral ground under team portraits so a not-yet-supplied photo reads as an
   empty frame rather than a broken image. */
.v2 .co-team-chip-img, .v2 .co-team-photo { background: var(--v2-tile); }

/* Compact cards at every width. The portrait was the loudest thing in the
   section and the bio made the cards tall and uneven; the credibility comes
   from the head-count and the institutions above, so the card is now a face,
   a name and a line. The bio still lives on the in-depth section. */
.v2 .co-team-chip {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.v2 .co-team-chip-img {
  aspect-ratio: 1;
  border-radius: 18px;
  margin-bottom: 14px;
}
.v2 .co-team-chip-name { font-size: 15.5px; letter-spacing: -0.01em; }
.v2 .co-team-chip-cred { font-size: 12.5px; margin-top: 4px; }
.v2 .co-team-chip-text { display: none; }

/* A rail, not a grid. Two rows of large cards made the portraits the loudest
   thing in the section; the point is the head-count and the institutions
   behind it, not six big faces. Compact cards on a full-bleed track that runs
   past both edges, so it always reads as "there are more of us" — the same
   scroll-snap mechanic the mobile slider already used, extended upward. */
@media (min-width: 901px) {
  .v2 .co-team-strip {
    display: flex;
    grid-template-columns: none;
    grid-auto-flow: row;
    gap: 18px;
    overflow-x: auto;
    /* No snap on desktop. Snapping fought the full-bleed padding — the track
       kept resolving its first snap position under the left edge — and a rail
       this size reads better free-scrolling anyway. The mobile slider keeps
       its snap, which is defined separately. */
    scroll-snap-type: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Break out of .co-wrap so cards are clipped by the window, not the
       column, then pad by the same amount so the first card lands exactly on
       the column's left edge. Deriving both from one value keeps them in
       step at any width — hard-coding the padding off --v2-max does not,
       because this strip sits in .co-wrap, which is a different width. */
    --bleed: calc(50vw - 50%);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    /* Snap positions ignore padding unless told otherwise, so without this the
       track silently scrolls the first card back under the left edge. */
    scroll-padding-inline: var(--bleed);
    padding-bottom: 8px;
    overscroll-behavior-x: contain;
  }
  .v2 .co-team-strip::-webkit-scrollbar { display: none; }
  .v2 .co-team-strip > * {
    flex: 0 0 clamp(206px, 17vw, 244px);
    scroll-snap-align: none;
  }

  /* The pagination dots are wired for the mobile slider — the rail needs them
     just as much now that it scrolls on desktop. */
  .v2 .co-team-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
  .v2 .co-team-dots .co-ways-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(20, 20, 35, 0.22);
    cursor: pointer;
    position: relative;
    transition: width 0.25s var(--ease), background 0.25s var(--ease);
  }
  .v2 .co-team-dots .co-ways-dot.is-on { width: 26px; background: var(--v2-ink); }
  /* 8px is not a target; the thing you press is 40px. */
  .v2 .co-team-dots .co-ways-dot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
  }
}

/* ---- testimonials — coverflow -------------------------------------------- */
/* Centre slide is the protagonist; neighbours sit behind at reduced scale and
   opacity, clipped by the viewport edges. Clicking a neighbour promotes it.
   No dark canvas — the section sits on the page ground. */

.v2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v2-cf { margin-top: 8px; }

.v2-cf-stage {
  position: relative;
  height: calc(var(--cf-w) * 0.5625 + 82px);
  --cf-w: min(66vw, 760px);
  overflow: hidden;
}

.v2-cf-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cf-w);
  margin-left: calc(var(--cf-w) / -2);
  transform: translateX(calc(var(--off) * var(--cf-w) * 0.66)) scale(0.82);
  opacity: 0.42;
  z-index: 1;
  transition: transform 0.62s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.7);
  will-change: transform, opacity;
}
.v2-cf-slide.is-centre {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  filter: none;
}

.v2-cf-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--v2-r);
  overflow: hidden;
  background: #17181a;
  box-shadow: 0 30px 60px -34px rgba(24, 24, 45, 0.42);
}
.v2-cf-card video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.v2-cf-empty {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px), #1f2023;
}

.v2-cf-hit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, rgba(12, 12, 14, 0.06) 40%, rgba(12, 12, 14, 0.42) 100%);
  cursor: pointer;
  padding: 0;
}
.v2-cf-hit:focus-visible { outline: 3px solid var(--v2-ink); outline-offset: -3px; }
.v2-cf-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-top: 22px;
  text-align: center;
}
.v2-cf-meta b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--v2-ink);
}
.v2-cf-meta span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2-cf-slide:not(.is-centre) .v2-cf-meta { opacity: 0; }

.v2-cf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.v2-cf-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--v2-control-line);
  background: transparent;
  color: var(--v2-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.v2-cf-arrow:hover { border-color: var(--v2-ink); background: #fff; }
.v2-cf-arrow:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 3px; }
.v2-cf-dots { display: flex; align-items: center; gap: 8px; }
.v2-cf-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #d3d3d8;
  cursor: pointer;
  transition: width 0.32s var(--ease), background 0.32s var(--ease);
}
.v2-cf-dot.is-on { width: 22px; background: var(--v2-ink); }
.v2-cf-dot:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 3px; }
/* A 7px dot is not reachable with a thumb. The visible dot stays 7px; the
   thing you actually press is 44px, centred on it and invisible. */
.v2-cf-dot { position: relative; }
.v2-cf-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.v2-cf-dots { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .v2-cf-stage { --cf-w: 78vw; }
  .v2-cf-slide { transform: translateX(calc(var(--off) * var(--cf-w) * 0.72)) scale(0.86); }
}
@media (max-width: 620px) {
  .v2-cf-stage { --cf-w: 86vw; }
  }

/* ---- how it works -------------------------------------------------------- */

.v2-method-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin: 0 auto 52px;
  max-width: 66ch;
}
.v2-method-head h2 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.025em; }
.v2-method-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--v2-ink-mute);
  max-width: 58ch;
}
.v2-method-head .v2-btn { margin-top: 6px; }

.v2-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.v2-step { display: block; }
.v2-step-in { display: flex; flex-direction: column; height: 100%; }
.v2-step-media {
  display: block;
  border-radius: var(--v2-r);
  overflow: hidden;
  background: var(--v2-tile);
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
}
.v2-step-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.v2-step h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--v2-ink);
  margin: 0 0 8px;
}
.v2-step-n { color: var(--v2-ink-mute); font-weight: 500; margin-right: 4px; }
.v2-step p { font-size: 15px; line-height: 1.6; color: var(--v2-ink-mute); }

@media (max-width: 900px) {
  .v2-steps { grid-template-columns: 1fr; gap: 34px; }
  /* Square, not 16:10 — the reveals are permanently visible on touch and a
     landscape card cannot hold them. */
  .v2-step-media { aspect-ratio: 1 / 1; }
  .v2-method-head { margin-bottom: 38px; }

  .v2-ov--pad { padding: 16px; }
  .v2-ov--pad > .v2-glass { padding: 15px; }
  .v2-glass-title { font-size: 19px; margin: 4px 0 13px; }
  .v2-risk-list { gap: 10px; }
  .v2-risk-label { font-size: 13px; }
  .v2-risk-pill { font-size: 10px; padding: 3px 8px; }

  .v2-proto { gap: 8px; }
  .v2-proto-row { padding: 9px 10px; gap: 9px; }
  .v2-proto-thumb { width: 30px; height: 30px; border-radius: 8px; }
  .v2-proto-copy b { font-size: 12.5px; }
  .v2-proto-copy span { font-size: 11px; }
  .v2-proto-state { width: 17px; height: 17px; }
}

/* Phones: tighter again, and the ring pulls its orbit in so no thumbnail is
   clipped by the card edge. */
@media (max-width: 620px) {
  .v2-ov--pad { padding: 13px; }
  .v2-ov--pad > .v2-glass { padding: 13px; }
  .v2-glass-kicker { font-size: 11px; }
  .v2-glass-title { font-size: 17px; margin: 3px 0 11px; }
  .v2-risk-list { gap: 8px; }
  .v2-risk-label { font-size: 12px; }
  .v2-risk-pill { font-size: 9.5px; padding: 3px 7px; }
  .v2-proto { gap: 6px; }
  .v2-proto-row { padding: 8px 9px; }
  .v2-proto-thumb { width: 27px; height: 27px; }
  .v2-proto-copy b { font-size: 12px; }
  .v2-proto-copy span { font-size: 10.5px; }
}

/* ---- step hover reveals -------------------------------------------------- */
/* The photo blurs back and a real product surface rises over it. On touch
   there is no hover, so the reveal is simply always on. */

.v2-step-media { position: relative; isolation: isolate; }
.v2-step-media img {
  transition: filter 0.5s var(--ease), transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.v2-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s var(--ease), transform 0.55s var(--ease);
}
.v2-ov--pad { padding: 18px; }

@media (hover: hover) and (pointer: fine) {
  .v2-step:hover .v2-step-media img { filter: blur(16px) brightness(0.62) saturate(1.1); transform: scale(1.12); }
  .v2-step:hover .v2-ov { opacity: 1; transform: translateY(0); }
}
/* Touch: the photo shows first and the surface rises on tap, matching the
   pointer behaviour rather than being permanently open. */
@media (hover: none) {
  .v2-step.is-open .v2-step-media img { filter: blur(16px) brightness(0.62) saturate(1.1); transform: scale(1.12); }
  .v2-step.is-open .v2-ov { opacity: 1; transform: translateY(0); }
  .v2-step { cursor: pointer; }
  .v2-step-media::after {
    content: 'Toca para ver';
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20, 20, 24, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 6px 12px;
    transition: opacity 0.3s var(--ease);
  }
  .v2-step.is-open .v2-step-media::after { opacity: 0; }
}

/* --- step 1: the biomarker ring --- */
.v2-ov--ring::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 60% at 30% 22%, rgba(150, 92, 220, 0.85) 0%, transparent 62%),
    radial-gradient(90% 70% at 74% 82%, rgba(56, 78, 226, 0.9) 0%, transparent 66%),
    linear-gradient(160deg, #2b1b56 0%, #241a5c 50%, #14123a 100%);
}
.v2-ring { position: relative; width: 100%; aspect-ratio: 1; max-width: 300px; }
.v2-ring-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  margin: -13.5px 0 0 -13.5px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  transform: rotate(calc(var(--i) * 25.7deg)) translateY(-132px) rotate(calc(var(--i) * -25.7deg));
}
.v2-ring-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.v2-ring-mid b {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}
.v2-ring-mid span { font-size: 13px; margin-top: 7px; }
.v2-ring-mid em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, 0.62); margin-top: 2px; }

/* --- frosted panels used by steps 2 and 3 --- */
.v2-glass {
  background: rgba(28, 24, 22, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: #fff;
}
.v2-ov--pad > .v2-glass { width: 100%; padding: 16px; }
.v2-glass-kicker { font-size: 11.5px; color: rgba(255, 255, 255, 0.66); }
.v2-glass-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 5px 0 14px;
}
.v2-risk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.v2-risk-list li { display: flex; align-items: center; gap: 9px; }
.v2-risk-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.v2-risk-label { flex: 1; font-size: 13px; }
.v2-risk-pill {
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.v2-risk-pill.is-high { background: rgba(255, 255, 255, 0.9); color: #1d1d1f; font-weight: 600; }

/* --- step 3: the protocol checklist --- */
.v2-proto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; width: 100%; }
.v2-proto-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; }
.v2-proto-thumb {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  flex: none;
}
.v2-proto-copy { flex: 1; min-width: 0; }
.v2-proto-copy b { display: block; font-size: 13px; font-weight: 600; }
.v2-proto-copy span {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-proto-state {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.6px dashed rgba(255, 255, 255, 0.4);
  color: transparent;
}
.v2-proto-state.is-done { background: #34d399; border: 0; color: #06301f; }

@media (max-width: 900px) {
  .v2-ring { max-width: 260px; }
  .v2-ring-item {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    transform: rotate(calc(var(--i) * 25.7deg)) translateY(-114px) rotate(calc(var(--i) * -25.7deg));
  }
  .v2-ring-mid b { font-size: 40px; }
  .v2-ring-mid span { font-size: 12.5px; }
  .v2-ring-mid em { font-size: 11px; }
}
@media (max-width: 620px) {
  .v2-ring { max-width: 216px; }
  .v2-ring-item {
    width: 21px;
    height: 21px;
    margin: -10.5px 0 0 -10.5px;
    transform: rotate(calc(var(--i) * 25.7deg)) translateY(-95px) rotate(calc(var(--i) * -25.7deg));
  }
  .v2-ring-mid b { font-size: 34px; }
}

/* ---- membership tiers ---------------------------------------------------- */

.v2-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 860px) { .v2-tiers { grid-template-columns: 1fr; } }

/* Each tier leads with its own footage rather than a placeholder swatch. */
.v2-tier-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--v2-tile);
}
.v2-tier-media video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.v2-tier--dark .v2-tier-media { background: #26262a; }

.v2-tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px clamp(22px, 3vw, 40px) 28px;
  border-radius: 26px;
  background: var(--paper, #fff);
  border: 1px solid var(--v2-line);
  text-align: center;
}
.v2-tier--dark {
  background: var(--v2-ink);
  border-color: var(--v2-ink);
  color: #fff;
}


.v2-tier h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.02em; }
.v2-tier--dark h3 { color: #fff; }
.v2-tier-tag {
  font-size: 15px;
  color: var(--v2-ink-mute);
  margin-top: 8px;
  max-width: 34ch;
  margin-inline: auto;
}
.v2-tier--dark .v2-tier-tag { color: rgba(255, 255, 255, 0.66); }

.v2-tier-cta {
  width: 100%;
  margin: 24px 0 28px;
  background: var(--v2-ink);
  color: #fff;
}
.v2-tier-cta:hover { background: #000; }
.v2-tier--dark .v2-tier-cta { background: #f1f1f4; color: var(--v2-ink); }
.v2-tier--dark .v2-tier-cta:hover { background: #fff; }

.v2-tier-listhead {
  text-align: left;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--v2-ink);
  margin-bottom: 16px;
}
.v2-tier--dark .v2-tier-listhead { color: #fff; }

.v2-tier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; text-align: left; }
.v2-tier-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
.v2-tier--dark .v2-tier-list li { color: rgba(255, 255, 255, 0.82); }
.v2-tier-list li::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: currentColor;
  color: var(--v2-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 9 18 20.5 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 9 18 20.5 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.v2-tier--dark .v2-tier-list li::before { color: #fff; }

.v2-tier-compare {
  margin-top: auto;
  padding-top: 26px;
  text-align: left;
  font-size: 14.5px;
  color: var(--v2-ink-mute);
  text-decoration: none;
  border-top: 1px solid var(--v2-line);
  margin-inline: 0; display: block; margin-top: 28px;
}
.v2-tier--dark .v2-tier-compare { color: rgba(255, 255, 255, 0.6); border-top-color: rgba(255, 255, 255, 0.14); }
.v2-tier-compare:hover { color: var(--v2-ink); }
.v2-tier--dark .v2-tier-compare:hover { color: #fff; }

/* ---- signals CTA --------------------------------------------------------- */

.v2-signals-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.v2-signals-cta p { font-size: 14.5px; color: var(--v2-ink-mute); }

/* ---- app bento ----------------------------------------------------------- */

.v2-app-tile { min-height: 330px; justify-content: space-between; }
.v2-app-visual { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }

.v2-bioage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
}
.v2-bioage-n { font-family: var(--serif); font-size: 74px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.v2-bioage-l { font-size: 13.5px; color: rgba(255, 255, 255, 0.86); margin-top: 8px; }
.v2-bioage-s { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }

.v2-metric { display: flex; align-items: baseline; gap: 7px; }
.v2-metric b { font-family: var(--serif); font-size: 52px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.v2-metric span { font-size: 14px; color: var(--v2-ink-mute); }

.v2-dots { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 16px; }
.v2-dot-row { display: flex; align-items: center; gap: 8px; }
.v2-dot-key { width: 4px; height: 15px; border-radius: 2px; flex: none; }
.v2-dot-track { display: flex; gap: 5px; flex: 1; flex-wrap: nowrap; overflow: hidden; }
.v2-dot { width: 4px; height: 4px; border-radius: 9999px; background: #d6d6da; flex: none; }
.v2-dot.on { background: var(--v2-ink); }

.v2-list-chip { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.v2-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 10px 26px -20px rgba(24, 24, 45, 0.4);
}
.v2-row-icn { width: 34px; height: 34px; border-radius: 9px; flex: none; background-size: cover; background-position: center; }
.v2-row-t { font-size: 13.5px; font-weight: 650; line-height: 1.2; }
.v2-row-s { font-size: 12px; color: var(--v2-ink-mute); margin-top: 2px; }

.v2-ask {
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  box-shadow: 0 14px 34px -22px rgba(24, 24, 45, 0.42);
  width: 100%;
}
.v2-ask p { font-size: 14.5px; line-height: 1.4; color: var(--v2-ink); }
.v2-ask-send {
  width: 36px; height: 36px; border-radius: 9999px; flex: none;
  background: var(--v2-ink);
  display: grid; place-items: center;
  color: #fff; font-size: 15px;
}

/* ---- app bento tiles — the real dashboard's surfaces ---------------------- */

.v2-ab { min-height: 330px; justify-content: space-between; }
.v2-ab--photo { justify-content: center; align-items: stretch; }
/* these tiles carry their own photo but not the shared scrim class, so their
   captions need the light treatment explicitly */
.v2-ab--photo .v2-tile-cap { color: #fff; position: relative; }
.v2-ab--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 46%, rgba(12, 12, 16, 0.72) 100%);
}
.v2-ab-wash { position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; }
.v2-ab-fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 30, 24, 0.86) 0%, rgba(6, 30, 24, 0.2) 48%, transparent 100%);
}
.v2-ab-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; }

.v2-ab-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2-ab-kicker--light { color: rgba(255, 255, 255, 0.8); }

/* biological age — white card floating on the photo, as in the app */
.v2-ab-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: auto 0;
  color: var(--v2-ink);
}
.v2-ab-age {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: 6px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e9e9ee;
}
.v2-ab-age span { font-family: var(--sans); font-size: 13px; color: var(--v2-ink-mute); letter-spacing: 0; }
.v2-ab-delta { font-size: 12.5px; margin-top: 11px; }
.v2-ab-delta b { font-weight: 650; }
.v2-ab-delta span { color: var(--v2-ink-mute); }

/* humanolab score */
.v2-ab-score { position: relative; margin-top: auto; }
.v2-ab-scoren { display: flex; align-items: flex-end; gap: 4px; color: #fff; margin-top: 4px; }
.v2-ab-scoren b {
  font-family: var(--v2-appface);
  font-size: 66px;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.035em;
}
.v2-ab-scoren > span { font-size: 16px; color: rgba(255, 255, 255, 0.55); margin-bottom: 5px; margin-left: 3px; letter-spacing: 0; }

/* biomarker status tiles */
.v2-ab-h2 {
  font-family: var(--v2-appface);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
.v2-ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v2-ab-stat {
  background: var(--v2-tile);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  padding: 12px 10px;
}
.v2-ab-stat b {
  display: block;
  font-family: var(--v2-appface);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v2-ab-stat i { display: block; height: 3px; width: 26px; border-radius: 999px; margin: 9px 0; }
.v2-ab-stat > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--v2-ink); }
.v2-ab-stat em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--v2-ink-mute);
  margin-top: 2px;
}
.v2-ab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--v2-ink-mute);
  margin-top: 14px;
}
.v2-ab-link span { color: #5b62d6; }

/* ask AI */
.v2-ab-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  padding: 12px 13px;
}
.v2-ab-star, .v2-ab-send {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
}
.v2-ab-star { background: #f0ee82; color: var(--v2-ink); }
.v2-ab-send { background: var(--v2-ink); color: #fff; }
.v2-ab-askt { flex: 1; font-size: 13.5px; color: var(--v2-ink-mute); }
.v2-ab-quote {
  font-family: var(--v2-appface);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--v2-ink-soft);
}

/* wearables */
.v2-ab-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 0;
  padding-bottom: 18px;
}
.v2-ab-chip {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: 0 12px 30px -20px rgba(24, 24, 45, 0.5);
}
.v2-ab-chip > span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2-ab-chip b {
  display: block;
  font-family: var(--v2-appface);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-top: 3px;
  color: var(--v2-ink);
}
.v2-ab-chip b i { font-style: normal; font-family: var(--sans); font-size: 12.5px; color: var(--v2-ink-mute); }

@media (max-width: 660px) {
  .v2-ab-stats { gap: 6px; }
  .v2-ab-stat { padding: 10px 8px; }
  .v2-ab-stat b { font-size: 24px; }
}

/* ---- stats --------------------------------------------------------------- */

.v2-stat { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 200px; }
.v2-stat b {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.v2-stat p { font-size: 14.5px; line-height: 1.5; color: var(--v2-ink-mute); max-width: 28ch; }

/* Placeholder state — reads as "waiting on data", not as a broken tile.
   Swap in the real figure and drop .v2-stat--ph to make it live. */
.v2-stat--ph { border-style: dashed; border-color: #d9d9de; background: transparent; }
.v2-stat--ph b { color: var(--v2-ink); opacity: 0.16; }
.v2-stat-slot {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-gold);
  background: var(--v2-accent);
  padding: 5px 10px;
  border-radius: 9999px;
  margin-bottom: 4px;
}

/* ---- ceiling banner (50 → 107) ------------------------------------------- */

.v2-ceiling { min-height: 220px; justify-content: center; }
.v2-ceiling-in {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.v2-ceiling-nums {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}
.v2-ceiling-from, .v2-ceiling-to {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v2-ceiling-from { font-size: clamp(26px, 2.6vw, 34px); color: rgba(255, 255, 255, 0.5); }
.v2-ceiling-to { font-size: clamp(60px, 7.4vw, 96px); color: #fff; }
.v2-ceiling-arrow {
  width: 54px;
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
  position: relative;
  flex: none;
}
.v2-ceiling-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  border-right: 1px solid rgba(255, 255, 255, 0.34);
  transform: rotate(45deg);
}
.v2-ceiling-copy { max-width: 48ch; }
.v2-ceiling-copy .v2-tile-sub { color: rgba(255, 255, 255, 0.66); }
@media (max-width: 660px) {
  .v2-ceiling-in { gap: 20px; }
  .v2-ceiling-arrow { width: 30px; }
}

/* ---- closing ------------------------------------------------------------- */

.v2-close {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 32px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.v2-close-media, .v2-close-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -2;
}
.v2-close::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,16,18,0.62), rgba(16,16,18,0.78));
}
.v2-close h2 { color: #fff; max-width: 18ch; }
.v2-close p { font-size: 17px; color: rgba(255, 255, 255, 0.82); max-width: 46ch; line-height: 1.55; }
.v2-close-alt { font-size: 14.5px; color: rgba(255, 255, 255, 0.7); }
.v2-close-alt a { color: #fff; text-underline-offset: 3px; }

/* ---- footer -------------------------------------------------------------- */

.v2-footer { background: var(--v2-ink); color: #fff; padding: 72px 0 34px; margin-top: 0; }
.v2-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px 26px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) { .v2-foot-grid { grid-template-columns: 1fr 1fr; } }
.v2-foot-col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 14px;
  font-weight: 600;
}
.v2-foot-col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14.5px;
  padding: 2px 0;
}
.v2-foot-col a:hover { color: #fff; }
.v2-foot-brand img { height: 24px; width: auto; }
.v2-foot-brand p { font-size: 14.5px; color: rgba(255, 255, 255, 0.62); line-height: 1.55; margin-top: 16px; max-width: 30ch; }
.v2-foot-bottom {
  /* was rgba(255,255,255,0.5) — 3.9:1, under the 4.5:1 minimum */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- sticky mobile CTA --------------------------------------------------- */

.v2-sticky {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 9999px;
  background: rgba(29, 29, 31, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
  transform: translateY(140%);
  transition: transform 0.4s var(--ease);
}
.v2-sticky.is-on { transform: translateY(0); }
.v2-sticky-price { color: #fff; font-size: 14.5px; font-weight: 600; }
.v2-sticky-price span { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.v2-sticky .v2-btn { height: 42px; padding: 0 20px; font-size: 14.5px; }
@media (max-width: 760px) { .v2-sticky { display: flex; } }

/* ---- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .v2-sys-tile:hover video, .v2-sys-tile:hover img { transform: none; }
}

/* ---- navbar over a light hero -------------------------------------------- */
/* The bare state is white-on-transparent, which vanishes on a light page.
   Pages with a light hero pass navTone="light"; once contracted the pill is
   dark again and the normal rules take back over. */

.v2-header--light:not(.is-stuck) .v2-nav-links a,
.v2-header--light:not(.is-stuck) .v2-nav-login { color: var(--v2-ink-soft); }
.v2-header--light:not(.is-stuck) .v2-nav-links a:hover,
.v2-header--light:not(.is-stuck) .v2-nav-login:hover { color: var(--v2-ink); }
.v2-header--light:not(.is-stuck) .v2-nav-pill {
  color: var(--v2-ink);
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--v2-line);
  backdrop-filter: blur(10px);
}
.v2-header--light:not(.is-stuck) .v2-nav-pill:hover {
  background: #fff;
  border-color: var(--v2-line-strong, #d6d6dc);
}
.v2-header--light:not(.is-stuck) .v2-nav-cta { background: var(--v2-ink); color: #fff; }
.v2-header--light:not(.is-stuck) .v2-burger { border: 1px solid var(--v2-line); }

/* Navbar mounted outside the v2 shell (ads-layer pages). The wrapper supplies
   the tokens but paints nothing, and reserves the bar's height so those
   layouts keep their original flow. */
.v2-navonly { background: transparent; height: 96px; }
/* Over a dark hero the bar overlays instead of reserving space. */
.v2-navonly--overlay { height: 0; }
@media (max-width: 620px) { .v2-navonly { height: 76px; } .v2-navonly--overlay { height: 0; } }

/* The country picker's title was set for a marketing headline, not a dialog. */
.co-modal-title {
  font-size: clamp(21px, 2.4vw, 27px) !important;
  letter-spacing: -0.015em;
  margin-bottom: 34px !important;
}

/* ---- app bento: the product's own surfaces ------------------------------- */
/* Warm ground so the white product cards read as the app's cards do, rather
   than dissolving into the page. */

.v2-appsec { background: linear-gradient(180deg, #f6f4ef 0%, #efece3 100%); }
.v2-appsec .v2-tile--paper {
  background: #fff;
  border-color: rgba(20, 20, 35, 0.07);
  box-shadow: 0 18px 44px -34px rgba(24, 24, 45, 0.32);
}

.v2-gauge { position: relative; margin-top: 10px; }
.v2-gauge svg { width: 100%; height: auto; display: block; }
.v2-gauge-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
}
.v2-gauge-in b {
  font-family: var(--v2-appface);
  font-size: clamp(54px, 8vw, 76px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--v2-ink);
}
.v2-gauge-in > span { font-size: 12px; color: var(--v2-ink-mute); margin-top: 7px; }

.v2-gauge-delta {
  text-align: center;
  font-size: 13px;
  color: var(--v2-ink-mute);
  margin-top: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--v2-line);
}
.v2-gauge-delta b { color: #1fc26a; font-weight: 650; }

.v2-gauge-dims { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-gauge-dims li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--v2-ink-soft);
}
.v2-gauge-dims i {
  flex: none;
  width: 62px;
  height: 6px;
  border-radius: 999px;
  background: #ececf0;
  overflow: hidden;
  display: block;
}
.v2-gauge-dims em { display: block; height: 100%; border-radius: 999px; }

@media (max-width: 660px) {
  .v2-gauge-dims li { font-size: 12.5px; }
  .v2-gauge-dims i { width: 52px; }
}

/* The report card carries more rows than the others, so its body stacks from
   the top and the caption gets its own clearance instead of colliding. */
.v2-ab--report { min-height: 430px; }
.v2-ab--report .v2-ab-body { justify-content: flex-start; gap: 0; }
.v2-ab--report .v2-tile-cap { margin-top: 18px; }

/* ---- chat card ----------------------------------------------------------- */

.v2-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.v2-bubble {
  max-width: 92%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.v2-bubble.is-in { opacity: 1; transform: none; }
.v2-bubble--me {
  align-self: flex-end;
  background: var(--v2-ink);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.v2-bubble--ai {
  align-self: flex-start;
  background: var(--v2-tile);
  color: var(--v2-ink-soft);
  border-bottom-left-radius: 6px;
}
/* Shares one box with the reply bubble so the typing state costs no height. */
.v2-reply { position: relative; display: block; align-self: flex-start; width: 100%; }
.v2-reply .v2-bubble--ai { max-width: 92%; }
.v2-reply .v2-typing { position: absolute; top: 0; left: 0; z-index: 2; }

.v2-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  opacity: 1;
  transform: none;
  padding: 14px 16px;
  max-width: none;
}
.v2-typing i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--v2-ink-mute);
  animation: v2-blink 1.1s infinite;
}
.v2-typing i:nth-child(2) { animation-delay: 0.18s; }
.v2-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes v2-blink {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-bubble { opacity: 1; transform: none; transition: none; }
  .v2-typing i { animation: none; }
}

/* ---- wearables ----------------------------------------------------------- */

/* Each metric gets its own box, matching the app's card language. */
.v2-ab--wear { justify-content: space-between; }
.v2-wear {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  flex: 1;
  align-content: stretch;
}
@media (max-width: 900px) { .v2-wear { grid-template-columns: repeat(2, 1fr); } }
.v2-wear-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--v2-tile);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  padding: 16px 15px;
  color: var(--v2-ink);
}
.v2-wear-item > .v2-wear-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
.v2-wear-v {
  font-family: var(--v2-appface);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.v2-wear-v i { font-style: normal; font-family: var(--sans); font-size: 12px; color: var(--v2-ink-mute); letter-spacing: 0; margin-left: 5px; }
.v2-wear-spark { width: 100%; height: 26px; color: rgba(29, 29, 31, 0.28); display: block; margin-top: auto; }

/* marker rows under the status tiles */
.v2-mrows { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.v2-mrows li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-line);
  font-size: 13.5px;
}
.v2-mrows li:first-child { border-top: 0; }
.v2-mrows i { width: 4px; height: 20px; border-radius: 2px; flex: none; }
.v2-mrows span { flex: 1; color: var(--v2-ink-soft); }
.v2-mrows b { font-weight: 600; color: var(--v2-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-mrows em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--v2-ink-mute); }

/* ---- legacy pages adopted into the v2 language --------------------------- */
/* `.v2-legacy` wraps a page built with `co-` classes so it inherits the
   redesign's type rules without rewriting its markup. */

.v2-legacy { background: var(--v2-ground); }
.v2-legacy .co-hero-h1 { font-weight: 400; letter-spacing: -0.025em; }
/* no yellow, no italic — the emphasis carries on its own */
.v2-legacy .co-hero-h1 em { font-style: normal; font-weight: 400; color: #fff; }
.v2 .co-eyebrow--onphoto {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- trend card ---------------------------------------------------------- */

.v2-trend { justify-content: flex-start; gap: 0; }
.v2-trend-head { display: flex; flex-direction: column; gap: 8px; }
.v2-trend-head b {
  font-family: var(--v2-appface);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--v2-ink);
}
.v2-trend-head b i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--v2-ink-mute);
  letter-spacing: 0;
  margin-left: 7px;
}
.v2-trend-plot { position: relative; flex: 1; min-height: 168px; margin: 44px 0 4px; }
.v2-trend-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.v2-trend-tag {
  position: absolute;
  transform: translate(-50%, calc(-100% - 11px));
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-ink-soft);
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  padding: 4px 9px;
  box-shadow: 0 6px 16px -10px rgba(24, 24, 45, 0.35);
}
.v2-trend-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-ink-mute);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--v2-line);
}
.v2-trend .v2-tile-cap { margin-top: 14px; }
@media (max-width: 660px) { .v2-trend-plot { min-height: 150px; } }

/* The bar overlays this hero, so its centred content needs clearance. */
.v2-legacy .co-hero-inner { padding-top: clamp(128px, 16vh, 178px); }
.v2-legacy .co-hero-inner .co-eyebrow { margin-bottom: clamp(20px, 3vh, 32px); }
.v2-legacy .co-hero-h1 { line-height: 1.08; }

/* Captions sitting directly under a numeral or a row of boxes need their own
   clearance — the tile's own padding isn't enough at these sizes. */
.v2-ab--photo .v2-tile-cap,
.v2-ab--wear .v2-tile-cap { margin-top: 18px; }
.v2-ab--wear .v2-wear { margin-bottom: 4px; }

/* Newsletter: the field sits under the heading on a phone and should share its
   left edge rather than centring on its own. */
/* The newsletter field shares the heading's left edge rather than drifting to
   the opposite side of the grid. */
.v2 .co-news { justify-items: start; grid-template-columns: 1fr; gap: 22px; }
.v2 .co-news-form { justify-self: start; }
@media (max-width: 900px) { .v2 .co-news-form { width: 100%; } }

/* ---------------------------------------------------------------------------
   Motion
   Reveal was a no-op site-wide (.co-reveal { opacity: 1 }), so nothing ever
   animated in. Scoped to .v2 so it is a deliberate change to the redesign
   rather than a silent one across the legacy pages.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .v2 .co-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.85s var(--ease), transform 1.05s var(--ease);
    /* Safety net: if hydration never runs, content still appears. */
    animation: v2-reveal-fallback 0.01s linear 2.6s forwards;
  }
  .v2 .co-reveal.in {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }
  /* Only promote what is still moving. */
  .v2 .co-reveal:not(.in) { will-change: opacity, transform; }
  @keyframes v2-reveal-fallback {
    to { opacity: 1; transform: none; }
  }

  /* Bars grow from their left edge once their card is in view. */
  .v2 .v2-gauge-dims em,
  .v2 .mb-age-dims i > em {
    width: 0 !important;
    transition: width 1.25s var(--ease) 0.35s;
  }
  .v2 .co-reveal.in .v2-gauge-dims em,
  .v2 .co-reveal.in .mb-age-dims i > em {
    width: var(--w, 0%) !important;
  }

  /* The gauge sweeps round instead of appearing filled. */
  .v2 .v2-gauge svg path:last-child,
  .v2 .mb-age-dial svg path:last-child {
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.6s var(--ease) 0.25s;
  }
  .v2 .co-reveal.in .v2-gauge svg path:last-child,
  .v2 .co-reveal.in .mb-age-dial svg path:last-child {
    stroke-dashoffset: 22; /* 100 − 78, the filled portion */
  }

  /* The trend line is uncovered left to right by its clip rect. */
  .v2 .v2-trend-wipe {
    transform-box: view-box;
    transform-origin: -4px 0;
    transform: scaleX(0);
    transition: transform 1.9s var(--ease) 0.2s;
  }
  .v2 .co-reveal.in .v2-trend-wipe { transform: scaleX(1); }
  .v2 .v2-trend-plot circle,
  .v2 .v2-trend-tag {
    opacity: 0;
    transition: opacity 0.5s var(--ease);
  }
  .v2 .co-reveal.in .v2-trend-plot circle { opacity: 1; transition-delay: 1.25s; }
  .v2 .co-reveal.in .v2-trend-tag { opacity: 1; transition-delay: 1.5s; }
}

/* A counting numeral inherits everything from the element it sits in. Needed
   because several captions are targeted as `.some-block span`, which would
   otherwise capture it. */
.v2 .v2-num {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
  display: inline;
  font-variant-numeric: tabular-nums;
}

/* Sound chip on the centre card — the only affordance left, since clicking
   anywhere on the card already starts it with audio. */
/* Let the browser own vertical scrolling; we only claim the horizontal axis. */
.v2-cf-stage { touch-action: pan-y; }

.v2-cf-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  transition: color 0.25s var(--ease), opacity 0.35s var(--ease);
}
.v2-cf-sound.is-on { color: rgba(255, 255, 255, 0.92); }
.v2-cf-sound em { font-style: normal; font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.v2-cf-sound svg { display: block; flex: none; }
@media (max-width: 620px) {
  .v2-cf-sound { right: 10px; bottom: 10px; padding: 6px 10px; }
  .v2-cf-sound em { display: none; }
}

/* iOS paints its own start-playback button over any video it has decided will
   not autoplay, and it survives every autoplay fix because it is chrome, not
   content. Nothing without a `controls` attribute is meant to be operated
   directly, so the affordance is always wrong there. */
video:not([controls])::-webkit-media-controls,
video:not([controls])::-webkit-media-controls-start-playback-button,
video:not([controls])::-webkit-media-controls-overlay-play-button,
video:not([controls])::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

/* The wearable readouts land one at a time after the tile itself has settled,
   so the densest card in the bento does not arrive as a wall of numbers. */
@media (prefers-reduced-motion: no-preference) {
  .v2 .v2-wear-item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  }
  .v2 .co-reveal.in .v2-wear-item { opacity: 1; transform: none; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(1) { transition-delay: 0.25s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(2) { transition-delay: 0.4s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(3) { transition-delay: 0.55s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(4) { transition-delay: 0.7s; }

  /* Each sparkline traces itself. These are polylines in a uniformly scaled
     box, so a dash offset is safe here — unlike the stretched trend plot. */
  .v2 .v2-wear-spark polyline {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 1.4s var(--ease);
  }
  .v2 .co-reveal.in .v2-wear-spark polyline { stroke-dashoffset: 0; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(1) .v2-wear-spark polyline { transition-delay: 0.5s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(2) .v2-wear-spark polyline { transition-delay: 0.65s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(3) .v2-wear-spark polyline { transition-delay: 0.8s; }
  .v2 .co-reveal.in .v2-wear-item:nth-child(4) .v2-wear-spark polyline { transition-delay: 0.95s; }
}

/* Below the tablet breakpoint every section head centres, pill included — a
   left-hugging label above a headline that fills the column reads as a
   mistake at phone width. Heroes are deliberately excluded: they carry their
   own composition. */
@media (max-width: 760px) {
  .v2 .v2-sec-head {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .v2 .v2-sec-head .v2-eyebrow,
  .v2 .v2-sec-head .co-eyebrow { align-self: center; }
  .v2 .v2-sec-head p { margin-left: auto; margin-right: auto; }
}

/* Below the desktop breakpoint the strip is already a snap slider; it just
   needed narrower cards, so the next face is always visibly waiting. */
@media (max-width: 900px) {
  .v2 .co-team-strip > * { flex: 0 0 min(46vw, 210px); }
  .v2 .co-team-chip-img { border-radius: 14px; margin-bottom: 11px; }
  .v2 .co-team-chip-name { font-size: 14.5px; }
  .v2 .co-team-chip-cred { font-size: 12px; }
}

/* ---- comparison table ---------------------------------------------------- */
/* Two models of care side by side. Geometry carried over from the bp- version;
   every colour comes from the v2 tokens instead of the legacy cream palette. */

.v2 .v2-cmp {
  border: 1px solid var(--v2-line);
  border-radius: 20px;
  background: var(--card, #fff);
  overflow: hidden;
}
.v2 .v2-cmp-row {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 1fr;
  align-items: stretch;
}
.v2 .v2-cmp-row + .v2-cmp-row { border-top: 1px solid var(--v2-line); }
.v2 .v2-cmp-need {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2 .v2-cmp-them {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--v2-ink-mute);
}
.v2 .v2-cmp-us {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #fff;
  background: var(--v2-ink);
}
.v2 .v2-cmp-head .v2-cmp-us { border-radius: 16px 16px 0 0; }
.v2 .v2-cmp-row:last-child .v2-cmp-us { border-radius: 0 0 16px 16px; }
.v2 .v2-cmp-head { font-weight: 600; }
.v2 .v2-cmp-us-h {
  justify-content: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
}
.v2 .v2-cmp-them-h { color: var(--v2-ink); font-weight: 600; }
.v2 .v2-cmp-tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--v2-accent);
  color: var(--v2-ink);
  display: grid;
  place-items: center;
}
.v2 .v2-cmp-note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--v2-ink-mute);
  max-width: 68ch;
}

/* On a phone the three columns become one block per row: the need as a
   heading, then the two answers stacked and labelled. */
@media (max-width: 760px) {
  .v2 .v2-cmp-row { grid-template-columns: 1fr; }
  .v2 .v2-cmp-head { display: none; }
  .v2 .v2-cmp-need { padding: 18px 18px 8px; font-size: 15.5px; }
  .v2 .v2-cmp-us,
  .v2 .v2-cmp-them { padding: 12px 18px; align-items: flex-start; }
  .v2 .v2-cmp-us { margin: 0 12px; border-radius: 14px; }
  /* The label sits above the text as its own line — inline it wrapped into a
     ragged two-line prefix that read like a stray column. */
  .v2 .v2-cmp-them {
    flex-direction: column;
    gap: 3px;
    padding-bottom: 18px;
  }
  .v2 .v2-cmp-them::before {
    content: 'El sistema tradicional';
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    opacity: 0.8;
  }
}

/* ---- systems orbit ------------------------------------------------------- */
/* Geometry carried over verbatim from the legacy version — every tile size and
   offset derives from --ts, so the arch is responsive from one value. The
   brown gradient it used to sit on has no equivalent here; the ground is the
   same ink the closing CTA and the dark tiles use. */

.v2 .v2-orbit {
  position: relative;
  border-radius: clamp(20px, 3vw, 28px);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% -10%, #26272E 0%, var(--v2-ink) 55%, #101114 100%);
  padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 40px);
}
.v2 .v2-orbit-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(60% 45% at 22% 18%, rgba(250, 246, 207, 0.16) 0%, transparent 60%),
    radial-gradient(55% 40% at 84% 78%, rgba(126, 166, 245, 0.14) 0%, transparent 58%);
}
.v2 .v2-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; pointer-events: none; }

.v2 .v2-orbit-body {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v2 .v2-orbit-kicker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.v2 .v2-orbit-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 54px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 10px 0 0;
}
.v2 .v2-orbit-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.6;
  max-width: 58ch;
  margin: 14px auto 0;
}

.v2 .v2-orb-tiles {
  position: relative;
  --ts: clamp(58px, 13vw, 96px);
  width: min(560px, 100%);
  height: calc(var(--ts) * 2.55);
  margin: clamp(26px, 5vh, 52px) auto clamp(18px, 3vh, 30px);
}
.v2 .v2-orb-tile {
  position: absolute;
  top: calc(var(--ts) * var(--m));
  width: calc(var(--ts) * var(--k));
  height: calc(var(--ts) * var(--k));
  border-radius: 30%;
  overflow: hidden;
  transform: translateX(-50%) rotate(var(--rot));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55), 0 4px 12px -6px rgba(0, 0, 0, 0.4);
}
.v2 .v2-orb-tile-img { -o-object-fit: cover; object-fit: cover; }
.v2 .v2-orb-tile--btn {
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  opacity: 0.68;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease), border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.v2 .v2-orb-tile--btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.3));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.v2 .v2-orb-tile--btn:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%) rotate(var(--rot)) translateY(-6px) scale(1.04);
}
.v2 .v2-orb-tile--btn.is-on {
  opacity: 1;
  z-index: 3;
  border-color: #fff;
  transform: translateX(-50%) rotate(0deg) scale(1.24);
  box-shadow: 0 28px 64px -18px rgba(0, 0, 0, 0.62), 0 0 0 4px rgba(250, 246, 207, 0.22);
}
.v2 .v2-orb-tile--btn.is-on::after { opacity: 1; }
.v2 .v2-orb-tile--btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2 .v2-orb-tile--deco { pointer-events: none; opacity: 0.45; filter: saturate(0.95); }
@media (prefers-reduced-motion: reduce) {
  .v2 .v2-orb-tile--btn,
  .v2 .v2-orb-tile--btn:hover,
  .v2 .v2-orb-tile--btn.is-on { transition: opacity 0.2s, border-color 0.2s; }
}

.v2 .v2-orbit-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(26px, 4vh, 40px);
}
.v2 .v2-orbit-nav > button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.v2 .v2-orbit-nav > button:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.55); }
.v2 .v2-orbit-dots { display: flex; align-items: center; gap: 8px; }
.v2 .v2-orbit-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.v2 .v2-orbit-dot.is-on { width: 22px; background: #fff; }
/* 7px is not a target; the thing you press is 40px. */
.v2 .v2-orbit-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}
@media (max-width: 620px) {
  .v2 .v2-orbit-text { font-size: 15px; }
  .v2 .v2-orbit-nav { gap: 12px; }
}

/* ---- footer: the bits the original v2 sheet never had -------------------- */

.v2-foot-news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-bottom: 54px;
  margin-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.v2-foot-news h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
  max-width: 18ch;
}
@media (max-width: 860px) {
  .v2-foot-news { grid-template-columns: 1fr; padding-bottom: 40px; margin-bottom: 36px; }
}

.v2-foot-social { display: flex; gap: 10px; margin-top: 22px; }
.v2-foot-social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.v2-foot-social a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.v2-foot-legal {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  max-width: 96ch;
  margin: 34px 0 0;
}
.v2-foot-legallinks { display: flex; flex-wrap: wrap; gap: 18px; }
.v2-foot-legallinks a { color: inherit; text-decoration: none; }
.v2-foot-legallinks a:hover { color: #fff; }

/* The newsletter form is a legacy component; give its controls the v2 ground
   rather than the cream one it was built against. */
.v2-footer .co-news-form { max-width: 460px; }
.v2-footer .co-news-form input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.v2-footer .co-news-form input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); }
.v2-footer .co-news-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.v2-footer .co-news-form button { background: #fff; color: var(--v2-ink); }

/* ---- the bridge ---------------------------------------------------------
   A legacy page wrapped in `.v2 .v2-legacy` inherits the redesign without a
   single class being rewritten. Most of the work is already done for free: the
   two palettes agree (--cream and --v2-ground are both #FAFAFB, --ink and
   --v2-ink both #1D1D1F, --cream-border and --v2-line both #E4E4E8), and `.v2`
   already remaps --serif to Newsreader, so headings change face on contact.

   What is left is the handful of tokens the redesign actually moved away from:
   the bright yellow, the blue CTA, and the tighter radii.
-------------------------------------------------------------------------- */

.v2.v2-legacy {
  /* #ffff8c was the old highlight; the redesign uses a soft accent and lets
     ink carry emphasis. */
  --yellow: var(--v2-accent);
  /* The blue primary button has no equivalent — v2 CTAs are ink or white. */
  --blue: var(--v2-ink);
  --radius-card: 16px;
  --radius-frame: 20px;
  --shadow-card: 0 18px 40px -32px rgba(24, 24, 45, 0.28);
  --shadow-lift: 0 26px 56px -34px rgba(24, 24, 45, 0.32);
}

/* Legacy pages set their own paragraph rhythm; `:where(.v2) p { margin: 0 }`
   would flatten it, so give it back inside the bridge only. */
.v2-legacy :is(.co-lede, .bp-dx-block p, .bp-info-card p, .bp-final-sub) { margin-block: revert-layer; }

/* The legacy primary button was a blue pill. Inside the bridge it becomes the
   v2 ink pill, at the v2 height. */
.v2-legacy :is(.btn-primary, .bp-pg-cta, .bp-dx-cta) {
  background: var(--v2-ink);
  color: #fff;
  border-radius: 9999px;
  border: 0;
  min-height: 52px;
}
.v2-legacy :is(.btn-primary, .bp-pg-cta, .bp-dx-cta):hover { background: #000; }

/* Section headings pick up the redesign's scale, not just its face. */
.v2-legacy :is(.co-d1, .bp-dx-h2, .bp-pg-h2) { letter-spacing: -0.025em; }

/* Expectation-setting line under a tier's list. Quiet, but on the card where
   the promise is made rather than buried on another page. */
.v2 .v2-tier-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--v2-ink-mute);
}
.v2 .v2-tier--dark .v2-tier-note {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.68);
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/testimonios.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* ---------------------------------------------------------------------------
   /testimonios — the credibility page. Three long-form stories, then the
   shorter member reel and the ambassadors. Prefixed `ts-`; tokens come from
   home-v2.css via the shell.
--------------------------------------------------------------------------- */

.v2 .ts-hero { padding: 140px 0 8px; }
@media (max-width: 900px) { .v2 .ts-hero { padding: 108px 0 4px; } }

.v2 .ts-hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
.v2 .ts-hero-in h1 {
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 15ch;
  text-wrap: balance;
}
.v2 .ts-hero-in p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--v2-ink-mute);
  max-width: 52ch;
}
.v2 .ts-hero-in > p,
.v2 .ts-hero-in > .ts-trust { max-width: 52ch; }
.v2 .ts-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px !important;
  color: var(--v2-ink-soft) !important;
}
.v2 .ts-stars { color: #1fc26a; letter-spacing: 0.06em; }
/* The shared eyebrow parks itself left; here the whole column is centred. */
.v2 .ts-hero-in .v2-eyebrow { align-self: center; }

/* ---- the shorter member reel --------------------------------------------- */

.v2 .ts-reel { background: var(--v2-tile); }

/* ---- closing ------------------------------------------------------------- */

.v2 .ts-closing-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.v2 .ts-closing-in h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.028em; }
.v2 .ts-closing-in p { font-size: 17px; color: var(--v2-ink-mute); max-width: 46ch; }
.v2 .ts-note {
  font-size: 12.5px !important;
  line-height: 1.55;
  max-width: 62ch !important;
  margin-top: 14px;
  opacity: 0.8;
}