/* ==================================================================
   the_reason — home page ("/")
   Section geometry, colours and breakpoints are lifted from the Framer
   build (page module rksDJ…/wdoY… + home.css). Breakpoints:
     desktop ≥1200 · tablet 810–1023.98 · phone ≤809.98
   ================================================================== */

.home {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--c-bg);
}
.home > * { width: 100%; }

/* ---------- giant logotype behind the intro ---------- */
.logo-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  overflow: clip;
  pointer-events: none;
}
.logo-top__mark {
  flex: 1 0 0;
  width: 100%;
  aspect-ratio: 10.7143;
  --logo-color: #e7e7e7;
}

/* ---------- intro (72vh) ---------- */
.intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 72vh;
  padding: 120px 40px;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.intro.is-away { opacity: 0; transform: scale(.96); }
.intro__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 880px;
  padding-top: 64px;
  text-align: center;
  will-change: transform, filter;
}
.intro__eyebrow { width: 100%; padding-bottom: 24px; color: var(--c-ink-40); }
.intro__line { width: 100%; color: var(--c-ink-40); text-wrap: balance; }
.t-intro-serif { font-weight: 500; }
@media (max-width: 809.98px) {
  .intro { padding: 120px 16px; }
  .t-intro-serif { font-size: 24px; line-height: 1.3em; }
  .t-intro-sans { font-size: 23px; line-height: 1.3em; }
}

/* ---------- hero card (190vh) ---------- */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: stretch;
  /* height grows with the content: on short or narrow viewports the three
     benefit cards need more room than 190vh gives */
  min-height: 190vh;
  padding: 8px;
  background: linear-gradient(180deg, rgba(243,243,243,0) 0%, #f3f3f3 100%);
}
.hero__body {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 1px;
  min-height: 100%;
  padding: 80px 40px 200px;
  border-radius: 52px 52px 0 0;
  box-shadow: 0 -10px 24px -13px rgba(240,153,175,.12);
  overflow: hidden;
}
.hero__kv {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  border-radius: inherit;
}
.hero__kv > * { position: absolute; inset: 0; }
.hero__kv-placeholder, .hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* the stand-in is a ~200px file stretched over the card, so it is blurred and
   scaled a touch to hide both the pixels and its own edges */
.hero__kv-placeholder { filter: blur(16px); transform: scale(1.06); transition: opacity .5s ease; }
.hero__kv.is-loaded .hero__kv-placeholder { opacity: 0; }
.hero__shader { z-index: 1; background: #000; opacity: .2; }
.hero__img { z-index: 0; filter: blur(5px); will-change: filter; }
.hero__grad {
  top: auto; left: -1px; right: -1px; bottom: -1px;
  z-index: 1;
  background: linear-gradient(0deg, #f3f3f3 0%, rgba(242,242,242,0) 100%);
}
.hero__grad--1 { height: 32%; opacity: .8; }
.hero__grad--2 { height: 20%; opacity: .8; }
.hero__grad--3 { height: 12%; }

.hero__header { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; }
.hero__header-m { display: none; }
.hero__line { width: 100%; white-space: pre-wrap; }
.hero__line--1 h1 { text-align: left; }
.hero__line--2 h1, .hero__line--3 h1 { text-align: center; }
.hero__line--4 h1 { text-align: right; }

.hero__cta {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 64px 0;   /* keeps the cards clear of the headline and the closing h2 */
}
.hero__benefits {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* Cards drift apart at 0.04 / -0.01 / -0.06 of scrollY, so neighbours converge by
     0.05 * scrollY. The 164px resting gap (as in the original) keeps them clear
     for the whole height of the hero. */
  gap: 164px;
  width: 80%;
  min-height: 658px;
}
.hero__benefits > .benefit { flex: none; }
.hero__benefits::before, .hero__benefits::after { content: none; }
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 350px;
  max-width: 350px;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-fill-32);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.benefit--1 { align-self: center; }
.benefit--2 { align-self: flex-start; }
.benefit--3 { align-self: flex-end; }
.benefit__text { display: flex; flex: 1 0 0; flex-direction: column; gap: 6px; max-width: 320px; }
.benefit__text p { max-width: 280px; }
.benefit__title { color: var(--c-white); }
.benefit__desc { color: var(--c-white-68); }
.benefit__icon {
  flex: none;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.benefit__icon--bars { background-image: url("../img/icons/five-bars.svg"); }
.benefit__icon--dna { background-image: url("../img/icons/dna.svg"); }
.benefit__icon--circles { background-image: url("../img/icons/circles-6.svg"); }

.hero__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.hero__h2 { width: 100%; text-align: center; color: var(--c-white); font-size: 56px; line-height: 1em; letter-spacing: -.01em; }
.hero__btn { width: 100%; max-width: 400px; }

@media (max-width: 1023.98px) {
  .hero { min-height: 140vh; }
  .hero__h2 { font-size: 44px; }
}
@media (max-width: 809.98px) {
  .hero { flex-direction: column; height: auto; min-height: 140vh; padding: 16px; }
  .hero__body { width: 100%; min-height: 0; padding: 80px 16px 200px; border-radius: 32px 32px 0 0; box-shadow: none; }
  .hero__img { filter: none; }
  .hero__header-d { display: none; }
  .hero__header-m { display: flex; align-items: center; }
  .hero__header-m .hero__line h1 { text-align: center; }
  /* the stacked headline runs bigger and tighter than the shared display preset */
  .hero__header-m h1 { font-size: 64px; line-height: .92em; }
  .hero__mrow { display: flex; justify-content: center; align-items: flex-end; gap: 8px; width: 100%; white-space: pre; }
  .hero__benefits { width: 100%; height: auto; min-height: 0; flex: none; gap: 4px; justify-content: center; align-items: center; }
  .benefit { width: 100%; max-width: 400px; align-self: center; }
  .hero__h2 { font-size: 34px; }
  .hero__btn { max-width: min(100vw - 48px, 400px); }
}
@media (max-width: 599.98px) {
  .hero__header-m h1 { font-size: 44px; }
}

/* ==================================================================
   FIVE AGING TRAJECTORIES (#five)
   ================================================================== */
.five-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
.five-section__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 50vh;
  padding: 0 0 24px;
  background: var(--c-bg);
  overflow: hidden;
}
.five-section__h3 {
  width: 100%;
  font-size: 56px;
  line-height: 1em;
  letter-spacing: .01em;
  font-weight: 300;
  color: var(--c-ink);
}
.five-section__h3 em { font-style: italic; }
/* The wordmark inside a sentence is live text in the display face, exactly as in
   the original: it shares the baseline of the surrounding serif automatically. */
.wordmark {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-feature-settings: "ss04" on;
  font-weight: 400;
}
.five {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  /* fits the band between the sticky nav and the bottom of the screen,
     with the section's own 24px gap above and below */
  height: calc(100vh - var(--nav-h) - 48px);
  min-height: 540px;
  margin: 16px 0;
  padding: 8px;
  border-radius: 16px;
  background: #e5e5e5;
  overflow: hidden;
}
.five__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  padding: 24px;
  overflow: hidden;
}
.five__label { width: 100%; color: var(--c-ink-40); }
.five__nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.five__tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  color: var(--c-ink-20);
  transition: color .4s var(--ease-spring);
}
.five__tab.is-active { color: var(--c-black); cursor: default; }
@media (hover: hover) { .five__tab:not(.is-active):hover { color: var(--c-ink-40); } }
.five__row { display: flex; align-items: flex-start; gap: 16px; height: 44px; overflow: clip; }
.five__num {
  flex: none;
  width: 12px;
  padding-top: 7px;
  font-family: "PP Kyoto Light", serif;
  font-size: 20px;
  line-height: 24px;
}
.five__title { font-size: 36px; line-height: 44px; }
.five__track { display: block; width: 100%; height: 2px; background: var(--c-line-10); overflow: clip; }
.five__done { display: block; width: 0; height: 2px; border-radius: 99px; background: var(--c-black); }
.five__descrs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  /* 400px measure at every size, shrinking only when the card is narrower;
     no bottom padding — .five__content already holds the 24px inset */
  width: 100%;
  max-width: 400px;
  min-height: 140px;
  padding: 20px 0 0;
}
.five__desc {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.five__desc.is-active { display: flex; animation: five-fade 1s var(--ease-spring) both; }
.five__tag { color: var(--c-ink-40); }
.five__desc p { color: var(--c-black); }
.five__media {
  position: relative;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.five__img { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.five__img.is-active { opacity: 1; animation: five-slide 1s var(--ease-spring) both; }
.five__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 8px; }
.five__img:not(.is-loaded) img { filter: blur(16px); transform: scale(1.04); }
.five__img img:first-child { transition: opacity .5s ease; }
/* once the real photo has decoded the stand-in is gone for good: opacity for the
   fade, visibility so a later repaint cannot bring it back */
.five__img.is-loaded img:first-child { opacity: 0; visibility: hidden; }
@keyframes five-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes five-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023.98px) {
  .five-section__h3 { font-size: 48px; }
  .five { flex-direction: column; height: auto; min-height: 0; }
  .five__content { flex: none; width: 100%; height: auto; gap: 24px; padding: 16px; }
  .five__title { font-size: 22px; line-height: 26px; letter-spacing: .01em; }
  .five__row { height: auto; }
  .five__num { font-size: 12px; line-height: 12px; padding-top: 4px; }
  .five__descrs { min-height: 0; }
  .five__media { flex: none; width: 100%; height: 368px; cursor: pointer; }
}
@media (max-width: 809.98px) {
  .five-section { padding: 24px 16px; }
  .five-section__header { height: auto; padding: 0 0 24px; }
  .five-section__h3 { font-size: 34px; text-align: center; }
}

/* ==================================================================
   STEPS
   ================================================================== */
.steps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 80px 40px 0;
  overflow: hidden;
}
.steps__header {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
/* the two headline lines run flush; only the eyebrow and the paragraph
   are spaced away from them (same rule as .diff__header) */
.steps__eyebrow { padding-bottom: 16px; }
.steps__p { margin-top: 16px; }
.steps__eyebrow { text-align: center; color: var(--c-ink-40); }
.steps__h2a { text-align: center; }
.steps__h2b { text-align: left; }
.steps__h2b em { font-style: italic; }
.steps__p { max-width: 440px; color: var(--c-ink-80); font-family: "Inter Variable", "Inter", sans-serif; font-feature-settings: "cv11" on; font-size: 19px; line-height: 24px; font-variation-settings: "opsz" 19, "wght" 450; letter-spacing: -.01em; }
.steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 572px 420px;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  align-items: end;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
}
.step--1 { height: 75%; background: #023a6e; align-self: end; }
.step--2 { height: 572px; background: #d7a07b; }
.step--3 { grid-column: 1 / -1; width: 80%; height: 420px; justify-self: end; background: #c9c991; }
.step__header { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6.6px; width: 100%; }
.step__title { max-width: 400px; color: var(--c-white); font-size: 32px; line-height: 32px; letter-spacing: 0; }
.step__desc { max-width: 400px; color: var(--c-white); }
.step__shader { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.step__shader img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.step__shader::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, #031332 0%, rgba(3,19,50,0) 100%);
  opacity: .7;
}
.step--2 .step__shader::after { background: linear-gradient(180deg, #29170c 0%, rgba(41,23,12,0) 100%); opacity: .6; }
.step--3 .step__shader::after { height: 343px; background: linear-gradient(180deg, #131c02 0%, rgba(19,28,2,0) 100%); opacity: .7; }

/* hallmark list (step 1) */
.hallmarks {
  position: absolute;
  right: -19px;
  bottom: -88px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 295px;
}
.hallmark {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--c-glass);
  box-shadow: 0 16px 30px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.hallmark--phone { display: none; }
.hallmark__grade {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--c-ink-64);
}
/* the ring under the arc is as thick as the arc itself: the arc in arc-*.svg
   runs from r=18 to r=24 in a 48px box, i.e. 6px */
.hallmark__grade::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 6px solid rgba(0,0,0,.08); }
.hallmark__grade::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 48px 48px; }
.hallmark__grade--a::after  { background-image: url("../img/icons/arc-a.svg"); }
.hallmark__grade--b::after  { background-image: url("../img/icons/arc-b-1.svg"); }
.hallmark__grade--b2::after { background-image: url("../img/icons/arc-b-2.svg"); }
.hallmark__grade--c::after  { background-image: url("../img/icons/arc-c.svg"); }
.hallmark__text { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.hallmark__name { color: var(--c-ink); }
.hallmark__sub { color: var(--c-ink-40); }

/* stat widget (step 2 + interventions) */
.widget {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--c-glass);
  box-shadow: 0 16px 30px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.widget--stats { right: 20px; bottom: -37px; width: 320px; }
.stat { display: flex; flex-direction: column; }
.stat__label { padding: 14px 14px 10px; color: var(--c-black); }
.stat__bar { display: flex; gap: 2px; height: 20px; margin: 0 14px; }
.stat__left, .stat__right { flex: 1 0 0; display: flex; border-radius: 4px; background: var(--c-fill-06); overflow: hidden; }
/* a negative reading fills the left half, growing leftwards from the zero mark */
.stat__left { justify-content: flex-end; }
.stat__mark { flex: none; width: 6px; border-radius: 4px; background: var(--c-green); }
.stat__fill { display: block; width: var(--fill, 0%); height: 100%; border-radius: 4px; background: var(--c-green); }
.stat__bar--amber .stat__mark, .stat__bar--amber .stat__fill { background: var(--c-amber); }
.stat__bar--ink .stat__mark, .stat__bar--ink .stat__fill { background: var(--c-black); }
.stat__bar--ink .stat__left, .stat__bar--ink .stat__right { background: var(--c-fill-08); }
.stat__axis { display: flex; justify-content: space-between; padding: 4px 14px 14px; color: var(--c-ink-80); }
.stat__axis span { flex: 1; }
.stat__axis span:nth-child(2) { text-align: center; }
.stat__axis span:nth-child(3) { text-align: right; }
.stat + .stat { border-top: 1px solid var(--c-fill-06); }

/* protocol cards (step 3) */
.protocols {
  position: absolute;
  top: 24px;
  right: -72px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
  width: 453px;
}
.pro-card {
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  border-radius: 12px;
  background: var(--c-glass);
  box-shadow: 0 16px 30px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.pro-card__title { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; }
.pro-card__title p:first-child { color: var(--c-black); font-variation-settings: "opsz" 28, "wght" 500; }
.pro-card__title p:nth-child(2) { color: var(--c-ink-80); }
.pro-card__tags { display: flex; flex-wrap: nowrap; gap: 4px; padding-top: 8px; }
.pro-card__tags .tag { font-size: 11px; padding: 3px 7px; }
.tag { padding: 4px 8px; border-radius: 99px; background: var(--c-fill-06); color: var(--c-ink); white-space: nowrap; }
.pro-card__sheet { display: flex; flex-direction: column; gap: 6px; }
.pro-card__line { display: flex; flex-direction: column; }
.pro-card__line span:first-child { color: var(--c-ink-64); }
.pro-card__line span:last-child { color: var(--c-ink); }

@media (max-width: 1023.98px) {
  .steps__h2a { font-size: 48px; }
  .steps__h2b { font-size: 44px; }
  .hallmarks { bottom: -170px; right: -18px; }
  .widget--stats { right: 18px; }
  .protocols { right: -162px; }
  .step--3 { width: 100%; }
}
@media (max-width: 809.98px) {
  .steps { padding: 80px 16px 0; }
  .steps__header { justify-items: center; padding: 0; }
  .steps__h2a, .steps__h2b { font-size: 34px; text-align: center; }
  .steps__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .step--1, .step--2, .step--3 { height: 560px; width: 100%; grid-column: auto; }
  /* the inner cards hang below the copy instead of butting against it,
     and the wash under the text is stronger so the text stays readable */
  .hallmarks { top: 210px; bottom: auto; }
  .protocols { top: 260px; left: 24px; right: auto; }
  .step__shader::after { height: 320px; opacity: .85; }
  .step--2 .step__shader::after { height: 320px; opacity: .8; }
  .step--3 .step__shader::after { height: 360px; opacity: .85; }
  .hallmark--desktop { display: none; }
  .hallmark--phone { display: flex; }
  .widget--stats { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ==================================================================
   INTERVENTIONS
   ================================================================== */
.interventions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 200px 0 0;
  overflow: clip;
}
.interventions__fill { position: absolute; inset: 0; z-index: 0; background: #e5e5e5; }
.cap {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: 84px;
  border-radius: 0 0 52px 52px;
  background: var(--c-bg);
  overflow: hidden;
}
.interventions__shade {
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  z-index: 1;
  height: 41px;
  background: linear-gradient(180deg, rgba(243,243,243,0) 0%, #f3f3f3 100%);
}
.interventions__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  padding: 0 40px 40px;
}
.interventions__header h6 { color: var(--c-ink-80); }
.interventions__h2a { text-align: left; }
.interventions__h2b { width: 100%; text-align: center; }

.charts {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  padding: 0 40px;
}
.chart-combo {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 1px;
  max-width: 1400px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.5);
  box-shadow: 0 16px 30px rgba(0,0,0,.2);
}
.widget--traj { width: 274px; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.widget--skin { right: -20px; top: 48px; }
.widget--cog { left: -20px; bottom: 112px; }
.widget__title { padding: 14px; color: var(--c-black); }
.widget--traj .stat__bar { margin-top: 0; }
.stat--plain .stat__axis { padding-bottom: 10px; }
.score { display: flex; gap: 24px; padding: 8px 14px 16px; }
.score__item { display: flex; flex-direction: column; gap: 2px; }
.score__item p:first-child { color: var(--c-black); }
.score__item p:last-child { color: var(--c-ink-64); }
.ivs { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
.ivs li { display: flex; justify-content: space-between; gap: 12px; color: var(--c-black); }
.ivs .is-pos { color: var(--c-green); }
.ivs .is-neg { color: var(--c-amber); }

.line-chart {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 2.3333333 / 1;
}
.line-chart__legend { display: flex; gap: 20px; color: var(--c-ink-80); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item__pill { display: inline-block; width: 20px; height: 4px; border-radius: 99px; }
.line-chart__plot { position: relative; flex: 1 0 0; padding-left: 40px; }
.line-chart__svg { width: 100%; height: 100%; display: block; }
.line-chart__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  color: var(--c-ink-40);
}
.line-chart__lines span { position: relative; display: block; width: 100%; line-height: 12px; }
.line-chart__lines span::after { content: ""; position: absolute; left: 40px; right: 0; top: 6px; height: 1px; background: rgba(0,0,0,.06); }
.line-chart__x { display: flex; justify-content: space-between; padding-left: 40px; color: var(--c-ink-40); }

.tickers {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 24px 0;
  overflow: hidden;
}
.tickers .ticker { height: 20px; }
.ticker--60 { opacity: .6; }
.ticker--40 { opacity: .4; }

@media (max-width: 1023.98px) {
  .charts { padding: 0 40px; }
  /* the widgets keep their 274px layout but ride smaller, so they cover
     less of the curve underneath and sit clear of the card edge */
  .widget--traj { transform: scale(.9); }
  /* they lap slightly past the card edge, as on desktop */
  .widget--skin { transform-origin: top right; right: -20px; }
  .widget--cog  { transform-origin: bottom left; left: -20px; }
}
@media (max-width: 809.98px) {
  .cap { height: 64px; border-radius: 0 0 32px 32px; }
  .interventions__header { padding: 0 16px; }
  .interventions__h2a, .interventions__h2b { text-align: left; }
  .charts { padding: 0 16px; }
  .chart-combo { padding: 16px; }
  .widget--traj { transform: scale(.78); }
  .widget--skin { right: -16px; top: 12px; }
  .widget--cog { left: -16px; bottom: 12px; }
  .line-chart { aspect-ratio: auto; height: 70vh; }
  .line-chart__legend { flex-direction: column; gap: 4px; }
}

/* ==================================================================
   DIFFERENTIATION (#diff)
   ================================================================== */
.diff {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 180px 40px 140px;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}
.diff .cap { display: none; }
.diff::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: 400px;
  background: linear-gradient(180deg, #f3f3f3 0%, rgba(243,243,243,0) 100%);
  pointer-events: none;
}
.diff__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
}
.diff__header { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1400px; text-align: center; }
/* the two headline lines run flush (gap 0 in the original); only the eyebrow
   and the paragraph are spaced away from them */
.diff__header h6 { padding-bottom: 16px; }
.diff__p { margin-top: 16px; }
.diff__header h6 { color: var(--c-ink-40); }
.diff__h2a { color: var(--c-ink-40); }
.diff__h2b { color: var(--c-black); }
.diff__p { max-width: 440px; color: var(--c-ink-40); font-family: "Inter Variable", "Inter", sans-serif; font-feature-settings: "cv11" on; font-size: 19px; line-height: 24px; font-variation-settings: "opsz" 19, "wght" 450; letter-spacing: -.01em; }
.table { display: flex; align-items: flex-start; gap: 2px; width: 100%; }
.table__scroll { display: contents; }
.fact {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 28px;
  width: 1px;
  padding: 20px;
  border-radius: 16px;
  background: #e5e5e5;
  overflow: hidden;
}
.fact--us { gap: 32px; background: var(--c-black); }
.fact__logo { width: 202px; height: 20px; margin: 5px 0 3px; --logo-color: var(--c-white); }
.fact__title { color: var(--c-ink-40); }
.fact__rows { display: flex; flex-direction: column; color: var(--c-ink); }
.fact__rows li { padding: 8px 0; border-bottom: 1px solid var(--c-line-10); white-space: pre-wrap; }
.fact--us .fact__rows { color: var(--c-white); }
.fact--us .fact__rows li { border-bottom-color: rgba(255,255,255,.24); }
@media (max-width: 1023.98px) {
  .table { display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); justify-content: center; }
  .fact { width: 100%; flex: none; }
}
@media (max-width: 809.98px) {
  .diff { padding: 120px 16px 8px; border-radius: 0; }
  .diff__header { padding: 0; }
  .table { display: flex; flex-direction: column; gap: 16px; }
  .table__scroll {
    display: flex;
    gap: 16px;
    /* full-bleed scroller, but the cards keep the 16px page gutter at both ends */
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    /* the bar sits below the cards instead of across them */
    padding-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table__scroll::-webkit-scrollbar { height: 8px; }
  .table__scroll::-webkit-scrollbar-track { background: transparent; }
  .table__scroll::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--c-line-12); }
  .table__scroll .fact { flex: none; width: 320px; }
  .fact--us { order: 2; width: 100%; }
}

/* ==================================================================
   PRECISION / CASES
   ================================================================== */
.cases {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 40px;
  overflow: hidden;
}
.cases__header { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 24px; }
.cases__header h6 { color: var(--c-ink-40); }
.cases__h2a { width: 100%; text-align: left; }
.cases__h2a .disp {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "dlig" on, "zero" on, "case" on, "ss04" on;
  letter-spacing: -.01em;
}
.cases__h2a em { font-style: italic; }
.cases__h2b { width: 100%; text-align: center; }
.cases__nav { display: flex; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; }
.cases__track {
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  gap: 16px;
  width: 214%;
  max-width: 2400px;
  --gap: 16px;
}
.case-card {
  position: relative;
  display: flex;
  flex: 1 0 0;
  justify-content: space-between;
  width: 1px;
  max-width: 800px;
  height: 660px;
  border-radius: 16px;
  overflow: hidden;
  opacity: .34;
  transition: opacity .4s ease;
}
.case-card.is-active { opacity: 1; }
.case-card.is-next { cursor: pointer; }
.case-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.16); pointer-events: none; z-index: 3; }
/* The source images are only 200-300px (that is all the original serves), so
   stretching them over the card shows banding. A slight blur hides it; the
   art is a soft gradient, so nothing is lost. The scale keeps the blurred
   edges from letting the card background show through. */
.case-card__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 16px;
  filter: blur(6px); transform: scale(1.06); }
.case-card__p {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  /* name + photo ride at the top, the story sits at the bottom,
     the slack between them is whatever the card height leaves */
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  overflow: clip;
}
.case-card__name { display: flex; flex-direction: column; gap: 24px; width: min-content; min-width: 400px; text-align: left; color: var(--c-white); cursor: default; }
.case-card__who { display: flex; flex-direction: column; gap: 2px; width: 400px; max-width: 400px; }
.case-card__nm { color: var(--c-white); }
.case-card__tag { color: var(--c-white-68); }
.case-card__photo { display: block; width: 113px; height: 142px; border-radius: 8px; overflow: hidden; }
.case-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.case-card__toggle { display: none; }
.case-card__story { display: flex; flex-direction: column; gap: 8px; max-width: 520px; color: var(--c-white); }
.case-card__story strong { font-weight: inherit; font-variation-settings: "opsz" 16, "wght" 650; }
.case-card__side {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  width: 320px;
  height: 100%;
  padding: 20px;
}
.hallmark-w {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.hallmark-w__head { display: flex; align-items: center; gap: 16px; padding: 14px 14px 0; color: var(--c-ink); }
.hallmark-w__head h6:first-child { flex: 1 0 0; }
.hallmark-w__desc { padding: 0 14px 14px; color: var(--c-ink-80); }
.hallmark-w--strategy { gap: 4px; padding: 8px 14px; background: var(--c-fill-32); color: var(--c-white); }
.hallmark-w--strategy .hallmark-w__head { padding: 0; color: var(--c-white); }
.hallmark-w--strategy .hallmark-w__desc { padding: 0; color: var(--c-white-68); }
.hallmark-w--strategy em { font-style: normal; }
.dchart { display: flex; gap: 2px; height: 8px; margin: 8px 14px; --bar: var(--c-red); }
.dchart--amber { --bar: var(--c-amber); }
.dchart--green { --bar: var(--c-green-2); }
.dchart__left, .dchart__right { display: flex; flex: 1 0 0; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden; }
.dchart__left { justify-content: flex-end; }
.dchart__center { flex: none; width: 6px; border-radius: 4px; background: var(--bar); }
.dchart__line { display: block; width: var(--v, 50%); height: 100%; border-radius: 4px; background: var(--bar); }

@media (max-width: 1023.98px) {
  .case-card { flex-direction: column; height: 800px; justify-content: flex-start; opacity: 1; }
  .case-card__p { flex: none; justify-content: flex-start; }
  .case-card__name { flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; min-width: 0; }
  .case-card__who { width: auto; max-width: none; flex: 1; }
  .case-card__photo { width: 64px; height: 80px; }
  .case-card__side { flex: 1; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 4px; align-content: end; }
  .hallmark-w--strategy { grid-column: 1 / -1; }
}
@media (max-width: 809.98px) {
  .cases { padding: 80px 16px 24px; }
  .cases__header { padding: 0; }
  .cases__h2a { font-size: 34px; }
  .cases__h2a .disp { font-family: "Yamantaka Test Thin", "Copyright Public Type Variable", sans-serif; }
  .cases__nav { display: none; }
  .cases__track { flex-direction: column; width: 100%; gap: 4px; }
  .case-card { flex: none; width: 100%; max-width: none; height: auto; opacity: 1; transform: none !important; }
  .case-card__p { padding: 20px; gap: 24px; }
  /* the copy and the photo share a bottom edge, so the first line of the
     heading starts level with the top of the photo instead of at the very
     top of the card */
  .case-card__name { position: relative; min-height: 120px; align-items: flex-end; cursor: pointer; padding-right: 0; }
  .case-card__who { padding-right: 16px; }   /* only the copy clears the photo */
  .case-card__photo { align-self: flex-end; }
  .case-card__who { gap: 0; }
  .case-card__nm, .case-card__tag { font-size: 19px; line-height: 24px; letter-spacing: -.01em; }
  .case-card__toggle {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 24px; height: 24px;
    opacity: .6;
    background: var(--c-white);
    -webkit-mask: url("../img/icons/plus-circle.svg") no-repeat center / 24px 24px;
            mask: url("../img/icons/plus-circle.svg") no-repeat center / 24px 24px;
  }
  .case-card.is-open .case-card__toggle {
    -webkit-mask-image: url("../img/icons/minus-circle.svg");
            mask-image: url("../img/icons/minus-circle.svg");
  }
  /* Open/close animates height only. A closed block keeps no padding of its
     own, otherwise it leaves a strip of empty card below the copy; and no
     opacity fade, which read as a flash against the moving height. */
  .case-card__p { gap: 0; }
  .case-card__story, .case-card__side {
    display: flex; flex-direction: column;
    max-height: 0; padding: 0; overflow: hidden;
    transition: max-height .45s var(--ease-spring);
  }
  .case-card.is-open .case-card__story { max-height: 1400px; padding-top: 24px; }
  .case-card.is-open .case-card__side { max-height: 1400px; padding: 0 20px 20px; }
}

/* ==================================================================
   FOUNDERS
   ================================================================== */
.founders {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 80px 40px;
  overflow: hidden;
}
.founders__header { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.founders__header h6 { color: var(--c-ink-40); }
.founders__h2a { text-align: center; }
.founders__h2b { width: 100%; max-width: 700px; text-align: left; }
.founders__h2c { width: 100%; max-width: min(640px, 100%); text-align: right; }
.founders__cards { display: flex; justify-content: center; align-items: flex-start; gap: 4px; width: 100%; height: 640px; }
.founder {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  width: 1px;
  max-width: 620px;
  height: 100%;
  padding: 24px;
  border-radius: 16px;
  background: var(--c-white);
  overflow: hidden;
}
.founder__top { display: flex; gap: 16px; overflow: clip; }
.founder__name { display: flex; flex: 1; flex-direction: column; gap: 2px; color: var(--c-black); }
.founder__img { flex: none; width: 192px; height: 240px; border-radius: 8px; overflow: hidden; }
.founder__img img { width: 100%; height: 100%; object-fit: cover; }
.founder__facts { display: flex; flex-direction: column; gap: 20px; max-width: 400px; margin-top: auto; color: var(--c-black); text-wrap: balance; }
.founder__btn { margin-top: 24px; align-self: flex-start; }
@media (max-width: 1023.98px) {
  .founders__h2b { max-width: 570px; }
  .founders__h2c { max-width: 580px; }
  .founder__top { flex-direction: column; }
  .founder__img { width: 96px; height: 120px; }
}
@media (max-width: 809.98px) {
  .founders { padding: 80px 16px 24px; }
  .founders__cards { flex-direction: column; align-items: center; height: auto; }
  .founder { flex: none; width: 100%; height: auto; gap: 24px; justify-content: flex-start; }
  .founder__facts { margin-top: 0; }
  .founder__btn { margin-top: 0; }
}

/* ==================================================================
   PLANS (#plans) — black block
   ================================================================== */
.plans {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 140px 0 0;
  background: var(--c-black);
  overflow: hidden;
}
.cap--dark { z-index: 3; height: 40px; border-radius: 0 0 40px 40px; }
.plans__header { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0 40px; }
.plans__header h6 { color: var(--c-white-68); }
.plans__h2a { color: var(--c-white); }
.plans__h2b {
  width: 100%;
  text-align: center;
  color: var(--c-white);
  font-size: 64px;
  line-height: 1em;
  letter-spacing: -.01em;
}
.plans__h2b .disp {
  font-family: "Yamantaka Test Thin", "Copyright Public Type Variable", sans-serif;
  font-feature-settings: "dlig" on, "zero" on, "case" on, "ss04" on;
}
.plans__wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  /* the section already puts 80px between its blocks; a second 80px here
     doubled the gap under the heading */
  padding: 0 40px 200px;
  overflow: clip;
}
.plans__cards { display: flex; justify-content: center; align-items: center; gap: 40px; width: 100%; overflow: clip; }
.plan {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 24px;
  width: 1px;
  max-width: 440px;
  padding: 20px;
  border-radius: 24px;
}
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--c-white-10); pointer-events: none; }
.plan__card { display: block; width: 100%; aspect-ratio: 1.5841584; }
.plan__p { display: flex; align-items: center; min-height: 96px; padding: 0 20px; color: var(--c-white-68); font-family: "Inter Variable", "Inter", sans-serif; font-feature-settings: "cv11" on; font-size: 16px; line-height: 24px; letter-spacing: -.01em; font-variation-settings: "opsz" 16, "wght" 450; }
.plan__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; }
.plans__margin { display: flex; justify-content: center; align-items: center; gap: 40px; width: 100%; max-width: 920px; padding: 0 8px; }
.plans__margin .cross { padding: 32px; }
.plans__glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  height: 50vh;
  border-radius: 0 0 64px 64px;
  background: linear-gradient(180deg, rgba(242,242,242,0) 0%, #ebebeb 100%);
  opacity: .1;
  pointer-events: none;
}
.plans__footer { position: relative; z-index: 2; }
@media (max-width: 1023.98px) {
  .plans__h2b { font-size: 44px; }
  .plans__wrap { padding: 0 40px 80px; }
}
@media (max-width: 809.98px) {
  .plans { gap: 24px; }
  .cap--dark { height: 32px; border-radius: 0 0 32px 32px; }
  .plans__header { padding: 0 16px; }
  .plans__h2b { font-size: 34px; }
  .plans__wrap { gap: 24px; padding: 0 16px 64px; }
  .plans__cards { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 24px; overflow: visible; }
  .plan { flex: none; width: 100%; max-width: none; padding: 16px; }
  .plan__p { padding: 0; min-height: 0; }
  .plans__glow { border-radius: 0 0 32px 32px; }
}