/* ============================================================================
   EPIEME — HOMEPAGE (Alden)

   Modelled on alden.health and the research behind it: sans display type
   with serif accent words, a parchment stage of live product cards, soft
   layered depth, colour fields drawn in CSS, and motion that explains
   (cards arriving, the paper trail filling, the statement darkening as it is
   read) rather than decorates.

   Motion rules: every keyframe animates FROM an offset to the element's
   normal state, so the static page is the end state. Nothing is hidden
   until home.js marks it (.pre, only for things below the fold at load).
   Scroll-linked effects use CSS scroll timelines behind @supports. Loops
   (the hero examples, the ticker) have a visible Pause control. All of it
   sits behind prefers-reduced-motion: no-preference.
   ============================================================================ */

:root {
  --home-canvas: #ffffff;
  --home-parchment: #f3f1eb;
  --home-ink: #28262a;
  --home-graphite: #4a4a4c;
  --home-fog: #dddcdd;
  --home-sky: #97cde5;
  --home-sage: #c8dfaa;
  --home-on-sage: #28262a;
  --home-panel: #28262a;
  --home-panel-text: #f3f1eb;
  --home-panel-muted: #c9c6c0;
  /* Sky as text only at 40px+: this tint is 3.6:1 on white, 3.2:1 on parchment. */
  --home-sky-text: #468fb3;
  --home-line: color-mix(in srgb, var(--home-ink) 9%, transparent);
  --home-control-line: color-mix(in srgb, var(--home-ink) 55%, var(--home-canvas));
  --home-tint: color-mix(in srgb, var(--home-ink) 7%, transparent);
  --home-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --home-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --home-max: 80rem;
  --home-gutter: clamp(16px, 4vw, 40px);
  --home-section: clamp(80px, 10vw, 128px);
  --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Depth: three steps, long and faint (shadows only through these tokens). */
  --home-shadow-1: 0 1px 2px rgb(40 38 42 / 0.05), 0 2px 6px rgb(40 38 42 / 0.04);
  --home-shadow-2: 0 1px 2px rgb(40 38 42 / 0.04), 0 12px 32px -12px rgb(40 38 42 / 0.16);
  --home-shadow-3: 0 8px 6px rgb(0 0 0 / 0.02), -2px 38px 26px rgb(0 0 0 / 0.03), -5px 100px 80px rgb(0 0 0 / 0.06);
  --home-edge: 0 0 0 1px transparent;
  --map-0: color-mix(in srgb, var(--home-ink) 6%, var(--home-canvas));
  --map-1: #bfe3f4;
  --map-2: #97cde5;
  --map-3: #6fb2cf;
  --map-4: #1b637e;
  --map-text: #28262a;
  --map-4-text: #ffffff;
}

[data-theme="dark"] {
  color-scheme: dark;
  --home-canvas: #1a191b;
  --home-parchment: #232124;
  --home-ink: #f3f1eb;
  --home-graphite: #b5b2ad;
  --home-fog: #353236;
  --home-panel: #28262a;
  --home-sky-text: #97cde5;
  --home-shadow-1: none;
  --home-shadow-2: none;
  --home-shadow-3: none;
  --home-edge: 0 0 0 1px #353236, inset 0 1px 0 rgb(255 255 255 / 0.05);
  --map-0: #2a282b;
  --map-1: #1d3a45;
  --map-2: #245466;
  --map-3: #2c6c84;
  --map-4: #97cde5;
  --map-text: #f3f1eb;
  --map-4-text: #28262a;
}

/* ------------------------------------------------------------------ base -- */
html {
  scroll-padding-top: 6rem;
}

body.home-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--home-canvas);
  color: var(--home-ink);
  font-family: var(--home-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

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

:where(.home) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

:where(.home) :where(ul, ol) {
  list-style: none;
}

:where(.home) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.home) a {
  color: inherit;
}

.home :focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--home-ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 10001;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--home-ink);
  color: var(--home-canvas);
  font: 500 16px/1 var(--home-sans);
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--home-max) + 2 * var(--home-gutter));
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

.band {
  padding-block: var(--home-section);
}

.band--parchment {
  background: var(--home-parchment);
}

/* ------------------------------------------------------------------ type -- */
/* Display type is sans (Inter at its display optical size, tight tracking);
   the serif is kept for accent words, the statement, feature titles and the
   story, the way alden.health pairs them. */
.home h1,
.home h2 {
  font-family: var(--home-sans);
  font-weight: 400;
  color: var(--home-ink);
  text-wrap: balance;
}

.home h1 {
  font-size: clamp(2.6rem, 1.45rem + 4.1vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.home h2 {
  font-size: clamp(2.1rem, 1.6rem + 1.7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.home h3 {
  font-family: var(--home-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--home-ink);
  text-wrap: balance;
}

.sky {
  color: var(--home-sky-text);
}

.home h1 .sky {
  font-family: var(--home-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.body-copy {
  max-width: 40rem;
  color: var(--home-graphite);
  font-size: 16px;
  line-height: 1.65;
}

.small {
  color: var(--home-graphite);
  font-size: 14px;
  line-height: 1.45;
}

.text-link {
  color: var(--home-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--home-ink) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.text-link:hover {
  text-decoration-color: var(--home-ink);
}

.text-link--arrow::after {
  content: " \2192";
}

.eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--home-tint);
  color: var(--home-ink);
  font: 600 12px/1.5 var(--home-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.section-head h2 {
  max-width: 18em;
}

.section-head__sub {
  max-width: 34rem;
  color: var(--home-graphite);
  font-size: 17px;
}

.section-head--split {
  align-items: end;
  justify-content: space-between;
}

.section-head--split > div {
  display: grid;
  justify-items: start;
  gap: 16px;
}

@media (min-width: 48em) {
  .section-head--split {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
  }
}

.stamp {
  color: var(--home-graphite);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- actions -- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.actions--center {
  justify-content: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 100px;
  font: 500 16px/1 var(--home-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pill--primary {
  background: var(--home-sage);
  color: var(--home-on-sage);
}

.pill--primary:hover {
  background: color-mix(in srgb, var(--home-sage) 86%, #28262a);
}

.pill--ghost {
  border-color: var(--home-control-line);
  background: transparent;
  color: var(--home-ink);
}

.pill--ghost:hover {
  background: var(--home-tint);
}

.pill__arrow {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

picture.frame {
  display: block;
  overflow: hidden;
  border-radius: 24px;
  background: var(--home-parchment);
}

picture.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chip {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 100px;
  background: var(--home-canvas);
  color: var(--home-ink);
  font: 500 13px/1.3 var(--home-sans);
}

.code {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--home-parchment);
  color: var(--home-ink);
  font: 600 11px/1 var(--home-sans);
  letter-spacing: 0.02em;
}

.tag {
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--home-parchment);
  color: var(--home-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rail span {
  height: 4px;
  border-radius: 100px;
  background: var(--home-fog);
}

.rail span.on {
  background: var(--home-ink);
}

.rail span.on:nth-child(4) {
  background: #8fb866;
}

/* A bill's record, as Radar shows it (HTML, not a screenshot). */
.record {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  background: var(--home-canvas);
  color: var(--home-ink);
  text-align: left;
}

.record__id {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--home-graphite);
  font-size: 13px;
}

.record__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.record__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--home-graphite);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.record__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 36px;
  margin-top: 2px;
  padding: 0 14px;
  border: 1px solid var(--home-control-line);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.record__link:hover {
  background: var(--home-tint);
}

.record__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================================================== hero == */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px);
  overflow: hidden;
}

/* Atmosphere: a dot grid fading out behind the headline and two soft colour
   fields under the stage. Gradients only: no image bytes, no blur filter. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  left: 50%;
  top: 0;
  width: min(90rem, 100%);
  height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--home-ink) 22%, transparent) 0.8px, transparent 1.4px) center / 18px 18px;
  -webkit-mask-image: radial-gradient(50% 55% at 50% 40%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(50% 55% at 50% 40%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
}

.hero::after {
  inset: 38% -8% -4%;
  background:
    radial-gradient(closest-side, rgb(200 223 170 / 0.55), transparent) 8% 70% / 48% 64% no-repeat,
    radial-gradient(closest-side, rgb(151 205 229 / 0.5), transparent) 92% 30% / 46% 60% no-repeat;
}

[data-theme="dark"] .hero::after {
  opacity: 0.35;
}

.hero__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 12em;
}

.hero__sub {
  max-width: 36rem;
  margin-top: 24px;
  color: var(--home-graphite);
  font-size: 18px;
  line-height: 1.55;
}

.hero .actions {
  margin-top: 32px;
}

/* --- the stage: live product cards on parchment, joined by arrows --- */
.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 280px 48px minmax(0, 1.1fr);
  align-items: center;
  gap: 0 12px;
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px);
  overflow: hidden;
  border-radius: 28px;
  background: color-mix(in srgb, var(--home-parchment) 88%, transparent);
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.stage::before {
  top: 0;
  bottom: 0;
  left: 5%;
  right: 5%;
  border-inline: 1px solid var(--home-line);
}

.stage::after {
  left: 0;
  right: 0;
  top: 10%;
  bottom: 10%;
  border-block: 1px solid var(--home-line);
}

.stage__card {
  border-radius: 20px;
  background: var(--home-canvas);
  box-shadow: var(--home-shadow-1), var(--home-edge);
  color: var(--home-ink);
  text-align: left;
}

.stage__label {
  font: 600 11px/1.4 var(--home-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stage__recent {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.stage__recent ol {
  display: grid;
  gap: 8px;
}

.stage__recent li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--home-parchment);
  font-size: 13px;
  line-height: 1.35;
}

.stage__recent li[aria-current="true"] {
  border-color: color-mix(in srgb, var(--home-ink) 18%, transparent);
  background: var(--home-canvas);
}

.stage__recent .code {
  background: var(--home-canvas);
}

.stage__recent li[aria-current="true"] .code {
  background: var(--home-parchment);
}

.stage__recent .what {
  overflow: hidden;
  color: var(--home-graphite);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage__recent .what strong {
  color: var(--home-ink);
  font-weight: 600;
}

.stage__recent time {
  color: var(--home-graphite);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.stage__arrow {
  width: 48px;
  height: 72px;
  fill: none;
  stroke: var(--home-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage__photo {
  position: relative;
}

.stage__frame {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
}

.stage__stamp {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 100px;
  background: rgb(255 255 255 / 0.92);
  color: #28262a;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.stage__stamp .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fb866;
}

.stage__right {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.stage__record {
  box-shadow: var(--home-shadow-2), var(--home-edge);
}

.stage__record[hidden] {
  display: none;
}

.stage__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 4px;
}

.stage__controls[hidden] {
  display: none;
}

.stage__steps {
  display: flex;
  gap: 6px;
}

.stage__step {
  display: grid;
  align-items: center;
  width: 48px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.stage__step span {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 100px;
  background: color-mix(in srgb, var(--home-ink) 16%, transparent);
}

.stage__step span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--home-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.stage__step[aria-current="true"] span::after {
  transform: scaleX(1);
}

.stage__pause,
.motion-toggle {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--home-control-line);
  border-radius: 100px;
  background: var(--home-canvas);
  color: var(--home-ink);
  font: 500 13px/1 var(--home-sans);
  cursor: pointer;
}

.stage__pause[aria-pressed="true"],
.motion-toggle[aria-pressed="true"] {
  border-color: var(--home-ink);
  background: var(--home-ink);
  color: var(--home-canvas);
}

.stage__pause[hidden],
.motion-toggle[hidden] {
  display: none;
}

@media (max-width: 74.99em) {
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "photo right" "recent recent";
    gap: 24px;
    align-items: end;
  }

  .stage__photo { grid-area: photo; }
  .stage__right { grid-area: right; }
  .stage__recent { grid-area: recent; }

  .stage__arrow {
    display: none;
  }
}

@media (max-width: 47.99em) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "right" "recent";
    gap: 16px;
    padding: 16px;
  }

  .stage::before,
  .stage::after {
    display: none;
  }

  .stage__frame {
    aspect-ratio: 1 / 1;
  }

  .stage__stamp {
    bottom: auto;
    top: 12px;
  }

  .stage__right {
    margin-top: -88px;
    padding-inline: 10px;
  }

  .record {
    padding: 18px;
  }

  .record__title {
    font-size: 16px;
  }
}

/* ================================================================ ticker == */
.ticker-band {
  padding-top: clamp(8px, 2vw, 24px);
}

.ticker-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 14px;
}

.home .ticker-band__title {
  font: 600 15px/1.4 var(--home-sans);
  letter-spacing: 0;
}

.ticker-band__head .small {
  flex: 1 1 auto;
}

.ticker {
  position: relative;
  border-block: 1px solid var(--home-fog);
}

.ticker__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__viewport::-webkit-scrollbar {
  display: none;
}

.ticker__viewport:focus-visible {
  outline: 2px solid var(--home-ink);
  outline-offset: -2px;
}

.ticker__track {
  display: flex;
  width: max-content;
}

.ticker__list {
  display: flex;
}

.ticker__list--copy {
  display: none;
}

.ticker__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-right: 1px solid var(--home-fog);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

.ticker__list .act {
  color: var(--home-graphite);
}

.ticker__list time {
  color: var(--home-graphite);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== partners == */
.partners {
  padding-block: clamp(48px, 7vw, 80px) 0;
}

.partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 0;
}

.partners__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  padding-inline: 40px;
}

.partners__group + .partners__group {
  border-left: 1px solid var(--home-fog);
}

.partners__label {
  color: var(--home-graphite);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partners__group ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 40px;
}

.partner {
  display: flex;
  align-items: center;
  gap: 12px;
  filter: grayscale(1);
  opacity: 0.85;
}

.partner:hover {
  filter: none;
  opacity: 1;
}

.partner img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.partner .roux {
  width: auto;
  height: 44px;
  border-radius: 0;
}

[data-theme="dark"] .partner .roux {
  filter: invert(1);
}

.partner strong {
  display: block;
  color: var(--home-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.partner small {
  display: block;
  color: var(--home-graphite);
  font-size: 13px;
  line-height: 1.3;
}

.partner--data strong {
  font-size: 26px;
  letter-spacing: -0.02em;
}

@media (max-width: 47.99em) {
  .partners__group {
    padding-inline: 0;
  }

  .partners__group + .partners__group {
    border-left: 0;
  }
}

/* ================================================================= about == */
.about {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.about::after {
  content: "";
  position: absolute;
  inset: 0 -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 30% at 62% 46%, rgb(200 223 170 / 0.3), transparent 70%),
    radial-gradient(26% 24% at 34% 60%, rgb(151 205 229 / 0.22), transparent 72%);
}

[data-theme="dark"] .about::after {
  opacity: 0.4;
}

.about__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 32px;
  padding-block: clamp(16px, 8vw, 132px);
  text-align: center;
}

.statement {
  max-width: 21em;
  font-family: var(--home-serif);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.statement a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.12em;
}

.faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.face {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--home-parchment);
}

.face__img,
.face__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.float-chip {
  padding: 6px 14px;
  border-radius: 100px;
  color: #28262a;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.float-chip--sky { background: #97cde5; }
.float-chip--sage { background: #c8dfaa; }
.float-chip--paper { background: var(--home-parchment); box-shadow: inset 0 0 0 1px var(--home-fog); }

@media (max-width: 37.49em) {
  .float-chip {
    display: none;
  }
}

@media (min-width: 64em) {
  .faces {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .face,
  .float-chip {
    position: absolute;
    margin: 0;
  }

  .face {
    box-shadow: var(--home-shadow-2);
  }

  .face--1 { top: 8%;  left: 7%;   width: 96px; height: 96px; }
  .face--2 { bottom: 8%; right: 8%; width: 80px; height: 80px; }
  .face--3 { top: 6%; right: 22%; width: 64px; height: 64px; }

  .float-chip--sky { bottom: 14%; left: 14%; }
  .float-chip--paper { top: 16%; left: 28%; }
  .float-chip--sage { bottom: 4%; right: 26%; }
}

/* ============================================================== features == */
.features__grid {
  display: grid;
  gap: 48px;
}

.features__intro-inner {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.steps {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  counter-reset: step;
}

.steps a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 14px;
  border-left: 2px solid transparent;
  color: var(--home-graphite);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.steps a span {
  color: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.steps a:hover {
  color: var(--home-ink);
}

.steps a[aria-current="step"] {
  border-left-color: #8fb866;
  color: var(--home-ink);
}

.features__list {
  display: grid;
  gap: clamp(48px, 7vw, 80px);
}

.feature {
  display: grid;
  gap: 20px;
}

.feature__text {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.art {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 24px;
  background: var(--home-parchment);
}

.art--dark {
  background: var(--home-panel);
}

.art__bg {
  position: absolute;
  inset: 0;
}

.art__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 64em) {
  .features__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 80px;
  }

  .features__intro {
    position: sticky;
    top: 0;
    align-self: start;
    display: grid;
    align-content: center;
    min-height: 100svh;
    padding-block: 8rem 2rem;
  }
}

/* Stacked cards: each step pins and the next slides over it. */
@media (min-width: 64em) and (min-height: 46em) {
  .features__list {
    gap: 6vh;
  }

  .feature {
    position: sticky;
    top: calc(7.5rem + (var(--k, 0) * 14px));
    padding: 20px 20px 28px;
    border-radius: 28px;
    background: var(--home-canvas);
    box-shadow: var(--home-shadow-3), var(--home-edge);
  }

  .feature[data-step="1"] { --k: 0; }
  .feature[data-step="2"] { --k: 1; }
  .feature[data-step="3"] { --k: 2; }
  .feature[data-step="4"] { --k: 3; }

  .feature .art {
    aspect-ratio: 16 / 11;
  }

  .feature__text {
    padding-inline: 8px;
  }
}

/* --- product cards inside the art: big, readable, bleeding off an edge --- */
.ui-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: 84%;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--home-canvas);
  box-shadow: var(--home-shadow-3), inset 0 0 0 1px rgb(255 255 255 / 0.6), var(--home-edge);
  color: var(--home-ink);
  font-size: 15px;
  line-height: 1.45;
}

.ui-card__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-card__label span {
  color: var(--home-graphite);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ui-card__foot {
  color: var(--home-graphite);
  font-size: 13px;
}

.ui-history {
  place-self: end start;
  margin: 0 0 -24px 32px;
  padding-bottom: 44px;
}

.ui-history ol {
  display: grid;
  margin-left: 4px;
  border-left: 1px solid var(--home-fog);
}

.ui-history li {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0 8px 18px;
}

.ui-history li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-fog);
}

.ui-history li:last-child::before {
  background: #8fb866;
  box-shadow: 0 0 0 3px rgb(143 184 102 / 0.25);
}

.ui-history time {
  color: var(--home-graphite);
  font-variant-numeric: tabular-nums;
}

/* Phones: the email example would be cut mid-line at the art's edge, and
   the copy beside it already says weekly or monthly. */
@media (max-width: 47.99em) {
  .ui-digest .ui-card__foot {
    display: none;
  }
}

.ui-relevance {
  place-self: start end;
  margin: 32px -24px 0 0;
  padding-right: 48px;
}

.ui-relevance ul {
  display: grid;
  gap: 10px;
}

.ui-relevance li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--home-parchment);
}

.ui-relevance .who {
  display: grid;
  min-width: 0;
}

.ui-relevance .who span {
  overflow: hidden;
  color: var(--home-graphite);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-relevance .score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.meter {
  position: relative;
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 100px;
  background: var(--home-fog);
}

.meter .fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: var(--home-ink);
}

.meter .mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--home-sky-text);
}

.ui-digest {
  place-self: end center;
  width: 88%;
  margin-bottom: -24px;
  padding-bottom: 44px;
}

.ui-digest__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--home-fog);
  color: var(--home-graphite);
  font-size: 13px;
}

.ui-digest__chrome strong {
  color: var(--home-ink);
  font-weight: 600;
}

.ui-digest__chrome .mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--home-ink);
  color: var(--home-canvas);
  font-family: var(--home-serif);
  font-size: 15px;
}

.ui-digest__chrome .when {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--home-parchment);
  font-size: 12px;
}

.ui-digest__subject {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.ui-digest ul {
  display: grid;
}

.ui-digest li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding-block: 11px;
  border-bottom: 1px solid var(--home-fog);
}

.ui-digest li span {
  overflow: hidden;
  color: var(--home-graphite);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-digest time {
  color: var(--home-graphite);
  font-variant-numeric: tabular-nums;
}

.ui-map {
  display: grid;
  align-content: center;
  gap: 18px;
  width: 100%;
  padding: clamp(20px, 4vw, 44px);
}

.ui-map__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.ui-map .t {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--map-0);
  color: var(--map-text);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}

.ui-map a.t:hover {
  outline: 2px solid var(--home-ink);
  outline-offset: 1px;
}

.ui-map .t1 { background: var(--map-1); }
.ui-map .t2 { background: var(--map-2); }
.ui-map .t3 { background: var(--map-3); }
.ui-map .t4 { background: var(--map-4); color: var(--map-4-text); }

.ui-map__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--home-graphite);
  font-size: 12px;
}

.ui-map__key .t {
  display: inline-block;
  width: 12px;
  margin-left: 8px;
}

.ui-map__key .t:first-child {
  margin-left: 0;
}

@media (max-width: 37.49em) {
  .ui-card {
    width: 90%;
    padding: 16px 18px;
    font-size: 14px;
  }

  .ui-history {
    margin-left: 16px;
  }

  .ui-map__grid {
    gap: 2px;
  }

  .ui-map .t {
    border-radius: 4px;
    font-size: 10px;
  }
}

/* ============================================================== coverage == */
/* Faint blueprint lines across the band, like the reference's stats block. */
.coverage {
  background:
    linear-gradient(var(--home-line), var(--home-line)) 7% 0 / 1px 100% no-repeat,
    linear-gradient(var(--home-line), var(--home-line)) 93% 0 / 1px 100% no-repeat,
    linear-gradient(var(--home-line), var(--home-line)) 0 33% / 100% 1px no-repeat,
    var(--home-parchment);
}

.bento {
  display: grid;
  gap: 16px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--home-shadow-1), var(--home-edge);
}

.home .tile h3 {
  font-family: var(--home-sans);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: inherit;
}

.tile__fig {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(3rem, 2.2rem + 2.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.tile--dark .tile__fig {
  font-size: clamp(4rem, 2.6rem + 4.6vw, 7.5rem);
}

.tile > p,
.tile__text > p {
  max-width: 28rem;
  font-size: 15px;
  line-height: 1.55;
}

.tile--dark {
  background: var(--home-panel);
  color: var(--home-panel-text);
}

.tile--dark > p {
  color: var(--home-panel-muted);
}

.tile__art {
  position: relative;
  margin: auto calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)) 0;
  padding: 24px 0 0 0;
}

.record--dark {
  width: min(92%, 460px);
  margin-left: auto;
  border-bottom-right-radius: 0;
  border-top-right-radius: 20px;
  box-shadow: var(--home-shadow-3);
}

.tile--sage {
  background: var(--home-sage);
  color: #28262a;
}

.tile--sky {
  background: var(--home-sky);
  color: #28262a;
}

.tile--light {
  background: var(--home-canvas);
  color: var(--home-ink);
}

.tile--light p {
  color: var(--home-graphite);
}

/* Recently passed (sage tile): three rows bleeding off the right edge. */
.mini-list {
  margin: auto calc(-1 * clamp(24px, 3vw, 40px)) 0 0;
  padding: 14px;
  border-radius: 16px 0 0 16px;
  background: rgb(255 255 255 / 0.55);
  color: #28262a;
}

.mini-list__label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
  border-top: 1px solid rgb(40 38 42 / 0.1);
  font-size: 14px;
}

.mini-list .code {
  background: #ffffff;
  color: #28262a;
}

.mini-list time {
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* 51 legislatures as dots: filled with a tracked bill, ringed without. */
.dots-grid {
  display: grid;
  grid-template-columns: repeat(13, 12px);
  gap: 8px;
  margin-top: auto;
}

.dots-grid i {
  width: 12px;
  height: 12px;
  border: 1.5px solid #28262a;
  border-radius: 50%;
}

.dots-grid i.on {
  background: #28262a;
}

/* Actions per month (white tile). */
.chart {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.chart__bars {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 132px;
}

.chart__bars li {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: 6px;
}

.chart__bars .bar {
  align-self: end;
  height: var(--h);
  min-height: 2px;
  border-radius: 4px 4px 1px 1px;
  background: var(--home-sky-text);
}

.chart__bars .peak .bar {
  background: var(--home-ink);
}

.chart__bars .m {
  color: var(--home-graphite);
  font-size: 11px;
  text-align: center;
}

.chart figcaption {
  color: var(--home-graphite);
  font-size: 13px;
}

@media (min-width: 48em) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--dark,
  .tile--light {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .bento {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .tile--dark {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .tile--light {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 32px;
  }
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 5vw, 56px);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--home-canvas);
  box-shadow: var(--home-shadow-1), var(--home-edge);
  font-size: 14px;
  line-height: 1.3;
}

.facts svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================= audiences == */
.audiences {
  display: grid;
  gap: 24px;
}

.audiences:focus-visible {
  outline: 2px solid var(--home-ink);
  outline-offset: 4px;
}

.aud {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  height: 100%;
  padding: 10px 10px 24px;
  border-radius: 24px;
  background: var(--home-parchment);
}

/* DOM order is photo, heading, line, chip, link, so the heading comes before
   the chip for screen readers; the grid lays the chip over the photo. The
   card's link covers the whole card. */
.aud .frame {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  border-radius: 16px;
}

.aud .chip {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  max-width: calc(100% - 24px);
  margin: 0 12px 20px;
  box-shadow: var(--home-shadow-2);
}

.aud h3,
.aud p,
.aud .text-link {
  margin-inline: 10px;
}

.home .aud h3 {
  font-size: 24px;
}

.aud p {
  color: var(--home-graphite);
  font-size: 15px;
  line-height: 1.55;
}

.aud .text-link {
  justify-self: start;
}

.aud .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
}

.aud:has(.text-link:focus-visible) {
  outline: 2px solid var(--home-ink);
  outline-offset: 3px;
}

.aud .text-link:focus-visible {
  outline: none;
}

.aud--families img { object-position: 50% 62%; }
.aud--advocates img { object-position: 58% 50%; }
.aud--clinicians img { object-position: 55% 50%; }
.aud--policy img { object-position: 60% 55%; }

@media (max-width: 37.49em) {
  /* Phones: a swipeable row instead of four stacked cards. */
  .audiences {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px;
    margin-inline: calc(-1 * var(--home-gutter));
    padding: 4px var(--home-gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--home-gutter);
    scrollbar-width: none;
  }

  .audiences > li {
    scroll-snap-align: start;
  }
}

@media (min-width: 37.5em) {
  .audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .audiences {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ================================================================= story == */
.story {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: 0;
}

.story::after {
  content: "";
  position: absolute;
  inset: -10% -10% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(30% 34% at 70% 50%, rgb(151 205 229 / 0.28), transparent 72%);
}

.story__grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.story__photo {
  width: min(100%, 380px);
  aspect-ratio: 4 / 5;
  box-shadow: var(--home-shadow-2);
}

.story__body {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.home .story__label {
  font: 600 12px/1.5 var(--home-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-graphite);
}

.story__text p {
  max-width: 22em;
  font-family: var(--home-serif);
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
}

.story__by {
  color: var(--home-graphite);
  font-size: 15px;
}

.story__by strong {
  color: var(--home-ink);
  font-weight: 600;
}

@media (min-width: 48em) {
  .story__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 88px);
  }
}

/* =================================================================== faq == */
.faq {
  padding-top: 0;
}

.faq__grid {
  display: grid;
  gap: 32px;
}

.faq__intro {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 16px;
}

.faq__more a {
  color: var(--home-ink);
}

.faq__list {
  display: grid;
  gap: 12px;
}

.faq__list details {
  border-radius: 16px;
  background: var(--home-canvas);
  box-shadow: var(--home-shadow-3), var(--home-edge);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__list summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.faq__list details[open] summary::after {
  margin-top: 5px;
  transform: rotate(-135deg);
}

.home .faq__list h3 {
  font-family: var(--home-sans);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.faq__list details p {
  max-width: 40rem;
  padding: 0 24px 24px;
  color: var(--home-graphite);
  font-size: 16px;
  line-height: 1.65;
}

@media (min-width: 64em) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 64px;
  }

  .faq__intro {
    position: sticky;
    top: 9rem;
    align-self: start;
  }
}

/* =============================================================== closing == */
.closing {
  padding-block: 0 clamp(48px, 7vw, 96px);
}

.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(56px, 8vw, 112px) clamp(24px, 6vw, 96px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(32% 75% at 0% 30%, rgb(255 255 255 / 0.1), transparent 70%),
    radial-gradient(34% 80% at 100% 90%, rgb(255 255 255 / 0.12), transparent 70%),
    radial-gradient(28% 50% at 8% 100%, rgb(200 223 170 / 0.22), transparent 70%),
    radial-gradient(28% 50% at 92% 0%, rgb(151 205 229 / 0.18), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 19% 0 / 1px 100% no-repeat,
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 81% 0 / 1px 100% no-repeat,
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 0 15% / 100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 0 85% / 100% 1px no-repeat,
    var(--home-panel);
  color: var(--home-panel-text);
  text-align: center;
}

[data-theme="dark"] .cta {
  box-shadow: var(--home-edge);
}

.home .cta h2 {
  max-width: 15em;
  color: #ffffff;
}

.cta__line {
  max-width: 34rem;
  color: var(--home-panel-muted);
  font-size: 17px;
}

.cta__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.cta__select {
  position: relative;
  display: inline-flex;
}

.cta__select select {
  min-width: 240px;
  height: 48px;
  padding: 0 44px 0 20px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 100px;
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
  font: 500 16px/1 var(--home-sans);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.cta__select select option {
  color: #28262a;
}

.cta__select::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: rotate(45deg);
  pointer-events: none;
}

.cta__preview {
  min-height: 1.5em;
  color: var(--home-panel-muted);
  font-size: 15px;
}

.cta :focus-visible {
  outline-color: #ffffff;
}

@media (max-width: 37.49em) {
  .hero .actions {
    flex-direction: column;
    align-self: stretch;
  }

  .cta__form,
  .cta__select,
  .cta__select select,
  .cta__form .pill {
    width: 100%;
  }
}

/* ============================================================== no-js ==== */
.home-noscript-nav,
.home-noscript-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px var(--home-gutter);
  border-bottom: 1px solid var(--home-fog);
  font-family: var(--home-sans);
  font-size: 15px;
}

.home-noscript-footer {
  border-top: 1px solid var(--home-fog);
  border-bottom: 0;
}

.home-noscript-nav a,
.home-noscript-footer a {
  color: var(--home-ink);
}

/* ================================================================ motion == */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* --- hover and press --- */
  .pill,
  .text-link,
  .record__link,
  .partner {
    transition: background-color 160ms ease, text-decoration-color 160ms ease, filter 200ms ease, opacity 200ms ease, transform 80ms ease;
  }

  .pill:active {
    transform: scale(0.98);
  }

  .pill__arrow {
    transition: transform 220ms var(--home-ease);
  }

  .pill:hover .pill__arrow {
    transform: translateX(3px);
  }

  .aud {
    transition: transform 260ms var(--home-ease), box-shadow 260ms var(--home-ease);
  }

  .aud:hover {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow-2);
  }

  .aud .frame img {
    transition: transform 900ms var(--home-ease);
  }

  .aud:hover .frame img {
    transform: scale(1.04);
  }

  .faq__list summary::after {
    transition: transform 300ms var(--home-ease);
  }

  :root {
    interpolate-size: allow-keywords;
  }

  .faq__list details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 380ms var(--home-ease), content-visibility 380ms allow-discrete;
  }

  .faq__list details[open]::details-content {
    block-size: auto;
  }

  /* --- hero intro: plays once, transforms only, so the photo (LCP) and the
     headline paint on the first frame --- */
  .hero__sub,
  .hero .actions {
    animation: home-rise 900ms var(--home-ease) both;
  }

  .hero__sub { animation-delay: 80ms; }
  .hero .actions { animation-delay: 160ms; }

  .hero h1 .sky {
    background: linear-gradient(var(--home-sky), var(--home-sky)) 0 94% / 100% 0.1em no-repeat;
    animation: home-underline 900ms var(--home-ease) 500ms both;
  }

  .stage {
    animation: home-rise 1000ms var(--home-ease) 120ms both;
  }

  .stage__recent,
  .stage__photo,
  .stage__right {
    animation: home-rise-sm 900ms var(--home-ease) both;
  }

  .stage__recent { animation-delay: 260ms; }
  .stage__photo { animation-delay: 360ms; }
  .stage__right { animation-delay: 460ms; }

  .stage__recent li {
    animation: home-rise-row 600ms var(--home-ease) both;
  }

  .stage__recent li:nth-child(1) { animation-delay: 520ms; }
  .stage__recent li:nth-child(2) { animation-delay: 640ms; }
  .stage__recent li:nth-child(3) { animation-delay: 760ms; }

  .stage__arrow path {
    stroke-dasharray: 120;
    animation: home-draw 700ms var(--home-ease) 700ms both;
  }

  .stage__arrow:nth-of-type(2) path {
    animation-delay: 1100ms;
  }

  .stage__record:not([hidden]) .rail span.on {
    transform-origin: left center;
    animation: home-fill 420ms var(--home-ease) both;
  }

  .stage__record .rail span:nth-child(1) { animation-delay: 1300ms; }
  .stage__record .rail span:nth-child(2) { animation-delay: 1420ms; }
  .stage__record .rail span:nth-child(3) { animation-delay: 1540ms; }
  .stage__record .rail span:nth-child(4) { animation-delay: 1660ms; }

  /* Cycling: the next record comes into focus (home.js swaps them). */
  .stage.is-cycling .stage__record.is-entering {
    animation: home-focus 700ms var(--home-ease) both;
  }

  .stage.is-cycling .stage__record.is-entering .rail span.on {
    animation: home-fill 420ms var(--home-ease) both;
  }

  .stage.is-cycling .stage__step[aria-current="true"] span::after {
    animation: home-progress var(--scene, 7000ms) linear both;
  }

  .stage.is-paused .stage__step[aria-current="true"] span::after,
  [data-motion="paused"] .stage__step[aria-current="true"] span::after {
    animation: none;
  }

  /* --- below the fold: revealed once as it scrolls in (home.js adds .pre
     only to things that start off-screen, then .is-in) --- */
  .pre {
    opacity: 0;
    translate: 0 40px;
  }

  .is-in {
    transition: opacity 900ms var(--home-ease) var(--d, 0ms), translate 900ms var(--home-ease) var(--d, 0ms);
  }

  [data-reveal="1"] { --d: 90ms; }
  [data-reveal="2"] { --d: 180ms; }
  [data-reveal="3"] { --d: 270ms; }
  [data-reveal="4"] { --d: 360ms; }

  /* --- the ticker keeps moving, slowly; hover, focus or Pause stops it --- */
  .ticker.is-moving .ticker__viewport {
    overflow: hidden;
  }

  .ticker.is-moving .ticker__list--copy {
    display: flex;
  }

  .ticker.is-moving .ticker__track {
    animation: home-ticker 90s linear infinite;
  }

  .ticker.is-moving:hover .ticker__track,
  .ticker.is-moving:focus-within .ticker__track,
  .ticker.is-offscreen .ticker__track,
  [data-motion="paused"] .ticker__track {
    animation-play-state: paused;
  }

  /* --- scroll-linked, where the browser supports scroll timelines --- */
  @supports (animation-timeline: view()) {
    /* The statement darkens word by word as it is read. Words start at a 56%
       ink mix (about 3.4:1), so the unread part still passes for large text. */
    @media (not (prefers-contrast: more)) {
      .statement .w {
        animation: home-ink linear both;
        animation-timeline: --statement;
        animation-range: cover calc(18% + var(--i) * 0.9%) cover calc(30% + var(--i) * 0.9%);
      }

      .statement {
        view-timeline: --statement block;
      }
    }

    /* "How it works": the cards stick as they stack, and a stuck element's
       view timeline stops advancing, so everything in a card runs on the
       card's own timeline and ends within 540px of travel. Cards only stick
       on viewports 46em (736px) tall or more, at most 162px from the top, so
       each has travelled at least 574px before it sticks. */
    .feature {
      view-timeline: --card block;
    }

    .art {
      animation: home-settle linear both;
      animation-timeline: --card;
      animation-range: cover 0px cover 480px;
    }

    .art .ui-card,
    .art .ui-map {
      animation: home-lift linear both;
      animation-timeline: --card;
      animation-range: cover 60px cover 520px;
    }

    .art__bg img {
      animation: home-zoom linear both;
      animation-timeline: --card;
      animation-range: cover 0px cover 520px;
    }

    .meter .fill {
      transform-origin: left center;
      animation: home-fill linear both;
      animation-timeline: --card;
      animation-range: cover 240px cover 520px;
    }

    .ui-map .t {
      animation: home-pop linear both;
      animation-timeline: --card;
      animation-range: cover calc(200px + var(--c, 0) * 24px) cover 540px;
    }

    .chart__bars .bar {
      transform-origin: bottom center;
      animation: home-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    .record--dark,
    .mini-list {
      animation: home-lift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    @media (min-width: 64em) {
      .face,
      .float-chip {
        animation: home-drift linear both;
        animation-timeline: view();
        animation-range: cover;
      }

      .face--1 { --depth: 1; }
      .face--2 { --depth: -0.8; }
      .face--3 { --depth: 0.6; }
      .float-chip--sky { --depth: -0.5; }
      .float-chip--paper { --depth: 0.9; }
      .float-chip--sage { --depth: -1; }
    }
  }
}

@keyframes home-rise { from { translate: 0 28px; } }
@keyframes home-rise-sm { from { translate: 0 18px; } }
@keyframes home-rise-row { from { translate: -12px 0; } }
@keyframes home-draw { from { stroke-dashoffset: 120; } }
@keyframes home-fill { from { transform: scaleX(0); } }
@keyframes home-grow { from { transform: scaleY(0.04); } }
@keyframes home-underline { from { background-size: 0% 0.1em; } }
@keyframes home-focus { from { opacity: 0; scale: 0.97; filter: blur(6px); } }
@keyframes home-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes home-ticker { to { transform: translateX(-50%); } }
@keyframes home-ink { from { color: color-mix(in srgb, var(--home-ink) 56%, var(--home-canvas)); } }
@keyframes home-settle { from { scale: 0.94; } }
@keyframes home-lift { from { translate: 0 56px; } }
@keyframes home-zoom { from { scale: 1.12; } to { scale: 1; } }
@keyframes home-pop { from { scale: 0.4; } }
@keyframes home-drift {
  from { translate: 0 calc(var(--depth, 0) * 48px); }
  to { translate: 0 calc(var(--depth, 0) * -48px); }
}

@media print {
  .pre {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* ======================================================== forced colors == */
@media (forced-colors: active) {
  .pill,
  .tag,
  .chip,
  .code,
  .eyebrow,
  .float-chip,
  .faq__list details,
  .stage__card,
  .record,
  .ui-card {
    border: 1px solid CanvasText;
  }

  .rail span,
  .meter,
  .meter .fill,
  .dots-grid i,
  .chart__bars .bar,
  .ui-map .t {
    forced-color-adjust: none;
  }
}