/* ── HOME COLUMN ──
   The home runs on the hero's width: one value sets the menu bar, every
   section and the footer, so the logo, the hero copy and each section's
   heading share one left edge. This sheet loads on the home only, so other
   pages keep their 1100px column until they are redesigned. */
:root {
  --vx-col: min(88vw, 1320px);

  /* the sections below the hero sit a little inside its edges */
  --vx-sec: min(84vw, 1200px);
}
.section-inner,
.footer-inner {
  max-width: var(--vx-sec);
}

/* the menu bar's logo and buttons sit on the same column edges */
@media (min-width: 821px) {
  nav {
    padding-right: max(24px, calc((100% - var(--vx-col)) / 2));
    padding-left: max(24px, calc((100% - var(--vx-col)) / 2));
  }
}

/* blocks that carried their own narrower cap now fill the column */
.fw-panel,
.sectors-grid {
  max-width: none;
}

/* ── THE PROBLEM, on the new home ──
   The trail lines belonged to the old hero and now cross the copy; the hero
   tells that story now. The copy and the buttons sit together as one block,
   top-aligned with the card, and the card stands flat so its text reads
   straight. */
.problemv2 {
  padding-top: clamp(72px, 8vw, 120px);
}
.problemv2 > .pv2-anim {
  display: none;
}
@media (min-width: 921px) {
  .pv2-layout {
    grid-template: "copy visual" auto "actions visual" auto ". visual" 1fr / 1.12fr 1fr;
    gap: 0 clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .pv2-actions {
    margin-top: 32px;
  }
}
.pv2-visual .rcx,
.pv2-visual .rcx:hover {
  transform: none;
}

/* phones: the two buttons render at one size */
@media (max-width: 560px) {
  .pv2-ctas .btn-primary,
  .pv2-ctas .btn-ghost {
    padding: 12px 22px;
    font-size: 15px;
  }
}

/* ── WHY NOW (frameworks) ──
   Same three-region outline; hierarchy inside it. Title left, the one
   sentence right; each instrument is its name, then one quiet status line
   (Wallace's dates, 9 Nov), no pipes. A count sits beside each region. */
.fw-head2 {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
  margin: 0 0 48px;
}
.fw-head2 .section-title {
  margin-bottom: 0;
}
.fw-sub {
  align-self: start;
  margin: 0;
  padding-top: 49px;
  font-size: 17px;
  line-height: 1.6;
}
.fw-list {
  gap: 0;
}
.fw-list li {
  padding: 13px 0 13px 18px;
  border-top: 1px solid var(--fw-line, var(--border));
  border-radius: 0;
}
.fw-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.fw-list li::before {
  top: 21px;
}
.fw-list li:first-child::before {
  top: 8px;
}
.fw-list li:hover {
  background: none;
}
.fw-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fw-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  transition: color 0.18s;
}
.fw-link:hover .fw-name {
  color: var(--primary2);
}
.fw-meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.fw-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fw-line, var(--border));
}
.fw-head[data-n]::after {
  content: attr(data-n);
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
@media (max-width: 820px) {
  .fw-sub {
    padding-top: 0;
  }
  .fw-head2 {
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }
}

/* phones: the three regions sit side by side and swipe, so the section is
   one screen tall instead of three; the evidence note is kept short */
@media (max-width: 640px) {
  .fw-panel {
    overflow: hidden;
  }
  .frameworks-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .frameworks-grid::-webkit-scrollbar {
    display: none;
  }
  .fw-col {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  .fw-col + .fw-col {
    border-top: 0;
    border-left: 1px solid var(--fw-line, var(--border));
  }
  .fw-list li {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .fw-note-props {
    display: none;
  }
  .fw-sub {
    font-size: 15px;
  }
}

/* ── WHAT'S NEW ──
   Three posts as an editorial row: no cards, a hairline above the row, the
   picture carries each post and the headline is the link. On a phone the
   row becomes a list with a small picture beside each headline. */
.news {
  padding: clamp(64px, 6vw, 88px) 24px;
}
.news .section-label {
  margin: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.theme-dark .news .section-label {
  color: #a5bff0;
}
.news .section-title {
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.news .section-title span[style] {
  color: inherit;
}
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.news-h {
  margin: 14px 0 0;
}
.news-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.news-all:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.news-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.news-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}
.news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-link:hover .news-thumb img {
  transform: scale(1.04);
}
.news-meta {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.news-title {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.2s;
}
.news-link:hover .news-title {
  color: var(--primary);
}
.news-sub {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 820px) {
  .news-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  /* phones: the cards scroll sideways, the next one peeking in */
  .news-list {
    display: flex;
    gap: 14px;
    margin: 0 -20px;
    padding: 24px 20px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .news-list::-webkit-scrollbar {
    display: none;
  }
  .news-item {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .news-thumb {
    margin-bottom: 12px;
    border-radius: 10px;
  }
  .news-title {
    font-size: 16px;
  }
  .news-sub {
    font-size: 14px;
  }
}

/* ── CLOSING CALL ──
   Centred, short, quiet: one headline, one line, two buttons, the partner
   note. The pattern of the strongest institutional closings (board in
   design-knowledge/references/close-news-2026-11-09), told in our own
   picture. Two looks while Paula chooses:
   data-look="lines": eight hairlines rise from the page edges and meet in
   the VERIDEX mark above the headline, the many parties ending in one
   record; scrolling draws them (hero-motion.js).
   data-look="towers": her photograph, washed into the page; the towers
   converge on the headline, which sits in the open sky. */
.cta,
.theme-dark .cta {
  position: relative;
  padding: clamp(80px, 7vw, 112px) 24px;
  overflow: hidden;
  background: var(--bg);
  text-align: center;
}
.cta-inner,
.theme-dark .cta-inner {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  text-align: center;
}
.cta-inner::before,
.cta-inner::after {
  display: none;
}
.cta-copy,
.cta-actions,
.cta-micro {
  justify-self: center;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* the status line as a small tag above the headline */
.cta-eyebrow,
.theme-dark .cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.cta-eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.theme-dark .cta-eyebrow {
  color: rgba(245, 247, 255, 0.72);
}
.cta-title,
.theme-dark .cta-title {
  max-width: 20ch;
  margin: 0 auto 16px;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text);
}
.cta-title .b {
  color: var(--primary);
}
.theme-dark .cta-title .b {
  color: #a5bff0;
}
.cta-sub,
.theme-dark .cta-sub {
  max-width: 46ch;
  text-wrap: balance;
  margin: 0 auto;
  font-size: 17px;
  color: var(--muted);
}
.cta-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.cta-btn.primary,
.theme-dark .cta-btn.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 30%, transparent);
}
.cta-btn.ghost,
.theme-dark .cta-btn.ghost {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
  backdrop-filter: blur(8px);
}
.cta-micro,
.theme-dark .cta-micro {
  max-width: 64ch;
  text-wrap: balance;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}
.cta-micro b,
.theme-dark .cta-micro b {
  color: var(--text);
}

/* look: lines */
.cta-lines {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 520px;
  transform: translateX(-50%);
  display: none;
  overflow: visible;
}
.cta-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 34%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cta-lines circle {
  fill: var(--bg);
  stroke: color-mix(in srgb, var(--primary) 30%, transparent);
  vector-effect: non-scaling-stroke;
}
.cta[data-look="lines"] .cta-lines {
  display: block;
}

/* look: towers */
.cta-photo {
  position: absolute;
  inset: 0;
  display: none;
  background: url("cta-towers.jpg") 46% 50% / cover no-repeat;
  mask-image:
    radial-gradient(ellipse 34% 46% at 50% 52%, transparent 0%, rgba(0, 0, 0, 0.15) 45%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.55;
}
.cta[data-look="towers"] .cta-photo {
  display: block;
}
.cta[data-look="towers"],
.theme-dark .cta[data-look="towers"] {
  min-height: clamp(520px, 44vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-dark .cta-photo {
  filter: brightness(0.5);
}
@media (max-width: 820px) {
  .cta,
  .theme-dark .cta,
  .cta[data-look="towers"],
  .theme-dark .cta[data-look="towers"] {
    padding: 88px 20px 80px;
  }
  .cta-eyebrow,
  .theme-dark .cta-eyebrow {
    max-width: 300px;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 11px;
    text-align: center;
    text-wrap: balance;
    display: inline-block;
  }
  .cta-eyebrow::before {
    display: inline-block;
    margin-right: 7px;
    vertical-align: 1px;
  }
  .cta .cta-actions {
    flex-flow: row nowrap;
    justify-content: center;
    gap: 10px;
  }
  .cta .cta-actions .cta-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
  }

  /* phones: the full portrait shot, towers on both sides, the copy in the
     open sky between them */
  .cta-photo {
    background-image: url("cta-towers-sm.jpg");
    background-position: 50% 45%;
    mask-image:
      radial-gradient(ellipse 46% 34% at 50% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 55%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
    mask-composite: intersect;
    opacity: 0.5;
  }
}

/* ── HOME HERO · the life of a right, told on scroll ──
   A sticky WebGL stage (hero-motion.js) inside a tall section: the signed
   document passes through three systems, loses its evidence, and VERIDEX
   rebuilds it field by field into one sealed record. Everything is scoped
   to .hm-story so no legacy rule is touched; the buttons, badge and network
   band keep their own site classes. The hero is navy in both themes. */
.hm-story {
  --night: #050c1a;
  --night-2: #0b1733;
  --ink: #f5f7ff;
  --ink-2: rgba(245, 247, 255, 0.72);
  --ink-3: rgba(245, 247, 255, 0.46);
  --blue: #7287ff;
  --blue-2: #a5bff0;
  --rule: rgba(165, 191, 240, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  height: 400vh;
  background: var(--night);
  color: var(--ink);
}

/* the network band continues the navy, then fades into the page's own ground
   so the next section does not arrive as a hard cut */
.hm-networks {
  --night: #050c1a;

  position: relative;
  padding: 72px calc((100% - var(--vx-col)) / 2) 88px;
  background: #050c1a;
}

/* the band continues the hero's navy and fades into the page below */
.hm-networks::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 64px;
  background: linear-gradient(var(--night), color-mix(in srgb, var(--night) 0%, var(--bg)));
  pointer-events: none;
}
.hm-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 62% 50%, var(--night-2) 0%, var(--night) 70%);
}
.hm-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* copy column */
.hm-copy {
  position: absolute;
  top: 50%;
  left: calc((100% - var(--vx-col)) / 2);
  z-index: 2;
  width: min(640px, 46vw);
  transform: translateY(-50%);
}
.hm-copy .hero-badge {
  margin-bottom: 22px;
}
.hm-h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(42px, 4.1vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.hm-l {
  display: block;
  white-space: nowrap;
}

/* Spanish runs about a third longer: a smaller size keeps both lines on one
   line and clear of the comparison */
html[lang="es"] .hm-h1 {
  font-size: clamp(38px, 3.3vw, 54px);
}
.hm-l2 {
  display: grid;
  color: var(--blue-2);
}
.hm-l2 > span {
  grid-area: 1 / 1;
}
.hm-subs {
  display: grid;
  margin: 26px 0 36px;
}
.hm-sub {
  grid-area: 1 / 1;
  max-width: 470px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--ink-2);
}
.hm-sub b {
  font-weight: 500;
  color: var(--ink);
}
.hm-copy .hero-ctas {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

/* timeline of the right */
.hm-steps {
  position: absolute;
  bottom: 11vh;
  left: calc((100% - var(--vx-col)) / 2);
  z-index: 2;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-3);
}
.hm-steps li {
  position: relative;
  min-width: 150px;
  padding: 16px 28px 0 0;
  border-top: 1px solid var(--rule);
  transition: color 0.4s var(--ease);
}
.hm-steps li .y {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.hm-steps li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: var(--night);
  transition: all 0.4s var(--ease);
}
.hm-steps li.on {
  color: var(--ink);
}
.hm-steps li.on::before {
  border-color: var(--ink);
  background: var(--ink);
}
.hm-steps li.lost {
  color: rgba(245, 247, 255, 0.3);
}
.hm-steps li.vx.on {
  color: var(--blue-2);
}
.hm-steps li.vx.on::before {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(114, 135, 255, 0.2);
}
.hm-now {
  display: none;
}

/* GLEIF credential and the moving network strip, side by side */
.hm-trust {
  display: flex;
  align-items: center;
  gap: 40px;
}
.hm-trust .hero-gleif {
  flex: none;
  margin-top: 0;
}
.hm-trust .hn-card {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* labels laid over the comparison */
.hm-cols {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.hm-rows {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.hm-rows span {
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 6px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.hm-rows b {
  margin-right: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.hm-rows .is-diff span,
.hm-rows .is-diff b {
  color: var(--blue-2);
}
.hm-diff {
  position: absolute;
  z-index: 3;
  display: grid;
  padding: 9px 18px;
  border: 1px solid rgba(114, 135, 255, 0.75);
  border-radius: 999px;
  background: rgba(20, 30, 70, 0.82);
  box-shadow: 0 8px 30px rgba(5, 12, 26, 0.6);
  backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
}
.hm-diff > span {
  grid-area: 1 / 1;
}
.hm-diff b {
  margin-right: 6px;
  font-weight: 500;
  color: var(--blue-2);
}
.hm-diff i {
  margin-left: 10px;
  font-style: normal;
  color: var(--blue-2);
}
.hm-diff .d-b {
  opacity: 0;
}
.hm-diff .d-b i::before {
  content: "✓ ";
}
.hm-seal {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--blue-2);
  pointer-events: none;
  opacity: 0;
}

/* status: on screen for the whole story */
.hm-status {
  position: absolute;
  bottom: 3.5vh;
  left: calc((100% - var(--vx-col)) / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  color: var(--ink-3);
}
.hm-status::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(114, 135, 255, 0.2);
}

@media (max-width: 820px) {
  .hm-copy {
    top: 128px;
    right: 20px;
    left: 20px;
    width: auto;
    transform: none;
  }
  .hm-copy .hero-badge {
    margin-bottom: 20px;
  }
  .hm-h1 {
    font-size: clamp(26px, 8.2vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  html[lang="es"] .hm-h1 {
    font-size: clamp(21px, 6.2vw, 26px);
  }
  .hm-l {
    white-space: normal;
  }
  .hm-subs {
    margin: 18px 0 28px;
  }
  .hm-sub {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(245, 247, 255, 0.86);
  }

  /* phones: the button sizes to its label, the text link beside it */
  .hm-copy .hero-ctas .btn-primary {
    flex: none;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.3;
  }
  .hm-copy .hero-ctas .hm-textlink {
    margin-left: 0;
    font-size: 13px;
  }
  .hm-steps {
    right: 20px;
    bottom: 104px;
    left: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .hm-steps::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--p, 0%);
    height: 1px;
    background: var(--blue-2);
    transition: width 0.5s var(--ease);
  }
  .hm-steps li {
    min-width: 0;
    padding: 14px 0 0;
    font-size: 0;
  }
  .hm-steps li:last-child {
    text-align: right;
  }
  .hm-steps li:last-child::before {
    right: 0;
    left: auto;
  }
  .hm-steps li .y {
    font-size: 11px;
  }
  .hm-steps li .y + span {
    display: none;
  }
  .hm-now {
    position: absolute;
    right: 20px;
    bottom: 70px;
    left: 20px;
    z-index: 2;
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
  }
  .hm-networks {
    padding: 72px 20px 96px;
  }
  .hm-trust {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .hm-trust .hn-card {
    padding: 30px 0 24px;
  }
  .hm-cols {
    font-size: 10px;
  }
  .hm-rows span {
    padding-bottom: 3px;
    font-size: 11px;
  }
  .hm-rows b {
    margin-right: 5px;
  }
  .hm-diff {
    padding: 7px 14px;
    font-size: 14px;
  }
  .hm-status {
    bottom: 22px;
    left: 20px;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 380px) {
  .hm-status {
    font-size: 9.5px;
  }
}

/* short phones: the row names carry the comparison; the source headers would
   collide with the first row */
@media (max-width: 820px) and (max-height: 760px) {
  .hm-cols {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-story {
    height: auto;
  }
  .hm-stage {
    position: relative;
  }
}

/* hero: litepaper as a text link, demonstration label */
.hm-copy .hm-textlink {
  align-self: center;
  margin-left: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}