/*
 * PREPHIKE, THE SIGNED OUT SURFACE.
 *
 * Every token here is lifted from the dashboard at app.prephike.com so the two
 * surfaces are one product: the warm pearl ground, the hairline borders, the
 * emerald reserved for evidence, Plus Jakarta Sans for type and JetBrains Mono
 * for anything that reads as data. A visitor who signs in should not feel the
 * seam.
 *
 * The page carries almost no prose. What it has instead is a set of small
 * machines that run the product's actual mechanic in front of you: a span of
 * your own writing lifting out of a paragraph with the character offsets it
 * was taken at, sentences being thrown away for reasons the code really uses,
 * rounds collecting into a ledger, two documents set against each other. The
 * CSS below is mostly those machines.
 */

/* ==========================================================================
 * TOKENS
 * ========================================================================== */

:root {
  --paper: #faf9f5;
  --white: #ffffff;
  --low: #f4f4f0;
  --mid: #efeeea;
  --high: #e9e8e4;
  --dim: #dbdad6;

  --ink: #1b1c1a;
  --ink-2: #45464d;
  --ink-3: #76777d;

  --line: #e3e2df;
  --line-2: #c6c6cd;

  /* Emerald is the product's evidence colour. It is never decoration. */
  --green: #006c49;
  --green-deep: #005236;
  --mint: #6ffbbe;
  --mint-2: #4edea3;
  --on-mint: #002113;

  --brand: #1a4d3c;
  --night: #121310;
  --night-2: #1d1f1a;
  --on-night: #f2f1ed;
  --on-night-2: #9b9d96;

  --amber: #a86e12;
  --red: #b3402b;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1280px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-3: 0 24px 48px -12px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
 * RESET
 * ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  /* The page is one continuous experience. Nothing may scroll sideways. */
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::selection {
  background: var(--mint);
  color: var(--on-mint);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
 * SHARED
 * ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* An offset anchor. Never uppercased: it is a number a reader can count to. */
.anchor {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--green);
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-2);
}

.eyebrow--night {
  color: var(--on-night-2);
}

.eyebrow--night::before {
  background: var(--mint);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green);
  flex: none;
}

.display {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: clamp(2.25rem, 5.4vw, 4.6rem);
  text-wrap: balance;
}

.h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 4vw, 3.1rem);
  text-wrap: balance;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 42ch;
}

/* --- the button ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

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

/* A light that follows the pointer across the face of the button. */
.btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    18rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(111, 251, 190, 0.28),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

.btn__arrow {
  transition: transform 0.3s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line-2);
}

.btn--ghost:hover {
  background: var(--white);
  box-shadow: var(--shadow-2);
}

.btn--night {
  background: var(--mint);
  color: var(--on-mint);
  box-shadow: 0 10px 30px -8px rgba(111, 251, 190, 0.4);
}

.btn--night::after {
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5), transparent 60%);
}

.btn--lg {
  min-height: 60px;
  padding: 0 2rem;
  font-size: 1.05rem;
  border-radius: var(--r-lg);
}

/* --- reveal -------------------------------------------------------------- */

.r {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease) var(--d, 0s),
    transform 0.8s var(--ease) var(--d, 0s);
}

.r.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
 * NAV
 * ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(250, 249, 245, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
}

.brand svg {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: var(--shadow-1);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
}

.nav__link:hover {
  color: var(--ink);
  background: var(--mid);
}

.nav__cta {
  min-height: 44px;
  padding: 0 1.05rem;
  font-size: 0.9rem;
}

/* ==========================================================================
 * 1. HERO. The mechanic, running, before a word is read.
 * ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: clip;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hero__say {
  max-width: 34ch;
}

.hero__title {
  margin-top: 1.1rem;
}

/* The second line carries the weight, so it gets the emerald. */
.hero__title em {
  font-style: normal;
  color: var(--green);
}

.hero__sub {
  margin-top: 1.4rem;
}

.hero__do {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.hero__fine {
  margin-top: 1.4rem;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11.5px;
}

/* --- the quoting machine ------------------------------------------------- */

.machine {
  position: relative;
  display: flex;
  flex-direction: column;
}

.paper {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 1.25rem;
  z-index: 2;
}

.paper__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}

.paper__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  display: inline-block;
}

/* The debrief itself. Monospaced, because every character position counts. */
.paper__body {
  margin-top: 0.95rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(11.5px, 1.15vw, 13px);
  line-height: 1.95;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The span being quoted. The fill sweeps in rather than switching on, because
   the product is reading left to right through the sentence. */
.q {
  position: relative;
  padding: 2px 0;
  background-image: linear-gradient(var(--mint), var(--mint));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  border-radius: 3px;
  transition: background-size 0.7s var(--ease-in-out), color 0.5s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.q.lit {
  background-size: 100% 100%;
  color: var(--on-mint);
}

.q.spent {
  background-image: linear-gradient(var(--high), var(--high));
  background-size: 100% 100%;
  color: var(--ink-3);
}

.paper__label {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line-2);
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11px;
}

/* The finding, lifted out and set beside the paragraph it came from. */
.lift {
  position: relative;
  z-index: 3;
  margin: 1.5rem 0 0 auto;
  width: min(330px, 100%);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 0.85rem 0.95rem;
  opacity: 0;
  transform: translate(14px, 10px) scale(0.97);
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s var(--ease);
  will-change: transform, opacity;
}

.lift.in {
  opacity: 1;
  transform: none;
}

.lift__kind {
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lift__kind::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--mint-2);
  background: var(--mint);
  flex: none;
}

.lift__what {
  margin-top: 0.5rem;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.lift__anchor {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* The thread from the highlighted span to the card it produced. */
.thread {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.thread path {
  fill: none;
  stroke: var(--mint-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.thread.on path {
  opacity: 1;
  animation: crawl 1.4s linear infinite;
}

@keyframes crawl {
  to {
    stroke-dashoffset: -16;
  }
}

/* ==========================================================================
 * 2. THE DROP. What it refuses to print.
 * ========================================================================== */

.drop {
  position: relative;
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(5rem, 14vh, 9rem);
  overflow: clip;
}

/* A soft emerald light behind the kept column, so the eye goes there. */
.drop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(900px, 120%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 108, 73, 0.34), transparent 62%);
  pointer-events: none;
}

.drop .wrap {
  position: relative;
}

.drop__say {
  max-width: 24ch;
}

.drop .h2 em {
  font-style: normal;
  color: var(--mint);
}

.drop__sub {
  margin-top: 1.3rem;
  color: var(--on-night-2);
  max-width: 44ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
}

.sieve {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.lane {
  border: 1px solid rgba(242, 241, 237, 0.13);
  border-radius: var(--r-lg);
  background: rgba(242, 241, 237, 0.035);
  padding: 1rem;
}

.lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(242, 241, 237, 0.12);
  color: var(--on-night-2);
}

.lane__n {
  color: var(--on-night);
  font-variant-numeric: tabular-nums;
}

.lane--keep .lane__head {
  color: var(--mint);
}

.lane__list {
  margin: 0;
  padding: 0.85rem 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card {
  border: 1px solid rgba(242, 241, 237, 0.14);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.7rem;
  font-size: 0.86rem;
  line-height: 1.45;
  background: rgba(242, 241, 237, 0.05);
  opacity: 0;
  transform: translateY(10px);
}

.card.show {
  animation: settle 0.5s var(--ease) forwards;
}

@keyframes settle {
  to {
    opacity: 1;
    transform: none;
  }
}

.card--keep {
  border-color: rgba(111, 251, 190, 0.4);
  background: rgba(0, 108, 73, 0.24);
}

.card--drop {
  color: var(--on-night-2);
}

.card--drop .card__text {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
}

.card__why {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(179, 64, 43, 0.22);
  color: #f0b3a6;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.card--keep .card__why {
  background: rgba(111, 251, 190, 0.18);
  color: var(--mint);
}

.card.out {
  animation: dissolve 0.6s var(--ease) forwards;
}

@keyframes dissolve {
  to {
    opacity: 0;
    transform: translateX(-14px) scale(0.96);
    filter: blur(3px);
  }
}

/* ==========================================================================
 * 3. THE LEDGER. Rounds collecting into competencies.
 * ========================================================================== */

.ledger {
  position: relative;
  /* The scroll distance IS the animation. */
  height: 320vh;
}

.ledger__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* The nav is fixed and 68px tall, so the panel keeps clear of it rather than
     sliding its headline underneath. */
  padding-block: 84px 28px;
  overflow: clip;
}

.ledger__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
}

.ledger__say {
  max-width: 30ch;
}

.ledger .h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

.ledger__steps {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 1px solid var(--line-2);
}

.step {
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-3);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.step.on {
  color: var(--ink);
  border-left-color: var(--green);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

/* The drawing area. The quadrant labels are positioned against this box and
   not against the section, so they stay on their quadrant at every width. The
   height is capped against the viewport because this sits inside a sticky
   panel: an aspect ratio alone overflowed it and clipped the counts. */
.stage__box {
  position: relative;
  aspect-ratio: 560 / 430;
  /* The WIDTH is capped, not the height. Capping the height left the box wide
     and short, the SVG letterboxed itself inside it, and the quadrant labels
     went on pointing at where the quadrants used to be. */
  width: min(100%, calc(44vh * 560 / 430));
  margin-inline: auto;
}

.stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stage__line {
  stroke: var(--line-2);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.stage__line.on {
  opacity: 1;
  stroke: var(--mint-2);
}

.stage__line.faded {
  opacity: 0.22;
}

.stage__node {
  fill: var(--dim);
  transition: fill 0.5s var(--ease), r 0.5s var(--ease);
}

.stage__node.on {
  fill: var(--green);
}

.stage__quad {
  fill: var(--white);
  stroke: var(--line);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.stage__quad.on {
  opacity: 1;
}

.quadname {
  position: absolute;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  /* The quadrant names are the product's own and are not shortened to fit, so
     they wrap inside the quadrant they label rather than running into it. */
  max-width: 34%;
  white-space: normal;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.quadname.on {
  opacity: 1;
  transform: none;
}

.quadname[data-q="0"] { left: 19.5%; top: 3%; }
.quadname[data-q="1"] { left: 61%; top: 3%; }
.quadname[data-q="2"] { left: 19.5%; top: 52.5%; }
.quadname[data-q="3"] { left: 61%; top: 52.5%; }

.tally {
  display: flex;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.tally.on {
  opacity: 1;
  transform: none;
}

.tally__n {
  display: block;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tally__l {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ==========================================================================
 * 4. CONVERGE. The role, against what you can prove.
 * ========================================================================== */

.converge {
  padding-block: clamp(5rem, 13vh, 8rem);
  overflow: clip;
}

.converge__say {
  max-width: 36ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.rig {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.doc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.1rem;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  opacity: 0;
}

.doc--jd {
  transform: translateX(-32px);
}

.doc--cv {
  transform: translateX(32px);
}

.rig.in .doc {
  opacity: 1;
  transform: none;
}

.doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.doc__body {
  margin-top: 0.85rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.95;
  color: var(--ink-2);
}

.verdicts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.req {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.6s var(--ease) var(--d, 0s), transform 0.6s var(--ease) var(--d, 0s);
}

.rig.in .req {
  opacity: 1;
  transform: none;
}

.req__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.req__id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--mid);
  color: var(--ink-2);
  border-radius: 4px;
  padding: 2px 6px;
}

.req__verdict {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: auto;
}

.req--proved .req__verdict {
  background: var(--mint);
  color: var(--on-mint);
}

.req--gap .req__verdict {
  background: var(--mid);
  color: var(--ink-2);
}

.req__quote {
  margin-top: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  border-left: 2px solid var(--mint-2);
  padding-left: 0.6rem;
}

.req--gap .req__quote {
  border-left-color: var(--line-2);
}

.req__anchor {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* The refusal, stated on the card rather than left as a silent absence. */
.req__refuse {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line-2);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ==========================================================================
 * 5. THE LOOP. Six moves, one path.
 * ========================================================================== */

.loop {
  padding-block: clamp(4rem, 11vh, 7rem);
  background: var(--low);
  border-block: 1px solid var(--line);
  overflow: clip;
}

.loop__say {
  max-width: 30ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.path {
  position: relative;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}

.moveline {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 1px;
  background: var(--line-2);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease);
  display: none;
}

.path.in .moveline {
  transform: scaleX(1);
}

.move {
  position: relative;
  padding: 1rem 0.25rem 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease) var(--d, 0s), transform 0.6s var(--ease) var(--d, 0s);
}

.path.in .move {
  opacity: 1;
  transform: none;
}

.move__ring {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  z-index: 1;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}

.move:hover .move__ring,
.move:focus-within .move__ring {
  border-color: var(--green);
  background: var(--mint);
  color: var(--on-mint);
}

.move__what {
  margin-top: 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.move__note {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 24ch;
}

/* ==========================================================================
 * 6. CLOSE
 * ========================================================================== */

.close {
  position: relative;
  padding-block: clamp(6rem, 16vh, 10rem);
  text-align: center;
  overflow: clip;
}

.close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(111, 251, 190, 0.2), transparent 60%);
  pointer-events: none;
}

.close .wrap {
  position: relative;
}

.close__title {
  margin-inline: auto;
  max-width: 16ch;
}

.close__title em {
  font-style: normal;
  color: var(--green);
}

.close__do {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.close__fine {
  margin-top: 1.5rem;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 12px;
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ==========================================================================
 * FOOTER
 * ========================================================================== */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  color: var(--ink-3);
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  transition: color 0.2s, background 0.2s;
}

.foot__links a:hover {
  color: var(--ink);
  background: var(--mid);
}

.foot__fine {
  width: 100%;
  font-size: 0.8rem;
  padding-top: 0.5rem;
}

/* ==========================================================================
 * RESPONSIVE. Mobile is the default above; these are the widening steps.
 * ========================================================================== */

@media (min-width: 700px) {
  .sieve {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .path {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1.25rem;
  }

  .tally {
    gap: 2.5rem;
  }
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .ledger__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .rig {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.25rem;
  }

  .path {
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }

  .moveline {
    display: block;
  }

}

/* ==========================================================================
 * REDUCED MOTION.
 *
 * Everything on this page moves, and all of it is explanation rather than
 * decoration, so nothing is simply switched off: the end state of each machine
 * is drawn immediately instead. A visitor who asks for less motion still sees
 * the highlighted span, the sorted sieve, the built ledger and the verdicts.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .r {
    opacity: 1;
    transform: none;
  }

  .ledger {
    height: auto;
  }

  .ledger__stick {
    position: static;
    height: auto;
    padding-block: clamp(4rem, 10vh, 6rem);
  }

  .thread.on path {
    animation: none;
  }
}