/*
  Home page. The 3D face lives inside .stage only: the stage is three screens tall, its inner box
  stays pinned while the three text steps scroll past, then the whole stage scrolls away.
  Nothing from the face can appear behind another section.
*/

.stage {
  --step-h: calc(100svh - var(--header-h));
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  isolation: isolate;
}

.stage__sticky {
  position: sticky;
  top: var(--header-h);
  height: var(--step-h);
  overflow: hidden;
  background: var(--paper);
}

/* The face layer. Its bottom edge fades out so nothing is cut off when the hero scrolls away. */
.stage__face {
  --model-center-x: 70%;
  --model-center-y: 47%;
  position: absolute;
  z-index: 1;
  inset: 0;
  outline: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
}

/* Glow and rings sit in one layer that fades out at the top, so the hero box never crops them
   in a hard line under the navigation bar. The face itself is not faded. */
.stage__backdrop {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  pointer-events: none;
}

/* The original backdrop: a soft halo and two thin rings centred on the face, moving with it */
.stage__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--model-center-x) var(--model-center-y),
    color-mix(in srgb, var(--sheet) 94%, var(--plum)) 0 10rem,
    color-mix(in srgb, var(--plum) 12%, transparent) 23rem,
    transparent 35rem
  );
}

html[data-resolved-theme="dark"] .stage__halo {
  background: radial-gradient(
    circle at var(--model-center-x) var(--model-center-y),
    color-mix(in srgb, var(--plum) 10%, transparent),
    transparent 25rem
  );
}

.stage__orbit {
  position: absolute;
  top: var(--model-center-y);
  left: var(--model-center-x);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--plum) 24%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.stage__orbit--outer {
  width: min(58vw, 52rem);
  border-style: dashed;
}

.stage__orbit--inner {
  width: min(38vw, 34rem);
  box-shadow: 0 0 120px color-mix(in srgb, var(--plum) 14%, transparent);
}

.stage__face canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__face:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -6px;
  border-radius: var(--r-lg);
}

.stage__fallback {
  position: absolute;
  top: 50%;
  left: 70%;
  width: min(44vw, 34rem);
  transform: translate(-50%, -50%);
}

.stage__hint {
  position: absolute;
  z-index: 2;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  bottom: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-3);
  font-size: var(--t-small);
  transition: opacity 400ms var(--ease);
}

.stage.has-interacted .stage__hint {
  opacity: 0;
}

@media (hover: none), (pointer: coarse), (max-width: 47.999rem) {
  .stage__hint {
    display: none;
  }
}

/* The three text steps scroll over the pinned face */
.stage__steps {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--step-h));
  pointer-events: none;
}

.stage__step {
  display: flex;
  min-height: var(--step-h);
  align-items: center;
}

.stage__copy {
  display: flex;
}

.stage__text {
  display: grid;
  justify-items: start;
  gap: var(--s5);
  width: min(100%, 34rem);
}

.stage__text a {
  pointer-events: auto;
}

.stage__text h1,
.stage__text h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-transform: uppercase;
}

.stage__text h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
}


.stage__lead {
  max-width: 30rem;
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.6;
}

/* State title above each heading: three circles (filled up to the current state) and its name */
.stage__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--plum);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
}

.stage__dots {
  display: inline-flex;
  gap: var(--s2);
}

.stage__dots i {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
}

.stage__dots i.is-on {
  background: currentColor;
  opacity: 1;
}

.stage__state--alert {
  color: var(--signal);
}

/* Hero text animation: words rise in one by one, the rest follows */
html.js .stage__text .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: top;
}

html.js .stage__text .word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 760ms var(--ease) calc(120ms + var(--i) * 70ms);
}

html.js .stage__step.is-in .word > span {
  transform: none;
}

html.js .stage__state,
html.js .stage__lead,
html.js .stage__text .btn-row {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}

html.js .stage__lead,
html.js .stage__text .btn-row {
  transition-delay: calc(260ms + var(--words, 4) * 70ms);
}

html.js .stage__text .btn-row {
  transition-delay: calc(380ms + var(--words, 4) * 70ms);
}

html.js .stage__step.is-in .stage__state,
html.js .stage__step.is-in .stage__lead,
html.js .stage__step.is-in .btn-row {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .stage__text .word > span,
  html.js .stage__state,
  html.js .stage__lead,
  html.js .stage__text .btn-row {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 64rem) {
  .stage__text {
    width: min(100%, 27rem);
  }
}

/* Phones: face in the top half, each step's text on a card in the bottom half */
@media (max-width: 63.999rem) {
  .stage__orbit--outer {
    width: 92vw;
  }

  .stage__orbit--inner {
    width: 62vw;
  }
}

@media (max-width: 47.999rem) {
  .stage__orbit--outer {
    width: 124vw;
  }

  .stage__orbit--inner {
    width: 82vw;
  }

  .stage__step {
    align-items: flex-end;
  }

  .stage__copy {
    padding-bottom: var(--s6);
  }

  .stage__text {
    width: 100%;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--sheet);
    box-shadow: var(--shadow);
  }

  .stage__state {
    background: var(--paper);
  }

  .stage__fallback {
    top: 30%;
    left: 50%;
    width: 80vw;
  }
}


.center-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-2);
  text-align: center;
}

.cols .ticks {
  margin-top: var(--s2);
}

.section--flush {
  padding-top: 0;
}

.section--tint + .section--flush,
.section + .section--flush {
  padding-top: var(--section-y);
}

/* On phones the text sits on a card: fade the card in together with its words */
@media (max-width: 47.999rem) {
  html.js .stage__step .stage__text {
    opacity: 0;
    transition: opacity 500ms var(--ease);
  }

  html.js .stage__step.is-in .stage__text {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .stage__step .stage__text {
    opacity: 1;
  }
}

/* What your result looks like: the numbered list, then the same reel the real result shows */
.result-parts {
  display: grid;
  gap: var(--s4);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
}

.result-parts li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.result-parts li > span {
  display: grid;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  color: var(--on-plum);
  background: var(--plum);
  font-size: 0.8125rem;
  font-weight: 700;
}

.result-parts strong {
  display: block;
}

.result-parts p {
  margin: 0.125rem 0 0;
  color: var(--ink-2);
}

.focus-reel {
  --line-gutter: 4.25rem;
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--sheet);
}

.focus-reel__film {
  position: relative;
  padding: 1.625rem 0.625rem;
  border-radius: 0.75rem;
  background: var(--tint);
}

.focus-reel__film::before,
.focus-reel__film::after {
  position: absolute;
  right: 0.5rem;
  left: 0.5rem;
  height: 0.625rem;
  background: radial-gradient(circle at 0.5rem 50%, var(--rule-strong) 0 0.22rem, transparent 0.25rem) 0 0 / 1.375rem 100% repeat-x;
  content: "";
}

.focus-reel__film::before {
  top: 0.5rem;
}

.focus-reel__film::after {
  bottom: 0.5rem;
}

.focus-reel__film ol {
  display: grid;
  grid-template-columns: repeat(var(--moments, 5), minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.focus-reel__moment {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.focus-reel__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  cursor: zoom-in;
}

.focus-reel__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: #2c2733;
  object-fit: cover;
  transition: transform 160ms var(--ease);
}

.focus-reel__moment.is-above .focus-reel__frame img {
  border-color: var(--signal);
}

.focus-reel__frame:hover img {
  transform: translateY(-2px);
}

.focus-reel__frame:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.focus-reel__num {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: 0.3125rem;
  color: #fff;
  background: #74407f;
  font-size: 0.75rem;
  font-weight: 700;
}

.focus-reel__flag {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  display: grid;
  width: 1.375rem;
  height: 1.375rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #c4243b;
}

.focus-reel__flag .lucide {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 2.5;
}

.focus-reel__zoom {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0.375rem;
  color: #fff;
  background: rgb(0 0 0 / 55%);
}

.focus-reel__zoom .lucide {
  width: 0.75rem;
  height: 0.75rem;
}

/* The seconds a moment covers, then its score; in a narrow reel the score drops to a second line */
.focus-reel__time {
  color: var(--ink-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.focus-reel__time > span {
  white-space: nowrap;
}

.focus-reel__moment.is-above .focus-reel__time {
  color: var(--signal);
  font-weight: 700;
}

/* The chart leaves a margin on the right (--line-gutter) for the line's label, so it never covers the curve */
.focus-reel__chart {
  position: relative;
  margin-top: var(--s3);
  margin-right: var(--line-gutter);
}

.focus-reel__chart svg {
  display: block;
  width: 100%;
  height: 7.5rem;
  overflow: visible;
}

.focus-reel__area--above {
  fill: var(--signal);
  opacity: 0.22;
}

.focus-reel__area--below {
  fill: color-mix(in srgb, var(--ink-3) 14%, var(--tint));
  opacity: 0.35;
}

.focus-reel__curve {
  fill: none;
  stroke: var(--signal);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.focus-reel__line {
  stroke: var(--ink-2);
  stroke-dasharray: 6 6;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.focus-reel__marks {
  position: absolute;
  inset: 0;
}

.focus-reel__mark {
  position: absolute;
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--sheet);
  font-size: 0.6875rem;
  font-weight: 800;
  transform: translate(-50%, -50%);
  cursor: zoom-in;
}

.focus-reel__mark.is-below,
.focus-reel__span.is-below .focus-reel__mark {
  background: color-mix(in srgb, var(--plum) 45%, var(--ink-3));
}

/* A moment on the chart: its number at its own score, centred on the seconds it covers */
.focus-reel__span {
  position: absolute;
  height: 0;
  color: var(--signal);
}

.focus-reel__span.is-below {
  color: color-mix(in srgb, var(--plum) 45%, var(--ink-3));
}


.focus-reel__span .focus-reel__mark {
  top: 0;
  left: 50%;
  cursor: default;
}

.focus-reel__line-label {
  position: absolute;
  top: var(--line-at, 48%);
  left: calc(100% + 0.625rem);
  display: grid;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
}

.focus-reel__line-label b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.focus-reel__axis {
  display: flex;
  justify-content: space-between;
  margin-right: var(--line-gutter);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.focus-reel figcaption {
  color: var(--ink-2);
  font-size: var(--t-small);
}

.focus-reel figcaption strong {
  color: var(--signal);
}

@media (max-width: 40rem) {
  .focus-reel {
    --line-gutter: 3.25rem;
    padding: var(--s3);
  }

  .focus-reel__film {
    padding: 1.5rem 0.375rem;
  }

  .focus-reel__film ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--s3);
  }
}


.focus-reel__frame--static {
  cursor: default;
}

.focus-reel__frame--static:hover img {
  transform: none;
}

/* Example deepfake: drag the divider to compare the clip with OriginAI's view of it */
.demo__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 0.75rem;
  font-weight: 650;
}

.demo__tag--fake {
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: #fff;
  background: #c4243b;
  box-shadow: none;
}

.demo__tag--fake .lucide {
  width: 0.8125rem;
  height: 0.8125rem;
}

.compare {
  display: grid;
  gap: var(--s4);
  margin: 0;
}

.compare__media {
  position: relative;
}

.compare__stage {
  --split: 55%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 944 / 500;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(40, 12, 50, 0.45);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.compare__stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.compare__empty {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s5);
  color: var(--screen-ink-2);
  background: var(--screen-2);
  text-align: center;
}

.compare__empty[hidden] {
  display: none;
}

.compare__empty .lucide {
  width: 2rem;
  height: 2rem;
}

.compare__empty strong {
  color: var(--screen-ink);
}

/* OriginAI's side: the background dims and greys out, the face stays clear */
.compare__ai,
.compare__marks {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--split));
  pointer-events: none;
}

.compare__ai {
  --hole: radial-gradient(var(--face-rx, 13%) var(--face-ry, 26%) at var(--face-x, 55%) var(--face-y, 33%), transparent 55%, #000 100%);
  background: rgba(10, 8, 14, 0.3);
  -webkit-backdrop-filter: grayscale(0.9) brightness(0.45) contrast(1.1);
  backdrop-filter: grayscale(0.9) brightness(0.45) contrast(1.1);
  -webkit-mask-image: var(--hole);
  mask-image: var(--hole);
}

@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  .compare__ai {
    background: rgba(10, 8, 14, 0.6);
  }
}

.compare__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(215, 166, 229, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 166, 229, 0.14) 1px, transparent 1px);
  background-size: 2rem 2rem;
}

.compare__glow {
  position: absolute;
  left: 55%;
  top: 33%;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, 0.42), rgba(255, 83, 104, 0.2) 40%, transparent 66%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.compare__focus {
  position: absolute;
  left: 46%;
  top: 14%;
  width: 17.6%;
  height: 36%;
}

.compare__focus i {
  position: absolute;
  width: 24%;
  height: 22%;
  border: 3px solid var(--screen-signal);
}

.compare__focus i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.5rem; }
.compare__focus i:nth-child(2) { top: 0; right: 0; border-bottom: 0; border-left: 0; border-top-right-radius: 0.5rem; }
.compare__focus i:nth-child(3) { bottom: 0; left: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 0.5rem; }
.compare__focus i:nth-child(4) { right: 0; bottom: 0; border-top: 0; border-left: 0; border-bottom-right-radius: 0.5rem; }

.compare__label {
  position: absolute;
  top: var(--s4);
  z-index: 2;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem 0.8rem 0.4rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.625rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  font-size: 0.8125rem;
  font-weight: 600;
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .compare__label {
    background: rgba(20, 16, 24, 0.6);
  }
}

.compare__label .lucide {
  width: 0.9375rem;
  height: 0.9375rem;
}

.compare__label--you {
  left: var(--s4);
}

.compare__label--ai {
  right: var(--s4);
}

.compare__label--ai .lucide {
  color: #e8a8f5;
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 3;
  width: 3rem;
  margin-left: -1.5rem;
  cursor: ew-resize;
}

.compare__divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
  content: "";
}

.compare__handle {
  position: absolute;
  top: 70%;
  left: 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  color: #74407f;
  background: #fff;
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
}

.compare__divider:focus-visible {
  outline: none;
}

.compare__divider:focus-visible .compare__handle {
  outline: 3px solid #d7a6e5;
  outline-offset: 3px;
}

.compare__play {
  position: absolute;
  bottom: var(--s4);
  left: var(--s4);
  z-index: 4;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.compare__play:hover {
  background: rgba(0, 0, 0, 0.8);
}

.compare__play:focus-visible {
  outline: 3px solid #d7a6e5;
  outline-offset: 2px;
}

.compare__icon-pause,
.compare.is-playing .compare__icon-play {
  display: none;
}

.compare.is-playing .compare__icon-pause {
  display: block;
}

/* The result: on the clip's corner on wide screens, under it on phones */
.compare__result {
  position: absolute;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 4;
  display: flex;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  border-radius: var(--r-md);
  color: #1a1020;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

.compare__ring {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 5.25rem;
  height: 5.25rem;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#c4243b 0 calc(var(--v) * 1%), #efe8f1 0);
}

.compare__ring::before {
  position: absolute;
  inset: 0.5rem;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.compare__ring b {
  position: relative;
  color: #c4243b;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

/* The tick at the detector's line: exactly as deep as the ring, with a thin gap on each side so it
   reads as a marker on the ring. It turns around the ring's centre (half the ring's width). */
.compare__ring i {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 3px;
  height: 0.5rem;
  margin-left: -1.5px;
  border-radius: 1px;
  background: #1a1020;
  box-shadow: 0 0 0 1.5px #fff;
  transform: rotate(calc(var(--t) * 3.6deg));
  transform-origin: 50% 2.625rem;
}

.compare__verdict {
  display: grid;
  gap: 0.125rem;
}

.compare__verdict strong {
  color: #c4243b;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
}

.compare__verdict span:last-child {
  color: #4a4250;
  font-size: 0.875rem;
}

.compare__sample {
  justify-self: start;
  margin-bottom: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--r-pill);
  color: #4a4250;
  background: #f1ecf3;
  font-size: 0.6875rem;
  font-weight: 650;
}

.compare__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
}

.compare__foot p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

@media (max-width: 47.999rem) {
  .compare__stage {
    border-radius: var(--r-md);
  }

  .compare__label {
    top: var(--s2);
    gap: 0.3rem;
    padding: 0.25rem 0.5rem 0.25rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
  }

  .compare__label .lucide {
    width: 0.75rem;
    height: 0.75rem;
  }

  .compare__label--you {
    left: var(--s2);
  }

  .compare__label--ai {
    right: var(--s2);
  }

  .compare__handle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .compare__play {
    bottom: var(--s2);
    left: var(--s2);
    width: 2.5rem;
    height: 2.5rem;
  }

  .compare__focus i {
    border-width: 2px;
  }

  .compare__result {
    position: static;
    margin-top: var(--s3);
    border: 1px solid var(--rule);
    box-shadow: none;
    color: var(--ink);
    background: var(--sheet);
  }

  .compare__ring::before {
    background: var(--sheet);
  }

  .compare__verdict span:last-child,
  .compare__sample {
    color: var(--ink-2);
  }

  .compare__sample {
    background: var(--tint);
  }

  .compare__ring i {
    background: var(--ink);
    box-shadow: 0 0 0 1.5px var(--sheet);
  }

  .compare__foot .btn {
    width: 100%;
    justify-content: center;
  }
}

/* "Which option should I pick?": one line of advice, with the link to the full comparison */
.pick-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  background: var(--plum-wash);
}

.pick-tip p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
}

.pick-tip strong {
  color: var(--ink);
}

.pick-tip .text-link .lucide {
  width: 1rem;
  height: 1rem;
}

/* The seconds one moment covers, shaded behind the curve while its number or picture is pointed at */
.focus-reel__band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  border-inline: 1.5px dashed color-mix(in srgb, var(--signal) 55%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--signal) 13%, transparent);
  pointer-events: none;
}

.focus-reel__band small {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--sheet);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.focus-reel__band.is-near-start small {
  left: 0;
  transform: none;
}

.focus-reel__band.is-near-end small {
  right: 0;
  left: auto;
  transform: none;
}

.focus-reel__span.is-active .focus-reel__mark {
  box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px color-mix(in srgb, var(--signal) 30%, transparent);
}

.focus-reel__frame--static {
  cursor: default;
}