/* ==========================================================================
   Anti - Page sections
   ========================================================================== */

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.wordmark {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.375rem;
  font-weight: var(--weight-extra);
  letter-spacing: -0.045em;
}

/* Primary navigation: a drawer under 900px, an inline row above it. */

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-8));
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.primary-nav__link:hover { color: var(--color-text); }

.primary-nav__link[aria-current] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.primary-nav__link[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-text);
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.site-header__cta { display: none; }

@media (max-width: 899px) {
  /* The drawer is a JS affordance, so its collapsed state is scoped to .js.
     Without JS the nav renders as a plain stacked list and stays reachable.
     Visibility lives in CSS, not in a resize handler, so the closed state is
     correct at any width the page happens to load at. */
  .js .primary-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: var(--space-4) var(--container-pad) var(--space-6);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .js .primary-nav[data-open="true"] { display: block; }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav__link {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-md);
    border-bottom: 1px solid var(--color-border);
  }

  .primary-nav__link[aria-current]::after { display: none; }

  .primary-nav__cta { margin-top: var(--space-4); }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-header__cta { display: inline-flex; }
  .primary-nav { display: block; }
  .primary-nav__cta { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-10), 5vw, var(--space-20)) var(--space-10);
}

.hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}

.hero__copy { display: grid; gap: var(--space-6); justify-items: start; }

.hero__title { max-width: 15ch; }
.hero__title em {
  font-style: normal;
  color: var(--color-accent-text);
}

.hero__lede {
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.hero__actions { gap: var(--space-4); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
}

/* --- Phone mockup ---------------------------------------------------------
   A decorative product illustration. Exposed to assistive tech as a single
   labelled image; its internals are aria-hidden. */

.phone {
  --phone-pad: var(--space-4);
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: var(--phone-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
}

.phone__menu { display: grid; gap: 3px; }
.phone__menu span {
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-text);
}
.phone__menu span:last-child { width: 9px; }

.phone__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(140deg, var(--lime-300), var(--ink-600));
}

.phone__label {
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-snug);
}

.phone__balance {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.phone__dots { color: var(--color-text-subtle); letter-spacing: 2px; }

.phone__chart {
  margin-top: var(--space-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.phone__chart svg { width: 100%; height: auto; }

/* Timeframe switcher: a group of toggle buttons, state via aria-pressed. */
.range {
  display: flex;
  gap: var(--space-1);
  margin-block: var(--space-3);
}

.range__btn {
  flex: 1 1 0;
  padding: var(--space-1) 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.range__btn:hover { color: var(--color-text); }
.range__btn[aria-pressed="true"] {
  background-color: var(--color-accent-soft);
  color: var(--ink-800);
}

.asset-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; }

.asset {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.asset:first-child { border-top: 0; }

.asset__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.asset__name { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.asset__ticker { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.asset__figures { text-align: right; }
.asset__price {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* --- Stats bar ------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-lg);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.stat__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-inverse-bg-alt);
  border: 1px solid var(--color-inverse-border);
  color: var(--color-accent);
}
.stat__icon svg { width: 1.125rem; height: 1.125rem; }

.stat__value {
  font-family: var(--font-display);
  display: block;
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-inverse-muted);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Card grids ----------------------------------------------------------- */

.grid-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid-cards--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.section__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-8), 4vw, var(--space-10));
}

/* --- Trust strip ---------------------------------------------------------- */

/* The ground and its token inversion come from .band--brand; the strip only
   owns its own tighter rhythm. */
.trust {
  padding-block: clamp(var(--space-8), 4vw, var(--space-10));
}

.trust__label {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-inverse-muted);
  margin-bottom: var(--space-6);
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 5vw, var(--space-12));
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease-out);
}
.trust__item:hover { opacity: 1; }
.trust__item svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* --- Dashboard mockup ----------------------------------------------------- */

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dashboard__aside {
  display: none;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.dashboard__nav { display: grid; gap: var(--space-1); margin: 0; padding: 0; }

.dashboard__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  color: var(--color-inverse-muted);
}
.dashboard__nav-item svg { width: 1rem; height: 1rem; flex: none; }
.dashboard__nav-item[data-active="true"] {
  background-color: var(--color-inverse-bg-alt);
  color: var(--color-inverse-text);
  font-weight: var(--weight-semibold);
}

.dashboard__main {
  display: grid;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 2.5vw, var(--space-6));
  background-color: var(--color-surface);
}

.dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboard__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}

.dashboard__tools { display: flex; gap: var(--space-2); color: var(--color-text-subtle); }
.dashboard__tools svg { width: 1.0625rem; height: 1.0625rem; }

.metric-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.metric {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunk);
}

.metric__label { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.metric__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}

.panel-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.panel__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}

.gauge { display: grid; justify-items: center; gap: var(--space-1); }
.gauge svg { width: min(100%, 9rem); height: auto; }
.gauge__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.gauge__state { font-size: var(--text-2xs); color: var(--signal-up); font-weight: var(--weight-semibold); }

.mover {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs);
}
.mover:first-of-type { border-top: 0; }
.mover__mark {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.5rem;
  font-weight: var(--weight-bold);
}
.mover__name { font-weight: var(--weight-semibold); }

@media (min-width: 700px) {
  .panel-row { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .dashboard { grid-template-columns: 13rem minmax(0, 1fr); }
  .dashboard__aside { display: flex; }
}

/* --- Pricing -------------------------------------------------------------- */

.pricing {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.plan--featured {
  border-color: var(--color-accent-strong);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.plan__head { display: grid; gap: var(--space-2); }

.plan__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
}

.plan__price {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 2rem;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
}

.plan__period {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-normal);
}

.plan__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.plan__cta { margin-top: auto; }

.plan__tag {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--ink-800);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}

/* --- Testimonials --------------------------------------------------------- */

.testimonials {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.quote__mark { color: var(--color-text-subtle); }
.quote__mark svg { width: 1.5rem; height: 1.5rem; }

.quote__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.quote__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.quote__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.quote__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.quote__role { font-size: var(--text-2xs); color: var(--color-text-subtle); }

/* --- Closing CTA ---------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  border-radius: var(--radius-xl);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  isolation: isolate;
}

.cta__content {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 32rem;
}

.cta__title {
  font-size: var(--text-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.cta__text {
  color: var(--color-inverse-muted);
  font-size: var(--text-base);
  max-width: 34ch;
}

/* Decorative coin cluster, hidden from AT and from narrow viewports where
   it would crowd the copy. */
.cta__decor {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 45%;
  pointer-events: none;
  display: none;
  z-index: -1;
}
.cta__decor svg { width: 100%; height: 100%; }

@media (min-width: 800px) {
  .cta__decor { display: block; }
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-top: clamp(var(--space-12), 5vw, var(--space-16));
  padding-bottom: var(--space-8);
}

.site-footer__grid {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-10));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.site-footer__brand { display: grid; gap: var(--space-4); justify-items: start; }

.site-footer__about {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 26ch;
  line-height: var(--leading-normal);
}

.social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.social__link {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.social__link:hover { background-color: var(--ink-700); transform: translateY(-2px); }
.social__link svg { width: 1rem; height: 1rem; }

.footer-col__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

.footer-col__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.footer-col__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}
.footer-col__link:hover { color: var(--color-text); text-decoration: underline; }

.newsletter__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.newsletter .field__control {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
}
.newsletter .field__message[data-state="error"] { color: var(--signal-down); }
.newsletter .field__message[data-state="success"] { color: var(--ink-700); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.site-footer__legal a:hover { color: var(--color-text); text-decoration: underline; }

/* --- Dashboard details added with the markup ------------------------------ */

.dashboard__nav--foot { margin-top: auto; }

.panel [data-chart] {
  width: 100%;
  height: clamp(6.5rem, 14vw, 8.5rem);
}

.chart__axis {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.panel-row .stack { gap: var(--space-3); align-content: start; }

.trust__label { font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); }

/* Rating pins to the card foot so cards in a row align regardless of
   quote length. */
.quote .rating { margin-top: auto; }

/* --- Build credit ----------------------------------------------------------
   Copyright and the developer credit stack together on the left of the
   footer bar, so the legal links keep their own edge on wide screens and the
   whole bar still wraps cleanly on narrow ones. */

.site-footer__meta {
  display: grid;
  gap: var(--space-1);
}

.site-footer__dev {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
  transition: color var(--duration-base) var(--ease-out),
              text-decoration-color var(--duration-base) var(--ease-out);
}

.site-footer__dev:hover {
  color: var(--ink-700);
  text-decoration-color: currentColor;
}

/* --- Live marker -----------------------------------------------------------
   A dot on the newest reading, with a ring breathing out from it. The ring
   scales about its own centre via transform-box, because the dot moves with
   the data and a fixed transform-origin would leave it behind. */

.chart__pulse { fill: var(--color-accent-strong); }

.chart__pulse-ring {
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .chart__pulse-ring { animation: pulse-ring 2.4s var(--ease-out) infinite; }
}

@keyframes pulse-ring {
  0%   { scale: 0.4; opacity: 0.9; }
  70%  { scale: 1.6; opacity: 0; }
  100% { scale: 1.6; opacity: 0; }
}

/* The headline arrives a line at a time, so each span is its own block. */
.hero__line { display: block; }

/* --- Hero proof ------------------------------------------------------------
   The copy column used to run out well before the phone beside it, leaving it
   centred in a tall gap. This closes that and carries its own information
   rather than restating the figures strip below. */

.hero__proof {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  max-width: 34rem;
}

.hero__proof-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hero__proof-text strong {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.hero__proof-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Figures share a width per digit, so a counting number does not jitter the
   text around it as the digits change. */
.tnum { font-variant-numeric: tabular-nums; }

/* --- Product card figure ---------------------------------------------------- */

.card__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.card__stat-figure {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink-700);
}

.card__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* --- Risk warning ----------------------------------------------------------
   Sits above the footer bar on every page. An <aside> rather than a plain
   paragraph, so it is reachable as a landmark and not lost in the small print
   at the bottom. */

.risk {
  margin-top: clamp(var(--space-10), 5vw, var(--space-12));
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.risk__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-2);
}
.risk__title svg { width: 1rem; height: 1rem; color: var(--ink-700); flex: none; }

.risk__text {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 78ch;
}

/* --- Assurance triple ------------------------------------------------------ */

.assurance {
  display: grid;
  gap: var(--space-5) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.assurance__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
}

.assurance__title { display: block; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.assurance__text {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}