.hero {
  /* 25% less than the original clamp(3.6rem, 8vw, 5.6rem). The stack's min-height
     subtracts these same vars, so the hero stays exactly 100svh and the
     bottom-anchored skyline does not move. */
  --hero-padding-top: clamp(2.7rem, 6vw, 4.2rem);
  --hero-padding-bottom: clamp(3.2rem, 7vw, 5.2rem);
  /* The content is centered in a 1fr row that absorbs whatever the padding
     gives up, so trimming padding only moves it half as far. The padding cut
     above is worth ~14px; this lift supplies the rest of the ~80px. It is
     capped against viewport height so short screens never push the title
     under the sticky header. */
  --hero-content-lift: min(3.2rem, 7.5svh);
  position: relative;
  min-height: 100svh;
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
  display: grid;
  overflow: clip;
}

@media (max-height: 36rem) {
  .hero {
    --hero-content-lift: 0rem;
  }
}

body[data-page="home"] {
  --font-display: "Montserrat", "Segoe UI", sans-serif;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.6;
  pointer-events: none;
}

.hero::before {
  top: 0;
  left: 50%;
  width: min(78vw, 46.4rem);
  height: 14.4rem;
  background: color-mix(in oklch, var(--color-accent-600) 34%, white);
  transform: translateX(-50%);
}

.hero::after {
  top: 5.6rem;
  right: -4.8rem;
  width: 14.4rem;
  height: 14.4rem;
  background: color-mix(in oklch, var(--color-accent-100) 75%, white);
}

.hero__stack {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--hero-padding-top) - var(--hero-padding-bottom));
  grid-template-rows: 1fr auto;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}

.site-shell--hero {
  width: min(100% - 1.6rem, 68.8rem);
}

.hero__content {
  display: grid;
  gap: 1.08rem;
  align-self: center;
  /* `translate` rather than `transform` so it cannot clash with the hero
     reveal animation's transforms on the child elements. */
  translate: 0 calc(-1 * var(--hero-content-lift));
}

.hero__content--center {
  justify-items: center;
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}

.hero__eyebrow {
  padding: 0.52rem 0.8rem;
  border: 1px solid color-mix(in oklch, var(--color-line) 70%, white);
  border-radius: 999px;
  background: color-mix(in oklch, white 78%, var(--color-accent-050));
}

.hero__eyebrow::before {
  display: none;
}

.hero__title {
  max-width: 16ch;
  display: grid;
  gap: 0.02em;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

.hero__title-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18em;
}

.hero__title-word-mask {
  display: inline-flex;
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
  /* The negative letter-spacing is applied after the final character too, so a
     word's box ends inside where its last glyph actually inks. Without this
     horizontal breathing room the mask shaves round terminals ("Solutions").
     Padding and margin cancel out, so layout width is unchanged. */
  padding-inline: 0.09em;
  margin-inline: -0.09em;
}

.hero__title-word {
  display: inline-block;
}

.hero__summary {
  max-width: 36.8rem;
}

.hero__summary--center {
  margin-inline: auto;
  max-width: 33.6rem;
}

.hero__actions,
.hero__metrics {
  justify-content: center;
}

.hero__button {
  box-shadow: 0 14px 28px oklch(28% 0.025 247 / 0.08);
  will-change: transform;
}

.hero__button:hover,
.hero__button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px oklch(28% 0.03 247 / 0.12);
}

.hero__button:active {
  transform: translateY(0);
}

.hero__visual-wrap {
  position: relative;
  display: grid;
  gap: 1rem;
  width: min(100%, 62.4rem);
  margin-inline: auto;
}

.hero__video-frame {
  position: relative;
  padding: clamp(0.68rem, 0.64rem + 0.5vw, 0.96rem);
  border-radius: clamp(1rem, 2vw, 1.6rem);
  background:
    linear-gradient(180deg, color-mix(in oklch, white 72%, var(--color-accent-100)), white 50%),
    var(--color-surface-000);
  box-shadow:
    0 30px 90px oklch(36% 0.05 247 / 0.14),
    inset 0 0 0 1px color-mix(in oklch, white 70%, var(--color-line));
}

.hero__video-topbar,
.hero__panel-head,
.hero__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.hero__video-topbar {
  padding: 0.2rem 0.16rem 0.8rem;
}

.hero__window-dots {
  display: inline-flex;
  gap: 0.28rem;
}

.hero__window-dots span {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-ink-700) 18%, white);
}

.hero__panel-label {
  color: var(--color-ink-500);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__video-stage {
  position: relative;
}

.hero__video-placeholder {
  position: relative;
  min-height: 16.8rem;
  border-radius: calc(var(--radius-lg) + 0.16rem);
  background:
    radial-gradient(circle at 20% 75%, color-mix(in oklch, var(--color-accent-600) 30%, transparent), transparent 17.6rem),
    linear-gradient(135deg, oklch(82% 0.08 236), oklch(90% 0.05 70), oklch(80% 0.1 20));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 20%, transparent);
}

.hero__video-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 0 78%, color-mix(in oklch, black 8%, transparent)),
    linear-gradient(90deg, transparent 18%, color-mix(in oklch, white 22%, transparent) 48%, transparent 80%);
  pointer-events: none;
}

.hero__floating-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.36rem;
  max-width: min(14.4rem, 42vw);
  padding: 0.76rem 0.8rem;
  border: 1px solid color-mix(in oklch, white 35%, var(--color-line));
  border-radius: 0.96rem;
  background: color-mix(in oklch, white 82%, var(--color-accent-050));
  box-shadow: 0 20px 55px oklch(34% 0.04 247 / 0.12);
  backdrop-filter: blur(18px);
}

.hero__floating-card--prompt {
  top: 0.96rem;
  right: clamp(0.56rem, 2vw, 1.6rem);
  animation: hero-float 8s ease-in-out infinite;
}

.hero__floating-card--stat {
  left: clamp(0.56rem, 2vw, 1.6rem);
  bottom: 1.04rem;
  animation: hero-float 9s ease-in-out infinite reverse;
}

.hero__floating-card--accuracy {
  left: clamp(0.72rem, 2vw, 1.6rem);
  bottom: 0.92rem;
  width: min(16.8rem, calc(100% - 1.6rem));
  max-width: none;
  padding: 0.68rem 0.72rem 0.8rem;
  border-color: color-mix(in oklch, white 22%, var(--color-line));
  background:
    linear-gradient(180deg, color-mix(in oklch, white 94%, var(--color-accent-050)), color-mix(in oklch, white 89%, var(--color-accent-100)));
  box-shadow:
    0 24px 55px oklch(32% 0.04 247 / 0.13),
    0 1px 0 color-mix(in oklch, white 88%, transparent) inset;
}

.hero__floating-label {
  color: var(--color-accent-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-accuracy-card {
  gap: 0.64rem;
}

.hero-accuracy-card__topline,
.hero-accuracy-card__item {
  display: flex;
  align-items: center;
}

.hero-accuracy-card__topline {
  gap: 0.44rem;
}

.hero-accuracy-card__spark {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklch, white 88%, var(--color-accent-500)) 0 0.096rem, transparent 0.112rem),
    linear-gradient(90deg, transparent 46%, color-mix(in oklch, var(--color-ink-500) 20%, white) 46% 54%, transparent 54%),
    linear-gradient(transparent 46%, color-mix(in oklch, var(--color-ink-500) 20%, white) 46% 54%, transparent 54%);
  opacity: 0.85;
}

.hero-accuracy-card__line {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklch, white 22%, var(--color-line));
}

.hero-accuracy-card__line--short {
  width: 3.6rem;
}

.hero-accuracy-card__identity {
  display: grid;
  gap: 0.16rem;
  padding-bottom: 0.12rem;
  border-bottom: 1px solid color-mix(in oklch, white 28%, var(--color-line));
}

.hero-accuracy-card__name {
  color: var(--color-ink-900);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 0.76rem + 0.15vw, 0.88rem);
  font-weight: 700;
  line-height: 1.1;
}

.hero-accuracy-card__meta,
.hero-accuracy-card__label {
  color: var(--color-ink-500);
  font-size: 0.592rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-accuracy-card__list {
  display: grid;
  gap: 0.52rem;
}

.hero-accuracy-card__item {
  gap: 0.64rem;
}

.hero-accuracy-card__ring {
  --hero-accuracy-card-angle: calc(var(--hero-accuracy-card-progress) * 1turn);
  position: relative;
  flex: 0 0 2.16rem;
  width: 2.16rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in oklch, white 98%, var(--color-accent-050)) 67%, transparent 69% 100%),
    conic-gradient(
      color-mix(in oklch, var(--color-accent-600) 84%, white) var(--hero-accuracy-card-angle),
      color-mix(in oklch, var(--color-accent-100) 78%, white) 0
    );
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 52%, var(--color-line));
}

.hero-accuracy-card__ring span {
  color: var(--color-accent-700);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-accuracy-card__field {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.hero-accuracy-card__value {
  color: var(--color-ink-800);
  font-size: 0.784rem;
  font-weight: 500;
  line-height: 1.15;
}

/* Indianapolis skyline sitting behind the hero. The artwork is a hard-edged
   rectangle, so it is masked with a radial falloff that fades every edge to
   nothing — against the near-white page that reads as a feather to white. */
.hero__skyline {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  /* Scaled up on narrow screens: at the desktop ratio the skyline shrinks to a
     band of unreadable specks, so phones get a tighter, larger crop. */
  width: max(165%, 16.8rem);
  aspect-ratio: 1024 / 572;
  transform: translateX(-50%);
  background-image: url("../images/homepage/indianapolis-skyline.png");
  background-image: image-set(
    url("../images/homepage/indianapolis-skyline.webp") type("image/webp"),
    url("../images/homepage/indianapolis-skyline.png") type("image/png")
  );
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.44;
  pointer-events: none;
  /* Three layers intersected: a vignette that keeps the corners from ever
     showing the artwork's rectangle, plus one horizontal and one vertical
     fade so all four edges dissolve rather than cut. If a browser lacks
     mask-composite the layers simply union, which is the un-feathered
     rectangle rather than a broken layout. */
  /* Prefixed first so the standard property wins where both are understood —
     Chrome aliases -webkit-mask-composite onto mask-composite, so the later
     declaration is the one that takes effect. */
  -webkit-mask-image:
    radial-gradient(125% 120% at 50% 74%, rgb(0 0 0) 40%, rgb(0 0 0 / 0.55) 70%, transparent 90%),
    linear-gradient(to right, transparent 0%, rgb(0 0 0) 15%, rgb(0 0 0) 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0) 24%, rgb(0 0 0) 66%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(125% 120% at 50% 74%, rgb(0 0 0) 40%, rgb(0 0 0 / 0.55) 70%, transparent 90%),
    linear-gradient(to right, transparent 0%, rgb(0 0 0) 15%, rgb(0 0 0) 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0) 24%, rgb(0 0 0) 66%, transparent 97%);
  mask-composite: intersect;
}

@media (min-width: 48rem) {
  .hero__skyline {
    width: min(130%, 76.8rem);
  }
}

.hero__halo {
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  filter: blur(55px);
  opacity: 0.45;
  pointer-events: none;
}

.hero__halo--left {
  left: -2.4rem;
  bottom: 6.4rem;
  background: color-mix(in oklch, var(--color-accent-600) 24%, white);
  animation: hero-glow 9s ease-in-out infinite;
}

.hero__halo--right {
  right: -0.8rem;
  top: 3.2rem;
  background: color-mix(in oklch, var(--color-accent-100) 82%, white);
  animation: hero-glow 11s ease-in-out infinite reverse;
}

.hero__panel-row {
  padding: 0.72rem 0;
  border-top: 1px solid var(--color-line);
}

.hero__panel-status {
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: 600;
}

.hero__proof {
  display: grid;
  gap: 0.96rem;
  margin-top: 0;
}

.hero__proof-copy {
  font-size: var(--text-sm);
}

.client-carousel {
  --client-carousel-columns: 1;
  position: relative;
  overflow: hidden;
}

.client-carousel__header {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.28rem;
}

.client-carousel__title {
  max-width: 12ch;
  font-size: clamp(1.44rem, 1.04rem + 1.8vw, 2.24rem);
  line-height: 0.98;
}

.client-carousel__viewport {
  overflow: hidden;
}

.client-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--client-carousel-columns) - 1) * 0.8rem) /
      var(--client-carousel-columns)
  );
  gap: 0.8rem;
  transition: transform var(--duration-slow) var(--ease-out-quart);
  will-change: transform;
}

.client-carousel__card {
  position: relative;
  display: grid;
  gap: 0.8rem;
  min-height: clamp(12.8rem, 24vw, 15.2rem);
  padding: 1.04rem 0.96rem 1rem;
  border: 1px solid color-mix(in oklch, var(--color-line) 82%, white);
  background:
    linear-gradient(180deg, color-mix(in oklch, white 60%, transparent), transparent 22%),
    linear-gradient(180deg, color-mix(in oklch, white 84%, var(--color-accent-050)), white 72%);
  box-shadow: 0 20px 48px oklch(31% 0.025 247 / 0.08);
  clip-path: polygon(0 0, calc(100% - 1.88rem) 0, 100% 1.88rem, 100% 100%, 0 100%);
}

.client-carousel__company {
  position: relative;
  z-index: 1;
  color: var(--color-ink-950);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.client-carousel__quote {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-top: auto;
  color: var(--color-ink-700);
  font-size: clamp(0.8rem, 0.76rem + 0.25vw, 0.864rem);
  line-height: 1.5;
}

.hero__scroll-cue {
  justify-self: center;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  padding-top: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 260ms var(--ease-out-quart),
    transform 260ms var(--ease-out-quart);
}

.hero__scroll-label {
  /* Sits over the skyline artwork now, so it needs more weight than ink-500
     plus a soft white halo to stay legible against the illustration's
     mid-tones. The halo is invisible where the page is already white. */
  color: var(--color-ink-700);
  text-shadow: 0 0 10px rgb(255 255 255 / 0.85);
  font-size: 0.576rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__scroll-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.72rem;
  height: 2.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--color-line) 76%, white);
  background: color-mix(in oklch, white 84%, var(--color-accent-050));
  box-shadow:
    0 18px 42px oklch(33% 0.04 247 / 0.12),
    inset 0 1px 0 color-mix(in oklch, white 88%, transparent);
  animation: hero-scroll-bob 2.6s linear infinite;
}

.hero__scroll-arrow::before {
  content: "";
  width: 0.576rem;
  height: 0.576rem;
  border-right: 2px solid color-mix(in oklch, var(--color-accent-700) 88%, white);
  border-bottom: 2px solid color-mix(in oklch, var(--color-accent-700) 88%, white);
  transform: rotate(45deg) translate(-0.064rem, -0.064rem);
}

.hero__scroll-arrow::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: inherit;
  border: 1px solid color-mix(in oklch, var(--color-accent-100) 45%, white);
  opacity: 0;
  transform: scale(0.82);
  animation: hero-scroll-glow 2.6s linear infinite;
}

.hero__scroll-cue:hover .hero__scroll-label,
.hero__scroll-cue:focus-visible .hero__scroll-label {
  color: var(--color-accent-700);
}

.hero__scroll-cue:focus-visible {
  outline: none;
}

.hero__scroll-cue:focus-visible .hero__scroll-arrow {
  box-shadow:
    0 0 0 0.16rem color-mix(in oklch, var(--color-accent-100) 62%, white),
    0 18px 42px oklch(33% 0.04 247 / 0.12),
    inset 0 1px 0 color-mix(in oklch, white 88%, transparent);
}

html.js [data-hero-sequence] .hero__title-word,
html.js [data-hero-sequence] [data-hero-summary],
html.js [data-hero-sequence] [data-hero-actions],
html.js [data-hero-sequence] [data-hero-scroll-cue] {
  opacity: 0;
}

html.js [data-hero-sequence] .hero__title-word {
  transform: translateY(1.08em);
  transition:
    opacity 320ms var(--ease-out-quart),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js [data-hero-sequence] .hero__title-word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-hero-sequence] [data-hero-summary] {
  transform: translateY(0.8rem);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js [data-hero-sequence].is-summary-visible [data-hero-summary] {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-hero-sequence] [data-hero-actions] {
  transform: translateY(-0.68rem);
  transition:
    opacity 440ms var(--ease-out-quart),
    transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js [data-hero-sequence].is-actions-visible [data-hero-actions] {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-hero-sequence] [data-hero-scroll-cue] {
  transform: translateY(0.56rem);
  pointer-events: none;
}

html.js [data-hero-sequence].is-scroll-cue-visible [data-hero-scroll-cue] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

html.js [data-hero-sequence].is-scroll-cue-hidden [data-hero-scroll-cue] {
  opacity: 0;
  transform: translateY(0.56rem);
  pointer-events: none;
}

#homepage-value,
#homepage-coaching {
  scroll-margin-top: 4rem;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes hero-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.55;
  }
}

@keyframes hero-scroll-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0.32rem);
  }
}

@keyframes hero-scroll-glow {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.82);
  }

  45% {
    opacity: 0.7;
  }

  65% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.value-layout {
  display: grid;
  gap: 0.8rem;
}

.value-intro {
  max-width: 27.2rem;
}

.value-intro__title {
  max-width: 11ch;
  font-size: clamp(2.08rem, 1.52rem + 2.9vw, 3.4rem);
  line-height: 0.98;
}

.value-card {
  gap: 0.88rem;
  min-height: 13.6rem;
  overflow: hidden;
}

.value-card__body {
  display: grid;
  gap: 1.2rem;
}

.value-card__body h3 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.84rem);
  line-height: 1.03;
}

.value-card__body p {
  max-width: 34ch;
  font-size: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
  line-height: 1.5;
}

.value-card__preview {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 8rem;
  padding: 0.8rem;
  border-radius: 1.08rem;
  overflow: hidden;
}

.value-card__preview--dark {
  background:
    linear-gradient(180deg, color-mix(in oklch, white 8%, transparent), transparent 55%),
    linear-gradient(180deg, oklch(63% 0.18 258), oklch(71% 0.12 247));
}

/* Handle more calls: a ringing phone calls Sam down a line. Same height as
   the chat preview it replaced, so the card keeps its size. */
.value-card__preview--inbound {
  display: grid;
  place-items: center;
  height: 9.35rem;
  min-height: 0;
  background:
    radial-gradient(circle at top left, oklch(97% 0.02 248 / 0.7), transparent 40%),
    linear-gradient(135deg, oklch(92% 0.04 247), oklch(87% 0.06 252));
}

.inbound-mini {
  display: flex;
  align-items: center;
  width: min(76%, 20rem);
  margin-top: 0.8rem;
}

.inbound-mini svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The phone, ringing: a wiggle and rings spreading out from it. */
.inbound-mini__ringer {
  position: relative;
  flex-shrink: 0;
  width: 22%;
}

.inbound-mini__ringer::before,
.inbound-mini__ringer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid oklch(62% 0.17 258 / 0.5);
  animation: inbound-mini-pulse 1.7s var(--ease-out-quart) infinite;
}

.inbound-mini__ringer::after {
  animation-delay: 0.85s;
}

.inbound-mini__phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b73ff, #156bff);
  box-shadow: 0 0.6rem 1.4rem oklch(45% 0.18 258 / 0.35);
  color: white;
  animation: inbound-mini-ring 1.7s var(--ease-in-out) infinite;
}

.inbound-mini__phone svg {
  width: 46%;
}

.inbound-mini__sam {
  flex-shrink: 0;
  width: 29%;
  /* Line up Sam's head, not his whole box with the antenna and signal. */
  translate: 0 -17.8%;
}

/* Starts clear of the phone's rings, and fades in at both ends so the
   flowing dashes enter and leave smoothly rather than as clipped slivers. */
.inbound-mini__line {
  flex: 1;
  height: 0.2rem;
  margin: 0 5% 0 12%;
  background: linear-gradient(90deg, oklch(58% 0.17 258) 0 0.4rem, transparent 0.4rem) 0 0 / 0.75rem 100% repeat-x;
  mask-image: linear-gradient(90deg, transparent, black 25%, black 80%, transparent);
  animation: inbound-mini-dash 0.8s linear infinite;
}

.inbound-mini__arc {
  animation: inbound-mini-talk 0.9s var(--ease-in-out) infinite alternate;
}

.inbound-mini__arc--inner {
  animation-delay: 0.3s;
}

@keyframes inbound-mini-dash {
  to {
    background-position: 0.75rem 0;
  }
}

@keyframes inbound-mini-ring {
  0%,
  40%,
  100% {
    rotate: 0deg;
  }

  8%,
  24% {
    rotate: -12deg;
  }

  16%,
  32% {
    rotate: 12deg;
  }
}

@keyframes inbound-mini-pulse {
  from {
    opacity: 1;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 1.4;
  }
}

@keyframes inbound-mini-talk {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inbound-mini__line,
  .inbound-mini__phone,
  .inbound-mini__arc,
  .inbound-mini__ringer::before,
  .inbound-mini__ringer::after {
    animation: none;
  }

  .inbound-mini__ringer::before,
  .inbound-mini__ringer::after {
    display: none;
  }
}

/* Every card links to its product page and grows a touch on hover. */
.value-card--link {
  position: relative;
}

/* Keeps the scroll-reveal fade while adding the hover grow. */
.value-card--link,
html.js .value-card--link[data-reveal] {
  transition:
    opacity var(--duration-slow) var(--ease-out-quart),
    transform var(--duration-slow) var(--ease-out-quart),
    scale var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.value-card__link {
  color: inherit;
  text-decoration: none;
}

/* A click target over the whole card; the title link above is the one
   keyboards and screen readers use. */
.value-card__cover {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
}

.value-card__link:focus-visible {
  outline: none;
}

.value-card--link:has(.value-card__link:focus-visible) {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 3px;
}

@media (hover: hover) {
  .value-card--link:hover {
    scale: 1.02;
    box-shadow: 0 28px 60px oklch(45% 0.08 247 / 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card--link:hover {
    scale: none;
  }
}

.value-card__preview--chat {
  min-height: 8.8rem;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, oklch(88% 0.06 248 / 0.48), transparent 34%),
    linear-gradient(135deg, oklch(78% 0.1 247), oklch(71% 0.12 252));
}

.value-card__preview--light,
.value-card__preview--compact {
  background:
    linear-gradient(180deg, color-mix(in oklch, white 70%, var(--color-accent-050)), white 65%);
  border: 1px solid color-mix(in oklch, white 35%, var(--color-line));
}

.value-card__preview--wasted-effort {
  min-height: 8.8rem;
  align-items: stretch;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 45%, oklch(94% 0.03 247 / 0.9), transparent 28%),
    linear-gradient(135deg, color-mix(in oklch, white 52%, var(--color-accent-100)), color-mix(in oklch, white 82%, var(--color-accent-050)));
}

.value-card__preview--compact {
  min-height: 8.8rem;
  align-items: center;
}

.value-card__preview--showcase {
  min-height: 8.8rem;
  padding: 0;
  align-items: stretch;
  isolation: isolate;
  background: transparent;
}

.value-card__preview--snapshot {
  background: transparent;
}

.value-card__preview--snapshot-offset {
  overflow: visible;
}

.value-card__preview--data-health {
  background: transparent;
}

.value-card__preview--data-health-offset {
  overflow: hidden;
  border-radius: 1.08rem;
}

.value-card__preview--data-health-offset::before {
  display: none;
}

.value-card__screen {
  width: min(100%, 13.6rem);
  margin-left: auto;
  padding: 0.8rem;
  border: 1px solid color-mix(in oklch, white 24%, transparent);
  border-radius: 0.92rem;
  background: color-mix(in oklch, black 28%, white 12%);
  box-shadow: 0 20px 45px oklch(28% 0.04 247 / 0.2);
  backdrop-filter: blur(12px);
}

.value-card__chat-thread {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.64rem;
  align-content: center;
  width: 100%;
}

.value-card__chat-message {
  display: flex;
  align-items: flex-end;
  gap: 0.52rem;
}

.value-card__chat-message--caller {
  justify-content: flex-start;
}

.value-card__chat-message--receiver {
  justify-content: flex-end;
}

.value-card__chat-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 10px 22px oklch(29% 0.04 247 / 0.18),
    inset 0 0 0 1px color-mix(in oklch, white 40%, transparent);
}

.value-card__chat-bubble {
  max-width: min(82%, 16rem);
  padding: 0.68rem 0.8rem;
  border-radius: 0.96rem;
  font-size: 0.784rem;
  line-height: 1.4;
  box-shadow: 0 16px 32px oklch(31% 0.05 247 / 0.16);
}

.value-card__chat-bubble--caller {
  justify-self: start;
  color: var(--color-ink-900);
  background: color-mix(in oklch, white 94%, var(--color-accent-050));
  border-bottom-left-radius: 0.28rem;
}

.value-card__chat-bubble--receiver {
  justify-self: end;
  color: color-mix(in oklch, white 92%, var(--color-accent-050));
  background: color-mix(in oklch, oklch(39% 0.05 248) 78%, white 22%);
  border-bottom-right-radius: 0.28rem;
}

html.js .value-card--chat .value-card__chat-message {
  opacity: 0;
  transition:
    opacity 520ms var(--ease-out-quart),
    transform 720ms var(--ease-out-quart);
}

html.js .value-card--chat .value-card__chat-message--caller {
  transform: translateX(-1rem) translateY(0.44rem);
}

html.js .value-card--chat .value-card__chat-message--receiver {
  transform: translateX(1rem) translateY(0.56rem);
  transition-delay: 140ms;
}

html.js .value-card--chat.is-visible .value-card__chat-message {
  opacity: 1;
}

html.js .value-card--chat.is-visible .value-card__chat-message--caller,
html.js .value-card--chat.is-visible .value-card__chat-message--receiver {
  transform: translateX(0) translateY(0);
}

.value-card__prompt {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.36rem 0.64rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent-600) 78%, white);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
}

.value-card__line {
  height: 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-line) 60%, white);
}

.value-card__screen .value-card__line {
  background: color-mix(in oklch, white 18%, transparent);
}

.value-card__line + .value-card__line {
  margin-top: 0.56rem;
}

.value-card__line--wide {
  width: 78%;
}

.value-card__line--short {
  width: 44%;
}

.value-card__badge {
  justify-self: end;
  align-self: end;
  padding: 0.4rem 0.64rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent-100) 55%, white);
  color: var(--color-accent-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.value-card__preview--wasted-effort .value-card__badge {
  position: relative;
  z-index: 3;
}

.value-card__question-mark {
  position: absolute;
  left: clamp(0.64rem, 2vw, 1rem);
  top: 52%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(3.84rem, 7vw, 5.12rem);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in oklch, var(--color-accent-600) 28%, white);
  transform: translateY(-50%);
  text-shadow: 0 12px 30px oklch(70% 0.06 247 / 0.16);
  user-select: none;
}

.value-card__image-frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  overflow: hidden;
}

.value-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.value-card__image--wasted-effort {
  object-fit: cover;
  object-position: center right;
}

.value-card__image--data-health {
  object-fit: cover;
  object-position: center top;
  transform: scale(1.07);
}

.value-card__image--snapshot {
  object-fit: cover;
  object-position: left top;
  transform: scale(1.02);
}

.value-card__image-wipe {
  display: none;
}

html.js .value-card--wasted-effort .value-card__question-mark {
  opacity: 0.58;
  transform: translateY(-50%) scale(0.84) rotate(-8deg);
  transition:
    transform 880ms var(--ease-out-quart),
    opacity 880ms var(--ease-out-quart);
}

html.js .value-card--wasted-effort .value-card__image--wasted-effort {
  opacity: 0;
  transform: translateX(0.92rem) scale(1.015);
  transition:
    opacity 520ms var(--ease-out-quart),
    transform 1380ms var(--ease-out-quart);
}

html.js .value-card--wasted-effort .value-card__image-wipe {
  display: block;
  position: absolute;
  inset: -8% -42% -8% 46%;
  z-index: 2;
  background:
    linear-gradient(180deg, color-mix(in oklch, white 14%, var(--color-accent-100)), color-mix(in oklch, white 3%, var(--color-accent-050)));
  box-shadow:
    -1px 0 0 color-mix(in oklch, var(--color-accent-600) 25%, white),
    -22px 0 50px oklch(74% 0.04 247 / 0.18);
  transform: translateX(0) skewX(-24deg);
  transform-origin: right center;
  transition: transform 1720ms var(--ease-out-quart);
}

html.js .value-card--wasted-effort.is-visible .value-card__question-mark {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(0deg);
  animation: value-card-question-mark-intro 560ms var(--ease-out-quart) 1 both;
}

html.js .value-card--wasted-effort.is-visible .value-card__image--wasted-effort {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 520ms;
}

html.js .value-card--wasted-effort.is-visible .value-card__image-wipe {
  transform: translateX(-185%) skewX(-24deg);
  transition-delay: 520ms;
}

@keyframes value-card-question-mark-intro {
  0% {
    opacity: 0.58;
    transform: translateY(-50%) scale(0.84) rotate(-8deg);
  }

  42% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
}

.value-card__avatar-group {
  display: inline-flex;
}

.value-card__avatar-group span {
  width: 1.36rem;
  height: 1.36rem;
  margin-left: -0.2rem;
  border: 2px solid white;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-accent-100) 30%, white), color-mix(in oklch, var(--color-accent-600) 26%, white));
}

.value-card__avatar-group span:first-child {
  margin-left: 0;
}

.value-card__meter {
  display: grid;
  gap: 0.36rem;
  width: min(100%, 8rem);
}

.value-card__meter span {
  display: block;
  height: 0.56rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent-600) 18%, white);
}

.value-card__meter span:nth-child(2) {
  width: 72%;
}

.value-card__meter span:nth-child(3) {
  width: 48%;
}

.value-card--feature {
  background: linear-gradient(180deg, oklch(67% 0.13 248), oklch(61% 0.15 252));
  border-color: color-mix(in oklch, var(--color-accent-600) 45%, white);
  box-shadow: 0 32px 70px oklch(45% 0.08 247 / 0.16);
}

.value-card--feature .value-card__body h3,
.value-card--feature .value-card__body p {
  color: white;
}

.value-card--soft {
  min-height: 13.6rem;
}

.value-card--minimal {
  min-height: 13.6rem;
}

.value-card--showcase {
  gap: clamp(0.8rem, 1.4vw, 1.08rem);
}

.value-card__body--showcase {
  align-content: end;
}

.value-card__body--showcase-top {
  align-content: start;
}

/* Narrow measure only once the cards sit side by side; on phones the text
   runs the card's width like its neighbours. */
@media (min-width: 48rem) {
  .value-card__body--showcase h3 {
    max-width: 12ch;
  }

  .value-card__body--showcase p {
    max-width: 28ch;
  }
}

html.js .value-card--showcase[data-reveal] {
  opacity: 1;
  transform: none;
}

html.js .value-card--showcase .value-card__body--showcase {
  opacity: 0;
  transform: translateY(0.72rem);
  transition:
    opacity 520ms var(--ease-out-quart),
    transform 720ms var(--ease-out-quart);
}

html.js .value-card--showcase .value-card__preview--snapshot-offset {
  opacity: 0;
  transform: translateX(2.24rem);
  transition:
    opacity 520ms var(--ease-out-quart),
    transform 900ms var(--ease-out-quart);
}

html.js .value-card--showcase .value-card__preview--data-health-offset {
  opacity: 0;
  transform: translateY(-2.24rem);
  transition:
    opacity 520ms var(--ease-out-quart),
    transform 900ms var(--ease-out-quart);
}

html.js .value-card--showcase.is-visible .value-card__body--showcase {
  opacity: 1;
  transform: translateY(0);
}

html.js .value-card--showcase.is-visible .value-card__preview--snapshot-offset,
html.js .value-card--showcase.is-visible .value-card__preview--data-health-offset {
  opacity: 1;
  transition-delay: 140ms;
}

html.js .value-card--showcase.is-visible .value-card__preview--snapshot-offset {
  transform: translateX(0);
}

html.js .value-card--showcase.is-visible .value-card__preview--data-health-offset {
  transform: translateY(0);
}

/* Showcase sections: "Improve with every call" and "Automate your busywork" */
.site-shell--showcase {
  width: min(100% - 1.6rem, 67.2rem);
}

.showcase-shell {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.showcase-heading {
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
}

.showcase-title {
  max-width: none;
  font-size: clamp(2.08rem, 1.52rem + 2.9vw, 3.4rem);
  line-height: 0.98;
}

.showcase-title__muted {
  color: oklch(54% 0.04 290);
}

.showcase-lead {
  max-width: 32rem;
  color: var(--color-ink-500);
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* Soft lavender-blue stage shared by the showcase panel and the automation cards. */
.showcase-panel,
.automation-card__panel,
.value-prop__panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 18% 12%, oklch(97.5% 0.014 262 / 0.9), transparent 42%),
    linear-gradient(145deg, oklch(94.5% 0.022 262), oklch(88.5% 0.042 274));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 50%, var(--color-line));
}

.showcase-panel {
  aspect-ratio: 4 / 5;
}

/* ---- Mock application window ------------------------------------------ */
.mock-window {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 92%;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 0.9em 0.9em 0 0;
  background: white;
  box-shadow:
    0 30px 60px oklch(30% 0.03 262 / 0.18),
    0 0 0 1px oklch(85% 0.02 262 / 0.6);
  color: var(--color-ink-900);
  font-family: var(--font-body);
  font-size: clamp(0.528rem, 0.4rem + 0.4vw, 0.72rem);
  line-height: 1.45;
  text-align: left;
}

.mock-window__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1em;
  padding: 0.75em 1.1em;
  border-bottom: 1px solid oklch(91% 0.008 262);
  background: oklch(97% 0.004 262);
}

.mock-window__lights {
  display: inline-flex;
  gap: 0.45em;
}

.mock-window__lights i {
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #ff5f57;
}

.mock-window__lights i:nth-child(2) {
  background: #febc2e;
}

.mock-window__lights i:nth-child(3) {
  background: #28c840;
}

.mock-window__search {
  justify-self: center;
  width: min(100%, 22em);
  padding: 0.35em 1em;
  overflow: hidden;
  border-radius: 0.5em;
  background: oklch(93% 0.006 262);
  color: var(--color-ink-500);
  font-size: 0.9em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-window__chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.mock-window__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border: 1px solid oklch(90% 0.01 262);
  border-radius: 0.5em;
  background: white;
  color: var(--color-ink-700);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.mock-window__pill--live::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0.25em color-mix(in oklch, var(--color-success) 20%, white);
}

.mock-window__pill--accent {
  border-color: transparent;
  background: color-mix(in oklch, var(--color-accent-600) 14%, white);
  color: var(--color-accent-700);
}

.mock-window__avatar {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(78% 0.08 60), oklch(58% 0.1 30));
}

.mock-window__body {
  padding: 1.6em 8% 2.5em;
}

/* ---- Quality Assurance call review ---------------------------------- */
.qa-window__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.9em;
  color: var(--color-ink-500);
  font-size: 0.85em;
}

.qa-window__actions {
  display: inline-flex;
  gap: 0.5em;
}

.qa-window__title {
  margin: 0 0 0.7em;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.qa-window__tabs {
  display: inline-flex;
  gap: 0.15em;
  margin-bottom: 1.4em;
  padding: 0.2em;
  border-radius: 0.5em;
  background: oklch(95% 0.006 262);
}

.qa-window__tabs span {
  padding: 0.3em 0.8em;
  border-radius: 0.4em;
  color: var(--color-ink-500);
  font-size: 0.88em;
  font-weight: 500;
}

.qa-window__tabs .is-active {
  background: white;
  color: var(--color-ink-950);
  box-shadow: 0 1px 2px oklch(30% 0.02 262 / 0.12);
}

.qa-window__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7em;
  margin-bottom: 1.4em;
}

.qa-stat {
  display: grid;
  gap: 0.15em;
  padding: 0.9em 1em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.8em;
  background: oklch(98.5% 0.003 262);
}

.qa-stat--score {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.qa-stat__text {
  display: grid;
  gap: 0.15em;
}

.qa-stat__value {
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.qa-stat__label {
  color: var(--color-ink-700);
  font-size: 0.85em;
  font-weight: 500;
}

.qa-stat__delta {
  color: var(--color-ink-500);
  font-size: 0.78em;
}

.qa-stat__delta--good {
  color: var(--color-success);
}

.qa-dial {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent-600) var(--to), oklch(92% 0.01 262) 0);
}

.qa-dial::before {
  content: "";
  position: absolute;
  inset: 0.4em;
  border-radius: 50%;
  background: white;
}

.qa-dial b {
  position: relative;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 700;
}

.qa-window__grid {
  display: grid;
  gap: 1.4em;
  margin-bottom: 1.4em;
}

.qa-block h4 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.6em;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0;
}

.qa-block__tag {
  padding: 0.15em 0.5em;
  border-radius: 0.4em;
  background: color-mix(in oklch, var(--color-accent-600) 12%, white);
  color: var(--color-accent-700);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qa-checks {
  display: grid;
  gap: 0.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-checks li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0;
  border-bottom: 1px solid oklch(94% 0.006 262);
  color: var(--color-ink-900);
  font-size: 0.92em;
}

.qa-checks time,
.qa-moment time {
  color: var(--color-ink-500);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.qa-check {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-size: 0.8em;
  font-weight: 700;
}

.qa-check--pass {
  background: color-mix(in oklch, var(--color-success) 16%, white);
  color: var(--color-success);
}

.qa-timeline {
  display: grid;
  gap: 0.6em;
}

.qa-timeline__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.18em;
  height: 3.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.6em;
  background: oklch(97.5% 0.004 262);
}

.qa-timeline__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.2em;
  background: color-mix(in oklch, var(--color-accent-600) 42%, white);
}

.qa-timeline__bars i.is-good {
  background: var(--color-accent-600);
}

.qa-timeline__bars i.is-flag {
  background: oklch(74% 0.15 62);
}

.qa-timeline__markers {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.8em;
}

.qa-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--color-ink-700);
  white-space: nowrap;
}

.qa-marker::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-accent-600);
}

.qa-marker--flag::before {
  background: oklch(74% 0.15 62);
}

.qa-block--coaching {
  margin-bottom: 1.4em;
  padding: 1em 1.1em;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 18%, white);
  border-radius: 0.8em;
  background: color-mix(in oklch, var(--color-accent-050) 70%, white);
}

.qa-block--coaching p {
  max-width: none;
  color: var(--color-ink-700);
  font-size: 0.92em;
}

.qa-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.8em;
}

.qa-moments {
  display: grid;
  gap: 0.7em;
}

.qa-moment {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7em;
  font-size: 0.9em;
}

.qa-moment time {
  padding-top: 0.15em;
}

.qa-moment__speaker {
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-moment__tag {
  margin-left: 0.5em;
  padding: 0.1em 0.45em;
  border-radius: 0.35em;
  background: color-mix(in oklch, var(--color-success) 14%, white);
  color: var(--color-success);
  font-size: 0.78em;
  font-weight: 600;
}

.qa-moment__tag--flag {
  background: oklch(94% 0.05 75);
  color: oklch(50% 0.13 60);
}

.qa-moment p {
  max-width: none;
  color: var(--color-ink-700);
}

/* Floating dock pinned to the bottom of the showcase panel. */
.showcase-panel__dock {
  position: absolute;
  bottom: 0.72rem;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: min(92%, 27.2rem);
  transform: translateX(-50%);
  font-size: clamp(0.576rem, 0.496rem + 0.3vw, 0.704rem);
}

.showcase-dock__button,
.showcase-dock__ask {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: white;
  box-shadow:
    0 10px 26px oklch(30% 0.03 262 / 0.16),
    0 0 0 1px oklch(90% 0.01 262);
}

.showcase-dock__button {
  gap: 0.5em;
  padding: 0.6em 1.05em;
  color: var(--color-ink-950);
  font-weight: 600;
  white-space: nowrap;
}

.showcase-dock__button::before {
  content: "";
  border-top: 0.38em solid transparent;
  border-bottom: 0.38em solid transparent;
  border-left: 0.6em solid var(--color-ink-950);
}

.showcase-dock__ask {
  flex: 1;
  justify-content: space-between;
  gap: 0.6em;
  min-width: 0;
  padding: 0.5em 0.5em 0.5em 1.1em;
  color: var(--color-ink-500);
}

.showcase-dock__ask span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-dock__ask i {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.45em;
  background: oklch(95% 0.006 262);
  color: var(--color-ink-700);
  font-size: 0.9em;
  font-style: normal;
}

/* ---- Automation cards --------------------------------------------------- */
.automation-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
}

.automation-card {
  display: grid;
  gap: 1.04rem;
  align-content: start;
}

.automation-card__panel {
  display: grid;
  aspect-ratio: 385 / 365;
  padding: clamp(0.96rem, 0.8rem + 1.5vw, 1.6rem);
}

.automation-card__screen {
  position: relative;
  overflow: hidden;
  border-radius: 0.88rem;
  background: white;
  box-shadow:
    0 18px 40px oklch(30% 0.03 262 / 0.14),
    0 0 0 1px oklch(88% 0.015 262 / 0.7);
}

.automation-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms var(--ease-out-quart);
}

.automation-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.64rem;
  background: linear-gradient(180deg, white, color-mix(in oklch, white 82%, var(--color-accent-050)));
  transition: opacity 400ms var(--ease-out-quart);
}

.automation-card__placeholder::before {
  content: "";
  position: absolute;
  inset: 0.72rem 0.72rem auto;
  height: 0.44rem;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle, #ff5f57 0.144rem, transparent 0.16rem) 0.08rem 50% / 0.56rem 100% no-repeat,
    radial-gradient(circle, #febc2e 0.144rem, transparent 0.16rem) 0.64rem 50% / 0.56rem 100% no-repeat,
    radial-gradient(circle, #28c840 0.144rem, transparent 0.16rem) 1.2rem 50% / 0.56rem 100% no-repeat;
}

.automation-card__placeholder::after {
  content: "";
  position: absolute;
  inset: 1.76rem 0.96rem auto;
  height: 2.56rem;
  border-radius: 0.32rem;
  background:
    linear-gradient(oklch(94% 0.008 262), oklch(94% 0.008 262)) 0 0 / 62% 0.44rem no-repeat,
    linear-gradient(oklch(95.5% 0.006 262), oklch(95.5% 0.006 262)) 0 0.88rem / 84% 0.44rem no-repeat,
    linear-gradient(oklch(95.5% 0.006 262), oklch(95.5% 0.006 262)) 0 1.76rem / 46% 0.44rem no-repeat;
}

.automation-card__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--color-ink-950);
  box-shadow: 0 14px 30px oklch(24% 0.02 248 / 0.28);
}

.automation-card__play::before {
  content: "";
  margin-left: 0.2rem;
  border-top: 0.48rem solid transparent;
  border-bottom: 0.48rem solid transparent;
  border-left: 0.8rem solid white;
}

.automation-card__placeholder-label {
  position: relative;
  z-index: 1;
  color: var(--color-ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.automation-card.is-ready .automation-card__video {
  opacity: 1;
}

.automation-card.is-ready .automation-card__placeholder {
  opacity: 0;
  pointer-events: none;
}

.automation-card__copy {
  max-width: none;
  color: var(--color-ink-500);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.automation-card__copy strong {
  color: var(--color-ink-950);
  font-weight: 600;
}

/* ---- Value props (homepage "Automate your busywork") -------------------- */
/* Each card is one link to its product page. The mini screen plays its
   animation once when it scrolls into view (main.js, initValueProps).
   Without .is-playing (reduced motion, no JS) every element simply shows its
   finished state. */
.value-props {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2rem);
}

.value-prop {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  border-radius: 1.6rem;
  color: inherit;
  text-decoration: none;
}

.value-prop:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 0.3rem;
}

/* --vp-screen-h keeps the three white screens the same height. The panel is
   sized by padding rather than an aspect ratio, which would force it wider
   than its column once the screen's height sets a floor. */
.value-prop__panel {
  --vp-pad: clamp(0.96rem, 0.8rem + 1.5vw, 1.6rem);
  --vp-screen-h: 13.5rem;
  display: grid;
  place-items: center;
  padding: calc(var(--vp-pad) * 1.2) var(--vp-pad);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.value-prop:hover .value-prop__panel {
  transform: translateY(-0.25rem);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white 50%, var(--color-line)),
    0 22px 44px oklch(30% 0.03 262 / 0.14);
}

.value-prop__screen {
  display: grid;
  align-content: space-between;
  gap: 0.72rem;
  width: 100%;
  min-height: var(--vp-screen-h);
  max-width: 18.5rem;
  padding: 1rem;
  border-radius: 0.88rem;
  background: white;
  box-shadow:
    0 18px 40px oklch(30% 0.03 262 / 0.14),
    0 0 0 1px oklch(88% 0.015 262 / 0.7);
  color: var(--color-ink-700);
  font-size: 0.78rem;
  line-height: 1.3;
}

.value-prop__body {
  display: grid;
  gap: 0.6rem;
}

.value-prop__title {
  font-size: clamp(1.28rem, 1.08rem + 0.7vw, 1.6rem);
  line-height: 1.08;
}

.value-prop__copy {
  max-width: 34ch;
  color: var(--color-ink-500);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.value-prop__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.2rem;
  color: var(--color-accent-700);
  font-size: clamp(0.88rem, 0.84rem + 0.2vw, 1rem);
  font-weight: 600;
}

.value-prop__arrow {
  width: 0.46em;
  height: 0.46em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out-quart);
}

.value-prop:hover .value-prop__arrow {
  transform: translateX(0.3em) rotate(45deg);
}

/* Shared mini-screen parts */
.vp-head {
  display: flex;
  align-items: center;
  gap: 0.56rem;
}

.vp-head__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.vp-head__text b {
  color: var(--color-ink-950);
  font-weight: 600;
}

.vp-head__text small {
  color: var(--color-ink-500);
  font-size: 0.9em;
}

/* Onboarding checklist */
.vp-steps,
.vp-calls {
  display: grid;
  gap: 0.44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vp-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vp-tick {
  position: relative;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--color-line);
}

.vp-tick::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 0.72em;
  font-weight: 700;
}

.vp-meter {
  height: 0.36rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-100);
}

.vp-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-600);
  transform-origin: left;
}

.vp-status__done {
  background: color-mix(in oklch, var(--color-success) 14%, white);
  color: var(--color-success);
}

/* The checklist fills the screen, then gives way to a centered "Ready to
   start!" mark. .vp-done stays hidden unless the animation shows it, so the
   static (reduced-motion) state is the finished checklist. */
.value-prop__screen--onboard {
  position: relative;
  align-content: stretch;
}

.vp-onboard {
  display: grid;
  align-content: space-between;
  gap: 0.8rem;
  font-size: 1.1em;
}

.vp-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  color: var(--color-ink-950);
  font-size: 1.2em;
  opacity: 0;
}

.vp-done b {
  font-weight: 600;
}

.vp-done__mark {
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 1.3em;
  font-weight: 700;
}

/* Progress chart */
.vp-grade {
  display: grid;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 700;
}

.vp-grade span {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  border-radius: 0.5em;
  background: var(--color-surface-100);
  color: var(--color-ink-700);
}

.vp-grade .vp-grade__up {
  background: var(--color-success);
  color: white;
}

.vp-chart {
  display: flex;
  align-items: end;
  gap: 0.4rem;
  height: 4.6rem;
  border-bottom: 1px solid var(--color-surface-200);
}

.vp-chart i {
  flex: 1;
  height: var(--h);
  border-radius: 0.28rem 0.28rem 0 0;
  background: color-mix(in oklch, var(--color-accent-600) 30%, white);
  transform-origin: bottom;
}

.vp-chart i:last-child {
  background: var(--color-accent-600);
}

.vp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.vp-tags span {
  padding: 0.26em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-050);
  box-shadow: inset 0 0 0 1px var(--color-accent-100);
  color: var(--color-accent-700);
  font-weight: 600;
}

/* Inbound calls */
.vp-phone {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-success) 16%, white);
  color: var(--color-success);
}

.vp-phone svg {
  width: 1.1em;
  height: 1.1em;
}

.vp-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-success) 40%, white);
  opacity: 0;
}

.vp-calls li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.5rem;
  padding: 0.46rem 0.56rem;
  border-radius: 0.6rem;
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
}

.vp-calls__text {
  display: grid;
  min-width: 0;
}

.vp-calls__text b {
  color: var(--color-ink-950);
  font-weight: 600;
  white-space: nowrap;
}

.vp-calls__text small {
  color: var(--color-ink-500);
  font-size: 0.9em;
}

/* In a narrow column (tablets) the status drops under the number,
   still hugging the right edge. */
.vp-status {
  display: grid;
  margin-left: auto;
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.vp-status > span {
  grid-area: 1 / 1;
  justify-self: end;
  padding: 0.22em 0.62em;
  border-radius: var(--radius-pill);
}

.vp-status__ring {
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

/* Animation timeline: plays once when the screen scrolls into view, then
   holds its finished state. initValueProps adds .is-playing.is-paused up
   front, so each screen waits on its first frame, and drops .is-paused on
   view. Only the phone ping and the ringing blink keep going. --i comes from
   the inline style on each staggered row, bar, or tag. */
.is-paused,
.is-paused *,
.is-paused *::after {
  animation-play-state: paused !important;
}

.is-playing .vp-steps .vp-tick::after {
  animation: vp-pop 0.54s var(--ease-out-quart) calc(0.6s + var(--i) * 0.72s) both;
}

.is-playing .vp-meter i {
  animation: vp-fill 2.76s linear 0.6s both;
}

.is-playing .vp-onboard {
  animation: vp-out 0.42s 3.72s forwards;
}

.is-playing .vp-done {
  animation: vp-pop 0.6s var(--ease-out-quart) 4.02s both;
}

.is-playing .vp-chart i {
  animation: vp-grow 0.72s var(--ease-out-quart) calc(0.48s + var(--i) * 0.3s) both;
}

.is-playing .vp-grade__up {
  animation: vp-pop 0.54s var(--ease-out-quart) 2.64s both;
}

.is-playing .vp-tags span {
  animation: vp-rise 0.6s var(--ease-out-quart) calc(3.12s + var(--i) * 0.36s) both;
}

.is-playing .vp-calls li {
  animation: vp-rise 0.6s var(--ease-out-quart) calc(0.36s + var(--i) * 1.08s) both;
}

.is-playing .vp-status__ring {
  animation: vp-blink 1.08s var(--ease-in-out) infinite;
}

.is-playing .vp-status__done {
  animation: vp-pop 0.54s var(--ease-out-quart) calc(1.56s + var(--i) * 1.08s) both;
}

.is-playing .vp-phone::after {
  animation: vp-ping 1.68s var(--ease-out-quart) infinite;
}

@keyframes vp-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vp-rise {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vp-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes vp-grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes vp-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes vp-blink {
  50% {
    opacity: 0.5;
  }
}

@keyframes vp-ping {
  from {
    opacity: 0.8;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.7);
  }
}

@media (min-width: 48rem) {
  .value-props {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

/* Tablets: the columns are narrow enough that the inbound calls wrap to two
   lines, so every screen grows to match it and the row stays level. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .value-prop__panel {
    --vp-screen-h: 15.6rem;
  }
}

/* ---- Voice providers ---------------------------------------------------- */
.providers {
  display: grid;
  justify-items: center;
  gap: 1.12rem;
  padding-top: clamp(0.4rem, 2vw, 1.2rem);
}

.providers__eyebrow {
  color: var(--color-ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.providers__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.88rem clamp(1.2rem, 4vw, 2.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--color-ink-900);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 0.76rem + 0.3vw, 0.96rem);
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
}

/* width: auto overrides the width attribute so each logo keeps its own
   proportions at a shared height. */
.provider__logo {
  display: block;
  width: auto;
  height: 1.3rem;
}

.provider__logo--aws {
  height: 1.7rem;
}

/* Five9's wordmark is short and wide, so it needs extra height to match. */
.provider__logo--five9 {
  height: 1.6rem;
}

.provider--more {
  color: var(--color-ink-500);
  font-weight: 500;
}

.proof-layout,
.compliance-layout,
.shell-layout {
  display: grid;
  gap: clamp(1.12rem, 3vw, 2.2rem);
  align-items: start;
}

.certainty-layout {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: start;
  overflow: visible;
}

.certainty-visual {
  position: relative;
  justify-self: center;
  width: min(100%, 21.6rem);
  padding: 0;
  align-self: start;
}

.certainty-visual__frame {
  position: relative;
  padding: clamp(0.8rem, 1.8vw, 1.08rem);
  border: 1px solid color-mix(in oklch, white 45%, var(--color-line));
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 22% 18%, oklch(94% 0.04 252), transparent 34%),
    radial-gradient(circle at 82% 24%, oklch(93% 0.045 296 / 0.9), transparent 30%),
    linear-gradient(180deg, oklch(95% 0.02 251), oklch(93% 0.025 282));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white 60%, var(--color-line)),
    0 22px 44px oklch(35% 0.03 247 / 0.08);
}

.certainty-visual__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in oklch, var(--color-line) 78%, white);
  border-radius: 1.08rem;
  background: white;
  box-shadow: 0 18px 44px oklch(28% 0.02 247 / 0.12);
}

.certainty-visual__download {
  position: absolute;
  right: calc(clamp(0.92rem, 2vw, 1.2rem) + 10px);
  bottom: calc(clamp(0.92rem, 2vw, 1.2rem) + 10px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 28%, white);
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-ink-950) 88%, white);
  color: var(--color-surface-000);
  box-shadow:
    0 18px 36px oklch(24% 0.02 248 / 0.22),
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
  transition:
    transform 220ms var(--ease-out-quart),
    background-color 220ms var(--ease-out-quart),
    border-color 220ms var(--ease-out-quart),
    box-shadow 220ms var(--ease-out-quart);
  animation: certainty-download-bob 2.8s ease-in-out infinite;
}

.certainty-visual__download-icon {
  width: 1.84rem;
  height: 1.84rem;
  display: block;
  filter: brightness(0) invert(1);
}

.certainty-visual__download:hover,
.certainty-visual__download:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--color-accent-700) 82%, white);
  border-color: color-mix(in oklch, var(--color-accent-700) 32%, white);
  box-shadow:
    0 22px 40px oklch(24% 0.03 248 / 0.22),
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
}

@keyframes certainty-download-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.28rem);
  }
}

.certainty-content {
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.92rem);
  align-self: start;
}

.certainty-content__header {
  gap: 0.48rem;
}

.certainty-content__title {
  font-size: clamp(1.88rem, 1.36rem + 2.2vw, 2.88rem);
  line-height: 0.96;
  max-width: 16ch;
  white-space: pre-line;
}

.certainty-stats {
  display: grid;
  gap: 0.08rem;
}

.certainty-stat {
  display: grid;
  grid-template-columns: clamp(5.6rem, 10vw, 7.2rem) 1fr;
  gap: clamp(0.88rem, 2vw, 1.6rem);
  align-items: start;
  padding: clamp(1.16rem, 1.8vw, 1.52rem) 0;
  border-top: 1px solid color-mix(in oklch, var(--color-line) 80%, white);
}

.certainty-stat:first-child {
  border-top: 0;
  padding-top: 0.28rem;
}

.certainty-stat__value {
  display: flex;
  align-items: flex-start;
  width: 100%;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.52rem + 2.3vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.certainty-stat__copy {
  display: grid;
  gap: 0.36rem;
}

.certainty-stat__copy h3 {
  font-size: clamp(1.24rem, 0.96rem + 1vw, 1.76rem);
  line-height: 1;
}

.certainty-stat__copy p {
  max-width: 34ch;
  font-size: clamp(0.784rem, 0.736rem + 0.18vw, 0.864rem);
}

html.js [data-certainty-sequence] .certainty-visual,
html.js [data-certainty-sequence] .certainty-stat {
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity var(--duration-slow) var(--ease-out-quart),
    transform var(--duration-slow) var(--ease-out-quart);
}

html.js [data-certainty-sequence].is-visual-visible .certainty-visual,
html.js [data-certainty-sequence].is-stats-visible .certainty-stat {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-certainty-sequence] .certainty-content__title {
  min-height: 3em;
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 260ms var(--ease-out-quart),
    transform 260ms var(--ease-out-quart);
}

html.js [data-certainty-sequence].is-title-active .certainty-content__title {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-certainty-sequence].is-stats-visible .certainty-stat:nth-child(2) {
  transition-delay: 90ms;
}

html.js [data-certainty-sequence].is-stats-visible .certainty-stat:nth-child(3) {
  transition-delay: 180ms;
}

.proof-showcase {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.proof-callout {
  display: grid;
  gap: 0.8rem;
}

.proof-callout--center {
  justify-items: center;
  text-align: center;
}

.proof-callout__headline {
  font-size: clamp(1.84rem, 1.52rem + 3vw, 3.84rem);
  line-height: 0.96;
}

.proof-callout__link {
  color: var(--color-accent-700);
}

.proof-stage {
  position: relative;
  width: min(100%, 52.8rem);
  margin-inline: auto;
}

.proof-compare {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: clamp(1.12rem, 2vw, 1.6rem);
  box-shadow: 0 30px 80px oklch(35% 0.04 247 / 0.12);
}

.proof-compare__panel {
  display: grid;
  gap: 0.72rem;
  min-height: 13.6rem;
  padding: clamp(1.12rem, 0.88rem + 1vw, 1.6rem);
}

.proof-compare__panel h3 {
  font-size: clamp(1.24rem, 1.04rem + 0.8vw, 1.68rem);
}

.proof-compare__panel--plain {
  background: linear-gradient(180deg, color-mix(in oklch, white 76%, var(--color-accent-050)), white 70%);
}

.proof-compare__panel--accent {
  background: linear-gradient(180deg, oklch(61% 0.08 274), oklch(50% 0.06 272));
}

.proof-compare__panel--accent h3,
.proof-compare__panel--accent p,
.proof-compare__panel--accent .proof-compare__divider span {
  color: white;
}

.proof-compare__mock {
  display: grid;
  gap: 0.56rem;
  align-self: end;
  min-height: 7.2rem;
  padding: 0.8rem;
  border-radius: 0.8rem;
  background: color-mix(in oklch, var(--color-surface-100) 65%, white);
}

.proof-compare__mock--accent {
  border: 1px solid color-mix(in oklch, white 25%, transparent);
  background:
    linear-gradient(90deg, color-mix(in oklch, white 16%, transparent) 0 49.5%, white 49.5% 50.5%, color-mix(in oklch, black 8%, transparent) 50.5% 100%),
    color-mix(in oklch, black 18%, white 10%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 10%, transparent);
}

.proof-compare__divider {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: var(--text-xs);
  font-weight: 700;
}

.proof-compare__line {
  height: 0.64rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-line) 62%, white);
}

.proof-compare__mock--accent .proof-compare__line {
  background: color-mix(in oklch, white 22%, transparent);
}

.proof-compare__line--wide {
  width: 76%;
}

.proof-compare__line--short {
  width: 42%;
}

.proof-video-placeholder {
  margin-top: 0.8rem;
  min-height: 19.2rem;
  border-radius: clamp(1.12rem, 2vw, 1.6rem);
  background:
    radial-gradient(circle at 20% 70%, color-mix(in oklch, var(--color-accent-100) 55%, white), transparent 14.4rem),
    linear-gradient(180deg, color-mix(in oklch, white 76%, var(--color-accent-050)), white 70%);
  box-shadow: 0 24px 70px oklch(35% 0.03 247 / 0.1);
}

.proof-float {
  position: absolute;
  top: -1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.44rem;
  aspect-ratio: 1;
  border-radius: 0.96rem;
  background: white;
  box-shadow: 0 18px 40px oklch(35% 0.03 247 / 0.12);
  animation: hero-float 10s ease-in-out infinite;
}

.proof-float--left {
  left: -1.8rem;
}

.proof-float--right {
  right: -1.8rem;
  animation-direction: reverse;
}

.proof-float__icon {
  display: grid;
  place-items: center;
  width: 2.08rem;
  aspect-ratio: 1;
  border-radius: 0.72rem;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-accent-100) 28%, white), color-mix(in oklch, var(--color-accent-600) 70%, white));
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
}

body[data-page="about"] {
  --font-display: "Montserrat", "Segoe UI", sans-serif;
}

/* Same tighter rhythm as the product pages; the hero keeps its own. */
body[data-page="about"] section:not(.hero) {
  padding: clamp(2.6rem, 5.5vw, 4.8rem) 0;
}

body[data-page="about"] main section[id] {
  scroll-margin-top: 4.4rem;
}

.about-hero {
  position: relative;
  padding-top: clamp(3.6rem, 7vw, 5.6rem);
  overflow: clip;
}

.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
}

.about-hero::before {
  top: 0;
  left: 50%;
  width: min(82vw, 44.8rem);
  height: 12.8rem;
  background: color-mix(in oklch, var(--color-accent-600) 24%, white);
  opacity: 0.55;
  transform: translateX(-50%);
}

.about-hero::after {
  right: -4rem;
  bottom: 0.8rem;
  width: 13.6rem;
  height: 13.6rem;
  background: color-mix(in oklch, var(--color-accent-100) 78%, white);
  opacity: 0.75;
}

.about-story__shell {
  display: grid;
  gap: clamp(1.28rem, 3vw, 2.8rem);
  align-items: start;
}

.about-hero__panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 0.8rem + 1vw, 1.4rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, white 82%, var(--color-accent-050)), color-mix(in oklch, white 95%, var(--color-accent-100)));
  box-shadow:
    0 30px 70px oklch(35% 0.04 247 / 0.1),
    inset 0 0 0 1px color-mix(in oklch, white 55%, var(--color-line));
}

.about-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in oklch, var(--color-line) 78%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-line) 78%, transparent) 1px, transparent 1px);
  background-size: 2.12rem 2.12rem;
  mask-image: linear-gradient(180deg, black, transparent);
  opacity: 0.35;
  pointer-events: none;
}

.about-hero__panel-header,
.about-hero__highlight {
  position: relative;
  z-index: 1;
}

.about-hero__panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
  padding-bottom: 0.16rem;
}

.about-hero__panel-kicker,
.about-hero__panel-label,
.about-hero__highlight-value,
.about-team__role,
.about-story__milestone-step {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-hero__panel-kicker {
  color: var(--color-accent-700);
}

.about-hero__panel-label {
  color: var(--color-ink-500);
}

.about-hero__highlights {
  display: grid;
  gap: 0.2rem;
}

.about-hero__highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.88rem 0;
  border-top: 1px solid color-mix(in oklch, var(--color-line) 82%, white);
}

.about-hero__highlight:first-child {
  border-top: 0;
  padding-top: 0.08rem;
}

.about-hero__highlight-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.36rem;
  min-height: 1.92rem;
  padding: 0.36rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent-100) 70%, white);
  color: var(--color-accent-700);
}

.about-hero__highlight-copy {
  display: grid;
  gap: 0.28rem;
}

.about-hero__highlight-copy h2 {
  font-size: clamp(1.08rem, 0.96rem + 0.55vw, 1.44rem);
  line-height: 1;
}

.about-hero__highlight-copy p {
  max-width: 30ch;
}

.about-mission__lead {
  max-width: 38rem;
}

/* The mission is the page's full-screen hero, without the homepage's blue
   glow at the top. */
.about-mission.hero::before,
.about-mission.hero::after {
  display: none;
}

.about-team__shell {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.24rem);
}

.about-team__intro {
  max-width: 33.6rem;
}

/* align-items: start so opening one bio grows only that card, not its row. */
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.8rem;
}

.about-team__card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0.8rem;
  padding: clamp(0.8rem, 0.68rem + 0.8vw, 1.08rem);
  overflow: hidden;
  transition:
    transform 320ms var(--ease-out-quart),
    box-shadow 320ms var(--ease-out-quart),
    border-color 320ms var(--ease-out-quart);
}

.about-team__card:hover,
.about-team__card:focus-within {
  transform: translateY(-0.2rem);
  border-color: color-mix(in oklch, var(--color-accent-600) 32%, var(--color-line));
  box-shadow: 0 26px 52px oklch(31% 0.03 247 / 0.11);
}

.about-team__media {
  position: relative;
  align-self: start;
  aspect-ratio: 4 / 4.6;
  border-radius: 1.12rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, white 68%, var(--color-accent-050)), color-mix(in oklch, white 82%, var(--color-accent-100)));
}

.about-team__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, oklch(22% 0.018 248 / 0.2));
  pointer-events: none;
}

.about-team__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.about-team__body {
  display: grid;
  gap: 0.36rem;
  align-content: start;
}

.about-team__role {
  color: var(--color-accent-700);
}

.about-team__name {
  font-size: clamp(1.24rem, 1.08rem + 0.7vw, 1.6rem);
  line-height: 1;
}

/* Bios start collapsed; the name is a button with a plus that opens its own
   card (main.js, initTeamBios). Without JS every bio stays open. */
.about-team__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* Touch screens: a finger-sized row for the name and its plus. */
@media (pointer: coarse) {
  .about-team__toggle {
    min-height: 2.5rem;
  }
}

.about-team__toggle:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 0.3rem;
  border-radius: 0.3rem;
}

.about-team__plus {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition:
    background var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.about-team__plus::before,
.about-team__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.64rem;
  height: 1.5px;
  border-radius: 1px;
  background: var(--color-ink-900);
  transform: translate(-50%, -50%);
  transition:
    transform var(--duration-slow) var(--ease-out-quart),
    background var(--duration-base) var(--ease-out-quart);
}

.about-team__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.about-team__toggle:hover .about-team__plus {
  box-shadow: inset 0 0 0 1px var(--color-accent-600);
}

.about-team__toggle[aria-expanded="true"] .about-team__plus {
  background: var(--color-ink-950);
  box-shadow: none;
}

.about-team__toggle[aria-expanded="true"] .about-team__plus::before,
.about-team__toggle[aria-expanded="true"] .about-team__plus::after {
  background: white;
}

/* The vertical bar turns flat, so the plus becomes a minus. */
.about-team__toggle[aria-expanded="true"] .about-team__plus::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

.about-team__bio {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out-quart);
}

.about-team__bio-inner {
  min-height: 0;
  overflow: hidden;
}

.about-team__bio p {
  max-width: none;
  padding-top: 0.4rem;
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out-quart);
}

html.js .about-team__name:has([aria-expanded="false"]) + .about-team__bio {
  grid-template-rows: 0fr;
}

html.js .about-team__name:has([aria-expanded="false"]) + .about-team__bio p {
  opacity: 0;
}

.about-story {
  position: relative;
}

.about-story__content {
  max-width: 33.6rem;
}

.about-story__title {
  max-width: 14ch;
  font-size: clamp(1.96rem, 1.56rem + 2.6vw, 3.2rem);
  line-height: 0.97;
}

.about-story__lead {
  max-width: 30.4rem;
}

.about-story__rail {
  display: grid;
  gap: 0.8rem;
}

.about-story__milestone {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.04rem, 0.8rem + 1vw, 1.36rem);
  background:
    linear-gradient(180deg, color-mix(in oklch, white 82%, var(--color-accent-050)), color-mix(in oklch, white 96%, var(--color-accent-100)));
}

.about-story__milestone-step {
  color: var(--color-accent-700);
}

.about-story__milestone h3 {
  font-size: clamp(1.16rem, 0.96rem + 0.75vw, 1.56rem);
  line-height: 1;
}

.about-story__milestone p {
  max-width: 32ch;
}

.about-cta {
  align-items: center;
}

.trust-stack {
  display: grid;
  gap: 0.8rem;
}

.trust-card h3,
.article-card h3,
.contact-card h3 {
  margin-bottom: 0.44rem;
}

.page-hero {
  padding-top: clamp(2.4rem, 5vw, 4rem);
  align-items: end;
}

.page-hero__aside {
  display: grid;
  gap: 0.8rem;
}

.page-section {
  padding-top: clamp(2rem, 5vw, 3.2rem);
}

.page-band {
  padding: clamp(1rem, 0.8rem + 1vw, 1.4rem);
}

.article-card {
  display: grid;
  gap: 0.8rem;
}

.article-card__meta {
  color: var(--color-ink-500);
  font-size: var(--text-sm);
}

.contact-card {
  display: grid;
  gap: 0.6rem;
}

.contact-card__title {
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mid);
}

.home-cta {
  display: grid;
  gap: 0.96rem;
  justify-items: center;
  align-content: center;
  min-height: min(72vh, 35.2rem);
  padding: clamp(0.4rem, 1vw, 0.8rem) 0;
  text-align: center;
}

.site-shell--home-cta {
  width: min(100% - 1.6rem, 70.4rem);
}

.home-cta__content {
  justify-items: center;
  /* Matches .home-cta's gap, so the lead sits evenly between heading and button. */
  gap: 0.96rem;
  width: min(100%, 51.2rem);
}

.home-cta__content h2 {
  max-width: 14ch;
  font-size: clamp(1.84rem, 1.52rem + 3vw, 3.84rem);
  line-height: 0.96;
  color: var(--color-ink-950);
}

.home-cta__content .page-lead {
  max-width: 32rem;
  color: var(--color-ink-950);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.home-cta__actions {
  justify-content: center;
}

.home-cta__link {
  color: var(--color-accent-700);
}

.home-cta-section {
  display: grid;
  align-items: center;
  min-height: 70vh;
  padding: clamp(3.2rem, 7vw, 4.8rem) 0;
  background: linear-gradient(
    180deg,
    var(--color-surface-000) 0%,
    color-mix(in oklch, white 70%, var(--color-accent-050)) 18%,
    var(--color-accent-cta-soft) 30%,
    var(--color-accent-cta-soft) 100%
  );
}

@media (min-width: 48rem) {
  .client-carousel {
    --client-carousel-columns: 2;
  }

  .about-story__shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-layout,
  .proof-layout,
  .compliance-layout,
  .shell-layout,
  .certainty-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .certainty-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.8rem, 4vw, 3.8rem);
  }

  .certainty-visual {
    width: min(100%, 24rem);
  }

  .proof-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-layout {
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  .value-layout .value-card--feature,
  .value-layout .value-card--soft,
  .value-layout .value-card--minimal {
    min-height: 15.2rem;
  }

  .value-layout > .value-card {
    height: 100%;
  }

  .value-card--showcase {
    grid-template-columns: minmax(0, 1fr) minmax(9.2rem, 44%);
    align-items: stretch;
  }

  .value-card--showcase .value-card__preview--showcase {
    order: 2;
  }

  .value-card--showcase .value-card__body--showcase {
    order: 1;
    align-content: end;
  }

  .value-card--snapshot-showcase .value-card__body--showcase {
    align-content: start;
    padding-top: 0.16rem;
  }

  .value-card--snapshot-showcase .value-card__preview--snapshot-offset {
    width: calc(100% + 3.4rem);
    margin-right: -3.4rem;
    margin-left: -0.28rem;
  }

  .value-card--data-health-showcase .value-card__body--showcase {
    position: relative;
    z-index: 3;
    align-content: end;
    width: 100%;
    max-width: none;
    /* Clears the photo above (it ends 10.56rem down), so on narrow tablets
       the text grows the card instead of sliding under the photo. */
    padding-top: 10rem;
    padding-bottom: 0.12rem;
  }

  .value-card--data-health-showcase {
    position: relative;
    grid-template-columns: 1fr;
  }

  .value-card--data-health-showcase .value-card__body--showcase h3,
  .value-card--data-health-showcase .value-card__body--showcase p {
    max-width: none;
  }

  .value-card--data-health-showcase .value-card__preview--data-health-offset {
    position: absolute;
    top: -1.92rem;
    right: 4.16rem;
    width: min(16.4rem, 65%);
    height: 12.48rem;
    margin: 0;
    box-shadow: 0 18px 42px oklch(31% 0.03 247 / 0.1);
  }

  .showcase-panel {
    aspect-ratio: 16 / 10;
  }

  .mock-window {
    top: 20%;
    width: min(76%, 44.8rem);
  }

  .qa-window__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .qa-window__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.6em;
  }

  .automation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card__body--showcase,
  .value-card__preview--snapshot-offset,
  .value-card__preview--data-health-offset,
  .value-card__chat-message,
  .value-card__question-mark,
  .value-card__image--wasted-effort,
  .value-card__image-wipe {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .value-card__image-wipe {
    display: none !important;
  }
}

@media (min-width: 64rem) {
  .client-carousel {
    --client-carousel-columns: 4;
  }

  .showcase-panel {
    aspect-ratio: 895 / 540;
  }

  .automation-grid {
    gap: 1.2rem;
  }

  .about-story__shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(17.6rem, 0.95fr);
  }

  .about-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__video-placeholder {
    min-height: 22.4rem;
  }

  .proof-layout,
  .compliance-layout {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .proof-layout--reverse,
  .shell-layout,
  .certainty-layout {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .certainty-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(17.6rem, 0.92fr);
    gap: clamp(2.2rem, 4vw, 4.4rem);
  }

  .certainty-visual {
    width: min(100%, 25.6rem);
  }

  .proof-video-placeholder {
    min-height: 22.4rem;
  }
}

@media (max-width: 47.99rem) {
  .hero__floating-card {
    position: static;
    max-width: none;
    margin-bottom: 0.6rem;
  }

  .hero__video-stage {
    display: grid;
    gap: 0.68rem;
  }

  .hero__halo {
    display: none;
  }

  .proof-float {
    display: none;
  }

  .about-hero {
    padding-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certainty-visual__download {
    animation: none;
  }

  .about-team__card {
    transition: none;
    transform: none !important;
  }

  .about-team__bio,
  .about-team__bio p,
  .about-team__plus::before,
  .about-team__plus::after {
    transition: none;
  }

  .hero__floating-card,
  .hero__halo,
  .hero__scroll-arrow,
  .hero__scroll-arrow::after {
    animation: none;
  }

  [data-hero-sequence] .hero__title-word,
  [data-hero-sequence] [data-hero-summary],
  [data-hero-sequence] [data-hero-actions],
  [data-hero-sequence] [data-hero-scroll-cue] {
    transition: none;
    transform: none;
  }
}

/* Homepage "Improve with every call": the AI Training hero demo. It keeps its
   product-page look; this adds a soft glow behind the stage. */
.home-demos {
  overflow-x: clip;
}

.home-demos .showcase-shell {
  gap: clamp(1rem, 2.4vw, 1.4rem);
}

.home-demos .showcase-heading {
  margin-bottom: clamp(0.4rem, 2vw, 1.2rem);
}

.home-demos__stage {
  position: relative;
  isolation: isolate;
}

/* Blue and violet light pooling behind the panel. Painted once: soft
   gradients rather than a blur filter, and no animation, so the demo on top
   is the only thing redrawing. */
.home-demos__glow {
  position: absolute;
  inset: -12% -18% -20%;
  z-index: -1;
  background:
    radial-gradient(30% 40% at 30% 48%, oklch(74% 0.12 247 / 0.4), oklch(74% 0.12 247 / 0.12) 45%, transparent 75%),
    radial-gradient(28% 38% at 72% 58%, oklch(72% 0.12 295 / 0.34), oklch(72% 0.12 295 / 0.1) 45%, transparent 75%);
  pointer-events: none;
}

.home-demos__tilt {
  display: grid;
}

.home-demos .showcase-panel.hero-demo {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  box-shadow:
    0 2.4rem 4.8rem -1.6rem oklch(30% 0.06 262 / 0.35),
    inset 0 0 0 1px color-mix(in oklch, white 50%, var(--color-line));
}

/* ==== Contact ============================================================= */
body[data-page="contact"] {
  --font-display: "Montserrat", "Segoe UI", sans-serif;
}

.contact-intro {
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}

.contact-intro__shell {
  display: grid;
  justify-items: center;
  gap: clamp(1.8rem, 4vw, 2.6rem);
}

.contact-form {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: 44rem;
  padding: clamp(1.2rem, 0.8rem + 2vw, 2.2rem);
}

.contact-form .field input,
.contact-form .field textarea {
  padding: 0.8rem 0.9rem;
  border-color: var(--color-surface-200);
  transition:
    border-color var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

/* Touch screens: 16px text, or iOS zooms the page when a field is tapped. */
@media (pointer: coarse) {
  .contact-form .field input,
  .contact-form .field textarea {
    font-size: 1rem;
  }
}

.contact-form .field input:focus-visible,
.contact-form .field textarea:focus-visible {
  border-color: var(--color-accent-600);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-600) 18%, transparent);
}

.field__optional {
  color: var(--color-ink-500);
  font-weight: 400;
}

.contact-form__interests {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-form__interests legend {
  margin-bottom: 0.55rem;
  padding: 0;
  color: var(--color-ink-900);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Interest chips: checkboxes that look like pills. */
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-chip {
  position: relative;
  cursor: pointer;
}

.contact-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-pill);
  background: white;
  color: var(--color-ink-700);
  font-size: var(--text-sm);
  font-weight: 500;
  transition:
    background var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart);
}

.contact-chip:hover span {
  border-color: var(--color-accent-600);
}

.contact-chip input:checked + span {
  border-color: var(--color-accent-600);
  background: var(--color-accent-050);
  color: var(--color-ink-950);
}

.contact-chip input:checked + span::before {
  content: "\2713";
  color: var(--color-accent-600);
  font-weight: 700;
}

.contact-chip input:focus-visible + span {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

.contact-form__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 40rem) {
  .contact-form__actions .button {
    width: 100%;
  }
}

/* ==== Privacy, Terms and 404 ============================================== */
body[data-page="privacy"],
body[data-page="terms"],
body[data-page="not-found"] {
  --font-display: "Montserrat", "Segoe UI", sans-serif;
}

/* Legal pages: a contents list beside one readable document. */
.legal {
  padding: clamp(2.6rem, 6vw, 5rem) 0;
}

.legal__shell {
  display: grid;
  gap: clamp(1.8rem, 4vw, 2.8rem);
}

.legal__layout {
  display: grid;
  gap: 1.6rem;
  align-items: start;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
}

.legal__toc ol {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__toc a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
  color: var(--color-ink-500);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart);
}

.legal__toc a:hover {
  background: var(--color-accent-050);
  color: var(--color-ink-950);
}

.legal__doc {
  display: grid;
  gap: 1.9rem;
  padding: clamp(1.3rem, 0.8rem + 2.4vw, 2.6rem);
}

.legal__section {
  display: grid;
  gap: 0.7rem;
  scroll-margin-top: 6rem;
}

.legal__section h2 {
  color: var(--color-ink-950);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.25;
}

.legal__section p,
.legal__section li {
  max-width: 62ch;
  color: var(--color-ink-700);
  line-height: 1.65;
}

.legal__section strong {
  color: var(--color-ink-950);
  font-weight: 600;
}

.legal__section ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__section li {
  display: flex;
  gap: 0.7rem;
}

.legal__section li::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.7rem;
  border-radius: 50%;
  background: var(--color-accent-600);
}

.legal__section a {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Phones and tablets: the contents list is dropped; the document reads top
   to bottom. */
@media (max-width: 55.99rem) {
  .legal__toc {
    display: none;
  }
}

@media (min-width: 56rem) {
  .legal__layout {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.4rem;
  }

  .legal__toc {
    position: sticky;
    top: 6rem;
  }
}

/* 404: a puzzled Sam. */
.notfound {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
}

.notfound__shell {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  text-align: center;
}

.notfound__art {
  width: clamp(9rem, 7rem + 8vw, 13rem);
}

.notfound__sam {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 1.2rem 1.6rem oklch(50% 0.15 255 / 0.18));
}

.notfound__head {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  rotate: -7deg;
}

.notfound__huh {
  font-family: var(--font-display);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: notfound-huh 2.6s var(--ease-in-out) infinite;
}

@keyframes notfound-huh {
  0%,
  100% {
    rotate: -8deg;
  }

  50% {
    rotate: 8deg;
  }
}

.notfound__actions {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .notfound__huh {
    animation: none;
  }
}