/* «Slik hjelper vi»: the sales page. Tokens, header, footer and type come from
   /styles.css; this file adds the page's own scenes. */

:root {
  --desk: oklch(95.4% 0.014 89);
  --warm: oklch(93.2% 0.034 80);
  --petrol-wash: oklch(34% 0.062 181 / 0.06);
  --ochre-ink: oklch(42% 0.09 70);
  --postit: oklch(91% 0.085 92);
  --bubble: oklch(93% 0.008 220);
  --night: oklch(24% 0.03 215);
  --night-raised: oklch(36% 0.025 215);
  --night-ink: oklch(94% 0.01 220);
  --alert: oklch(55% 0.17 30);
  --shadow-1: 0 1px 2px oklch(20% 0.02 220 / 0.06), 0 4px 12px oklch(20% 0.02 220 / 0.07);
  --shadow-2: 0 2px 4px oklch(20% 0.02 220 / 0.05), 0 18px 44px oklch(20% 0.02 220 / 0.1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Smooth scrolling fights ScrollTrigger: anchor landings drift and WebKit can be
   animated back to the top while it measures. */
html { scroll-behavior: auto; }

/* styles.css only zeroes the top margin; this page sets its own rhythm. */
:where(.page-help) :where(h1, h2, h3, p) { margin: 0; }
:where(.page-help) p { text-wrap: pretty; }

.clock,
.hero-cue,
.tally-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Reading progress: one line on the header's lower edge, drawn as you scroll */

.progress {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
}

.progress-line {
  position: absolute;
  inset: 0;
  background: var(--petrol);
  transform: scaleX(0);
  transform-origin: left;
}

html:not(.motion) .progress { display: none; }

/* Hero */

.hero-inner {
  display: grid;
  align-items: center;
  width: var(--page);
  min-height: calc(100svh - var(--header-height));
  margin-inline: auto;
  padding: 4rem 0 6rem;
}

.hero .eyebrow { margin-bottom: 2rem; color: var(--petrol); }

.hero h1 {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.6vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.hero h1 em { display: block; color: var(--petrol); }

.hero-intro {
  max-width: 44ch;
  margin-top: 2rem;
  color: var(--foreground-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

.hero-cue {
  display: inline-flex;
  gap: 0.75rem;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 3rem;
  color: var(--petrol);
  text-decoration: none;
}

/* The story: everyday clutter, then the groomer */

.story {
  --warmth: 0;
  position: relative;
  /* Clutter pushed past the desk's edge must not widen the page on a phone. */
  overflow-x: clip;
  background: color-mix(in oklch, var(--background), var(--warm) calc(var(--warmth) * 100%));
}

.story-pin {
  display: grid;
  width: var(--page);
  margin-inline: auto;
}

.clock { margin-bottom: 1.25rem; color: var(--petrol); }

.story h2 {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.copy-state > p:last-child {
  max-width: 36ch;
  margin-top: 1.5rem;
  color: var(--foreground-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.tally {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.tally-label { color: var(--foreground-subtle); }

.tally-n {
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}

.workdesk {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--desk);
  box-shadow: var(--shadow-2);
}

.layer {
  container-type: inline-size;
  border-radius: 14px;
}

/* Clutter items: sized in container units so the desk scales as one picture */

.item {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  rotate: calc(var(--r) * 1deg);
  font-size: 2.05cqw;
  line-height: 1.35;
}

.item-meta {
  margin-bottom: 0.6em;
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.04em;
}

.thread {
  width: 40%;
  padding: 1em;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}

.bubble {
  width: fit-content;
  max-width: 92%;
  margin-top: 0.45em;
  padding: 0.5em 0.8em;
  background: var(--bubble);
  border-radius: 1.1em;
}

.bubble b {
  display: block;
  color: var(--foreground-subtle);
  font-size: 0.78em;
  font-weight: 600;
}

.dots { display: inline-flex; gap: 0.25em; padding: 0.35em 0; }

.dots i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--foreground-subtle);
}

.motion .dots i { animation: typing 1.2s ease-in-out infinite; }
.motion .dots i:nth-child(2) { animation-delay: 0.15s; }
.motion .dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; translate: 0 0; }
  30% { opacity: 1; translate: 0 -0.2em; }
}

.files { width: 36%; }

.file {
  padding: 0.7em 0.9em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  box-shadow: var(--shadow-1);
}

.file-old { color: var(--foreground-subtle); }
.file-new { margin: -0.9em 0 0 1.4em; position: relative; }

.lock {
  width: 22%;
  padding: 1em 0.8em 0.9em;
  color: var(--night-ink);
  background: var(--night);
  border-radius: 1.4em;
  box-shadow: var(--shadow-1);
}

.lock-time {
  margin-bottom: 0.5em;
  font-family: var(--font-display);
  font-size: 2.6em;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

.note {
  margin-top: 0.4em;
  padding: 0.5em 0.7em;
  background: var(--night-raised);
  border-radius: 0.9em;
  font-size: 0.86em;
}

.note b { display: block; font-weight: 600; }

.badge {
  position: absolute;
  right: -0.6em;
  top: -0.6em;
  min-width: 2em;
  padding: 0.3em 0.5em;
  color: var(--surface);
  background: var(--alert);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mail {
  width: 52%;
  padding: 0.9em 1em;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}

.mail-row { display: block; }
.mail-row b { font-weight: 600; margin-right: 0.35em; }
.mail-count { color: var(--foreground-subtle); }

.mail-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--focus);
}

.postit {
  width: 28%;
  padding: 1.2em 1.1em 2.2em;
  background: var(--postit);
  box-shadow: var(--shadow-1);
  font-family: var(--font-display);
  font-size: 2.5cqw;
  font-style: italic;
  line-height: 1.3;
}

.calendar {
  width: 32%;
  padding: 0.9em 1em;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}

.slot {
  padding: 0.55em 0.7em;
  border-radius: 6px;
  background: var(--petrol-wash);
  border-left: 0;
}

.slot span { font-family: var(--font-mono); font-size: 0.86em; margin-right: 0.5em; }
.slot-b { margin: -1.1em 0 0 1.6em; position: relative; background: var(--ochre-soft); }

/* Things that sit underneath, or barely register */

.printout {
  width: 38%;
  padding: 1em 1.1em 1.4em;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.printout .row {
  display: block;
  height: 0.55em;
  margin-top: 0.8em;
  background: linear-gradient(90deg, var(--line) 0 22%, transparent 22% 26%, var(--line) 26% 70%, transparent 70%);
}

.printout .struck { position: relative; }

.printout .struck::after {
  content: "";
  position: absolute;
  left: -3%;
  right: 20%;
  top: 50%;
  height: 2px;
  background: color-mix(in oklch, var(--alert) 75%, transparent);
  rotate: -1.5deg;
}

.missed {
  padding: 0.6em 0.9em;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}

.missed-icon {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--alert);
}

/* The groomed side: a calm board on a plain surface, with one line beneath it */

.order { background: var(--surface); }

.board {
  position: absolute;
  inset: 6% 6% auto 6%;
  display: flex;
  flex-direction: column;
  padding: 1.4em 1.6em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  font-size: 1.7cqw;
}

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--line);
}

.board-kicker {
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board h3 {
  margin-top: 0.2em;
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.board-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.8em;
  color: var(--ochre-ink);
  background: var(--ochre-soft);
  border-radius: 999px;
  font-weight: 600;
}

.board-status span {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--ochre);
}

.board-body {
  display: grid;
  gap: 1.3em;
  padding-top: 1.2em;
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3em;
}

.day {
  padding-bottom: 0.2em;
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
  text-transform: uppercase;
}

.cell {
  padding: 0.45em 0.5em;
  background: var(--petrol-wash);
  border-radius: 5px;
  font-size: 0.92em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-open {
  color: var(--ochre-ink);
  background: var(--ochre-soft);
  font-weight: 600;
}

.board-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-list li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) auto;
  gap: 1em;
  align-items: baseline;
  padding: 0.55em 0.4em;
  border-top: 1px solid var(--line);
  border-radius: 4px;
}

.when {
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
  text-transform: uppercase;
}

.who {
  padding: 0.1em 0.6em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.88em;
  font-weight: 500;
}

.hit-open {
  --lit: 1;
  background: color-mix(in oklch, var(--ochre-soft) calc(var(--lit) * 55%), transparent);
}

.hit-open .what { font-weight: 600; }
.hit-open .who { color: var(--ochre-ink); border-color: var(--ochre); }

.board-foot {
  margin-top: 1.4em;
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
}

.tracks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  height: 2px;
  background: var(--petrol);
}

.sweep { display: none; }

/* Motion layout: a pinned stage where scroll drives the scene */

.motion .story-pin {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: 4rem;
  height: calc(100svh - var(--pinned-header, var(--header-height)));
}

.motion .story-copy { display: grid; }
.motion .copy-state { grid-area: 1 / 1; }
.motion .tally { grid-area: 2 / 1; }

/* Opacity only: hidden copy stays in the accessibility tree, so all three steps can be read. */
.motion .copy-state:not([data-copy="a"]) { opacity: 0; }

.motion .workdesk-cell {
  display: flex;
  justify-content: flex-end;
}

.motion .workdesk {
  --sweep: 0;
  width: 100%;
  max-width: calc((100svh - var(--pinned-header, var(--header-height)) - 4rem) * 1.25);
  aspect-ratio: 5 / 4;
}

.motion .layer { position: absolute; inset: 0; }

.motion .chaos { clip-path: inset(-25% -25% -25% calc(var(--sweep) * 1%)); }
.motion .order { clip-path: inset(0 calc(100% - var(--sweep) * 1%) 0 0); }

.motion .sweep {
  display: block;
  position: absolute;
  top: -3%;
  bottom: -3%;
  left: calc(var(--sweep) * 1%);
  width: 5cqw;
  min-width: 22px;
  translate: -100% 0;
  opacity: 0;
  border-right: 2px solid var(--petrol);
  box-shadow: 10px 0 22px -12px color-mix(in oklch, var(--petrol) 45%, transparent);
  pointer-events: none;
}

.motion .sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in oklch, var(--petrol) 40%, transparent) 3px 4px);
  mask-image: linear-gradient(90deg, transparent, black);
}

.workdesk { container-type: inline-size; }

/* Static layout: reduced motion, no script, or GSAP missing */

html:not(.motion) .story-pin {
  max-width: 52rem;
  gap: 3rem;
  padding: 6rem 0;
}

html:not(.motion) .story-copy,
html:not(.motion) .workdesk-cell,
html:not(.motion) .workdesk { display: contents; }

html:not(.motion) .copy-state[data-copy="a"] { order: 1; }
html:not(.motion) .chaos { order: 2; }
html:not(.motion) .copy-state[data-copy="b"] { order: 3; }
html:not(.motion) .copy-state[data-copy="c"] { order: 4; }
html:not(.motion) .order { order: 5; }
html:not(.motion) .tally { display: none; }

html:not(.motion) .layer {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  background-color: var(--desk);
  box-shadow: var(--shadow-2);
}

html:not(.motion) .order { background-color: var(--surface); }

/* Ways in */

.ways { padding: 8rem 0 9rem; }

.ways-inner { width: var(--page); margin-inline: auto; }

.ways .eyebrow { margin-bottom: 1.5rem; color: var(--petrol); }

.ways h2 {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.ways-list {
  max-width: 56rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}

.ways-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 2rem;
  padding: 1.5rem 0 1.75rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--foreground-muted);
  background: linear-gradient(var(--petrol), var(--petrol)) 0 0 / 100% 2px no-repeat;
}

.ways-list b {
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ways-mail {
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 3.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4rem;
}

.ways-mail:hover { color: var(--petrol); }

.ways-note {
  margin-top: 1rem;
  color: var(--foreground-subtle);
  font-size: 0.92rem;
}

/* Phone */

@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 0 4rem;
  }

  .item {
    left: calc(var(--mx) * 1%);
    top: calc(var(--my) * 1%);
    font-size: 3.3cqw;
  }

  .thread { width: 64%; }
  .files { width: 64%; }
  .lock { width: 30%; }
  .mail { width: 94%; }
  .printout { width: 52%; }
  .postit { width: 42%; font-size: 3.8cqw; padding-bottom: 1.2em; }
  .calendar { width: 50%; }

  .board { inset: 4% 4% auto 4%; padding: 1em 1.1em; font-size: 3.2cqw; }
  .board h3 { font-size: 1.7em; }
  .board-list li { grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 0.6em; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week > :nth-child(7n + 1),
  .week > :nth-child(7n + 2),
  .week > :nth-child(7n + 3) { display: none; }

  .tracks { bottom: 6%; }

  html:not(.motion) .layer { aspect-ratio: 4 / 4.6; }

  .motion .story-pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    padding: 1.25rem 0 1rem;
  }

  .story h2 { font-size: 1.65rem; }
  .clock { margin-bottom: 0.75rem; }
  .copy-state > p:last-child { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.5; }

  .motion .tally { margin-top: 1rem; padding-top: 0.6rem; }
  .tally-n { font-size: 1.8rem; }

  /* The cell is the height left under the copy; the desk keeps its shape and
     takes whichever of the cell's width or height runs out first. */
  .motion .workdesk-cell {
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    min-height: 0;
    container-type: size;
  }

  .motion .workdesk {
    width: min(100cqw, 100cqh * 4 / 4.6);
    max-width: none;
    aspect-ratio: 4 / 4.6;
  }

  .ways { padding: 5rem 0 6rem; }
  .ways-list li { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Short phones keep the body text under each step. The copy tightens and the desk takes
   what is left, so the pinned stage still fits the screen. */
@media (max-width: 760px) and (max-height: 720px) {
  .motion .story-pin { gap: 0.75rem; padding: 0.75rem 0 0.5rem; }
  .motion .clock { margin-bottom: 0.5rem; }
  .motion .story h2 { font-size: 1.4rem; }
  .motion .copy-state > p:last-child { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.45; }
  .motion .tally { margin-top: 0.5rem; padding-top: 0.4rem; }
  .motion .tally-n { font-size: 1.5rem; }
}

/* Under 400px the desk is narrower, so the cards that slide to the right stay on screen. */
@media (max-width: 400px) {
  .motion .workdesk { width: min(84cqw, 100cqh * 4 / 4.6); }
}

/* QA: ?p=0..1 renders one frame of the story at scroll 0 */

.qa .site-header,
.qa .hero,
.qa .method,
.qa .proof,
.qa .person,
.qa .ways,
.qa .site-footer,
.qa .skip-link { display: none; }

.qa .motion .story-pin,
.qa.motion .story-pin { height: 100svh; }

/* How we work: four stations along one line, drawn as you read. */

.method { padding: clamp(6rem, 11vw, 10rem) 0; }

.method-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 4rem;
  width: var(--page);
  margin-inline: auto;
}

.method-intro {
  position: sticky;
  top: calc(var(--header-height) + 3rem);
}

.method h2,
.person h2 {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.method-intro > p:last-child {
  max-width: 38ch;
  margin-top: 1.5rem;
  color: var(--foreground-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.stations {
  --drawn: 1;
  position: relative;
  margin: 0;
  padding: 0.25rem 0 0 4rem;
  list-style: none;
}

.stations::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0.7rem;
  width: 2px;
  background: var(--petrol);
  transform: scaleY(var(--drawn));
  transform-origin: top;
}

.stations li {
  position: relative;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.stations li:last-child { padding-bottom: 0; }

/* A station is a waypoint on the line, hollow until the drawn line reaches it. It sits
   centred on the line, which is 2px wide and starts at 0.7rem, so its centre is 1px in. */
.stations li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(-4rem + 0.7rem + 1px - 0.4rem);
  width: 0.8rem;
  height: 0.8rem;
  background: var(--background);
  border: 2px solid var(--petrol);
  border-radius: 50%;
  transition: background-color 300ms var(--ease-out);
}

.stations li.is-reached::before,
html:not(.motion) .stations li::before { background: var(--petrol); }

.stations b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stations p {
  max-width: 40ch;
  margin-top: 0.6rem;
  color: var(--foreground-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Proof: a change of tempo, dark like the groomed track at dusk. */

.proof {
  padding: clamp(6rem, 11vw, 9rem) 0;
  color: var(--foreground-inverse);
  background: var(--petrol-dark);
}

.proof-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  width: var(--page);
  margin-inline: auto;
}

.proof .eyebrow { color: var(--ochre); }

.proof h2 {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.proof-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
  color: oklch(84% 0.03 180);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.proof-copy {
  align-self: end;
  padding-top: 2rem;
  border-top: 1px solid oklch(45% 0.045 182);
}

.proof-lead {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.proof-copy > p:not(.proof-lead) {
  max-width: 42ch;
  margin-top: 1.5rem;
  color: oklch(86% 0.02 180);
  font-size: 1.05rem;
  line-height: 1.65;
}

.proof .text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 1.5rem;
  color: var(--ochre-soft);
}

.proof .text-link:hover { color: var(--foreground-inverse); }
.proof a:focus-visible { outline-color: var(--ochre-soft); }

/* Who you talk to */

.person { padding: clamp(6rem, 11vw, 9rem) 0 0; }

.person-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 4rem;
  width: var(--page);
  margin-inline: auto;
}

.person .eyebrow { grid-column: 1 / -1; }
.person h2 { max-width: 12ch; }

.person-copy {
  display: grid;
  gap: 1rem;
  align-self: end;
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

.person-copy p {
  max-width: 42ch;
  color: var(--foreground-muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.person-copy p:first-child { color: var(--foreground); }

.ways-address { color: var(--foreground); user-select: all; }

@media (max-width: 760px) {
  .method-inner,
  .proof-inner,
  .person-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .method-intro { position: static; }
  .stations { padding-left: 3rem; }
  .stations li::before { left: calc(-3rem + 0.7rem + 1px - 0.4rem); }
  .person-copy { margin-top: 2rem; }
}