:root {
  --cmp-tint: color-mix(in srgb, var(--color-blue) 7%, var(--color-white));
  --cmp-edge: color-mix(in srgb, var(--color-blue) 26%, var(--color-white));
  --cmp-lift:
    0 0 0 1px var(--cmp-edge),
    0 2.4rem 3.6rem -1.8rem oklch(30% 0.05 240 / 30%),
    0 0.8rem 1.4rem -0.7rem oklch(22% 0.012 260 / 14%);
  --cmp-soft:
    0 0 0 1px var(--color-rule),
    0 1.6rem 2.6rem -1.6rem oklch(22% 0.012 260 / 20%),
    0 0.4rem 0.9rem -0.5rem oklch(22% 0.012 260 / 10%);
  --cmp-q: 18.5%;
  --cmp-c: 20.375%;
}
.cmp-open { position: relative; isolation: isolate; padding-bottom: var(--space-3); overflow-x: clip; }
.cmp-open-grid-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 52%;
  height: 64%;
  color: var(--color-rule-strong);
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 55% 50%, black 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 60% at 55% 50%, black 35%, transparent 100%);
}
.cmp-open-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
  .cmp-open-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-6); }
}
.cmp-open h1 { margin-bottom: var(--space-3); text-wrap: balance; max-width: 24ch; }
.cmp-open .eyebrow { font-size: clamp(0.9375rem, 0.8rem + 0.45vw, 1.25rem); }
.cmp-open .lead { margin-bottom: 0; max-width: 54ch; }
.cmp-open .home-actions { margin: var(--space-4) 0 0; }
.cmp-why { position: relative; }
.cmp-recs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-3);
}
.cmp-rec {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.85rem 1rem 1rem;
  background: var(--color-white);
  border-radius: 0.875rem;
  box-shadow: var(--cmp-soft);
  transform: rotate(var(--r, 0deg));
}
.cmp-rec:nth-child(1) { --r: -1.2deg; }
.cmp-rec:nth-child(2) { --r: 1deg; translate: 0 var(--space-3); }
.cmp-rec:nth-child(3) { --r: 0.8deg; }
.cmp-rec:nth-child(4) { --r: -1deg; translate: 0 var(--space-3); }
.cmp-rec img { display: block; width: auto; height: 1.15rem; max-width: var(--w); object-fit: contain; object-position: left center; margin-bottom: 0.2rem; }
.cmp-rec-num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 0.9375rem;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-rule);
}
.cmp-rec i { display: block; height: 0.4rem; border-radius: 999px; background: var(--color-ground-alt); }
.cmp-rec i:last-child { width: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .cmp-rec { animation: cmp-rec-in 560ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--k) * 90ms + 120ms) both; }
}
@keyframes cmp-rec-in { from { opacity: 0; transform: translateY(0.75rem) rotate(0deg); } }
.cmp-why h2 { font-size: var(--type-h3); text-wrap: balance; margin-bottom: var(--space-1); }
.cmp-why p { margin: 0; color: var(--color-ink); }
.cmp-table-band { padding-top: var(--space-3); }
.cmp-table-band h2 { margin-bottom: var(--space-3); }
.cmp-table-wrap { position: relative; isolation: isolate; }
.cmp-table-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--space-3) * -1);
  bottom: calc(var(--space-3) * -1);
  left: calc(var(--cmp-q) + var(--cmp-c) * 3);
  width: var(--cmp-c);
  background: var(--cmp-tint);
  border-radius: 1.125rem;
  box-shadow: var(--cmp-lift);
}
.cmp-table-wrap::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: calc(var(--space-3) * -1);
  bottom: calc(var(--space-3) * -1);
  left: calc(var(--cmp-q) + var(--cmp-c) * 3);
  width: var(--cmp-c);
  border-radius: 1.125rem;
  box-shadow: inset 0 0 0 1px var(--cmp-edge);
}
.cmp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.cmp-col-q { width: var(--cmp-q); }
.cmp-table col:not(.cmp-col-q) { width: var(--cmp-c); }
.cmp-table th,
.cmp-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  vertical-align: top;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-rule);
}
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .cmp-table tbody tr > * { transition: background-color 160ms ease; }
  .cmp-table tbody tr:hover > :not(.is-us) { background: color-mix(in srgb, var(--color-ground-alt) 70%, transparent); }
}
.cmp-table tbody td { color: var(--color-ink); }
.cmp-table tbody tr:last-child td.is-us { border-bottom: 0; }
.cmp-table thead th,
.cmp-table thead td {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: var(--space-2) var(--space-3);
  vertical-align: top;
  background: var(--color-ground);
  border-bottom: 1px solid var(--color-rule-strong);
  transition: border-color 200ms ease;
}
.cmp-table thead .is-us { background: var(--cmp-tint); }
.cmp-table-wrap.is-stuck thead :is(th, td) { border-bottom-color: var(--color-ink-soft); }
.cmp-type { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cmp-type-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.cmp-us-logo { display: block; width: auto; height: 2.75rem; margin-top: -0.125rem; }
.cmp-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  color: var(--color-ink-soft);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-rule), 0 0.3rem 0.6rem -0.35rem oklch(22% 0.012 260 / 22%);
}
.cmp-ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp-ico img { width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; }
.cmp-table tbody th {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-ink);
}
.cmp-table td[data-mark],
.cmp-card dd[data-mark] { position: relative; padding-left: calc(var(--space-3) + 1.75rem); }
.cmp-mark {
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-3) + 0.12rem);
  width: 1.25rem;
  height: 1.25rem;
}
.cmp-mark svg { display: block; width: 100%; height: 100%; }
.cmp-mark.is-yes svg circle { fill: color-mix(in srgb, var(--color-green) 14%, var(--color-white)); }
.cmp-mark.is-yes svg path { fill: none; stroke: var(--color-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-mark.is-no svg circle { fill: var(--color-ground-alt); }
.cmp-mark.is-no svg path { fill: none; stroke: var(--color-rule-strong); stroke-width: 2; stroke-linecap: round; }
.cmp-big {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--color-blue-deep);
}
.cmp-under {
  display: grid;
  gap: var(--space-1);
  margin-top: calc(var(--space-4) + var(--space-3));
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-rule-strong);
}
.cmp-limit {
  margin: 0;
  max-width: 70ch;
  font-size: var(--type-lead);
  line-height: var(--line-lead);
  color: var(--color-ink);
  text-wrap: pretty;
}
.cmp-source { margin: 0; max-width: none; font-size: var(--type-small); color: var(--color-ink-soft); }
.cmp-cards { display: none; }
@media (max-width: 1099px) {
  .cmp-table-wrap { overflow-x: auto; margin-inline: calc(var(--hd-gutter) * -1); padding: var(--space-3) var(--hd-gutter); }
  .cmp-table { min-width: 52rem; }
  .has-cards .cmp-table-wrap { display: none; }
  .has-cards .cmp-cards { display: block; }
}
.cmp-cards-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 22rem);
  align-items: start;
  gap: var(--space-2);
  margin: 0 calc(var(--hd-gutter) * -1);
  padding: var(--space-3) var(--hd-gutter) var(--space-6);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hd-gutter);
  scrollbar-width: none;
}
.cmp-cards-track::-webkit-scrollbar { display: none; }
.cmp-cards-track:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; border-radius: var(--radius-md); }
.cmp-card {
  scroll-snap-align: start;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-white);
  border-radius: 1.125rem;
  box-shadow: var(--cmp-soft);
}
.cmp-card.is-us { background: var(--cmp-tint); box-shadow: var(--cmp-lift); }
.cmp-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.cmp-card.is-us .cmp-card-head { border-bottom-color: var(--cmp-edge); }
.cmp-card-head .cmp-type { flex-direction: row; align-items: center; }
.cmp-card dl { margin: 0; }
.cmp-card dt {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.cmp-card dd { margin: 0.3rem 0 0; color: var(--color-ink); font-size: 0.96875rem; line-height: 1.5; }
.cmp-card dd[data-mark] { padding-left: 1.75rem; }
.cmp-card .cmp-mark { left: 0; top: 0.12rem; }
.cmp-card .cmp-big { font-size: 1.0625rem; }
.cmp-dots { display: flex; justify-content: center; gap: 0.25rem; margin: calc(var(--space-4) * -1) 0 0; padding: 0; list-style: none; }
.cmp-dots button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.cmp-dots button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-rule-strong);
  opacity: 0.5;
  transition: width 220ms var(--hd-ease), opacity 220ms ease, background-color 220ms ease;
}
.cmp-dots button[aria-current="true"]::before { width: 1.5rem; opacity: 1; background: var(--color-blue); }
.cmp-dots button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -6px; border-radius: 999px; }
.cmp-reach-fig { display: grid; gap: var(--space-2); margin: 0; }
.cmp-reach > .hd-copy { padding-block: 0; }
.cmp-ring-wrap { margin-bottom: var(--space-4); }
.rw { position: relative; isolation: isolate; min-width: 0; padding-block: var(--space-4); }
.rw-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--color-rule-strong);
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, black 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, black 45%, transparent 100%);
  pointer-events: none;
}
.rw-grid-block { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.rw ul { margin: 0; padding: 0; list-style: none; }
.rw-tile {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 5.5rem;
  padding: var(--space-2);
  background: var(--color-white);
  border-radius: 0.875rem;
  box-shadow: var(--cmp-soft);
}
.rw-tile img { display: block; width: var(--lw, 60%); height: auto; max-height: 2.75rem; object-fit: contain; }
.rw-tile--text span { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 0.9375rem; line-height: 1.25; text-align: center; color: var(--color-ink-soft); text-wrap: balance; }
.rw-wall .rw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.rw-wall .rw-tile { height: 6.5rem; }
@media (max-width: 559px) { .rw-wall .rw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rw-wall .rw-tile { height: 5.25rem; } }
.rw-fams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
.rw-fam > ul { display: grid; gap: var(--space-1); padding: var(--space-1); background: color-mix(in srgb, var(--color-ground-alt) 70%, transparent); border-radius: 1.125rem; box-shadow: inset 0 0 0 1px var(--color-rule); }
.rw-fam .rw-tile { height: 5.25rem; }
@media (max-width: 859px) { .rw-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rw-fam .rw-tile { height: 4.75rem; } }
.rw-strip { display: grid; gap: var(--space-3); }
.rw-lane { display: grid; gap: var(--space-1); }
.rw-lane-name { margin: 0; display: flex; align-items: center; min-height: 1.75rem; font-size: var(--type-small); font-weight: var(--weight-bold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--color-ink-soft); }
.rw-lane-name img { display: block; height: 1.75rem; width: auto; }
.rw-strip .rw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.rw-strip .rw-tile { height: 4.75rem; }
.rw-lane.is-ours .rw-tile { box-shadow: var(--cmp-lift); }
@media (min-width: 900px) { .rw-strip .rw-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-2); } .rw-strip .rw-tile { height: 5.5rem; } }
.cmp-reach-fig .hd-bars { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hd-bars.cmp-io .hd-bar-fill { clip-path: inset(0 100% 0 0); }
  .hd-bars.cmp-io.is-in .hd-bar-fill { animation: cmp-bar-fill 4800ms cubic-bezier(0.165, 0.84, 0.44, 1) 2500ms both; }
}
@keyframes cmp-bar-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cmp-reach-fig .hd-bar-fill { width: calc(var(--n) / var(--max, 14) * 100%); }
.cmp-reach-fig .hd-bar-fill { gap: 2px; }
.cmp-cta { margin: var(--space-3) 0 0; }
.cmp-under .cmp-cta { margin-top: var(--space-3); }
.cmp-cta-inline { margin-left: var(--space-2); white-space: nowrap; }
@media (max-width: 640px) {
  .cmp-cta .btn-primary, .cmp-cta .btn-secondary { display: block; width: 100%; text-align: center; }
  .cmp-cta .btn-secondary { display: flex; }
  .cmp-cta-inline { display: flex; width: 100%; margin: var(--space-2) 0 0; }
}
.cmp-weak {
  display: grid;
  gap: 0 var(--space-6);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .cmp-weak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-weak li { margin: 0; padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--color-rule); }
.cmp-weak p { margin: 0; max-width: 56ch; font-size: var(--type-lead); line-height: var(--line-lead); color: var(--color-ink-soft); }
.cmp-weak strong { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--color-ink); }
.cmp-fit { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .cmp-fit { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-6); align-items: start; }
  .cmp-fit h2 { position: sticky; top: var(--space-4); }
}
.cmp-choose {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-white);
  border-radius: 1.125rem;
  box-shadow: var(--cmp-soft);
}
.cmp-choose li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  padding: var(--space-3);
  border-radius: 0.8rem;
}
.cmp-choose li + li { box-shadow: 0 -1px 0 var(--color-rule); }
.cmp-choose li.is-us { background: var(--cmp-tint); box-shadow: inset 0 0 0 1px var(--cmp-edge); }
.cmp-choose li.is-us + li, .cmp-choose li + li.is-us { margin-top: 1px; }
.cmp-choose p { margin: 0; font-size: var(--type-lead); line-height: var(--line-lead); color: var(--color-ink-soft); }
.cmp-choose strong { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--color-ink); }
.cmp-choose .is-us strong { color: var(--color-blue-deep); }
.cmp-choose .cmp-ico { margin-top: 0.1rem; }
.cmp-choose .is-us .cmp-ico { background: transparent; box-shadow: none; }
.cmp-choose .is-us .cmp-ico img { width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; box-shadow: 0 0 0 1px var(--cmp-edge), 0 0.3rem 0.6rem -0.35rem oklch(22% 0.012 260 / 22%); }
.hd-founder { padding-block: var(--band-pad); }
.home-close .home-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); }
@media (max-width: 640px) {
  .cmp-open { padding-bottom: var(--space-3); }
  .cmp-open-grid-bg { top: 50%; width: 100%; height: 30%; }
  .cmp-recs { gap: var(--space-1); padding-inline: 0; margin-bottom: var(--space-3); }
  .cmp-rec { padding: 0.7rem 0.75rem 0.8rem; }
  .cmp-rec-num { font-size: 0.875rem; }
  .cmp-table-band { padding-top: var(--space-3); }
  .cmp-table-band h2 { margin-bottom: var(--space-1); }
  .cmp-under { margin-top: var(--space-3); }
  .cmp-weak p { font-size: var(--type-body); line-height: var(--line-body); }
  .cmp-choose li { gap: var(--space-2); padding: var(--space-2); }
  .cmp-choose p { font-size: var(--type-body); line-height: var(--line-body); }
  .cmp-founder .hd-plaque { padding-bottom: var(--space-4); }
  .home-close .home-actions { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .home-close .home-secondary { padding-block: var(--space-2); }
}
