/* ==========================================================================
   TeamTrek V3 — Section styles
   01 Hero            02 Proof strip        03 Assemble (why)
   04 Product tabs    05 Signal rail        06 Roles
   07 Use cases       08 Privacy boundary   09 How it works
   10 Metrics         11 Marquee            12 Voices
   13 FAQ             14 CTA                15 Footer
   ========================================================================== */

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--ambient); }

.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 72%);
  opacity: .5;
}

.hero__inner {
  position: relative;
  display: grid; gap: 3rem;
  padding-top: 4.5rem; padding-bottom: 5rem;
  align-items: center;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--neutral-300); border-radius: var(--r-pill);
  background: rgba(255,255,255,.8);
  padding: .375rem .875rem;
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-600);
}
.hero__title { margin-top: 1.5rem; color: var(--neutral-900); }
.hero__sub { margin-top: 1.5rem; max-width: 34rem; color: var(--neutral-600); }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__actions .btn { flex: 1 1 auto; min-width: 168px; }
.hero__fine { margin-top: 1.25rem; font-size: var(--text-xs); color: var(--neutral-500); }

/* ---- Hero trust row ----------------------------------------------------
   Reassurance under the CTA pair, and it has to earn its place without
   competing with the button: small type, neutral ink, colour only on the
   icons, and each point in a tinted chip so the three read as a set at a
   glance rather than as a sentence with symbols in it.

   Sized to clear one line inside the hero's copy column, which is ~540px at
   1440 rather than the full page width. That is the whole constraint here:
   at a comfortable 14px with 26px chips the three came to 596px and the last
   one orphaned onto a second line, so the type, the chip and the gaps are
   all one step tighter than they would be standing alone. Intrinsic widths
   rather than equal grid tracks, so when it does have to wrap on a medium
   screen it breaks 2 + 1 at the natural word boundaries instead of leaving a
   ragged column.
   ------------------------------------------------------------------------ */
.hero__trust {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
}
.hero__trust li { display: flex; align-items: center; gap: .4375rem; }
.hero__trust .icon {
  flex: none;
  width: 1.375rem; height: 1.375rem;
  padding: .25rem;
  border-radius: var(--r-pill);
  background: var(--primary-50);
  color: var(--primary-600);
  /* The chip is the icon's own box, so the glyph is inset by padding rather
     than by a wrapper element — one less node per item, and the stroke still
     scales with the box. */
  box-sizing: border-box;
}
/* The disclaimer that used to be this row's only content stays, one step
   quieter than the points above it: it is a caveat about the mock further
   down the page, not a selling point. */
.hero__trust + .hero__fine { margin-top: .875rem; }

/* ---- Hero figure: main dashboard + two floating aux cards -------------- */
.hero__figure { position: relative; will-change: transform; }
.hero__figure-inner {
  position: relative;
  opacity: 0;
  animation: heroFrame .78s var(--ease-brand) .5s forwards;
}
.hero__figure-glow {
  position: absolute; inset: -14% -8% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(32,183,166,.20), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.hero-dash { position: relative; z-index: 2; }
.hero-dash__body { padding: 1.125rem; display: grid; gap: .875rem; }

.hero-dash__greet {
  background: var(--primary-600); color: #fff;
  border-radius: var(--r-sm);
  padding: 1.125rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hero-dash__greet-day {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.72);
}
.hero-dash__greet-name { margin-top: .3125rem; font-size: 1.3125rem; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.hero-dash__greet-meta { margin-top: .1875rem; font-size: .8125rem; color: rgba(255,255,255,.84); font-variant-numeric: tabular-nums; }
.hero-dash__greet-pct { text-align: right; flex: none; }
.hero-dash__greet-pct > b { display: block; font-size: 1.375rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero-dash__greet-pct > span { font-size: .6875rem; color: rgba(255,255,255,.72); }

.hero-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .625rem; }
.hero-dash__stat {
  border: 1px solid var(--neutral-200); border-radius: var(--r-sm);
  padding: .875rem;
}
.hero-dash__stat > b { display: block; font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--neutral-900); }
.hero-dash__stat > span { display: block; margin-top: .125rem; font-size: .75rem; color: var(--neutral-500); }

.hero-dash__chart { border: 1px solid var(--neutral-200); border-radius: var(--r-sm); padding: 1rem; }
.hero-dash__chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.hero-dash__chart-head b { font-size: .875rem; font-weight: var(--weight-semi); }
.hero-dash__chart-head span { font-size: .75rem; color: var(--neutral-500); }
.hero-dash__bars {
  margin-top: .875rem; height: 108px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .625rem;
  align-items: end;
  border-bottom: 1px solid var(--neutral-150); padding-bottom: 2px;
}
.hero-dash__bars span {
  height: 0; border-radius: 3px 3px 0 0;
  background: var(--primary-600);
  transition: height var(--dur-figure) var(--ease-brand);
}
.hero-dash__bars span[data-tone="soft"] { background: var(--primary-300); }
.hero-dash__bars span[data-tone="quiet"] { background: var(--neutral-200); }
.hero-dash__days {
  margin-top: .5rem;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .625rem;
  font-size: .6875rem; color: var(--neutral-400); text-align: center;
}

/* Floating: live-signal chip (top-left) + rotating feature card (bottom-right) */
.hero__aux { position: absolute; z-index: 4; will-change: transform; }
.hero__aux--clock {
  left: -.75rem; top: -3.75rem;
  background: var(--ink-900); border-radius: var(--r-sm);
  padding: .75rem 1rem; box-shadow: var(--shadow-03);
}
.hero__aux--clock p {
  font-size: .625rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .1em; color: var(--neutral-500);
}
.hero__aux--clock b {
  display: block; margin-top: .3125rem;
  font-family: var(--font-mono); font-size: .9375rem; font-weight: var(--weight-medium);
  color: var(--primary-300); font-variant-numeric: tabular-nums;
}
.hero__aux--clock i { font-style: normal; animation: tt-caret 1s step-end infinite; }

.hero__aux--feat {
  /* The card clears the dashboard: its 220px height plus a 16px gap. */
  right: -1.25rem; bottom: -14.75rem; width: 300px; z-index: 3;
  background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-03); overflow: hidden;
}
.featcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8125rem 1rem; border-bottom: 1px solid var(--neutral-150);
}
.featcard__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: var(--weight-semi); }
.featcard__count { font-family: var(--font-mono); font-size: .6875rem; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.featcard__stage { position: relative; height: 152px; }
.featcard__slide {
  position: absolute; inset: 0; padding: .875rem 1rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-ui) var(--ease-brand), transform var(--dur-ui) var(--ease-brand);
  pointer-events: none;
}
.featcard__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.featcard__top { display: flex; align-items: flex-start; gap: .6875rem; }
.featcard__glyph {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-sm); background: var(--primary-50); color: var(--primary-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: var(--weight-bold);
}
.featcard__title { display: block; font-size: .875rem; font-weight: var(--weight-semi); }
.featcard__note  { display: block; margin-top: .1875rem; font-size: .75rem; line-height: 1.45; color: var(--neutral-500); }
.featcard__value-row { margin-top: .875rem; display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; }
.featcard__value { font-size: 1.5rem; font-weight: var(--weight-bold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.featcard__range { margin-top: .5625rem; display: flex; justify-content: space-between; font-size: .6875rem; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.featcard__pips { display: flex; align-items: center; gap: .4375rem; padding: 0 1rem .9375rem; }
.featcard__pip {
  width: 20px; height: 3px; border-radius: var(--r-pill);
  background: var(--neutral-200);
  transition: background-color var(--dur-ui) var(--ease-ui), width var(--dur-ui) var(--ease-brand);
}
.featcard__pip.is-active { width: 28px; background: var(--primary-600); }

/* ==========================================================================
   02 — Proof strip: client logos + four trust cards
   ========================================================================== */
.proof { background: var(--neutral-50); border-block: 1px solid var(--neutral-200); }
.proof__inner { padding-block: 2.5rem; }
.proof__row {
  display: grid; gap: 1.5rem; align-items: center;
}
.proof__label {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .1em; color: var(--neutral-500);
}
.proof__logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem;
  filter: grayscale(1); opacity: .68;
  transition: opacity var(--dur-ui) var(--ease-ui), filter var(--dur-ui) var(--ease-ui);
}
.proof__logos:hover { opacity: .95; filter: grayscale(.4); }
.proof__logo {
  display: inline-flex; align-items: center; gap: .5625rem; height: 28px;
  font-size: 1rem; font-weight: var(--weight-bold); letter-spacing: -.025em; color: var(--neutral-600);
}
.proof__logo svg { width: 22px; height: 22px; }

.proof__cards {
  margin-top: 2.25rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--neutral-200);
  border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  overflow: hidden;
}
.proof__card {
  background: #fff; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.125rem;
  transition: background-color var(--dur-micro) var(--ease-ui);
}
.proof__card:hover { background: var(--neutral-25); }
.proof__card h3 { font-size: .9375rem; font-weight: var(--weight-semi); letter-spacing: -.015em; }
.proof__card p { margin-top: .375rem; font-size: .875rem; line-height: 1.5; color: var(--neutral-600); }
.proof__card-fig { margin-top: auto; display: grid; gap: .5rem; }
.proof__switch { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.proof__switch span { font-size: .75rem; color: var(--neutral-600); }
.proof__switch--off span { color: var(--neutral-400); }
.proof__boundary { width: 100%; height: 74px; }

/* ==========================================================================
   03 — Assemble: scroll-linked "everything your workforce needs"
   ========================================================================== */
.assemble { background: var(--neutral-50); border-block: 1px solid var(--neutral-200); position: relative; }
.assemble__scroll { height: 300vh; position: relative; }
.assemble__sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 4rem;
  overflow: hidden;
}
.assemble__head { text-align: center; max-width: 40rem; margin-inline: auto; }
.assemble__caption {
  margin-top: 1rem; min-height: 3rem;
  font-size: var(--text-body); color: var(--neutral-600);
  transition: opacity var(--dur-ui) var(--ease-ui);
}
.assemble__grid {
  margin: 2.25rem auto 0; max-width: 940px;
  display: grid; grid-template-columns: 1.18fr 1fr; gap: .75rem; align-items: stretch;
}
.assemble__piece {
  will-change: transform, opacity;
  border-radius: var(--r-md);
  border: 1px solid var(--neutral-200); background: #fff;
  padding: 1rem;
}
.assemble__piece--brand {
  background: var(--primary-600); border-color: var(--primary-600); color: #fff;
  padding: 1rem 1.125rem; box-shadow: var(--shadow-03);
}
.assemble__piece--brand p {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.72);
}
.assemble__piece--brand b { display: block; margin-top: .25rem; font-size: 1.1875rem; font-weight: var(--weight-bold); letter-spacing: -.025em; }
.assemble__piece--dark {
  background: var(--ink-900); border-color: var(--ink-900); color: #fff;
}
.assemble__piece--dark p {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
}
.assemble__piece--table { padding: 0; overflow: hidden; }
.assemble__label { font-size: .8125rem; font-weight: var(--weight-semi); color: var(--neutral-900); }
.assemble__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.assemble__kpis b { display: block; font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--neutral-900); }
.assemble__kpis span { font-size: .75rem; color: var(--neutral-500); }
.assemble__bars {
  margin-top: .75rem; height: 68px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; align-items: end;
}
.assemble__bars span { border-radius: 2px; background: var(--primary-600); }
.assemble__chips { margin-top: .625rem; display: flex; flex-wrap: wrap; gap: .375rem; }

/* ==========================================================================
   04 — Product tabs (Dashboard · Timeline · Activity · Reports)
   ========================================================================== */
.showcase__tabs { margin-top: 2rem; }
.showcase__body {
  margin-top: 2.75rem;
  display: grid; gap: 2.5rem; align-items: center;
}
.showcase__body > *,
.showcase__body > * > * { min-width: 0; }
.showcase__copy { margin-top: 1rem; color: var(--neutral-600); }
.showcase__points { margin-top: 1.5rem; }

/* Owns only the scroll drift — see the comment on .showcase__body in the
   markup for why the reveal, the drift and the tab crossfade each need their
   own element. */
.showcase__frame { will-change: transform; }

/* ==========================================================================
   05 — Signal rail: an interval picks up context as you scroll
   ========================================================================== */
.rail__layout {
  margin-top: 3rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start;
}
.rail__layout > * { min-width: 0; }

/* The nav is a connected rail, not a list of dots, so the six stages read as
   one journey with a position in it.

   Each step draws its own connector down to the next one, rather than one
   track spanning the whole nav. That way the line is positioned from the same
   box as the marker it belongs to and the two cannot drift apart — a single
   full-height track has to be aligned by hand against the step's border and
   padding, and silently misaligns the moment either changes. It also means
   the "progress" colouring is just a state on each step: no measuring. */
.rail__nav {
  position: sticky; top: calc(var(--header-h) + 2.5rem);
  display: grid; gap: 2px;
}

.rail__step {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent;
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              box-shadow var(--dur-ui) var(--ease-ui),
              transform var(--dur-ui) var(--ease-brand);
  text-align: left; width: 100%;
}

/* Connector: from this marker's centre to the next marker's centre.
   left = step padding + half the marker, so it is centred under the dot;
   height = this step + the 2px grid gap. */
.rail__step::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(.875rem + 3.5px);
  top: 50%; width: 2px; height: calc(100% + 2px);
  background: var(--neutral-200);
  transition: background-color var(--dur-ui) var(--ease-ui);
}
.rail__step:last-child::before { display: none; }
/* A step that has been passed has already travelled its connector. */
.rail__step.is-done::before { background: var(--primary-600); }

.rail__step-dot {
  position: relative; z-index: 1;
  width: 9px; height: 9px;
  border-radius: 50%; flex: none;
  background: var(--neutral-300);
  /* The halo punches the connector out from behind the marker. */
  box-shadow: 0 0 0 3px var(--neutral-50);
  transition: background-color var(--dur-ui) var(--ease-ui),
              box-shadow var(--dur-ui) var(--ease-ui),
              transform var(--dur-ui) var(--ease-brand);
}
.rail__step-label {
  font-size: .9375rem; font-weight: var(--weight-semi); color: var(--neutral-400);
  transition: color var(--dur-ui) var(--ease-ui);
}

.rail__step.is-done .rail__step-dot { background: var(--primary-600); }
.rail__step.is-done .rail__step-label { color: var(--neutral-600); }

.rail__step.is-active {
  background: #fff; border-color: var(--neutral-200); box-shadow: var(--shadow-02);
}
.rail__step.is-active .rail__step-dot {
  background: var(--primary-600);
  transform: scale(1.34);
  /* Halo matches the active card, not the section, so it still masks cleanly. */
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(4, 143, 130, .16);
}
.rail__step.is-active .rail__step-label { color: var(--neutral-900); }
.rail__step:not(.is-active):hover .rail__step-label { color: var(--neutral-700); }
.rail__step:not(.is-active):hover .rail__step-dot { background: var(--primary-300); }

.rail__stage { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.rail__progress { height: 2px; background: var(--neutral-150); }
.rail__progress span {
  display: block; height: 100%; width: 0;
  background: var(--primary-600);
  transition: width var(--dur-figure) var(--ease-brand);
}
.rail__rows { padding: 1.375rem 1.125rem; display: grid; gap: 2px; }
.rail__row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--neutral-150);
  /* Arrives from the left, in the reading direction the row is scanned. */
  opacity: 0; transform: translate3d(-14px, 0, 0);
  transition: opacity var(--dur-ui) var(--ease-ui),
              transform var(--dur-reveal) var(--ease-brand),
              border-color var(--dur-ui) var(--ease-ui);
}
.rail__row.is-in { opacity: .45; transform: none; }
.rail__row.is-current { opacity: 1; border-bottom-color: var(--neutral-300); }

/* The value of the row that just landed gets one beat of emphasis, so the eye
   is pulled to what changed rather than having to hunt for it. */
.rail__row-val {
  transition: transform var(--dur-reveal) var(--ease-brand),
              color var(--dur-ui) var(--ease-ui);
  transform-origin: left center;
}
.rail__row.is-current > .rail__row-val { animation: railLand .62s var(--ease-brand); }
.rail__row:not(.is-current) > .rail__row-val { color: var(--neutral-600); }
.rail__row-key {
  min-width: 88px; flex: none;
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-400);
}
.rail__row-val {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: var(--weight-bold);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--neutral-900);
}
.rail__row-note { margin-left: auto; font-size: .8125rem; color: var(--neutral-500); text-align: right; }
.rail__ticks-wrap { padding: .875rem 1.125rem; border-top: 1px solid var(--neutral-150); }
.rail__ticks { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.rail__ticks span {
  flex: 1; min-width: 2px; border-radius: 1px;
  background: var(--primary-300);
  transition: height var(--dur-figure) var(--ease-brand), background-color var(--dur-ui) var(--ease-ui);
}
.rail__ticks-axis {
  margin-top: .5rem; display: flex; justify-content: space-between;
  font-size: .6875rem; color: var(--neutral-400); font-variant-numeric: tabular-nums;
}
.rail__caption {
  padding: 1rem 1.125rem; border-top: 1px solid var(--neutral-150);
  background: var(--neutral-50);
  font-size: .8125rem; color: var(--neutral-600);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: opacity var(--dur-ui) var(--ease-ui);
}
/* Scroll spacers that drive the rail. Purely structural. */
.rail__spacers > div { height: 52vh; }

/* ==========================================================================
   06 — Roles
   ========================================================================== */
.roles__tabs { margin-top: 2rem; }
.roles__panel {
  margin-top: 1.75rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--neutral-200);
  border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 420px;
}
.roles__panel > * { min-width: 0; }
.roles__copy {
  background: #fff; padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
}
.roles__label { display: flex; align-items: center; gap: .625rem; }
.roles__label::before { content: ""; width: 22px; height: 2px; background: var(--primary-600); flex: none; }
.roles__headline { margin-top: .875rem; }
.roles__problem { margin-top: .875rem; color: var(--neutral-600); }
.roles__features { margin-top: 1.75rem; }
.roles__outcome { margin-top: auto; padding-top: 1.75rem; }
.roles__outcome p {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-400);
}
.roles__outcome b {
  display: block; margin-top: .375rem;
  font-size: 1.0625rem; font-weight: var(--weight-semi); line-height: 1.45; color: var(--primary-700);
}
.roles__figure {
  background: var(--neutral-50); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.roles__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.roles__metric { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--r-sm); padding: 1.125rem; }
.roles__metric b { display: block; font-size: 1.5rem; font-weight: var(--weight-bold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--neutral-900); }
.roles__metric span { display: block; margin-top: .1875rem; font-size: .8125rem; color: var(--neutral-500); }
.roles__metric .spark { margin-top: .75rem; height: 22px; }
.roles__rows { display: grid; gap: .875rem; }
.roles__rowname { font-size: .875rem; }
.roles__rowmeta { display: flex; align-items: center; gap: .625rem; }
.roles__rowmeta span { font-size: .8125rem; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.roles__note { padding-top: .25rem; font-size: .75rem; color: var(--neutral-400); }

/* ==========================================================================
   07 — Use cases
   ========================================================================== */
.usecases__tabs { margin-top: 2rem; }
.usecases__panel {
  margin-top: 2rem;
  display: grid; gap: 2.5rem; align-items: center;
  border: 1px solid var(--neutral-200); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--neutral-50), #fff 70%);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.usecases__panel > * { min-width: 0; }
.usecases__headline { margin-top: 1.25rem; }
.usecases__benefits { margin-top: 1.375rem; }
.statcard {
  border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-02);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.statcard__value {
  font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: -.045em; color: var(--primary-700);
}
.statcard__label { margin-top: .75rem; color: var(--neutral-600); }
.statcard__track {
  margin-top: 1.375rem; height: 5px; border-radius: var(--r-pill);
  background: var(--neutral-150); overflow: hidden;
}
.statcard__bar {
  display: block; height: 100%; width: 66%;
  border-radius: var(--r-pill); background: var(--primary-600);
  transform: translateX(-101%);
  transition: transform .78s var(--ease-brand);
}
.statcard__bar.is-in { transform: none; }

/* ==========================================================================
   08 — Privacy boundary
   ========================================================================== */
.boundary__stage {
  margin-top: 2.5rem; position: relative;
  border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
}
.boundary__canvas { width: 100%; height: 340px; }
.boundary__center {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.boundary__center p {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-400);
}
.boundary__center b { display: block; margin-top: .25rem; font-size: 1.125rem; font-weight: var(--weight-bold); letter-spacing: -.02em; color: var(--neutral-900); }
.boundary__note { margin-top: .75rem; font-size: var(--text-xs); color: var(--neutral-500); }

.boundary__lists { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.boundary__lists > * { min-width: 0; }
.boundary__col {
  border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.boundary__col--off { background: var(--neutral-50); }
.boundary__colhead { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .75rem; color: var(--neutral-500); }
.boundary__colhead .dot-quiet { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-300); flex: none; }
.boundary__items { margin-top: .875rem; }
.signal {
  display: grid; grid-template-columns: 34px 1fr 64px;
  align-items: center; gap: .875rem;
  padding: .75rem 0; border-bottom: 1px solid var(--neutral-150);
}
.signal:last-child { border-bottom: 0; }
.signal--off { grid-template-columns: 1fr 64px; }
.signal__name { display: block; font-size: .9375rem; font-weight: var(--weight-medium); color: var(--neutral-900); }
.signal--off .signal__name { color: var(--neutral-600); }
.signal__desc { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--neutral-500); }
.signal__spark { display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; height: 22px; }
.signal__spark span {
  width: 4px; border-radius: 1px; background: var(--primary-300);
  transform-origin: bottom;
  animation: tt-bar 2.4s var(--ease-ui) infinite;
}
.signal__spark span:nth-child(5),
.signal__spark span:nth-child(6) { background: var(--primary-600); }
.signal__blocked {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  color: var(--neutral-400);
}
.signal__blocked-dash {
  flex: 1; border-top: 1px dashed var(--neutral-300); min-width: 20px;
}
.signal__blocked .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.boundary__colnote { margin-top: 1.125rem; font-size: var(--text-xs); color: var(--neutral-500); }

/* ==========================================================================
   09 — How it works (dark)
   ========================================================================== */
.how { background: var(--ink-900); color: #fff; }
.how h2, .how h3 { color: #fff; }
.how__layout {
  margin-top: 3rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
.how__layout > * { min-width: 0; }

.how__steps { position: relative; padding-left: 2.25rem; }
.how__rule { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--ink-line); }
.how__fill {
  position: absolute; left: 7px; top: 8px; width: 1px; height: 0;
  background: var(--primary-500);
  transition: height var(--dur-figure) var(--ease-brand);
}
.how__list { display: grid; gap: 2.75rem; }

/* The active step steps forward as well as brightening: a shift in position
   reads as progress in a way a change in opacity alone does not. */
.how__step {
  position: relative; cursor: pointer;
  border-radius: var(--r-sm);
  opacity: .38;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--dur-ui) var(--ease-ui),
              transform var(--dur-reveal) var(--ease-brand);
}
.how__step.is-active { opacity: 1; transform: translate3d(8px, 0, 0); }
/* Steps already passed stay legible — they are context for where you are. */
.how__step.is-done { opacity: .62; }
.how__step:not(.is-active):hover { opacity: .8; }

.how__step-dot {
  position: absolute; left: -2.25rem; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--ink-line); background: var(--ink-900);
  box-sizing: content-box;
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              transform var(--dur-ui) var(--ease-brand),
              box-shadow var(--dur-ui) var(--ease-ui);
}
.how__step.is-done .how__step-dot { background: var(--primary-700); border-color: var(--primary-700); }
.how__step.is-active .how__step-dot {
  background: var(--primary-500); border-color: var(--primary-500);
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(0, 169, 143, .16);
}
/* The active step's dot offsets with the step, so the marker stays on the rail
   while the text moves. */
.how__step.is-active .how__step-dot { margin-left: -8px; }
.how__step-num { font-size: .75rem; font-weight: var(--weight-semi); letter-spacing: .09em; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.how__step-title { margin-top: .375rem; font-size: 1.3125rem; font-weight: var(--weight-bold); letter-spacing: -.025em; }
.how__step-desc { margin-top: .5rem; max-width: 42ch; color: var(--neutral-400); }

.how__figure { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.how__stage { position: relative; height: 400px; }
.how__panel {
  position: absolute; inset: 0;
  background: var(--ink-800); border: 1px solid var(--ink-line); border-radius: var(--r-md);
  padding: 1.375rem;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.985);
  transition: opacity var(--dur-ui) var(--ease-brand), transform var(--dur-ui) var(--ease-brand);
  pointer-events: none;
  overflow: hidden;
}
.how__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.how__panel > * { transition: opacity var(--dur-ui) var(--ease-ui) 60ms; }
.how__panel:not(.is-active) > * { opacity: 0; }
.how__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .8125rem; font-weight: var(--weight-semi);
}
.how__panel-head .accent { color: var(--primary-300); font-weight: var(--weight-medium); font-size: .6875rem; }
.how__panel-head .quiet  { color: var(--neutral-500); font-weight: var(--weight-body); font-size: .6875rem; }
.how__person {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: var(--r-sm); background: rgba(255,255,255,.03);
}
.how__person-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--primary-800); color: var(--primary-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: var(--weight-bold);
}
.how__person b { display: block; font-size: .875rem; font-weight: var(--weight-medium); color: var(--neutral-150); }
.how__person span { display: block; font-size: .75rem; color: var(--neutral-600); }
.how__clock {
  margin-top: 1.125rem;
  font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--weight-medium);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.how__pulse { margin-top: 1rem; display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.how__pulse span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--primary-700); }
.how__mini { margin-top: 1.125rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
.how__mini b { display: block; font-size: 1.0625rem; font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; }
.how__mini span { display: block; font-size: .6875rem; color: var(--neutral-600); }
.how__sheet { margin-top: 1.125rem; display: grid; gap: .5rem; }
.how__sheet-row { display: flex; align-items: center; gap: .625rem; }
.how__sheet-row > span:first-child { width: 34px; flex: none; font-size: .75rem; color: var(--neutral-500); }
.how__sheet-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--ink-700); overflow: hidden; }
.how__sheet-track span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary-600); }
.how__sheet-row > span:last-child { width: 44px; flex: none; text-align: right; font-size: .75rem; color: var(--neutral-150); font-variant-numeric: tabular-nums; }
.how__panel-foot {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .75rem; color: var(--neutral-500);
}
.how__panel-foot .accent { color: var(--primary-300); font-weight: var(--weight-semi); }
.how__shift { margin-top: 1.125rem; display: grid; gap: .875rem; }
.how__shift-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: var(--neutral-150); }
.how__shift-head .up   { color: var(--primary-300); font-weight: var(--weight-semi); }
.how__shift-head .down { color: var(--neutral-500); font-weight: var(--weight-semi); }
.how__shift-track { margin-top: .375rem; height: 8px; border-radius: var(--r-pill); background: var(--ink-700); overflow: hidden; }
.how__shift-track span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary-500); }
.how__pips { margin-top: 1.25rem; display: flex; align-items: center; gap: .625rem; }
.how__pip { width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--ink-line); transition: background-color var(--dur-ui) var(--ease-ui), width var(--dur-ui) var(--ease-brand); }
.how__pip.is-active { width: 30px; background: var(--primary-500); }
.how__piplabel {
  margin-left: auto; font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
}

/* ==========================================================================
   10 — Metrics (dark brand band)
   ========================================================================== */
.metrics { background: var(--primary-900); color: #fff; padding-block: var(--section-y-lg); overflow: hidden; }
.metrics__head { max-width: 40rem; }
.metrics__title { margin-top: 1rem; color: #fff; }
.metrics__grid {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem 1.5rem;
}
.metrics__grid > * { min-width: 0; }
.metric { border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.5rem; }
.metric__value {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums;
}
.metric__label {
  margin-top: .875rem; display: flex; align-items: flex-start; gap: .5rem;
  font-size: .9375rem; color: var(--primary-100);
}
.metric__label .icon { margin-top: 3px; color: var(--primary-300); }
.metrics__note { margin-top: 2.5rem; font-size: var(--text-xs); color: var(--primary-300); }

/* ==========================================================================
   11 — Marquee: one workspace, one record of the work
   ========================================================================== */
.marquee { background: var(--neutral-50); border-block: 1px solid var(--neutral-200); padding-block: 4rem; overflow: hidden; }
.marquee__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.25rem;
}
.marquee__viewport { position: relative; }
.marquee__viewport::before,
.marquee__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 88px; z-index: 2; pointer-events: none;
}
.marquee__viewport::before { left: 0;  background: linear-gradient(90deg, var(--neutral-50), transparent); }
.marquee__viewport::after  { right: 0; background: linear-gradient(270deg, var(--neutral-50), transparent); }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 52s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; gap: 1.25rem; padding-inline: .625rem; }
.marquee__card {
  flex: none; width: 288px;
  border: 1px solid var(--neutral-200); border-radius: var(--r-md); background: #fff;
  padding: 1.125rem;
  display: flex; flex-direction: column; gap: .875rem;
}
.marquee__card--wide { width: 400px; }
.marquee__card--kpi {
  width: 172px; justify-content: center; text-align: left;
}
.marquee__card-label {
  font-size: .6875rem; font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marquee__kpi-value { font-size: 1.625rem; font-weight: var(--weight-bold); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--neutral-900); }
.marquee__kpi-label { margin-top: .25rem; font-size: .8125rem; color: var(--neutral-600); }
.marquee__kpi-note  { margin-top: .1875rem; font-size: .75rem; color: var(--neutral-400); }
.marquee__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; align-items: end; height: 132px; }
.marquee__bars span { border-radius: 2px; background: var(--primary-600); }
.marquee__bars span[data-tone="quiet"] { background: var(--neutral-200); }
.marquee__axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; font-size: .6875rem; color: var(--neutral-400); text-align: center; }
.marquee__timeline { display: flex; height: 24px; border-radius: var(--r-xs); overflow: hidden; gap: 2px; }
.marquee__timeline span { flex: none; }
.marquee__timeline-axis { display: flex; justify-content: space-between; font-size: .625rem; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.marquee__meters { display: grid; gap: .625rem; }
.marquee__feature-row { margin-top: 2.25rem; display: flex; width: max-content; animation: marquee 64s linear infinite reverse; }
.marquee__feature-set { display: flex; gap: .75rem; padding-inline: .375rem; }
.marquee__feature {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--neutral-200); border-radius: var(--r-pill); background: #fff;
  padding: .5625rem 1rem;
  font-size: .875rem; font-weight: var(--weight-semi); color: var(--neutral-700);
  white-space: nowrap;
}
.marquee__feature .icon { color: var(--primary-600); }

/* ==========================================================================
   12 — Customer voices
   ========================================================================== */
/* A touch deeper than --primary-50 so the white cards read as raised. */
.voices { background: #E7F4F1; }
.voices__grid {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem;
  align-items: stretch;
}
.voices__grid > * { min-width: 0; }
.voice {
  margin: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--dur-ui) var(--ease-brand), box-shadow var(--dur-ui) var(--ease-brand);
}
.voice:hover { transform: translateY(-3px); box-shadow: var(--shadow-03); }
.voice__tag { align-self: flex-start; }
.voice__mark {
  display: block; margin-top: 1.125rem;
  font-size: 3.5rem; line-height: .7; font-weight: var(--weight-bold); color: var(--primary-200);
}
.voice__text { margin-top: 1rem; font-size: 1.0625rem; font-style: italic; line-height: 1.6; color: var(--neutral-800); }
.voice__theme {
  margin-top: 1.5rem; display: flex; align-items: center; gap: .5625rem;
  background: var(--primary-100); border-radius: var(--r-sm);
  padding: .75rem .875rem;
  font-size: .875rem; font-weight: var(--weight-semi); color: var(--primary-800);
}
.voice__foot {
  margin-top: auto; padding-top: 1.5rem;
  border-top: 1px solid var(--neutral-150);
  display: flex; align-items: center; gap: .75rem;
}
.voice__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--primary-100); color: var(--primary-800);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: var(--weight-bold);
}
.voice__name { display: block; font-size: .9375rem; font-weight: var(--weight-semi); color: var(--neutral-900); }
.voice__role { display: block; margin-top: .0625rem; font-size: .8125rem; color: var(--neutral-500); }
.voices__note { margin-top: 2rem; text-align: center; font-size: var(--text-xs); color: var(--neutral-500); }

/* ==========================================================================
   13 — FAQ
   ========================================================================== */
.faq__grid { display: grid; gap: 2.5rem; }
.faq__grid > * { min-width: 0; }
.faq__intro { margin-top: 1.25rem; max-width: 22rem; color: var(--neutral-600); }
.faq__email {
  display: inline-flex; align-items: center; gap: .375rem;
  color: var(--primary-700); font-weight: var(--weight-semi);
  text-decoration: underline; text-decoration-color: var(--primary-200);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-ui);
}
.faq__email:hover { text-decoration-color: var(--primary-600); }

.faq__item { border-bottom: 1px solid var(--neutral-200); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.375rem 0; text-align: left;
}
.faq__q span { font-size: 1.0625rem; font-weight: var(--weight-semi); color: var(--neutral-900); }
.faq__q .icon { color: var(--primary-700); transition: transform var(--dur-ui) var(--ease-brand); }
.faq__q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__a {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-ui) var(--ease-brand), opacity var(--dur-ui) var(--ease-ui);
}
.faq__a.is-open { grid-template-rows: 1fr; opacity: 1; }
.faq__a > div { min-height: 0; overflow: hidden; }
.faq__a p { padding-bottom: 1.5rem; color: var(--neutral-600); max-width: 68ch; }

/* ==========================================================================
   14 — Final CTA
   ========================================================================== */
.final-cta { background: #fff; padding-block: var(--section-y); }
.cta-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--brand-gradient);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.cta-panel__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 56px 56px;
}
.cta-panel__inner { position: relative; }
.cta-panel__title { margin-inline: auto; max-width: 44rem; color: #fff; }
.cta-panel__copy { margin: 1.25rem auto 0; max-width: 34rem; color: var(--primary-100); }
.cta-panel__actions {
  margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}
.cta-panel__actions .btn { min-width: 176px; }

/* ==========================================================================
   15 — Footer
   ========================================================================== */
/* #071B1A, not the ink ramp's darkest step. The footer has to read as the
   floor of the document rather than as one more dark band, and it sits
   directly under a bright gradient panel — so it is the darkest ground on
   the page by intent. Matches index-v2.html. */
.footer { background: #071B1A; color: #fff; overflow: hidden; }
.footer__inner { padding-block: 4rem 2rem; }
.footer__top { display: grid; gap: 3rem; }
.footer__top > * { min-width: 0; }
.footer__blurb { margin-top: 1.5rem; max-width: 24rem; color: var(--neutral-400); }
.footer__status {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--ink-line); border-radius: var(--r-pill);
  padding: .4375rem .875rem;
  font-size: .8125rem; font-weight: var(--weight-medium); color: var(--neutral-300);
}
.footer__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-400); }
.footer__social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--ink-line); color: var(--neutral-400);
  transition: border-color var(--dur-micro) var(--ease-ui),
              color var(--dur-micro) var(--ease-ui),
              background-color var(--dur-micro) var(--ease-ui);
}
.footer__social a:hover { border-color: var(--primary-600); color: #fff; background: rgba(4,143,130,.16); }
.footer__social .icon { width: 17px; height: 17px; }

.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; }
.footer__coltitle {
  font-size: .6875rem; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
}
.footer__links { margin-top: 1.125rem; display: flex; flex-direction: column; gap: .6875rem; }
.footer__links a { font-size: .9375rem; color: var(--neutral-300); transition: color var(--dur-micro) var(--ease-ui); }
.footer__links a:hover { color: #fff; }

/* The wordmark spans the content column, edge to edge.

   It was a viewport-sized font (clamp(4rem, 17vw, 14rem)) inside a box that
   masked it away from 58% down, and the two fought each other: the glyph run
   came out at only 73.7% of the column, and the mask faded the letters out
   through their own middles. Sizing type against the viewport and then
   cropping whatever comes out cannot be made to sit right at every width.

   It is now sized against the column it lives in. The element is a container,
   so 1cqw is one percent of that column and the wordmark is the same fraction
   of it at every viewport — full width, so it is balanced without relying on
   centring. The mask is gone: the background gradient already does the fade,
   and doing it once means the letters stay whole. */
.footer__wordmark {
  margin-top: 3.75rem; pointer-events: none; user-select: none;
  container-type: inline-size;
  line-height: 0;                   /* no stray leading around the block */
  text-align: center;               /* splits the last few percent of slack */
}
.footer__wordmark span {
  display: block;
  /* Sized as a fraction of the column. Derived: at 224px the glyph run was
     943px, so the wordmark is 4.21em across, and 0.905 of the column over
     4.21 gives 21.5%.

     0.905 rather than the 0.98 it was: edge to edge the wordmark strained
     against the column. A small inset either side lets it sit in the space
     instead of filling it. Matches index-v2.html. */
  font-size: 21.5cqw;
  font-weight: var(--weight-x);
  line-height: 1; letter-spacing: -.06em; white-space: nowrap;

  /* Everything below is a percentage of the LINE box, which with
     line-height:1 is exactly 1em — not of the font's em box, which is
     1.366em and overflows the line box by 0.183em top and bottom. Measuring
     against the wrong one of those two puts the fade in the wrong place.

     From canvas TextMetrics at the real font and weight, relative to the
     line box:  cap line 16.5%,  baseline 88.3%.  Same numbers as
     index-v2.html, because it is the same font at the same weight. */

  /* Trimmed so the block hugs the ink: nothing above the caps, nothing below
     the baseline. Previously over-trimmed, which dropped the baseline 34px
     past the box and left the letters overlapping the copyright bar. */
  margin-block: -.165em -.117em;

  /* Solid at the cap line, gone by the baseline, so the bottoms of the
     letters melt into the ground instead of stopping on a hard edge. Weighted
     rather than even — held near full through the first third, then falling
     away quickly — because a linear ramp over this distance looks mechanical.
     One hue, varying only in alpha. Matches index-v2.html exactly. */
  background: linear-gradient(to bottom,
    rgba(206, 232, 224, .34) 16%,
    rgba(206, 232, 224, .31) 34%,
    rgba(206, 232, 224, .23) 52%,
    rgba(206, 232, 224, .13) 68%,
    rgba(206, 232, 224, .05) 80%,
    rgba(206, 232, 224, 0)  88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.footer__bottom {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer__bottom p, .footer__made { font-size: .8125rem; color: var(--neutral-500); }
.footer__made { display: flex; align-items: center; gap: .5rem; }
.footer__made svg { width: 16px; height: 16px; opacity: .6; }