/* Rolling Fun — home page sections (§ 01 – § 06). Uses tokens and components from site.css.
   Everything that moves here moves by transform or opacity only. */

/* ---------- Shared bits ---------- */

/* Section-index hairlines draw in instead of sitting static. */
.hs-vision .index,
.hs-port .index,
.hs-rfs .index,
.hs-team .index,
.hs-roll .index,
.hs-found .index { position: relative; flex-wrap: wrap; row-gap: 4px; border-top-color: transparent; }
.hs-vision .index__meta,
.hs-port .index__meta,
.hs-rfs .index__meta,
.hs-team .index__meta,
.hs-roll .index__meta,
.hs-found .index__meta { margin-left: auto; }
.hs-vision .index > span:nth-child(2),
.hs-port .index > span:nth-child(2),
.hs-rfs .index > span:nth-child(2),
.hs-team .index > span:nth-child(2),
.hs-roll .index > span:nth-child(2),
.hs-found .index > span:nth-child(2) { flex: 0 0 auto; white-space: nowrap; }
.hs-rule {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  display: block;
  height: 1px;
  background: var(--line-2);
  pointer-events: none;
}
.hs-hash {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Figures rise per character from a mask; nothing ever shows a number that isn't the real one. */
.hs-ch {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.1em 0 0.14em;
  margin: -0.1em 0 -0.14em;
}
@supports (overflow: clip) { .hs-ch { overflow: visible; overflow-y: clip; } }
.hs-ch > i { display: inline-block; font-style: normal; }
.motion .hs-ch > i {
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--k, 0) * 90ms + var(--i, 0) * 35ms);
}
.motion [data-rise]:not(.is-in) .hs-ch > i,
.motion [data-row]:not(.is-in) .hs-ch > i { transform: translate3d(0, 105%, 0); }

/* Rows: the hairline draws, then the row's content arrives. */
[data-row] { position: relative; }
.hs-rfs__item::before,
.hs-fig::before,
.hs-qa__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
  pointer-events: none;
}
.hs-rfs__item::before, .hs-fig::before { top: 0; }
.hs-qa__row::after { bottom: 0; }
.motion [data-row]::before,
.motion [data-row]::after { transition: transform 1s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
.motion [data-row]:not(.is-in)::before,
.motion [data-row]:not(.is-in)::after { transform: scaleX(0); }
.motion [data-row] .hs-rfs__n,
.motion [data-row] .hs-rfs__e,
.motion [data-row] .hs-rfs__d,
.motion [data-row] > dt,
.motion .hs-qa__row[data-row] > dd {
  transition-property: opacity, filter, color;
  transition-duration: 0.8s, 0.45s, 0.3s;
  transition-timing-function: var(--ease);
  transition-delay: calc(var(--k, 0) * 70ms + 0.22s), 0s, 0s;
}
.motion [data-row]:not(.is-in) .hs-rfs__n,
.motion [data-row]:not(.is-in) .hs-rfs__e,
.motion [data-row]:not(.is-in) .hs-rfs__d,
.motion [data-row]:not(.is-in) > dt,
.motion .hs-qa__row[data-row]:not(.is-in) > dd { opacity: 0; }
.motion .hs-rfs__item .w__i { transition-delay: calc(var(--k, 0) * 70ms + 0.12s + var(--i, 0) * 0.03s); }
.motion .is-settled, .motion .is-settled *, .motion .is-settled::before, .motion .is-settled::after { transition-delay: 0s !important; }

/* ---------- § 01 Vision (paper) ---------- */

.hs-statement {
  max-width: 11.2em;
  font-size: clamp(44px, 8.6vw, 152px);
  font-weight: var(--w-display);
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.hs-ink { transition: none; }
.motion .hs-ink { display: inline-block; opacity: 0.2; }

.hs-lines { margin-top: clamp(88px, 11vw, 176px); }
.hs-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: clamp(22px, 2.4vw, 34px) 0 clamp(30px, 3.6vw, 52px);
}
.hs-line .hs-rule { top: 0; background: var(--line-2); }
.hs-line__n {
  grid-column: 1 / span 3;
  padding-top: 0.9em;
  font-size: 12px;
  color: var(--muted);
}
.hs-line__t {
  grid-column: 4 / -1;
  max-width: 19em;
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: var(--w-display);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hs-line:nth-child(2) .hs-line__t { grid-column: 5 / -1; }
.hs-line:nth-child(3) .hs-line__t { grid-column: 6 / -1; }

/* ---------- § 02 Portfolio ---------- */

.hs-port__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.hs-port__asof { grid-column: 1 / -1; margin-bottom: clamp(12px, 1.6vw, 24px); }
.hs-port__total {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 20px);
}
.hs-port__sum {
  display: block;
  font-size: clamp(60px, 12.6vw, 216px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hs-port__in {
  font-size: clamp(26px, 3vw, 46px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--muted);
}
.hs-port__n { color: var(--ink); font-variant-numeric: tabular-nums; }
.motion .hs-port__in .w__i { transition-delay: calc(0.32s + var(--i, 0) * 0.04s); }
.hs-port__chain {
  grid-column: 9 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hs-port__head-hash {
  max-width: 40ch;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
}
.hs-port__note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.hs-ledger { margin-top: clamp(72px, 9vw, 144px); }
.hs-block {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-top: 18px;
}
.hs-block + .hs-block { margin-top: clamp(40px, 5vw, 72px); }
.hs-block__head { display: contents; }
.hs-block__q {
  grid-column: 1 / span 3;
  grid-row: 1;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.035em;
}
.hs-block__meta {
  grid-column: 1 / span 3;
  grid-row: 2;
  align-self: start;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.hs-block__hash {
  grid-column: 4 / -1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
  padding-bottom: 14px;
}
.hs-block__hash .hs-hash { font-size: 12px; color: var(--muted); text-align: right; transition: color 0.3s var(--ease); }
.hs-block:first-child .hs-block__hash .hs-hash { color: var(--ink); }
.hs-tx { grid-column: 4 / -1; grid-row: 2; border-top: 1px solid var(--line); }
.hs-block__prev {
  grid-column: 4 / -1;
  grid-row: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  color: var(--dim);
}
.hs-hash--prev { color: var(--muted); transition: color 0.3s var(--ease); }
.hs-hash.is-match { color: var(--signal) !important; }

.hs-tx li { border-bottom: 1px solid var(--line); }
.hs-tx__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 0.9fr) minmax(0, 1.35fr) 168px;
  align-items: center;
  column-gap: clamp(16px, 2vw, 32px);
  min-height: 104px;
  padding: 16px 0;
}
.hs-tx__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hs-tx__what { font-size: 15.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.hs-tx__url {
  justify-self: end;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.hs-tx__arrow { display: inline-block; margin-left: 4px; transition: transform 0.45s var(--ease); }
a.hs-tx__row { transition: background-color 0.3s var(--ease); }
@media (hover: hover) {
  a.hs-tx__row:hover .hs-tx__url { color: var(--ink); }
  a.hs-tx__row:hover .hs-tx__arrow { transform: translate3d(2px, -2px, 0); }
}
a.hs-tx__row:focus-visible { outline-offset: 4px; }

/* Logo tiles: one square, one treatment. The real logo waits underneath in colour. */
.hs-tile {
  position: relative;
  display: block;
  width: 84px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hs-tile img,
.hs-tile canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hs-tile img {
  object-fit: contain;
  clip-path: circle(41.5% at 50% 50%); /* inside the old green ring */
  transform: scale(1.13);
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity 0.45s var(--ease-out, var(--ease)), filter 0.6s var(--ease-out, var(--ease));
}
.hs-tile canvas {
  image-rendering: pixelated;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.45s var(--ease-wipe);
}
.hs-tile.is-dithered img { opacity: 0; filter: none; }
@media (hover: hover) {
  a.hs-tx__row:hover .hs-tile img { opacity: 1; filter: none; }
  a.hs-tx__row:hover .hs-tile canvas { clip-path: inset(0 0 100% 0); }
}
a.hs-tx__row:focus-visible .hs-tile img { opacity: 1; filter: none; }
a.hs-tx__row:focus-visible .hs-tile canvas { clip-path: inset(0 0 100% 0); }
.hs-tile--none { display: grid; place-items: center; color: var(--muted); }
.hs-tile--none .mark { width: 40%; }

.hs-port__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ---------- § 03 Request for Startups (paper) ---------- */

.hs-rfs__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.hs-rfs__intro {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
.hs-rfs__intro .lede { margin-top: clamp(20px, 2.4vw, 32px); color: var(--ink); }
.hs-rfs__thesis { margin-top: 16px; max-width: 30em; }
.hs-rfs__cta { margin-top: clamp(28px, 3vw, 40px); }
.hs-rfs__list { grid-column: 7 / -1; counter-reset: rfs; border-bottom: 1px solid var(--line); }
.hs-rfs__item {
  display: grid;
  grid-template-columns: 74px 46px minmax(0, 1fr);
  align-items: baseline;
  padding: clamp(18px, 1.8vw, 26px) 0;
}
.hs-rfs__n { font-size: 13px; color: var(--muted); transition: color 0.3s var(--ease); }
.hs-rfs__e {
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease);
}
.hs-rfs__t {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hs-rfs__d { margin-top: 6px; max-width: 34em; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.hs-rfs__d .link { color: inherit; }
@media (hover: hover) {
  .hs-rfs__item:hover .hs-rfs__e { filter: none; opacity: 1; }
  .hs-rfs__item:hover .hs-rfs__n { color: var(--signal); }
}
.hs-rfs__item:focus-within .hs-rfs__e { filter: none; opacity: 1; }

/* ---------- § 04 Partners ---------- */

.hs-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.hs-team__head .h1 { max-width: 13em; }
.hs-team__more { font-size: 15px; margin-bottom: 0.4em; }
/* Comfortable hit areas for the small text links. */
.hs-team__more::after,
.hs-key__mail::after { content: ""; position: absolute; inset: -12px -6px; }
.hs-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--gap) * 2);
  margin-top: clamp(56px, 7vw, 112px);
  align-items: start;
}
.hs-key:nth-child(2) { margin-top: clamp(0px, 7vw, 112px); }
.hs-key:nth-child(3) { margin-top: clamp(0px, 3.5vw, 56px); }

/* Crop marks around each portrait, like a proof sheet. */
.hs-key__fig {
  --c: var(--line-2);
  position: relative;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 14px no-repeat;
}
.hs-key__img,
.hs-key__fig canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hs-key__img { object-fit: cover; object-position: 50% 20%; transition: opacity 0.6s var(--ease); }
.hs-key__fig canvas { transition: clip-path 0.65s var(--ease-wipe); }
.hs-key__fig .hs-dots { image-rendering: pixelated; clip-path: inset(0 0 0 0); }
.hs-key__fig .hs-colour { clip-path: inset(100% 0 0 0); }
.hs-key__fig.is-dithered .hs-key__img { opacity: 0; }
@media (hover: hover) {
  .hs-key:hover .hs-key__fig .hs-dots { clip-path: inset(0 0 100% 0); }
  .hs-key:hover .hs-key__fig .hs-colour { clip-path: inset(0 0 0 0); }
}
.hs-key:focus-within .hs-key__fig .hs-dots { clip-path: inset(0 0 100% 0); }
.hs-key:focus-within .hs-key__fig .hs-colour { clip-path: inset(0 0 0 0); }

.hs-key__body { margin-top: clamp(20px, 2.2vw, 28px); }
.hs-key__name {
  margin-top: 10px;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hs-key__mail { position: relative; display: inline-block; margin-top: 8px; font-size: 15px; color: var(--muted); }
@media (hover: hover) { .hs-key__mail:hover { color: var(--ink); } }
.hs-key__proof { margin-top: 18px; border-top: 1px solid var(--line); }
.hs-key__proof li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.hs-key__fun { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-style: italic; }

/* ---------- § 05 How it works ---------- */

.hs-roll__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}
.hs-roll__copy { grid-column: 1 / span 5; }
.hs-roll__copy .h2 { max-width: 12em; }
.hs-roll__steps { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.hs-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
  color: var(--ink);
  transition: opacity 0.5s var(--ease);
}
.hs-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease);
}
.hs-step.is-cur::before { transform: none; }
.hs-step strong { font-weight: 500; }
.hs-step__n { padding-top: 0.2em; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hs-roll__viz { grid-column: 7 / -1; }
.hs-roll__hud {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.hs-roll__hud b { font-variant-numeric: tabular-nums; }
.hs-stack { display: flex; flex-direction: column-reverse; gap: 4px; }
.hs-slab {
  --h: clamp(22px, calc((100vh - 230px) / 21), 30px);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 72px;
  align-items: center;
  column-gap: 14px;
  height: var(--h);
  padding: 0 12px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.hs-slab__q { color: var(--ink); }
.hs-slab__names { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.hs-slab__tx { display: inline-flex; gap: 3px; }
.hs-slab__tx i { width: 6px; height: 6px; background: var(--ink); opacity: 0.85; }
.hs-slab__h { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.hs-slab--open {
  grid-template-columns: auto minmax(0, 1fr) auto;
  box-shadow: none;
  outline: 1px dashed var(--signal);
  outline-offset: -1px;
}
.hs-slab--open .hs-slab__q { color: var(--signal); }
.hs-slab--open .hs-slab__names { color: var(--muted); }

.hs-terms { margin-top: clamp(80px, 10vw, 160px); }
.hs-terms__big {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
}
.hs-fig { position: relative; padding-top: 14px; }
.hs-fig::before { background: var(--line-2); }
.hs-fig__v {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(54px, 8.4vw, 144px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.hs-terms__rest {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-top: clamp(48px, 6vw, 88px);
}
.hs-terms__dl { grid-column: 1 / span 7; }
.hs-terms__cta { grid-column: 9 / -1; }
.hs-terms__cta p { max-width: 22em; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hs-terms__cta p b { font-weight: 400; color: var(--ink); }
.hs-terms__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Pinned scene: desktop with room to breathe, and only when motion is on. */
@media (min-width: 960px) and (min-height: 640px) {
  .motion .hs-roll__track { height: 250vh; }
  .motion .hs-roll__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-top: var(--nav-h);
  }
  .motion .hs-slab {
    --o: 0;
    position: relative;
    isolation: isolate;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .motion .hs-slab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--bg-2);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transform: scaleX(var(--o));
    transform-origin: 0 50%;
  }
  .motion .hs-slab > * { opacity: calc((var(--o) - 0.4) / 0.6); }
  .motion .hs-slab--open { box-shadow: none; }
  .motion .hs-slab--open::before { background: rgba(var(--signal-rgb), 0.06); box-shadow: none; }
  .motion .hs-step { opacity: 0.5; }
  .motion .hs-step.is-on { opacity: 1; }
}

/* ---------- § 06 For founders (paper; bookends § 01) ---------- */

.hs-found__title { max-width: 9em; }
.hs-found__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  margin-top: clamp(56px, 7vw, 112px);
}
.hs-found__lead { grid-column: 1 / span 5; }
.hs-found__lead .lede { max-width: 26em; color: var(--ink); }
.hs-qa { grid-column: 7 / -1; border-top: 1px solid var(--line-2); }
.hs-qa__row { position: relative; padding: 18px 0 20px; }
.hs-qa__row:not([data-row]) { border-bottom: 1px solid var(--line); }
.hs-qa dt {
  display: flex;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.hs-qa dd {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.hs-qa__k { flex: 0 0 auto; width: 16px; font-family: var(--sans); font-size: 15px; color: var(--muted); }
.hs-qa dd .hs-qa__k { padding-top: 0.35em; color: var(--muted); }

/* ---------- Tablet & phone ---------- */

@media (max-width: 1023px) {
  .hs-port__total { grid-column: 1 / -1; }
  .hs-port__chain { grid-column: 1 / -1; margin-top: 40px; max-width: 36em; }
  .hs-block__q, .hs-block__meta { grid-column: 1 / -1; }
  .hs-block__meta { grid-row: 2; margin: 10px 0 16px; }
  .hs-block__hash { grid-column: 1 / -1; grid-row: 3; flex-direction: column; gap: 4px; }
  .hs-block__hash .hs-hash { text-align: left; }
  .hs-tx { grid-column: 1 / -1; grid-row: 4; }
  .hs-block__prev { grid-column: 1 / -1; grid-row: 5; flex-direction: column; gap: 4px; }
  .hs-rfs__intro { grid-column: 1 / -1; position: static; }
  .hs-rfs__list { grid-column: 1 / -1; margin-top: 48px; }
  .hs-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .hs-key:nth-child(2), .hs-key:nth-child(3) { margin-top: 0; }
  .hs-key:nth-child(2) { margin-top: 64px; }
  .hs-found__lead, .hs-qa { grid-column: 1 / -1; }
  .hs-qa { margin-top: 48px; }
  .hs-terms__dl, .hs-terms__cta { grid-column: 1 / -1; }
  .hs-terms__cta { margin-top: 36px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .hs-key:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gap) * 2);
    align-items: start;
  }
  .hs-key:nth-child(3) .hs-key__body { margin-top: 0; }
}
@media (max-width: 959px), (max-height: 639px) {
  .hs-roll__copy, .hs-roll__viz { grid-column: 1 / -1; }
  .hs-roll__viz { margin-top: 56px; }
}
@media (max-width: 760px) {
  .hs-line { padding-bottom: 28px; }
  .hs-line__n { grid-column: 1 / -1; padding: 0 0 10px; }
  .hs-line__t,
  .hs-line:nth-child(2) .hs-line__t,
  .hs-line:nth-child(3) .hs-line__t { grid-column: 1 / -1; }
  .hs-tx__row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "tile name url" "tile what what";
    align-items: start;
    row-gap: 4px;
    min-height: 0;
    padding: 16px 0;
  }
  .hs-tile { width: 56px; grid-area: tile; }
  .hs-tx__name { grid-area: name; font-size: 18px; padding-top: 4px; }
  .hs-tx__what { grid-area: what; font-size: 14.5px; }
  .hs-tx__url { grid-area: url; padding-top: 6px; font-size: 0; }
  .hs-tx__url .hs-tx__arrow { font-size: 14px; }
  .hs-rfs__item { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .hs-rfs__n { grid-column: 1 / -1; }
  .hs-rfs__e { grid-column: 1; font-size: 20px; }
  .hs-rfs__b { grid-column: 2; }
  .hs-keys { grid-template-columns: minmax(0, 1fr); }
  .hs-key:nth-child(2) { margin-top: 0; }
  .hs-key__fig { max-width: 420px; }
  .hs-slab { grid-template-columns: 58px minmax(0, 1fr) auto; column-gap: 10px; padding: 0 10px; --h: 28px; }
  .hs-slab__h { display: none; }
  .hs-slab--open { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hs-slab--open .hs-slab__names { visibility: hidden; }
  .hs-terms__big { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hs-fig { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .hs-fig__v { margin-top: 0; font-size: clamp(48px, 15vw, 72px); }
}

/* Phones: the figure can't wrap, so it scales with the screen and always keeps room at the right edge. */
@media (max-width: 600px) {
  .hs-port__sum { font-size: min(60px, 16.5vw); }
}