/* ---- Fonts (assets/fonts, made by tools/build_fonts.py) ---------------------------------------- */

/* Geist and Geist Mono: Google Fonts' Latin files, variable in weight. Recursive: only the ten letters
   of DISCERNING AGENTS, which the hero head (head.js) and the JEPA diagram (jepa.js) draw. All three are
   under the SIL Open Font License (assets/fonts/OFL-*.txt). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Recursive';
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url(../fonts/recursive-head.woff2) format('woff2');
  unicode-range: U+0041, U+0043-0045, U+0047, U+0049, U+004E, U+0052-0054;
}


/* ---- Page and design tokens --------------------------------------------------------------------- */

/* the site has one palette, light: browsers keep their own controls and auto dark modes off it */
:root {
  color-scheme: only light;
}

body {
  margin: 0;
  background: #ECE8DF;
}

.r {
  --g: #ECE8DF;
  --g2: #E3E0D7;
  --card: #F3F0EA;
  --deep: #DDD9D1;
  --ink: #14141A;
  --ink2: #2E2D32;
  --ink3: #3F3E41;
  --mut: #595859;
  --faint: #8B8986;
  --line: #BCB9B4;
  --grid: #D4D1C9;
  --neu: #BCB9B4;
  --sq: #A9A6A0;
  --art: #777572;
  --scan1: #4954BA;
  --scan2: #626693;
  --acc: #2339F5;
  --acct: #2339F5;
  --acch: #1B257D;
  --accl: #DEE1FE;
  --accd: #1B257D;
  --linkh: #1B257D;
  --onacc: #FFFFFF;
  --onacc2: #DEE1FE;
  --onaccbig: #FFFFFF;
  --invfg: #2339F5;
  --dk-bg: #14141A;
  --dk-fg: #ECE8DF;
  --dk-mut: #A3A2AA;
  --dk-line: #34343B;
  --dk-panel: #1D1D24;
  --dk-acc: #8E9BFF;
  --dk-hi: #ECE8DF;
  --shadow: rgba(20,20,26,.10);
  --shadow2: rgba(20,20,26,.22);
  --f-body: 'Geist',sans-serif;
  --f-mono: 'Geist Mono',monospace;
  --f-disp: 'Geist',sans-serif;
  --disp-tt: uppercase;
  --k-h1: 1;
  --k-h2: 1;
  --k-stat: 1;
  --k-num: 1;
  --k-big: 1;
  --k-cta: 1;
  --h1-mw: 860px;
  background: var(--g);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.page {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.page-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}

.masthead {
  position: relative;
}

.heading-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.m-0 {
  margin: 0;
}

.c-mut {
  color: var(--mut);
}

.c-acct {
  color: var(--acct);
}

.c-ink3 {
  color: var(--ink3);
}

.c-dk-mut {
  color: var(--dk-mut);
}

.c-onacc2 {
  color: var(--onacc2);
}

.c-accd {
  color: var(--accd);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ---- Type --------------------------------------------------------------------------------------- */

.r h1,.r h2,.r .bal {
  text-wrap: balance;
}

.r p,.r .pr {
  text-wrap: pretty;
}

.t-h1 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(40px,5.8vw,84px) * var(--k-h1));
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: var(--disp-tt);
}

.t-h2 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(34px,4.4vw,64px) * var(--k-h2));
  line-height: .94;
  letter-spacing: -.015em;
  text-transform: var(--disp-tt);
}

.t-h2s {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(26px,3vw,40px) * var(--k-h2));
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: var(--disp-tt);
}

.t-cta {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(44px,8.4vw,120px) * var(--k-cta));
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: var(--disp-tt);
}

.t-h3 {
  font-family: var(--f-disp);
  font-size: calc(34px * var(--k-big));
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
}

.t-h3b {
  font-family: var(--f-disp);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.t-h4 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
}

.t-lead {
  font-size: 18px;
  line-height: 1.5;
}

.t-body {
  font-size: 15px;
  line-height: 1.55;
}

.t-small {
  font-size: 14px;
  line-height: 1.5;
}

.t-lab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
}

.t-micro {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
}

.tz {
  visibility: hidden;
}


/* ---- Opening sequence: frame lines draw in, then labels fade in --------------------------------- */

/* The opening runs about 3.4 s:
   0.20–0.88 s  header and hero frame lines draw in
   0.90 s       the first scan down the hero head starts (head.js)
   0.72–0.97 s  the brand fades in
   0.85–1.37 s  the headline types (data-typed-delay and data-typed-step on the h1)
   1.33–1.53 s  the sub-line fades in
   2.30–3.35 s  CONTACT US fills with squares (timing in buildNavSquares, decor.js), then its label shows */

.ln {
  position: absolute;
  z-index: 3;
  background: var(--line);
  pointer-events: none;
}

.ln.h {
  height: 1px;
  transform-origin: left;
  animation: ln-x .9s cubic-bezier(.65,0,.35,1) both;
}

.ln.v {
  width: 1px;
  transform-origin: top;
  animation: ln-y .7s cubic-bezier(.65,0,.35,1) both;
}

.fi {
  animation: fi .5s ease both;
}

@keyframes ln-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes ln-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes fi {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.ln.ln-header-top {
  top: -1px;
  left: -1px;
  right: -1px;
  animation-duration: 0.4s;
  animation-delay: 0.2s;
}

.ln.ln-header-bottom {
  bottom: -1px;
  left: -1px;
  right: -1px;
  animation-duration: 0.4s;
  animation-delay: 0.25s;
}

.ln.ln-nav-3 {
  left: -1px;
  top: 0;
  bottom: 0;
  animation-duration: 0.25s;
  animation-delay: 0.58s;
}

.ln.ln-hero-left {
  left: 0;
  top: 0;
  bottom: 0;
  animation-duration: 0.35s;
  animation-delay: 0.5s;
}

.ln.ln-hero-right {
  right: 0;
  top: 0;
  bottom: 0;
  animation-duration: 0.35s;
  animation-delay: 0.53s;
}

.ln.ln-hero-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  animation-duration: 0.45s;
  animation-delay: 0.3s;
}

.brand {
  animation-duration: 0.25s;
  animation-delay: 0.72s;
}

.hero-lead {
  animation-duration: 0.2s;
  animation-delay: 1.33s;
}



/* ---- Links and helpers -------------------------------------------------------------------------- */

.r a {
  color: var(--acct);
}

.r a:hover {
  color: var(--linkh);
}

.r ::selection {
  background: var(--acc);
  color: var(--onacc);
}

.mono {
  font-family: var(--f-mono);
}

.disp {
  font-family: var(--f-disp);
}

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

.face pre {
  font-family: 'Geist Mono',monospace;
  font-size: calc(100cqw / 132);
  font-variant-ligatures: none;
}

.halo {
  text-shadow: 0 0 18px var(--g),0 0 6px var(--g),0 0 2px var(--g);
}


/* ---- Header and navigation ---------------------------------------------------------------------- */

.r .navc {
  color: var(--onacc);
  transition: color .2s ease;
}

.r .navc:hover,
.r .navc:focus-visible {
  color: var(--invfg);
}

.navc .nbg {
  position: absolute;
  inset: 0;
  background: var(--acc);
  transition: background-color .2s ease;
  animation: fo .3s ease 2.85s both;
}

.r .navc:hover .nbg,.r .navc:focus-visible .nbg {
  background: var(--onacc);
}

.navc .nsq {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(30,12px);
  grid-auto-rows: 12px;
  gap: 4px;
  align-content: start;
}

.navc .nsq i {
  background: var(--acc);
  animation: nsq .4s cubic-bezier(.2,.7,.2,1) var(--d) both;
}

.navc .nt {
  position: relative;
  animation: fi .4s ease 2.95s both;
}

@keyframes nsq {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes fo {
  from {
    opacity: 0;
  }
}

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid transparent;
}

.brand {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  text-decoration: none;
}

.r .brand,
.r .brand:hover {
  color: var(--ink);
}

.brand-name {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 690px;
}

.nav-contact {
  position: relative;
  flex: 1 1 160px;
  min-height: 60px;
  padding: 14px 16px;
  border-left: 1px solid transparent;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-contact-arrow {
  align-self: flex-end;
  font-size: 16px;
}


/* ---- Hero --------------------------------------------------------------------------------------- */

.hero {
  border: 1px solid transparent;
  border-top: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1320 / 740;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1320 / 740;
}

.hero-head {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-copy {
  position: relative;
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: none;
}

.hero-title {
  max-width: var(--h1-mw);
  white-space: pre-line;
}

.hero-lead {
  margin: 0;
  max-width: 500px;
  color: var(--ink2);
}


/* ---- Citations ---------------------------------------------------------------------------------- */

.chips {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.r .src {
  display: inline-flex;
  align-items: baseline;
  padding: 8px 5px;
  margin: -8px -5px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--acct);
  text-decoration: none;
}

.src .n {
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 2px;
  transition: background-color .15s ease,color .15s ease;
}

.r .src:hover .n,.r .src:focus-visible .n {
  background: var(--acc);
  color: var(--onacc);
}

.src .t {
  position: absolute;
  left: -4px;
  bottom: 100%;
  z-index: 4;
  box-sizing: border-box;
  width: max-content;
  padding: 4px 8px;
  border-bottom: 6px solid transparent;
  background: var(--acc) padding-box;
  color: var(--onacc);
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
  transition: opacity .16s ease .22s,translate .2s ease .22s,visibility 0s linear .42s;
}

.r .src:hover .t,.r .src:focus-visible .t {
  z-index: 5;
  opacity: 1;
  visibility: visible;
  translate: none;
  transition: opacity .14s ease,translate .2s cubic-bezier(.2,.7,.2,1),visibility 0s;
}

.chips:has(.src:hover) .src:not(:hover) .t,
.chips:has(.src:focus-visible) .src:not(:focus-visible) .t {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.chips.warm .t {
  translate: none;
}

.r .chips.warm .src:hover .t,
.r .chips.warm .src:focus-visible .t {
  transition: opacity .1s ease,visibility 0s;
}

.chips.dn .t {
  bottom: auto;
  top: 100%;
  border-bottom: 0;
  border-top: 6px solid transparent;
  translate: 0 -4px;
}

.chips.end .t {
  left: auto;
  right: -4px;
}

.chips.fit .t {
  max-width: calc(100% + 8px);
  white-space: normal;
}

.r .inv .src {
  color: var(--onacc);
}

.r .inv .src:hover .n,.r .inv .src:focus-visible .n {
  background: var(--onacc);
  color: var(--invfg);
}

.inv .src .t {
  background-color: var(--onacc);
  color: var(--invfg);
}

.r .dkc .src {
  color: var(--dk-acc);
}

.r .dkc .src:hover .n,.r .dkc .src:focus-visible .n {
  background: var(--dk-acc);
  color: var(--dk-bg);
}

.dkc .src .t {
  background-color: var(--dk-acc);
  color: var(--dk-bg);
}

.r .ref {
  color: var(--mut);
  text-decoration: none;
  transition: color .2s ease;
}

.r .ref:hover,.r .ref:focus-visible {
  color: var(--acct);
  text-decoration: underline;
}


/* ---- 01 Samples --------------------------------------------------------------------------------- */

.lw {
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

.lanes .lw.from-r {
  transform: translateX(105%);
}

.lanes .lw.from-l {
  transform: translateX(-105%);
}

.lanes.in .lw {
  transform: none;
}

.track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: mq-l 90s linear infinite;
  animation-play-state: paused;
}

.track.rev {
  animation-name: mq-r;
  animation-duration: 110s;
}

.track.slow {
  animation-duration: 130s;
}

.lanes.in .track {
  animation-play-state: running;
}

.lanes.in .lane:hover .track {
  animation-play-state: paused;
}

/* lanes.js drives the tracks instead, so they can be dragged (swiped on phones); vertical swipes
   still scroll the page */
.lanes.driven .track {
  animation: none;
  will-change: transform;
}

/* the normal cursor until a drag starts, so the cards' own hover and click read first */
.lanes.driven .lane {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.lanes.driven .lane.dragging,
.lanes.driven .lane.dragging * {
  cursor: grabbing;
}

@keyframes mq-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes mq-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.card .hd {
  color: var(--mut);
  border-bottom: 1px dashed var(--line);
  transition: background-color .2s ease,color .2s ease,border-color .2s ease;
}

.card:hover .hd {
  background: var(--acc);
  color: var(--onacc);
  border-bottom: 1px solid var(--acc);
}

.cn {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid var(--acc);
  z-index: 2;
  transition: width .2s ease,height .2s ease,border-width .2s ease;
}

.cn.tl {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.cn.tr {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.cn.bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.cn.br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.card:hover .cn {
  width: 16px;
  height: 16px;
}

.card:hover .cn.tl {
  border-top-width: 3px;
  border-left-width: 3px;
}

.card:hover .cn.tr {
  border-top-width: 3px;
  border-right-width: 3px;
}

.card:hover .cn.bl {
  border-bottom-width: 3px;
  border-left-width: 3px;
}

.card:hover .cn.br {
  border-bottom-width: 3px;
  border-right-width: 3px;
}

.samples {
  border: 1px solid var(--line);
  border-top: 0;
  position: relative;
  padding: 168px 0;
  overflow: hidden;
}

.lanes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lane {
  overflow: hidden;
}

.lw.lane-delay-1 {
  transition-delay: 0.07s;
}

.lw.lane-delay-2 {
  transition-delay: 0.14s;
}

.card {
  flex: 0 0 168px;
  width: 168px;
  height: 180px;
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.card .hd {
  display: flex;
  justify-content: space-between;
  padding: 6px 9px;
}

.card-body {
  flex: 1;
  padding: 9px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 0;
}

.card-video {
  flex: 1;
  background: repeating-linear-gradient(135deg, var(--deep) 0 6px, var(--g2) 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-video-time {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  color: var(--mut);
}

.card-call {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.card-call-tile {
  background: var(--deep);
}

.card-call-self {
  background: var(--accl);
  outline: 1px solid var(--acc);
  outline-offset: -1px;
}

.card-bubble {
  align-self: flex-start;
  max-width: 94%;
  background: var(--g2);
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 10px 10px 10px 3px;
}

.card-time {
  font-size: 9px;
  color: var(--mut);
}

.card-caption {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink3);
}

.card-post-head {
  display: flex;
  gap: 7px;
  align-items: center;
}

.card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
}

.card-author {
  font-size: 11px;
  font-weight: 500;
}

.card-from {
  font-size: 9.5px;
  color: var(--mut);
}

.card-subject {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
}

.card-photo {
  flex: 1;
  background: var(--g2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.card-line {
  height: 4px;
  background: var(--deep);
}

.card-line-long {
  width: 90%;
}

.card-line-short {
  width: 70%;
}

.samples-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.samples-callout {
  width: min(560px, 92%);
  aspect-ratio: 1.55 / 1;
  background: radial-gradient(ellipse closest-side, var(--g) 0%, var(--g) 74%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.samples-title {
  max-width: 400px;
}


/* ---- 02 Cases ----------------------------------------------------------------------------------- */

.case {
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  transition: flex-grow .5s cubic-bezier(.2,.7,.2,1);
}

.case:hover,.case:focus-visible,.case:has(:focus-visible) {
  flex-grow: 2.3;
}

.case .num {
  display: block;
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: calc(min(86px,17.5cqi) * var(--k-num));
  line-height: .9;
  letter-spacing: -.035em;
  white-space: nowrap;
  transition: color .3s ease;
}

.case:hover .num,
.case:focus-visible .num,
.case:has(:focus-visible) .num {
  color: var(--acct);
}

.case .sub {
  display: block;
  width: 330px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.case .more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1);
}

.case .more > div {
  min-height: 0;
  overflow: hidden;
}

.case .mi {
  width: 440px;
  opacity: 0;
  transition: opacity .2s ease;
}

.case:hover .more,
.case:focus-visible .more,
.case:has(:focus-visible) .more {
  grid-template-rows: 1fr;
}

.case:hover .mi,
.case:focus-visible .mi,
.case:has(:focus-visible) .mi {
  opacity: 1;
  transition: opacity .35s ease .15s;
}

.cases {
  border: 1px solid var(--line);
  border-top-color: var(--ink);
  position: relative;
}

.cases-head {
  padding: 96px 32px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  position: relative;
}

.fraud {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  margin-left: auto;
}

.fraud-caption {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: var(--mut);
}

.fraud-figure {
  color: var(--acct);
  font-weight: 600;
}

.case-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  position: relative;
}

.case-panel {
  min-height: 520px;
  padding: 28px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  outline-color: var(--acc);
}

.case-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--mut);
}

.case-place {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.case-vector {
  display: inline-block;
  margin-top: 14px;
  color: var(--acct);
}

.case-divider {
  border-right: 1px solid var(--line);
}


/* ---- 03 State of the art ------------------------------------------------------------------------ */

.tile {
  overflow: hidden;
}

.tile .more {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease,transform .3s ease;
}

.tile:hover .more,
.tile:focus-visible .more,
.tile:has(:focus-visible) .more {
  opacity: 1;
  transform: none;
}

.tile:hover .less,
.tile:focus-visible .less,
.tile:has(:focus-visible) .less {
  opacity: 0;
}

.less {
  transition: opacity .2s ease;
}

.state {
  border: 1px solid var(--line);
  border-top-color: var(--ink);
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.state-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.state-heading {
  max-width: 900px;
}

.tile {
  position: relative;
  min-height: 320px;
  padding: 22px;
  box-sizing: border-box;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  outline-color: var(--acc);
}

.less {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* the evidence panel's one child lays out what the panel would (phones animate its height) */
.more-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.tile .more {
  position: absolute;
  inset: 0;
  padding: 22px;
  background: var(--acc);
  color: var(--onacc);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}


/* ---- 04 Why us: bento cards and their click replays --------------------------------------------- */

.bento .bx {
  outline: 2px solid transparent;
  outline-offset: -2px;
  cursor: pointer;
  transition: translate .8s cubic-bezier(.16,1,.3,1),opacity .6s ease,transform .25s ease,box-shadow .25s ease,outline-color .25s ease;
  transition-delay: var(--stagger, 0s), var(--stagger, 0s), 0s, 0s, 0s;
}

.bento:not(.in) .bx {
  opacity: 0;
}

.bento:not(.in) .bx.gl {
  translate: -64px 0;
}

.bento:not(.in) .bx.gr {
  translate: 64px 0;
}

.bento:not(.in) .bx.gu {
  translate: 0 48px;
}

.bx:hover,.bx:focus-visible,.bx:has(:focus-visible) {
  transform: translateY(-4px);
  outline-color: var(--acc);
  box-shadow: 0 16px 32px var(--shadow);
}

.bx.dk:hover,.bx.dk:focus-visible,.bx.dk:has(:focus-visible) {
  outline-color: var(--dk-acc);
  box-shadow: 0 16px 32px var(--shadow2);
}

.bx.bl:hover,.bx.bl:focus-visible,.bx.bl:has(:focus-visible) {
  outline-color: var(--ink);
  box-shadow: 0 16px 32px color-mix(in srgb,var(--acc) 28%,transparent);
}

.bx .k-pop,.bx .k-growx,.bx .k-on,.bx .k-thk {
  transform-box: fill-box;
  transform-origin: center;
}

.bx .k-growx,.bx .k-thk {
  transform-origin: 0 50%;
}

.bx .k-thk,.bx .k-vl,.bx .k-on,.bx .k-hl {
  opacity: 0;
}

.bx .k-vl {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pa .k-pop {
  animation: kpa .45s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pb .k-pop {
  animation: kpb .45s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pa .k-flash {
  animation: kfa .5s steps(4,end) var(--d,0s) both;
}

.pb .k-flash {
  animation: kfb .5s steps(4,end) var(--d,0s) both;
}

.pa .k-fade {
  animation: kda .5s ease var(--d,0s) both;
}

.pb .k-fade {
  animation: kdb .5s ease var(--d,0s) both;
}

.pa .k-thk {
  animation: kha 2s cubic-bezier(.45,0,.55,1) both,koa .4s ease 2.45s forwards;
}

.pb .k-thk {
  animation: khb 2s cubic-bezier(.45,0,.55,1) both,kob .4s ease 2.45s forwards;
}

.pa .k-vl {
  animation: kva .2s linear var(--d) both,koa .4s ease 2.45s forwards;
}

.pb .k-vl {
  animation: kvb .2s linear var(--d) both,kob .4s ease 2.45s forwards;
}

.pa .k-on {
  animation: kna .3s cubic-bezier(.2,.7,.2,1) var(--d) both,koa .4s ease 2.45s forwards;
}

.pb .k-on {
  animation: knb .3s cubic-bezier(.2,.7,.2,1) var(--d) both,kob .4s ease 2.45s forwards;
}

.pa .k-hl {
  animation: kia .55s ease var(--d) both;
}

.pb .k-hl {
  animation: kib .55s ease var(--d) both;
}

.pa .k-hlt {
  animation: kja .55s ease var(--d) both;
}

.pb .k-hlt {
  animation: kjb .55s ease var(--d) both;
}

.pa .k-slide {
  animation: ksa 1.8s cubic-bezier(.45,.05,.2,1) both;
}

.pb .k-slide {
  animation: ksb 1.8s cubic-bezier(.45,.05,.2,1) both;
}

.pa .k-growx {
  animation: kxa .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pb .k-growx {
  animation: kxb .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pa .k-draw {
  animation: kla 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s) both;
}

.pb .k-draw {
  animation: klb 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s) both;
}

.pa .k-drop {
  animation: kta .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both;
}

.pb .k-drop {
  animation: ktb .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both;
}

.pa .k-march {
  animation: kma .6s linear var(--d,0s) both;
}

.pb .k-march {
  animation: kmb .6s linear var(--d,0s) both;
}

@keyframes kpa {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes kpb {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes kfa {
  0% {
    opacity: 1;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .4;
  }
}

@keyframes kfb {
  0% {
    opacity: 1;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .4;
  }
}

@keyframes kda {
  from {
    opacity: 0;
  }
}

@keyframes kdb {
  from {
    opacity: 0;
  }
}

@keyframes kha {
  from {
    opacity: 1;
    scale: 0 1;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes khb {
  from {
    opacity: 1;
    scale: 0 1;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes koa {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes kob {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes kva {
  from {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes kvb {
  from {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes kna {
  from {
    opacity: 0;
    scale: .2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes knb {
  from {
    opacity: 0;
    scale: .2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes kia {
  0%,100% {
    opacity: 0;
  }
  18%,60% {
    opacity: 1;
  }
}

@keyframes kib {
  0%,100% {
    opacity: 0;
  }
  18%,60% {
    opacity: 1;
  }
}

@keyframes kja {
  18%,60% {
    fill: var(--acc);
  }
}

@keyframes kjb {
  18%,60% {
    fill: var(--acc);
  }
}

@keyframes ksa {
  to {
    translate: var(--sx) 0;
  }
}

@keyframes ksb {
  to {
    translate: var(--sx) 0;
  }
}

@keyframes kxa {
  from {
    scale: 0 1;
  }
}

@keyframes kxb {
  from {
    scale: 0 1;
  }
}

@keyframes kla {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes klb {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes kta {
  from {
    translate: 0 -6px;
  }
}

@keyframes ktb {
  from {
    translate: 0 -6px;
  }
}

@keyframes kma {
  from {
    stroke-dashoffset: 18;
  }
}

@keyframes kmb {
  from {
    stroke-dashoffset: 18;
  }
}

.method {
  border: 1px solid var(--line);
  border-top-color: var(--ink);
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.bgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 248px;
  gap: 16px;
}

.bx-approach {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--dk-bg);
  color: var(--dk-fg);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

/* the JEPA diagram (jepa.js) fills the card under its title */
.diag {
  flex: 1;
  display: flex;
  align-items: center;
}

.diag canvas {
  display: block;
  width: 100%;
  aspect-ratio: 600 / 290;
}

.bx-fakes {
  grid-column: span 2;
  background: var(--acc);
  color: var(--onacc);
  padding: 22px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  --stagger: 0.08s;
}

.bx-security {
  background: var(--g);
  border: 1px solid var(--line);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  --stagger: 0.16s;
}

.bx-device {
  background: var(--accl);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  --stagger: 0.24s;
}

.bx-data {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  --stagger: 0.12s;
}

.bx-scale {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  --stagger: 0.2s;
}

.bx-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.bx-copy-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}

.fakes-lead {
  font-weight: 600;
}

.waffle {
  display: grid;
  grid-template-columns: repeat(34, 12px);
  gap: 4px;
  overflow: hidden;
}

.scale-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 24px;
}

.scale-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--mut);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch-ours {
  width: 20px;
  height: 3px;
  background: var(--acc);
}

.legend-swatch-other {
  width: 20px;
  height: 2px;
  background: var(--faint);
}


/* ---- 04 Bento graphics -------------------------------------------------------------------------- */

.wq {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--sq);
  opacity: 0;
  scale: .2;
  transition: opacity .35s ease,scale .4s cubic-bezier(.2,.7,.2,1),filter .2s ease;
}

.wq.f {
  background: var(--acc);
}

.wq.x {
  background: transparent;
  outline: 1px dashed var(--faint);
  outline-offset: -1px;
}

.bento.in .wq {
  opacity: 1;
  scale: 1;
}

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .5s;
}

.bento.in .draw,.fz.in .draw {
  stroke-dashoffset: 0;
}

.fz .ar,.fz .dt,.bento .dt {
  opacity: 0;
  transition: opacity .6s ease 1.5s;
}

.fz.in .ar,.fz.in .dt,.bento.in .dt {
  opacity: 1;
}

.sbar {
  transform-box: fill-box;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .9s;
}

.bento.in .sbar {
  transform: none;
}


/* ---- 05 Work with us, 06 Contact ---------------------------------------------------------------- */

.work .wc {
  position: relative;
  transition: background-color .25s ease,opacity .6s ease,translate .7s cubic-bezier(.16,1,.3,1);
  transition-delay: 0s, var(--stagger, 0s), var(--stagger, 0s);
}

.work:not(.in) .wc {
  opacity: 0;
  translate: 0 28px;
}

.wc::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.r .wc:hover,.r .wc:focus-visible {
  background: var(--g2);
}

.wc:hover::before,.wc:focus-visible::before {
  transform: scaleX(1);
}

.wc .wt {
  transition: color .2s ease,transform .3s ease;
}

.wc:hover .wt,.wc:focus-visible .wt {
  color: var(--acct);
  transform: translateX(4px);
}

.work-section {
  border: 1px solid var(--line);
  border-top: 0;
}

.work-head {
  padding: 96px 32px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.work-intro {
  margin: 0;
  max-width: 400px;
  color: var(--ink3);
}

.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}

.wc {
  padding: 32px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  box-sizing: border-box;
  text-decoration: none;
}

.r .wc,
.r .wc:hover {
  color: var(--ink);
}

.wc-divided {
  border-right: 1px solid var(--line);
}

.wc-2 {
  --stagger: 0.1s;
}

.wc-3 {
  --stagger: 0.2s;
}

.wc-4 {
  --stagger: 0.3s;
}

.wc-text {
  flex: 1;
  color: var(--ink3);
}

.contact {
  border: 1px solid var(--acc);
  background: var(--acc);
  color: var(--onacc);
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* as large as the widest line allows on one line across the panel: COMPARE NOTES is 8.2em wide, and
   the panel is the page width less 24 px of page and 64 px of panel padding */
.r .cta-h {
  height: 0.88em;
  font-size: calc((min(100vw, 1400px) - 88px) / 8.4);
  color: var(--onaccbig);
  white-space: nowrap;
}

/* the button starts where the old email field did and runs 400 px from there (full width on phones,
   phone.css) */
.contact-form {
  align-self: flex-end;
  width: min(560px, 100%);
  display: flex;
}

.r .contact-submit {
  flex: 0 1 400px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 20px;
  background: var(--onacc);
  color: var(--invfg);
  border: 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.r .contact-submit:hover {
  color: var(--invfg);
}


.wc-meta {
  display: none;
}


/* ---- Footer ------------------------------------------------------------------------------------- */

.sources-toggle {
  display: none;
}

.site-footer {
  border: 1px solid var(--line);
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
}

.sources {
  flex: 3 1 560px;
  margin: 0;
  padding: 28px 32px 28px 56px;
  columns: 2 300px;
  column-gap: 32px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--mut);
}

.sources li {
  margin-bottom: 4px;
}

.footer-meta {
  flex: 1 1 240px;
  border-left: 1px solid var(--line);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--mut);
  letter-spacing: 0.06em;
}

.footer-brand {
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.footer-credits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ---- Desktop: wider than a phone ----------------------------------------------------------------- */

/* Sizes set for a 1440 px window. Headings and the hero scale down with the window to 761 px, where
   phone.css takes over; text sizes stay fixed. */
@media (min-width: 761px) {

  /* six type steps */
  .t-h1 {
    font-size: clamp(56px, 6.667vw, 96px);
  }

  .t-h2,
  .t-h2s {
    font-size: clamp(34px, 3.889vw, 56px);
    line-height: .95;
  }

  .t-h3,
  .t-h3b {
    font-size: 32px;
    line-height: 1.1;
  }

  .t-h4 {
    font-size: 24px;
    line-height: 1.25;
  }

  .t-lead {
    font-size: 24px;
    line-height: 1.35;
  }

  .t-body {
    font-size: 19px;
    line-height: 1.5;
  }

  .t-small {
    font-size: 17px;
    line-height: 1.5;
  }

  .t-lab,
  .t-micro,
  .r .src,
  .site-nav a,
  .r .contact-submit {
    font-size: 15px;
  }

  .sources,
  .footer-meta {
    font-size: 13px;
  }

  /* the contact cell keeps the width it had beside the old blog and team links */
  .site-nav {
    flex: 0 0 250px;
  }

  /* Hero: the copy in the upper left, the head at full height on the right. The headline runs over the
     head; its three phrases each take a line. */
  .hero {
    aspect-ratio: auto;
    height: clamp(520px, 52.78vw, 760px);
    min-height: 0;
    justify-content: center;
  }

  .hero-face {
    top: 10px;
    left: auto;
    right: 0;
    width: auto;
    height: calc(100% - 10px);
    aspect-ratio: 696 / 740;
  }

  .hero-copy {
    padding: 0 32px;
    gap: 32px;
    max-width: 1000px;
  }

  .hero-title {
    max-width: none;
    font-size: clamp(44px, 5.834vw, 84px);
  }

  .hero-lead {
    max-width: 560px;
  }

  /* Samples: bigger cards; the question where the first two lanes meet */
  .samples {
    padding: 40px 0 56px;
  }

  .lanes,
  .track {
    gap: 20px;
  }

  .card {
    flex: 0 0 260px;
    width: 260px;
    height: 280px;
  }

  .card .hd {
    padding: 10px 14px;
  }

  .card-body {
    padding: 16px;
    gap: 12px;
  }

  .card-video svg {
    width: 56px;
    height: 56px;
  }

  .card-body > svg {
    height: 64px;
  }

  .card-bubble,
  .card-caption,
  .card-subject {
    font-size: 19px;
    line-height: 1.4;
  }

  .card-author {
    font-size: 19px;
  }

  .card-bubble {
    padding: 10px 14px;
    border-radius: 14px 14px 14px 4px;
  }

  .card-time,
  .card-video-time,
  .card-from {
    font-size: 15px;
  }

  .card-video-time {
    right: 12px;
    bottom: 10px;
  }

  .card-avatar {
    width: 30px;
    height: 30px;
  }

  .card-line {
    height: 6px;
  }

  .samples-overlay {
    inset: auto 0;
    top: 330px;
    translate: 0 -50%;
  }

  .samples-callout {
    width: min(900px, 92%);
    aspect-ratio: auto;
    padding: 72px 96px;
    box-sizing: border-box;
    background: radial-gradient(closest-side, rgba(236,232,223,.96), rgba(236,232,223,.86) 58%, rgba(236,232,223,0));
  }

  .samples-title {
    max-width: 720px;
  }

  /* Cases: panels as short as the tallest open one, so opening one never grows the row.
     Every size comes from the row, not the moving panel, so no line rewraps while a panel opens. A panel
     is 260 px plus a share of the rest of the row: 1/3 at rest, 2.3/4.3 open, 1/4.3 beside an open one.
     Its text width is the panel less 64 px: 33.333cqi - 64px at rest, 53.488cqi - 221.2px open and
     23.256cqi + 14.6px beside. The number keeps 13% of the text width and eases between those sizes with
     the panel. The claim scales its width and size together, so its lines break in the same places at
     every size; an open panel keeps the resting claim. The account has one fixed width. */
  .cases-head {
    padding-top: 72px;
    padding-bottom: 40px;
  }

  .case-row {
    flex-wrap: nowrap;
    container-type: inline-size;
  }

  .case {
    container-type: normal;
  }

  .case-panel {
    min-height: 380px;
    gap: 20px;
    padding: 28px 32px;
  }

  .case .num {
    font-size: calc((33.333cqi - 64px) * .13);
    transition: color .3s ease, font-size .5s cubic-bezier(.2,.7,.2,1);
  }

  .case .sub {
    width: calc((33.333cqi - 64px) * .96);
    font-size: calc((33.333cqi - 64px) * .061);
    line-height: 1.3;
    transition: width .5s cubic-bezier(.2,.7,.2,1), font-size .5s cubic-bezier(.2,.7,.2,1);
  }

  .case-row:has(.case:hover, .case:focus-visible, .case :focus-visible) .case .num {
    font-size: calc((23.256cqi + 14.6px) * .13);
  }

  .case-row:has(.case:hover, .case:focus-visible, .case :focus-visible) .case .sub {
    width: calc((23.256cqi + 14.6px) * .96);
    font-size: calc((23.256cqi + 14.6px) * .061);
  }

  .case-row:has(.case) .case:is(:hover, :focus-visible, :has(:focus-visible)) .num {
    font-size: min(96px, calc((53.488cqi - 221.2px) * .13));
  }

  .case-row:has(.case) .case:is(:hover, :focus-visible, :has(:focus-visible)) .sub {
    width: calc((33.333cqi - 64px) * .96);
    font-size: calc((33.333cqi - 64px) * .061);
  }

  .case .mi {
    width: min(560px, calc(53.488cqi - 221.2px));
  }

  /* State of the art: the live tile proportions, claims aligned by their tops, graphics a little larger */
  .less .t-h4 {
    font-size: 20px;
    font-weight: 500;
  }

  .less svg {
    width: 120px;
    height: 80px;
  }

  .tile .more .t-small {
    font-size: 14px;
    line-height: 1.45;
  }

  /* Our approach: heading and graphic only; the data and scaling cards share a row as tall as they
     need, with twelve rows of squares filling the data card. No rule between this section and the next. */
  .method {
    border-bottom: 0;
  }

  .bgrid {
    grid-template-rows: 248px 248px auto;
    grid-auto-rows: auto;
  }

  .bx-data,
  .bx-scale {
    grid-row: span 1;
    justify-content: flex-start;
    gap: 24px;
  }

  .bx-data {
    justify-content: space-between;
  }

  /* the squares sit in the middle of the space under the title */
  .bx-data .waffle {
    align-self: center;
    margin-block: auto;
  }

  .bx-security svg,
  .bx-device svg {
    width: 198px;
    height: 51px;
  }

  .bx-approach {
    padding: 32px;
  }
}


/* ---- Reduced motion ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .track,
  .ln,
  .fi,
  .navc .nsq i,
  .navc .nbg,
  .navc .nt,
  .bx [class*=k-] {
    animation: none !important;
  }
  .lw,
  .bx,
  .wq,
  .wc,
  .draw,
  .sbar,
  .case,
  .case .more,
  .src .t,
  .fz .ar,
  .fz .dt,
  .bento .dt {
    transition: none !important;
  }
}