/*
 * Deep Water landing, lower half — the report, the depth picker, the agents
 * chapter and its audience panel, the pinned researchers sequence, price, FAQ
 * and the ascent. Split from landing.css only to stay inside the 1000-line
 * file cap; the palette and shared type live there.
 */

/* ========================= the report ========================= */

.dw-report {
  background: var(--panel);
  border: 1px solid rgb(160 180 190 / 22%);
  box-shadow:
    0 18px 44px rgb(4 10 14 / 45%),
    0 1px 0 rgb(255 255 255 / 5%) inset;
  max-width: 1300px;
}

.dw-report-head {
  align-items: baseline;
  border-bottom: 1px solid var(--line-mid);
  color: var(--faint);
  display: flex;
  font-size: 10px;
  gap: 20px;
  justify-content: space-between;
  letter-spacing: 0.2em;
  padding: 15px 24px;
  text-transform: uppercase;
}

.dw-report-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
}

/* Direct child only: the meta line holds its own spans for the live source
 * count and tier name, and a descendant selector shrank those to 0.44em of an
 * already-shrunk 0.44em. */
.dw-report-title > span {
  color: var(--faint);
  font-size: 0.44em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dw-report-body {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
  padding: 40px 24px 34px;
}

.dw-prose {
  display: grid;
  font-family: var(--sans);
  font-size: 13.5px;
  gap: 18px;
  line-height: 1.72;
}

/* The prose writes itself as the verified sources arrive: --in runs 0 → 1 per
 * line, driven by how far the report section has travelled. */
.dw-line {
  color: var(--body);
  cursor: default;
  margin: 0;
  opacity: var(--in, 1);
  padding: 6px 10px;
  transform: translate3d(0, calc((1 - var(--in, 1)) * 12px), 0);
  transition: background-color 200ms ease;
}

/* The reveal is armed only after the first frame. Without that the prose
 * fades *out* on load, from the no-JS fallback down to its start state. */
.dw-prose.is-armed .dw-line {
  transition:
    opacity 320ms ease,
    transform 420ms var(--ease),
    background-color 200ms ease;
}

.dw-line[data-refs]:hover,
.dw-line[data-refs]:focus-visible,
.dw-line.is-lit {
  background: rgb(var(--accent-rgb) / 9%);
  outline: none;
}

.dw-line sup {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  margin-left: 5px;
}

.dw-line[data-refs]:hover sup,
.dw-line[data-refs]:focus-visible sup {
  background: rgb(var(--accent-rgb) / 22%);
  border-radius: 2px;
  padding: 1px 3px;
}

.dw-line-ja {
  color: var(--body-2);
  font-family: var(--mono);
  font-size: 12px;
}

.dw-line-dropped {
  align-items: center;
  color: var(--faint-2);
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 10px;
  margin: 6px 0 0;
  opacity: var(--in, 1);
  text-decoration: line-through;
}

.dw-stamp {
  border: 1px dashed var(--line-strong);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  padding: 4px 8px;
  text-decoration: line-through;
  text-transform: uppercase;
}

.dw-evidence {
  align-content: start;
  display: grid;
  gap: 0;
}

.dw-arrivals {
  align-content: start;
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
}

.dw-arrivals-head {
  color: var(--faint);
  display: flex;
  font-size: 9px;
  gap: 10px;
  justify-content: space-between;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dw-arrivals-head b {
  color: var(--accent);
  font-weight: 400;
}

.dw-landing2 {
  min-height: var(--landing2-h, 60px);
  position: relative;
}

/* A source card only exists once its chip has flown in from the sweep. The
 * arrival is a keyframe rather than a transform sitting on the resting state:
 * the chips are aimed at this card's box, and a transform would move the box
 * they measure. */
.dw-source {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 7px;
  opacity: 0;
  padding: 14px 4px;
  transition:
    opacity 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.dw-source:first-of-type {
  border-top: 0;
}

.dw-source.is-in {
  animation: dw-pop 420ms var(--ease) both;
  opacity: 0.9;
}

@keyframes dw-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

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

.dw-source-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.dw-source-id {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

.dw-source-title {
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 14px;
}

.dw-source-meta {
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dw-evidence.is-picking .dw-source.is-in {
  opacity: 0.34;
}

.dw-evidence.is-picking .dw-source.is-lit {
  background: rgb(var(--accent-rgb) / 9%);
  box-shadow: inset 3px 0 0 var(--accent);
  opacity: 1;
  padding-left: 12px;
}

.dw-report-foot {
  border-top: 1px solid var(--line-mid);
  color: var(--faint-2);
  font-size: 9px;
  letter-spacing: 0.24em;
  margin: 0;
  padding: 14px 24px;
  text-align: center;
  text-transform: uppercase;
}

@media (width <= 900px) {
  .dw-report-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================= how deep ========================= */

.dw-depth-grid {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.dw-sediment-col {
  position: sticky;
  top: 96px;
}

.dw-sediment {
  align-content: start;
  display: grid;
  gap: 2px;
  max-height: 58vh;
  overflow: hidden;
}

.dw-band-label {
  color: var(--faint);
  display: flex;
  font-size: 8px;
  gap: 10px;
  justify-content: space-between;
  letter-spacing: 0.2em;
  margin: 10px 0 4px;
  text-transform: uppercase;
}

.dw-band-label:first-child {
  margin-top: 0;
}

.dw-band-label.is-current {
  color: var(--accent);
}

.dw-grain {
  background: var(--line-soft);
  display: block;
  height: 2px;
  transition:
    width 520ms var(--ease),
    background-color 300ms ease;
  width: 8%;
}

.dw-grain.is-on {
  background: rgb(198 206 210 / 40%);
}

.dw-grain.is-current {
  background: var(--accent);
}

.dw-sediment-total {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.dw-sediment-total b {
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.dw-tiers {
  border-top: 1px solid var(--line);
  display: grid;
}

.dw-tier {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 24px;
  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(110px, 170px) 80px;
  opacity: 0.5;
  padding: 22px 0;
  text-align: left;
  transition: opacity 300ms ease;
  width: 100%;
}

.dw-tier.is-on {
  opacity: 1;
}

.dw-tier-name {
  color: #c6ced2;
  font-family: var(--serif);
  font-size: 24px;
}

.dw-tier.is-on .dw-tier-name {
  color: var(--accent);
}

.dw-tier-bar {
  background: rgb(160 180 190 / 10%);
  display: block;
  height: 10px;
  position: relative;
}

.dw-tier-bar i {
  background: rgb(198 206 210 / 30%);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 700ms var(--ease);
}

.dw-tier.is-on .dw-tier-bar i {
  background: var(--accent);
}

.dw-tier-note {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.dw-tier-count {
  color: var(--faint-2);
  font-family: var(--serif);
  font-size: 26px;
  text-align: right;
}

.dw-tier.is-on .dw-tier-count {
  color: var(--ink-2);
}

@media (width <= 900px) {
  .dw-depth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dw-sediment-col {
    position: static;
  }

  .dw-tier {
    gap: 8px 16px;
    grid-template-columns: minmax(90px, 1fr) 60px;
  }

  .dw-tier-bar {
    grid-column: 1 / -1;
    order: 3;
  }

  .dw-tier-note {
    grid-column: 1 / -1;
    order: 4;
  }
}

/* ========================= the stack ========================= */

.dw-h2-stack {
  margin-bottom: 56px;
  max-width: 15em;
}

.dw-stack-diagram {
  display: grid;
  gap: 8px;
  margin-bottom: 56px;
  max-width: 760px;
}

.dw-layer {
  align-items: baseline;
  border: 1px solid rgb(160 180 190 / 20%);
  background: rgb(255 255 255 / 3%);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 18px 22px;
}

.dw-layer b {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
}

.dw-layer span {
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The kinds each layer deals in, listed inside the layer itself. The design
 * asks for JetBrains Mono here, which the page does not load — so this is the
 * page's own mono, which is what the design renders too. */
.dw-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  width: 100%;
}

.dw-kind {
  align-items: center;
  background: rgb(255 255 255 / 2%);
  border: 1px solid rgb(160 180 190 / 22%);
  color: #c3ced3;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 9px;
  gap: 6px;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dw-kind-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--muted-2);
}

.dw-layer-us {
  background: rgb(var(--accent-rgb) / 8%);
  border-color: var(--accent);
}

.dw-layer-us b {
  color: var(--ink);
}

.dw-layer-us span {
  color: var(--accent);
}

.dw-layer-record {
  background: none;
  border-style: dashed;
}

.dw-layer-record b {
  color: var(--muted);
}

.dw-layer-record span {
  color: var(--faint-2);
}

.dw-uplink {
  color: var(--accent);
  display: flex;
  font-size: 12px;
  justify-content: center;
}

.dw-uplink-dim {
  color: var(--faint-2);
}

.dw-triple {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 60px;
  max-width: 1100px;
}

.dw-triple-lead {
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.24;
  margin: 0;
}

.dw-triple p {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.85;
  margin: 0;
}

/* ========================= audience ========================= */

.dw-audience {
  margin: 180px 0 200px;
  max-width: 1240px;
}

.dw-audience-head {
  display: grid;
  gap: 26px;
  justify-items: center;
  margin-bottom: 96px;
  text-align: center;
}

.dw-audience-head span {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.dw-audience-head h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(38px, 6.4vw, 104px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.94;
  margin: 0;
}

.dw-audience-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  position: relative;
}

/* A lamp that swings across the two cards as the section passes. */
.dw-orb {
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 16%), transparent 70%);
  filter: blur(24px);
  height: 260px;
  left: var(--orb-x, 40%);
  pointer-events: none;
  position: absolute;
  top: var(--orb-y, 40%);
  transform: translate(-50%, -50%);
  width: 260px;
}

.dw-aud {
  align-content: start;
  background: rgb(255 255 255 / 1.5%);
  border: 1px solid var(--line);
  display: grid;
  gap: 20px;
  opacity: 0.34;
  padding: 44px 44px 48px;
  position: relative;
  transition:
    border-color 500ms ease,
    background-color 500ms ease,
    opacity 500ms ease;
}

.dw-aud.is-lit {
  background: rgb(var(--accent-rgb) / 5%);
  border-color: var(--accent);
  opacity: 1;
}

.dw-aud-kicker {
  color: var(--faint-2);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 500ms ease;
}

.dw-aud-dash {
  color: var(--faint-2);
  transition: color 500ms ease;
}

.dw-aud.is-lit .dw-aud-kicker,
.dw-aud.is-lit .dw-aud-dash {
  color: var(--accent);
}

.dw-aud-name {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.06;
}

.dw-aud-points {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.dw-aud-points span {
  color: var(--muted);
  display: flex;
  font-family: var(--sans);
  font-size: 13.5px;
  gap: 12px;
  line-height: 1.7;
}

/* ========================= three ways in ========================= */

.dw-ways {
  border-top: 1px solid var(--accent);
  margin-top: 96px;
  max-width: 1300px;
  padding-top: 40px;
}

.dw-ways-label {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.26em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.dw-ways h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 72px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
  margin: 0 0 12px;
}

.dw-ways-lead {
  margin: 0 0 52px;
  max-width: 30em;
}

.dw-ways-grid {
  background: var(--line);
  border: 1px solid var(--line);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dw-way {
  align-content: start;
  background: var(--ground);
  display: grid;
  gap: 16px;
  padding: 30px 26px;
}

.dw-way h4 {
  color: var(--ink-2);
  display: flex;
  font-size: 10px;
  font-weight: 400;
  gap: 12px;
  justify-content: space-between;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.dw-way h4 span {
  color: var(--accent);
}

.dw-way p {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.dw-way code {
  color: var(--body);
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}