/* -----------------------------------------------------------------------------
   cario.html, page-specific layout only. Tokens and shared components
   (kicker, section__h, section__intro, chips, halo--*, forms, reveal) live
   in styles.css. This file positions things; it does not restyle tokens.
   -------------------------------------------------------------------------- */

/* Shared vertical rhythm between page sections. */
.hero-cario,
.cario-photo,
.promises,
.km,
.honest,
.proves,
.waitlist {
  padding-block: var(--sect);
}

.hero-cario {
  padding-top: var(--sect);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-cario__eyebrow {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink-2);
  margin-top: var(--s-2);
}

.hero-cario__title {
  font: 500 var(--fs-hero) var(--font-sans);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  max-width: 16em;
  margin-top: var(--s-4);
}

.hero-cario__lead {
  font: 400 var(--fs-lead) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 34rem;
  margin-top: var(--s-5);
}

.hero-cario__honest {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink-2);
  max-width: 34rem;
  margin-top: var(--s-3);
}

.hero-cario__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

/* -----------------------------------------------------------------------------
   Corolla photo (halo, reusing the work-card__vis recipe)
   -------------------------------------------------------------------------- */
.cario-photo__fig {
  position: relative;
  max-width: 42rem;
  margin-inline: auto;
}

.cario-photo__fig::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 46%, var(--halo) 0%, rgba(250, 249, 247, 0) 72%);
}

.cario-photo__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.cario-photo__cap {
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-top: var(--s-4);
}

/* -----------------------------------------------------------------------------
   Three promises
   -------------------------------------------------------------------------- */
.promises__grid {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-8);
}

@media (min-width: 720px) {
  .promises__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promises__item {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  padding: var(--s-7);
}

.promises__k {
  font: 500 var(--fs-h3) var(--font-sans);
  color: var(--ink);
}

.promises__v {
  font: 400 var(--fs-body) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-top: var(--s-3);
}

/* -----------------------------------------------------------------------------
   By the kilometre
   -------------------------------------------------------------------------- */
.km__grid {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-8);
}

@media (min-width: 720px) {
  .km__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.km__card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-7);
}

.km__dist {
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.km__items {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink-2);
  margin-top: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.km__figure {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.km__num {
  font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.75rem) var(--font-mono);
  color: var(--accent-deep);
}

.km__unit {
  font: 400 var(--fs-small) var(--font-sans);
  color: var(--ink-2);
}

.km__fine {
  font: 400 var(--fs-small) var(--font-sans);
  color: var(--ink-3);
  margin-top: var(--s-2);
}

.km__note {
  font: 400 var(--fs-small) var(--font-sans);
  color: var(--ink-3);
  max-width: var(--w-read);
  margin-top: var(--s-6);
}

/* -----------------------------------------------------------------------------
   Honest data
   -------------------------------------------------------------------------- */
.honest__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.honest__tags span {
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.honest__scope {
  font: 400 var(--fs-body) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: var(--w-read);
  margin-top: var(--s-5);
}

.honest__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
  .honest__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.honest__stat-num {
  font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) var(--font-mono);
  color: var(--ink);
}

.honest__stat-label {
  font: 400 var(--fs-small) var(--font-sans);
  color: var(--ink-2);
  margin-top: var(--s-2);
}

/* -----------------------------------------------------------------------------
   What Cario proves
   -------------------------------------------------------------------------- */
.proves__body {
  font: 400 var(--fs-lead) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-top: var(--s-5);
}

.proves__links {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink);
  margin-top: var(--s-5);
}

/* -----------------------------------------------------------------------------
   Waitlist
   -------------------------------------------------------------------------- */
.waitlist .form {
  margin-top: var(--s-7);
}

/* -----------------------------------------------------------------------------
   Data charts (rich expansion): the MOT curve inside .honest, the depreciation
   curve after .km. Layout only; colours and chart geometry are the shared
   chart classes in styles.css section 23.
   -------------------------------------------------------------------------- */
.cario-chart {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.cario-chart__h {
  font: 500 var(--fs-h3) var(--font-sans);
  color: var(--ink);
  max-width: var(--w-read);
}

.cario-chart__intro {
  margin-top: var(--s-3);
}

.cario-chart .chart-fig {
  margin-top: var(--s-7);
  max-width: 42rem;
}

.cario-chart__link {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink);
  margin-top: var(--s-5);
}