.ba-grid .ba2 {
  aspect-ratio: 1 / 1;
  background: #f9f3ef;
  border: 1px solid var(--line);
}
.ba-grid .ba2 .botwrap,
.ba-grid .ba2 .topwrap {
  position: absolute;
  inset: 0;
  background: var(--surface-1);
}
.ba-grid .ba2 .topwrap {
  clip-path: inset(0 0 0 var(--x, 50%));
}
.ba-grid .ba2.groom img,
.ba-grid .ba2.sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-grid .ba2 .divider {
  width: 2px;
  margin: 0;
  bottom: 0;
  background: var(--ink);
  opacity: 0.85;
}
.ba-grid .ba2 .grip {
  width: 40px;
  height: 40px;
  left: 1px;
  top: 76%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  background: var(--surface-1);
  box-shadow: 0 3px 10px #17171a1f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
}
.ba-grid .ba2 .grip i {
  width: 0;
  height: 0;
  flex: none;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ba-grid .ba2 .grip i:first-child {
  border-right: 6px solid var(--ink);
  border-left: 0;
}
.ba-grid .ba2 .grip i:last-child {
  border-left: 6px solid var(--ink);
  border-right: 0;
}
.ba-grid .ba2 .lbl {
  top: 10px;
  font-size: 9.5px;
  padding: 4px 7px;
  background: #17171ad1;
}
.ba-grid .ba2 .lbl.r {
  background: #17171ad1;
}
.hero3 .fig .hero-photo {
  position: absolute;
  right: -8%;
  bottom: 4%;
  width: 34%;
  min-width: 96px;
  margin: 0;
  z-index: 3;
  opacity: 0;
  transform: translate(70%, 12%) rotate(6deg);
  will-change: transform, opacity;
}
.hero3 .fig .hp-frame {
  padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--ink);
  box-shadow: 0 10px 26px #17171a29;
}
.hero3 .fig .hp-win {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}
.hero3 .fig .hp-win img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero3 .fig .hp-win img.on {
  opacity: 1;
}
.hero3 .fig .hero-photo figcaption {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-top: 5px;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 899px) {
  .hero3 .fig .hero-photo {
    right: -14%;
    bottom: -7%;
    width: 38%;
  }
}
@media (max-width: 420px) {
  .hero3 .fig .hero-photo figcaption {
    display: none;
  }
}
.face-strip {
  margin-top: 36px;
}
.face-strip .fs-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.face-strip .fs-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.face-strip .fs-cap {
  max-width: 68ch;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .face-strip {
    position: relative;
  }
  .face-strip .fs-row {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .face-strip .fs-row::-webkit-scrollbar {
    display: none;
  }
  .face-strip .fs-row img {
    flex: 0 0 84px;
    width: 84px;
    scroll-snap-align: start;
  }
  .face-strip .fs-more {
    position: absolute;
    right: 0;
    top: 0;
    height: 105px;
    width: 62px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(90deg, transparent, var(--bg) 78%);
    transition: opacity 0.25s ease;
  }
  .face-strip.scrolled .fs-more {
    opacity: 0;
  }
  .face-strip .fs-more span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-1);
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px #17171a1f;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
  }
}
@media (min-width: 901px) {
  .face-strip .fs-more {
    display: none;
  }
}
.hero3 {
  height: 178vh;
  min-height: calc(100svh + 420px);
}
@media (max-width: 899px) {
  .hero3 {
    height: 143vh;
    min-height: calc(100svh + 300px);
  }
}
@media (max-width: 899px) and (max-height: 820px) {
  .hero3 .panel .pc:last-child {
    display: none;
  }
}
.sec-head {
  margin-bottom: 36px;
}
main section h2 {
  font-size: clamp(30px, 3.5vw, 44px);
}
.sec-head p {
  margin: 12px auto 0;
  color: var(--text-secondary);
}
section {
  padding: 76px 0;
}
section.tight {
  padding: 60px 0;
}
@media (max-width: 760px) {
  section {
    padding: 44px 0;
  }
  section.tight {
    padding: 34px 0;
  }
  .sec-head {
    margin-bottom: 24px;
  }
  .face-strip {
    margin-top: 30px;
  }
}
@media (max-width: 760px) {
  main section h2 {
    font-size: clamp(26px, 6.6vw, 34px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  main section h2 .t2 {
    display: block;
    margin-top: 2px;
  }
  .sec-head p,
  .sec-head .lede {
    font-size: 14.5px;
    color: var(--text-secondary);
  }
  .kicker,
  .eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
  }
}
.hero3 .fig.scan {
  overflow: visible;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
.hero3 .fig.scan .scan-win {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
}
.hero3 .fig.scan .scan-fr {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.hero3 .fig.scan .scan-win *,
.hero3 .fig.scan .scan-fr {
  transition: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.hero3 .fig.scan .scan-ov {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  transition: opacity 0.13s linear;
}
.hero3 .fig.scan .scan-ov .brackets path {
  stroke: var(--tone);
  stroke-width: 1.6;
  fill: none;
  opacity: 0.85;
  transition: opacity 0.25s linear;
}
.hero3 .fig.scan .scan-ov .scanline {
  stroke: var(--tone);
  stroke-width: 9;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(47, 107, 98, 0.9))
    drop-shadow(0 0 34px rgba(47, 107, 98, 0.55));
  transition: none;
}
.hero3 .fig.scan .scan-ov .dot {
  fill: var(--tone);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.hero3 .fig.scan .scan-ov .dot.on {
  opacity: 1;
  transform: scale(1);
}
.hero3 .fig.scan .scan-ov .l {
  stroke: var(--tone);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(0.06);
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.hero3 .fig.scan .scan-ov .l.on {
  transform: scaleX(1);
}
.hero3 .fig.scan .scan-ov .l.on {
  opacity: 0.95;
}
.hero3 .fig.scan .scan-ov .l.thirds {
  stroke-dasharray: 5 4;
  opacity: 0;
}
.hero3 .fig.scan .scan-ov .l.thirds.on {
  opacity: 0.7;
}
.hero3 .fig.scan .scan-ov .l.fifths {
  stroke: var(--rust);
  stroke-dasharray: 3 5;
  stroke-width: 1.1;
  opacity: 0;
}
.hero3 .fig.scan .scan-ov .l.fifths.on {
  opacity: 0.55;
}
.hero3 .fig.scan .scan-ov .l.mid {
  stroke-dasharray: 8 5;
  stroke-width: 1.1;
  opacity: 0;
}
.hero3 .fig.scan .scan-ov .l.mid.on {
  opacity: 0.6;
}
.hero3 .fig.scan .scan-chips {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero3 .fig.scan .mchip {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.86);
  opacity: 0;
  background: #fbf9f5f0;
  border: 1px solid var(--tone);
  border-radius: 9px;
  padding: 4px 8px;
  white-space: nowrap;
  box-shadow: 0 6px 16px #17171a24;
  transition:
    opacity 0.26s ease,
    transform 0.3s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.hero3 .fig.scan .mchip.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hero3 .fig.scan .mchip.s-l {
  left: -30px !important;
  right: auto;
  transform: translateY(-50%) scale(0.86);
}
.hero3 .fig.scan .mchip.s-l.on {
  transform: translateY(-50%) scale(1);
}
.hero3 .fig.scan .mchip.s-r {
  left: auto !important;
  right: -30px;
  transform: translateY(-50%) scale(0.86);
}
.hero3 .fig.scan .mchip.s-r.on {
  transform: translateY(-50%) scale(1);
}
.hero3 .fig.scan .mchip {
  max-width: 150px;
}
.hero3 .fig.scan .scan-chips {
  overflow: visible;
}
.hero3 .fig.scan .mchip .mk {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero3 .fig.scan .mchip .mv {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero3 .fig.scan .mchip .mv small {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: 4px;
}
.hero3 .fig.scan .scan-hud {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.hero3 .fig.scan .scan-live {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hero3 .fig.scan .scan-hud span,
.hero3 .fig.scan .scan-ang {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #17171ab8;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 400;
}
.hero3 .fig.scan .scan-ang {
  font-variant-numeric: tabular-nums;
  background: var(--tone);
}
.hero3 .fig.scan .scan-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hero3 .fig.scan .scan-ticks .tk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #17171a8c;
  color: #ffffff9e;
  padding: 3px 7px;
  border-radius: 6px;
  transition:
    background 0.18s ease,
    color 0.18s ease;
  font-variant-numeric: tabular-nums;
}
.hero3 .fig.scan .scan-ticks .tk i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  border: 1.4px solid currentColor;
  position: relative;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.hero3 .fig.scan .scan-ticks .tk b {
  font-weight: 400;
}
.hero3 .fig.scan .scan-ticks {
  flex-wrap: nowrap;
}
.hero3 .fig.scan .scan-ticks .tk em {
  font-style: normal;
  display: none;
  color: inherit;
}
.hero3 .fig.scan .scan-ticks .tk.on em {
  display: inline;
  color: #fff;
  opacity: 1;
}
.hero3 .fig.scan .scan-ticks .tk.on {
  color: #fff;
}
.hero3 .fig.scan .scan-ticks .tk.on b,
.hero3 .fig.scan .scan-ticks .tk.done b {
  color: inherit;
}
.hero3 .fig.scan .scan-ticks .tk.on {
  background: #17171ad1;
  color: #fff;
}
.hero3 .fig.scan .scan-ticks .tk.on i {
  border-color: #fff;
  background: #ffffff47;
}
.hero3 .fig.scan .scan-ticks .tk.done {
  background: var(--tone);
  color: #fff;
}
.hero3 .fig.scan .scan-ticks .tk.done i {
  background: #fff;
  border-color: #fff;
}
.hero3 .fig.scan .scan-ticks .tk.done i:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5px;
  width: 2.4px;
  height: 5px;
  border: solid var(--tone);
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(42deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero3 .fig.scan .scan-ticks .tk,
  .hero3 .fig.scan .scan-ticks .tk i {
    transition: none;
  }
}
@media (max-width: 899px) {
  .hero3 .fig.scan .scan-hud {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 4px;
    overflow: hidden;
  }
  .hero3 .fig.scan .scan-live {
    flex-wrap: nowrap;
    max-width: 100%;
  }
  .hero3 .fig.scan .scan-hud span,
  .hero3 .fig.scan .scan-ang {
    white-space: nowrap;
    font-size: 9px;
    padding: 3px 6px;
    letter-spacing: 0.06em;
  }
  .hero3 .fig.scan .scan-ticks {
    max-width: 100%;
  }
  .hero3 .fig.scan .scan-ticks .tk {
    font-size: 8.5px;
    padding: 2px 4px;
    gap: 3px;
    letter-spacing: 0;
    min-width: 0;
  }
  .hero3 .fig.scan .scan-ticks .tk em,
  .hero3 .fig.scan .scan-ticks .tk.on em {
    display: none;
  }
  .hero3 .fig.scan .scan-ticks .tk i {
    width: 7px;
    height: 7px;
    border-width: 1.2px;
  }
}
.hero3 .fig.scan .hero-photo {
  display: none;
}
.hero3 .fig.scan {
  width: 100%;
}
.hero3 .pc svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
}
@media (max-width: 899px) {
  .hero3 .stage {
    min-height: calc(100svh - var(--nav-h));
    height: auto;
    align-items: flex-start;
    overflow: visible;
  }
  .hero3 .stage:has(.pc.on),
  .hero3 .stage.has-pc {
    min-height: 0;
  }
  body.has-promo .hero3 .stage {
    min-height: calc(100svh - var(--nav-h) - var(--promo-h, 36px));
  }
  body.has-promo.promo-hidden .hero3 .stage {
    min-height: calc(100svh - var(--nav-h));
  }
  .hero3 .stage-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 10px;
    align-items: stretch;
    padding: calc(var(--nav-h, 64px) - 48px) 16px 26px;
  }
  .hero3 .copy .eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    align-items: flex-start;
  }
  .hero3 .copy .eyebrow:before {
    margin-top: 0.38em;
    flex: 0 0 auto;
  }
  .hero3 .fig,
  .hero3 .fig.scan,
  .hero3 .copy,
  .hero3 .panel {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    max-width: none;
  }
  .hero3 .fig,
  .hero3 .fig.scan {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    height: auto;
    width: 100%;
    min-height: 0;
    max-width: min(86%, calc(39svh * 818 / 1448));
    margin-left: calc((100% - min(86%, calc(39svh * 818 / 1448))) / 2);
    margin-right: 0;
  }
  .hero3 .panel {
    display: flex;
    min-width: 0;
    min-height: 0;
  }
  .hero3 .fig,
  .hero3 .fig.scan {
    transition:
      max-width 0.66s cubic-bezier(0.22, 0.72, 0.28, 1),
      margin-left 0.66s cubic-bezier(0.22, 0.72, 0.28, 1);
  }
  .hero3 .panel .pc {
    transform: translateY(22px);
    transition:
      opacity 0.42s ease,
      transform 0.58s cubic-bezier(0.22, 0.72, 0.28, 1);
  }
  .hero3 .panel .pc:nth-child(1) {
    transition-delay: 0.16s;
  }
  .hero3 .panel .pc:nth-child(2) {
    transition-delay: 0.25s;
  }
  .hero3 .panel .pc:nth-child(3) {
    transition-delay: 0.34s;
  }
  .hero3 .panel .pc:nth-child(n + 4) {
    transition-delay: 0.43s;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero3 .fig,
    .hero3 .fig.scan,
    .hero3 .panel .pc {
      transition: none;
    }
    .hero3 .panel .pc {
      transform: none;
    }
  }
  .hero3 .stage-in:has(.pc.on),
  .hero3 .stage-in.has-pc {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero3 .stage-in:has(.pc.on) .fig,
  .hero3 .stage-in:has(.pc.on) .fig.scan,
  .hero3 .stage-in.has-pc .fig,
  .hero3 .stage-in.has-pc .fig.scan {
    max-width: min(52%, calc(39svh * 818 / 1448));
    margin-left: 0;
  }
  .hero3 .panel {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: 44%;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    opacity: 1;
    pointer-events: none;
    max-height: 0;
    overflow: visible;
  }
  .hero3 .stage-in:has(.pc.on) .panel,
  .hero3 .stage-in.has-pc .panel {
    pointer-events: auto;
    max-height: none;
  }
  .hero3 .pc {
    padding: 9px 11px;
  }
  .hero3 .pc .v {
    font-size: 21px;
  }
  .hero3 .pc .k {
    line-height: 1.25;
  }
  .hero3 .panel .pc {
    opacity: 0;
  }
  .hero3 .panel .pc {
    flex: 0 0 auto;
    width: 100%;
    padding: 7px 9px;
  }
  .hero3 .stage-in:has(.pc.on) .panel .pc.on,
  .hero3 .stage-in.has-pc .panel .pc.on {
    opacity: 1;
    transform: translateY(0);
  }
  .hero3 .stage-in:has(.pc.on) .panel .pc .v,
  .hero3 .stage-in.has-pc .panel .pc .v {
    font-size: 19px;
  }
  .hero3 .stage-in:has(.pc.on) .panel .pc .k,
  .hero3 .stage-in.has-pc .panel .pc .k {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  @media (max-height: 780px) {
    .hero3 .panel .pc:nth-child(n + 4) {
      display: none;
    }
  }
  .hero3 .panel::-webkit-scrollbar {
    display: none;
  }
  .hero3 .panel .pc {
    min-width: 0;
  }
  .hero3 .dots {
    display: none;
  }
  .hero3 .hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 0 2px;
  }
  .hero3 .hint svg {
    width: 16px;
    flex: 0 0 auto;
  }
  .hero3 .hint b {
    font-size: 12.5px;
  }
  .hero3 .hint span {
    font-size: 11px;
    line-height: 1.35;
  }
  .hero3 .fig.scan .mchip {
    display: none;
  }
  .hero3 .copy {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2px;
  }
  .hero3 .copy h1 {
    max-width: 19ch;
    font-size: clamp(31px, 9vw, 41px);
    line-height: 1.02;
  }
  .hero3 .hint {
    display: none;
  }
  .hero3 .copy .hero-points p:nth-child(2),
  .hero3 .copy .hero-points p:nth-child(3) {
    display: none;
  }
  .hero3 .cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }
  .hero3 .cta .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .hero3 .cta .btn-secondary {
    background: none;
    border: 0;
    padding: 2px 0;
    min-height: 0;
    height: auto;
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    justify-content: center;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 899px) and (max-height: 800px) {
  .hero3 .stage-in {
    padding-top: calc(var(--nav-h, 64px) - 48px);
    gap: 8px;
    grid-template-rows: auto auto auto;
  }
  .hero3 .fig,
  .hero3 .fig.scan {
    max-width: min(86%, calc(38svh * 818 / 1448));
  }
  .hero3 .panel .pc .v {
    font-size: 15px;
  }
  .hero3 .copy .eyebrow,
  .hero3 .copy > p {
    display: none;
  }
  .hero3 .copy .hero-points p:not(:first-child) {
    display: none;
  }
  .hero3 .panel .pc .k {
    font-size: 8px;
  }
}
@media (max-width: 899px) {
  .hero3 .panel .pc .k {
    font-size: 10.5px;
    letter-spacing: 0.05em;
    line-height: 1.25;
  }
  .hero3 .fig.scan .scan-hud span,
  .hero3 .fig.scan .scan-hud .scan-txt {
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 3px 7px;
  }
  .ba-grid .ba2 .lbl {
    font-size: 10.5px;
    padding: 3px 6px;
    letter-spacing: 0.02em;
    top: 8px;
  }
  .ba-grid .ba2 .lbl.l {
    left: 7px;
  }
  .ba-grid .ba2 .lbl.r {
    right: 7px;
  }
  .ba-grid .ba2 .cap {
    font-size: 12px;
  }
}
@media (max-width: 720px) {
  .tw:has(table.compare) {
    overflow: visible;
    border: 0;
    background: none;
  }
  table.compare {
    display: block;
    border: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  table.compare thead {
    display: none;
  }
  table.compare tbody {
    display: grid;
    gap: 10px;
    min-width: 0;
  }
  table.compare tr {
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    min-width: 0;
  }
  table.compare td {
    display: block;
    border: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.45;
  }
  table.compare td:first-child {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  table.compare td:not(:first-child) {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
  }
  table.compare td:not(:first-child):before {
    content: attr(data-h);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  table.compare td.us {
    background: color-mix(in srgb, var(--tone) 9%, transparent);
    border-radius: 10px;
    padding: 7px 9px;
    margin: 2px 0;
  }
  table.compare td.us:before {
    color: var(--tone);
  }
  table.compare sup {
    font-size: 9px;
  }
}
.cmp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.cmp-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 16px;
  background: var(--surface-1);
}
.cmp-card.us {
  border-color: var(--tone);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--tone);
}
.cmp-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.cmp-h b {
  font-size: 17px;
}
.cmp-price {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-card.us .cmp-price {
  color: var(--tone-deep);
}
.cmp-card p {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.cmp-card p:last-child {
  margin-bottom: 0;
}
.cmp-not {
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--line-soft);
  padding-top: 9px;
}
.cmp-diff {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px 18px;
  background: var(--surface-1);
}
.cmp-diff ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.cmp-diff li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(
      0,
      1fr
    ) minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.cmp-diff li:first-child {
  border-top: 0;
}
.cd-l {
  font-size: 13.5px;
  color: var(--text-primary);
}
.cd-us {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cd-o {
  font-size: 13px;
  color: var(--text-muted);
}
.cd-o i {
  display: none;
}
@media (max-width: 900px) {
  .cmp-cards {
    grid-template-columns: 1fr;
  }
  .cmp-diff li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 0;
  }
  .cd-l {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .cd-us {
    font-size: 15px;
  }
  .cd-o {
    font-size: 13px;
    display: flex;
    gap: 8px;
  }
  .cd-o i {
    display: inline;
    font-style: normal;
    flex: 0 0 108px;
    color: var(--text-faint);
  }
}
.stat-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.sec-h2c {
  text-align: center;
  margin: 0 0 26px;
}
@media (min-width: 861px) and (max-width: 1180px) {
  .stat-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
.stat-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.stat {
  margin: 0;
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat b small {
  font-size: 0.48em;
  margin-left: 1px;
  color: var(--text-secondary);
}
.stat figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.stat .cite {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
@media (max-width: 860px) {
  .stat-band {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .stat {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .stat b {
    font-size: 24px;
    line-height: 1.05;
    color: var(--tone);
  }
  .stat b small {
    font-size: 0.5em;
    color: var(--tone);
    opacity: 0.8;
  }
  .stat figcaption {
    margin-top: 0;
    font-size: 13.5px;
  }
  .stat .cite {
    font-size: 9.5px;
    margin-top: 5px;
  }
  .sec-h2c {
    margin-bottom: 16px;
  }
  .stat-cta {
    margin-top: 20px;
  }
  .stat-cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.claim {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 20px 18px;
}
.claim-n {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tone);
  margin-bottom: 10px;
}
.claim b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.claim p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.claim-else {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.claim-cta {
  text-align: center;
  margin-top: 30px;
}
.claim-cta .small {
  margin: 14px auto 0;
  max-width: 60ch;
}
@media (min-width: 861px) and (max-width: 1140px) {
  .claims {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .claims {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .claim {
    padding: 16px 16px 14px;
  }
  .claim-n {
    display: inline;
    margin: 0 8px 0 0;
  }
  .claim b {
    display: inline;
    font-size: 19px;
  }
  .claim p {
    margin-top: 8px;
    font-size: 14px;
  }
  .claim-else {
    margin-top: 10px;
    padding-top: 8px;
  }
  .claim-cta .btn {
    width: 100%;
    justify-content: center;
  }
}
.hero3 .fig.scan {
  border-radius: 18px;
  overflow: visible;
  isolation: isolate;
}
/* the markup portrait: it fills the figure from the first paint and is taken out the moment the
   canvas has a frame on it, so there is never an empty box and never a double image */
.hero3 .fig .fig-boot {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  z-index: 0;
}
.hero3 .fig .fig-boot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero3 .fig.scan .scan-win,
.hero3 .fig.scan .scan-ov,
.hero3 .fig.scan .scan-fr {
  border-radius: 18px;
  clip-path: inset(0 round 18px);
}
.hero3 .fig.scan .scan-chips,
.hero3 .fig.scan .scan-hud {
  border-radius: 0;
}
@media (max-width: 899px) {
  .subnav {
    top: calc(var(--nav-h) + 4px);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────────────────────
   BUILD 172 · the landing page, after the owner's read

   1. Nothing on this page is hidden until a script says otherwise. The finished state is the
      default; .anim, which only the hero adds once its scanner is actually running, is what
      turns the entrance back on. A card that is invisible because an observer never fired is
      worse than a card that simply arrives.
   2. A buy action that carries the same weight as the free one, in the concentric button
      system already on the site: ink instead of teal so the two never read as the same button.
   3. The close: two actions, both centred from .tail-cta itself.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* 1 · entrance animations are an enhancement, never a precondition for being visible.
      .anim is added by the hero's own scanner, and only once it is actually running, so every
      hidden-until-scrolled state below belongs to it. Without it — the module never ran, a step
      above the hero threw, reduced motion is on — the reading cards are simply on screen, in the
      place they animate to, and the phone hero uses its settled two-column layout from the start.
      Nothing on this page can end up stuck at opacity 0 waiting for an event that will not come. */
.hero3:not(.anim) .pc {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (max-width: 899px) {
  .hero3:not(.anim) .panel .pc {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero3:not(.anim) .panel {
    max-height: none;
    pointer-events: auto;
  }
  .hero3:not(.anim) .stage {
    min-height: 0;
  }
  .hero3:not(.anim) .fig,
  .hero3:not(.anim) .fig.scan {
    max-width: min(52%, calc(39svh * 818 / 1448));
    margin-left: 0;
    transition: none;
  }
}

/* 2 · the buy button. Same concentric ring as .btn-primary, ink rather than teal, so "buy" and
       "scan free" are visibly two different actions of the same rank. No blur, no translucency. */
.btn-buy,
a.btn-buy,
button.btn-buy {
  position: relative;
  background-color: var(--ink);
  color: #f4f0e8;
  border-color: transparent;
  box-shadow:
    inset 0 0 0 3px var(--ink),
    inset 0 0 0 4px #f4f0e84d,
    inset 0 0 0 999px var(--ink),
    0 8px 18px -12px #17171aa6;
}
.btn-buy.btn-lg,
a.btn-buy.btn-lg {
  box-shadow:
    inset 0 0 0 4px var(--ink),
    inset 0 0 0 5px #f4f0e84d,
    inset 0 0 0 999px var(--ink),
    0 10px 22px -12px #17171aa6;
}
.btn-buy:hover,
a.btn-buy:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 4px #000,
    inset 0 0 0 5px #f4f0e873,
    inset 0 0 0 999px #000,
    0 18px 32px -16px #17171ab3;
}
.btn-buy:active,
a.btn-buy:active {
  transform: scale(0.985);
}
.btn-buy > * {
  position: relative;
  z-index: 1;
}
/* build 175 · one chip, two buttons. The buy button states its price in it and the primary
   button states that it has none, so the pair reads as one system with one price each rather
   than as an action and a disclaimer. Identical geometry, type and optical weight; only the
   ground under it changes (ink on the buy button, teal on the primary), and the cream is lifted
   two steps on teal because teal is the lighter of the two grounds. The free chip carries no
   data-price attribute, so paintPrices never touches it when a blackjack win is held. */
.btn-buy .btn-price,
.btn-primary .btn-price,
.btn-teal .btn-price {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f4f0e81f;
  box-shadow: inset 0 0 0 1px #f4f0e847;
  white-space: nowrap;
  /* the chip is boxed by its line box, not by the font metrics of whatever face ends up serving
     the separator, so both chips are the same height and both buttons are the same height */
  display: inline-block;
  line-height: 1.2;
}
.btn-primary .btn-price,
.btn-teal .btn-price {
  background: #f4f0e82e;
  box-shadow: inset 0 0 0 1px #f4f0e85c;
}

/* build 175 · the hero list. Four rules for four rows, not five: the top rule closes the list
   against the serif headline, and the last row runs out without one so the block opens into the
   buttons instead of boxing them off. Lead-ins at 560 to match .buy-band-txt > b rather than the
   heavier 600 they carried, so the bold half reads as a lead-in and not as a second headline. */
.hero3 .copy .hero-points p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.hero3 .copy .hero-points b {
  font-weight: 560;
  letter-spacing: -0.008em;
}
.hero3 .copy .hero-points p {
  line-height: 1.55;
}
/* The list is given the same measure as the pair of buttons below it, so the rules stop where the
   buttons stop rather than running on past them. Every row is written to sit on one line inside
   it; if a row is ever lengthened past about seventy characters it will wrap and the four-line
   rhythm goes with it. */
@media (min-width: 900px) {
  .hero3 .copy .hero-points {
    max-width: 500px;
  }
}
.hero3 .cta {
  margin-top: 20px;
  align-items: stretch;
}
/* On desktop the site sizes .btn-primary.btn-lg one step above every other large button. In the
   hero the two are a pair, so both are held at the shared .btn-lg metrics instead: same padding,
   same type size, two chips of exactly the same size, and two buttons of very nearly the same
   width that sit on one line in the 532px copy column every desktop width actually gives them.
   Everywhere else on the page .btn-primary.btn-lg keeps its extra step. */
@media (min-width: 900px) {
  .hero3 .cta .btn-lg {
    padding: 16px 28px;
    font-size: 16px;
  }
}
@media (max-width: 899px) {
  .hero3 .cta {
    margin-top: 14px;
  }
}

/* 3 · the repeated buy band: one line of what it is, one pair of actions */
.buy-band {
  max-width: 860px;
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-1);
  text-align: left;
}
.buy-band-txt {
  flex: 1 1 300px;
  min-width: 0;
}
.buy-band-txt > b {
  display: block;
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -0.01em;
}
.buy-band-txt > span {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 52ch;
}
.buy-band-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
@media (max-width: 700px) {
  .buy-band {
    padding: 18px;
    border-radius: 16px;
  }
  .buy-band-act {
    width: 100%;
  }
  .buy-band-act .btn {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* the spec line under each report row. It carries what the right-hand column used to say, which
   was set to display:none below 560px and so was never read on a phone at all. */
.row-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.row-spec i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  /* A single unbreakable token can never be wider than its column, whatever the window. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* ── THIS WAS THE HORIZONTAL SCROLLBAR ON A HALF-WIDTH WINDOW ─────────────────────────────────
   The longest pill on the page — "Weighted: harmony 40 · skin 30 · leanness 15 · symmetry 15" —
   is 414px wide set on one line, and nowrap was only relaxed below 460px. Between roughly 465px
   and 545px the row's text column is narrower than that, so the pill pushed the document to
   552px and the whole page scrolled sideways: measured at 480, 500, 520 and 540. The relaxation
   belongs wherever the pill cannot fit, which is everything short of a comfortable two-column
   width, so it moves out to 720px — well clear of the 565px where it actually starts to bite. A
   pill that wraps to two lines inside its rounded background reads fine; a page that scrolls
   sideways does not. */
@media (max-width: 720px) {
  .row-spec i {
    white-space: normal;
  }
}
.row-item .th svg {
  object-fit: fill;
}
@media (max-width: 560px) {
  .row-item {
    align-items: start;
  }
  .row-item .th {
    margin-top: 2px;
  }
}

/* 4 · the close.
   .tail-cta p sets `margin: 12px auto 20px` and `max-width: 46ch`; the later, more specific
   `.tail-cta .cta-note { margin: 12px 0 0 }` replaced the auto side margins with 0 but left the
   46ch cap standing, so the note was a narrow block pinned to the left of a 620px card with its
   text centred inside itself — about 74px left of where it looked like it should be. */
.tail-cta .cta-note,
.tail-cta p {
  margin-left: auto;
  margin-right: auto;
}
.tail-cta .cta-note {
  max-width: none;
}
.tail-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.tail-acts .btn {
  flex: 0 1 auto;
}
@media (max-width: 560px) {
  .tail-acts .btn {
    flex: 1 1 100%;
  }
}

/* the hero now carries two buttons; they wrap as a pair on a narrow phone rather than stranding
   the second one on a line of its own at half width */
@media (max-width: 560px) {
  .hero3 .cta {
    gap: 8px;
  }
  .hero3 .cta .btn {
    flex: 1 1 100%;
  }
  .hero3 .cta .btn-lg {
    padding: 14px 20px;
    font-size: 15px;
  }
}
.hero3 .copy .cta-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
}
.hero3 .copy .cta-note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ── Hero measurement chips at cramped two-column widths ───────────────────────────────────────
   The chips are pinned just outside the figure (.s-l at left:-30px, .s-r at right:-30px) and lean
   a little way over the portrait. At 1280px and up that is the design and it reads as a HUD.
   Between about 900px and 1200px it stops working, and the two attempts before this one each
   fixed half of it:
     · pulling both columns inside the figure cleared the headline and put chips on his face;
     · dropping .s-l and keeping .s-r outside cleared the headline too — but the figure in this
       band is only ~230px wide, so a 150px chip hung at right:-22px still covers the right
       third of the face, and with the left column gone the result is three labels stacked on
       one cheek and nothing on the other. Screenshots at 1150 and 1000 show it plainly.
   There is no position for a 150px chip beside a 230px figure that also has the copy column on
   one side and the three stat cards on the other. So in this band the chips are not placed, they
   are dropped — the same thing the layout already does below 900px, where it looks deliberate.
   Nothing is lost: the landmark lines, the brackets, MEASURED/YAW and the angle ticks all stay on
   the portrait, and every figure the chips carried is also in the cards beside it. */
@media (min-width: 900px) and (max-width: 1200px) {
  .hero3 .fig.scan .scan-chips { display: none; }
}

/* ── BUILD 180 · THE MOBILE HERO IS NOT PINNED ANY MORE ────────────────────────────────────────
 *
 * "It's all bugged and shifted to the left side of the screen in the corner. The graphs don't show
 *  up. The image places itself weirdly. It lines up weirdly when I reload."
 *
 * All of that is one bug, and it is not a media query that failed to match — it is a pinned box
 * smaller than the thing inside it.
 *
 * `.hero3 .stage` is `position: sticky; top: var(--nav-h)`, and on a wide screen that is the whole
 * point: the stage pins while the page scrolls past it and the figure plays through its frames. It
 * fits because the desktop layout is three columns side by side, so the stage's content is shorter
 * than the viewport.
 *
 * Below 900px the same stage carries the same content STACKED — headline, then the portrait, then
 * the three stat cards — which comes to about 1120px. On a browser window about 800px tall that
 * does not fit in the pinned stage, and because the stage is stuck at the top of the viewport
 * there is no scroll position that brings the top of it back: the headline, the body copy and BOTH
 * call-to-action buttons sit above the viewport and are clipped away for good. You get the portrait
 * low on the left, the cards floating to the right of it, a dead band underneath, and half a "Buy
 * the full report" pill sliced off behind the nav. Reloading changes where it lands because the
 * stick position depends on the scroll offset the page restored — hence "lines up weirdly when I
 * reload". Measured at 860, 700 and 630px wide: `.hero3 .copy` at y = -374, -315 and -289.
 *
 * Pinning buys nothing below 900px — there is no side-by-side reveal to choreograph, the columns
 * are stacked anyway. So the stage is unpinned, the hero stops reserving 143vh of scroll for an
 * animation that no longer needs it, the three children become three ordinary rows, and the stat
 * cards are shown rather than waiting on a scroll position that will never arrive. Nothing can be
 * clipped because nothing is clipping, and a reload cannot move it because nothing is sticky.
 */
@media (max-width: 899px) {
  .hero3 {
    height: auto;
    min-height: 0;
  }
  .hero3 .stage,
  .hero3 .stage:has(.pc.on),
  .hero3 .stage.has-pc {
    position: static;
    top: auto;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.has-promo .hero3 .stage {
    min-height: 0;
  }
  .hero3 .stage-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
    align-items: start;
    /* The nav is fixed. While the stage was sticky at `top: var(--nav-h)` the stage itself already
       started below the nav, so a small padding was right; unpinned, the stage starts at the top of
       the document and the first line of the headline slid under the nav bar. The padding has to
       clear the nav itself now, and the promo bar above it when there is one. */
    padding: calc(var(--nav-h, 64px) + 20px) 16px 34px;
  }
  body.has-promo .hero3 .stage-in {
    padding-top: calc(var(--nav-h, 64px) + var(--promo-h, 36px) + 20px);
  }
  body.has-promo.promo-hidden .hero3 .stage-in {
    padding-top: calc(var(--nav-h, 64px) + 20px);
  }
  .hero3 .stage-in:has(.pc.on),
  .hero3 .stage-in.has-pc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Three rows, in reading order, each one sized by its own content. */
  .hero3 .copy,
  .hero3 .fig,
  .hero3 .fig.scan,
  .hero3 .panel {
    position: relative;
    inset: auto;
    transform: none;
    grid-column: 1;
    grid-row: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .hero3 .copy {
    max-width: none;
  }
  .hero3 .fig,
  .hero3 .fig.scan,
  .hero3 .stage-in:has(.pc.on) .fig,
  .hero3 .stage-in:has(.pc.on) .fig.scan,
  .hero3 .stage-in.has-pc .fig,
  .hero3 .stage-in.has-pc .fig.scan {
    width: 100%;
    max-width: min(74%, 330px);
    margin-left: auto;
    margin-right: auto;
  }
  /* THE GRAPHS. They were opacity:0 behind a max-height:0 row, waiting for a scroll-driven .on
     that the pinned stage could never deliver. On a stacked layout they are just content. */
  .hero3 .panel,
  .hero3 .stage-in:has(.pc.on) .panel,
  .hero3 .stage-in.has-pc .panel {
    width: 100%;
    max-width: none;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 10px;
    align-self: start;
    justify-self: stretch;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }
  .hero3 .panel .pc,
  .hero3 .panel .pc:last-child,
  .hero3 .panel .pc:nth-child(n + 4) {
    display: block;
    width: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero3 .dots {
    display: none;
  }
}

/* ── BUILD 186 · THE PHONE HERO, AS HE DESCRIBED IT ────────────────────────────────────────────
 *
 * "The guy is kind of compressed and it's just the guy. There's no graphs. It's lined up oddly.
 *  The pictures are too big sometimes or too small."
 *
 * Three separate things, and all three are here in the hero. Measured on a 390x844 phone:
 *
 * 1 · THE PORTRAIT IS TOO SMALL, NOT COMPRESSED. `max-width: min(74%, 330px)` inside a 358px
 *     content box makes the figure 265px wide, and the frame's own aspect (818x1448) makes that
 *     265x469 — a narrow column of face with 46px of dead margin down each side, on a screen
 *     where width is the only thing in short supply. It reads as squeezed because it IS squeezed,
 *     between two margins that buy nothing. The figure takes the width it can have.
 *
 *     The aspect ratio is deliberately NOT touched. The landmark overlay is an SVG with
 *     preserveAspectRatio="xMidYMid meet" over a photograph drawn with object-fit: cover; they
 *     agree only while the box matches the frame's own ratio. Change the box and every landmark
 *     line slides off the face it belongs to — a far worse bug than a tall portrait.
 *
 * 2 · "THERE'S NO GRAPHS" — the six measurement chips. They are the thing that makes the hero
 *     read as a measurement rather than a stock photo, and below 900px they were dropped, because
 *     they hang OUTSIDE the figure (left: -30px / right: -30px) where a phone has no room. So on
 *     a phone they come back INSIDE it, pinned to its edges over the quiet parts of the frame,
 *     at a size that stays legible: the label 7.5px, the value 11px. Under 560px the two chips
 *     that sit closest to the middle of the face — bizygomatic width and alar base — step aside,
 *     so what is left is two per side with a clear face between them.
 *
 * 3 · "LINED UP ODDLY" — the three stat cards. `repeat(auto-fit, minmax(146px, 1fr))` fits two
 *     across a 358px phone and leaves the third stranded on a row of its own at half width, which
 *     is exactly what an accident looks like. Two up, and the third — facial thirds, a bar that
 *     wants width anyway — spans the pair.
 */
@media (max-width: 899px) {
  .hero3 .fig,
  .hero3 .fig.scan,
  .hero3 .stage-in:has(.pc.on) .fig,
  .hero3 .stage-in:has(.pc.on) .fig.scan,
  .hero3 .stage-in.has-pc .fig,
  .hero3 .stage-in.has-pc .fig.scan {
    /* BUILD 188 · sized by the SCREEN'S HEIGHT, not its width. At the full 390px the frame's own
       4:6.5 ratio made the portrait 631px tall on an 844px phone: the reader saw a face and two
       buttons and had to scroll a whole screen to reach the readings — "the guy is huge, it looks
       cropped, I really have to scroll to get to the graphs". The width now follows the height:
       about 58% of the viewport tall, never wider than the screen or 420px, never narrower than
       272px so the chips inside it still have room. On a 390x844 phone that is 302x489, and the
       first reading card starts inside the first screen and a half. */
    max-width: min(100%, 420px, max(272px, calc(58svh * 870 / 1408)));
  }
  /* the chips, inside the frame */
  .hero3 .fig.scan .scan-chips {
    display: block;
  }
  .hero3 .fig.scan .mchip {
    /* the phone rule above this file's build-186 block hides every chip at <=899px; that is the
       line that made the hero "just the guy". It is reversed here, not deleted, so the desktop
       and tablet reasoning above stays where it was written. */
    display: block;
    max-width: 118px;
    padding: 3px 6px;
    border-radius: 8px;
    background: #fbf9f5f0;
    box-shadow: 0 4px 14px #17171a2e;
    /* The chip is nowrap on desktop because it hangs in open space beside the figure and can be
       any width it likes. Inside the frame it cannot: "GONIAL / BIZYGOMATIC" on one 7.5px line is
       wider than the chip and ran straight off the right edge of the portrait. The LABEL wraps
       here; the value never does, because a number broken across two lines is not a number. */
    white-space: normal;
  }
  .hero3 .fig.scan .mchip .mk {
    white-space: normal;
    line-height: 1.18;
  }
  .hero3 .fig.scan .mchip .mv {
    white-space: nowrap;
  }
  .hero3 .fig.scan .mchip.s-l {
    left: 6px !important;
    right: auto;
  }
  .hero3 .fig.scan .mchip.s-r {
    left: auto !important;
    right: 6px;
  }
  .hero3 .fig.scan .mchip .mk {
    font-size: 7.5px;
    letter-spacing: 0.07em;
  }
  .hero3 .fig.scan .mchip .mv {
    font-size: 11px;
  }
  .hero3 .fig.scan .mchip .mv small {
    font-size: 8px;
    margin-left: 3px;
  }
  /* the three readings: two up, the bar across the pair */
  .hero3 .panel,
  .hero3 .stage-in:has(.pc.on) .panel,
  .hero3 .stage-in.has-pc .panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* :last-of-type, not :nth-of-type(3) — the panel's first child is the .hint div, so counting
     divs makes the THIRD div the canthal-tilt card and the span lands on the wrong one: one card
     half width, one full, one half. The bar is the last card in the panel whatever precedes it. */
  .hero3 .panel .pc:last-of-type {
    grid-column: 1 / -1;
  }
}
/* On the narrowest phones the two chips nearest the centre of the face stand down, so the face
   keeps a clear channel between the labels rather than wearing them. */
@media (max-width: 560px) {
  .hero3 .fig.scan .mchip[data-k="face"],
  .hero3 .fig.scan .mchip[data-k="nose"] {
    display: none;
  }
  .hero3 .fig.scan .mchip {
    max-width: 104px;
  }
}

/* The chips are revealed by the scanner's own progress value (`.mchip.on` at line 319 of the hero
   module), and that progress is driven by how far the pinned stage has been scrolled through. On a
   phone the stage is not pinned any more — build 180 unpinned it — so that progress can sit at 0
   for ever and the chips would be present, laid out, and invisible: the same failure the reading
   cards had, in the same hero. So on a phone they do not wait for anything. Same rule as .pc: the
   finished state is the default, and the animation is what turns the entrance back on. */
@media (max-width: 899px) {
  .hero3 .fig.scan .mchip,
  .hero3 .fig.scan .mchip.s-l,
  .hero3 .fig.scan .mchip.s-r {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
.hero3:not(.anim) .fig.scan .mchip.s-l,
.hero3:not(.anim) .fig.scan .mchip.s-r {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* A chip is a fixed number of pixels; a phone is not. At 320px the figure is 288px wide and two
   104px chips leave barely a third of the frame clear, so the portrait wears its labels instead of
   carrying them. Below 400px they step down to 88px and a size smaller — still legible at arm's
   length, and the face keeps its middle. */
@media (max-width: 399px) {
  /* Which four, at this width, is decided by the LENGTH OF THE VALUE, not by which measurement is
     most interesting: "19/21/20/21/19" cannot be broken across lines and does not fit an 88px chip,
     so facial fifths stands down here and bizygomatic width — "0.42", on the same side, a little
     higher up — takes its place. Two short values a side, nothing clipped. */
  .hero3 .fig.scan .mchip[data-k="fifths"] {
    display: none;
  }
  .hero3 .fig.scan .mchip[data-k="face"] {
    display: block;
  }
  .hero3 .fig.scan .mchip {
    max-width: 88px;
    padding: 2px 5px;
  }
  .hero3 .fig.scan .mchip .mk {
    font-size: 7px;
  }
  .hero3 .fig.scan .mchip .mv {
    font-size: 10px;
  }
  .hero3 .fig.scan .mchip .mv small {
    font-size: 7.5px;
    margin-left: 2px;
  }
}


/* ── BUILD 188 · THE STRIP BEHIND THE SECTION PILL, AND THE FOOTER ON A PHONE ─────────────────
 *
 * "The left side and the right side of the circular-edged bar have this white strip on the left and
 *  right of it holding it in place, which looks very tacky. It breaks apart the other color of the
 *  website."
 *
 * The strip was the page's own cream showing through: the pill's flow box sat BETWEEN the hero
 * (warm gradient) and the "why" section (grey), so a band exactly the pill's height and the full
 * width of the screen was painted in a third colour, with the pill floating in the middle of it.
 * The pill now sits on the top edge of the section that follows it: the section is pulled up under
 * the pill and given the height back as padding, so behind the pill there is one colour, the
 * section's own. The pill itself is unchanged, and so is its sticky behaviour — the box it sticks
 * with is still transparent, so nothing paints a band while it travels. */
.subnav {
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: -64px;
}
.subnav + section {
  padding-top: calc(60px + 64px);
}
@media (max-width: 760px) {
  .subnav {
    height: 56px;
    margin-bottom: -56px;
  }
  .subnav + section {
    padding-top: calc(44px + 56px);
  }
}
/* "There's this huge gap between the logo and Science at the bottom, and the Account and Product
    lines are lined up." Two columns on a phone meant the short brand column and the eleven-link
    Product column shared a row, so Science waited under the brand for Product to finish. Now: the
    brand across the top, Product down the left, Science and Account stacked down the right. */
@media (max-width: 760px) {
  footer .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }
  footer .cols {
    /* brand row, then a min-content row for Science and a flexible row for Account, so the tall
       Product list spanning both pushes its extra height into the flexible row rather than
       opening a gap between Science and Account */
    grid-template-rows: auto min-content 1fr;
    align-items: start;
  }
  footer .cols > div:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  footer .cols > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  footer .cols > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  footer .cols > div:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }
  footer .cols > div:nth-child(2) ul {
    columns: 1;
  }
  footer li {
    margin: 0 0 9px;
  }
}
@media (max-width: 400px) {
  footer .cols {
    gap: 20px 18px;
  }
}

/* ── BUILD 189 · THE PHONE HERO, TIGHTER AND ALIVE ────────────────────────────────────────────
 *
 * "everything just feels too big and chunky and plain and spaced out … maybe it's more dynamic
 *  when you scroll on mobile, where the graphs are moving in"
 *
 * 1 · Density. The headline steps down a size, the two paragraphs sit closer, the two buttons
 *     share one row at 46px instead of stacking at 56px each, and the rows of the hero close up.
 *     Nothing is removed; it is the air between things that goes.
 * 2 · Motion, without a script. The reading cards and the measurement chips rise into place as
 *     they scroll into view, driven by the browser's own scroll timeline (Chrome and Android
 *     Chrome, where he looks). Where the timeline is not supported the finished state is what
 *     renders, exactly as before — the animation is an addition, never a precondition. */
@media (max-width: 560px) {
  .hero3 .copy h1 {
    font-size: clamp(31px, 9.2vw, 38px);
    line-height: 1.02;
  }
  .hero3 .copy .eyebrow {
    margin-bottom: 8px;
  }
  .hero3 .copy .hero-points p {
    padding: 7px 0;
    font-size: 14.5px;
    line-height: 1.5;
  }
  .hero3 .copy .hero-points {
    margin: 10px 0 12px;
  }
  .hero3 .cta {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
  }
  .hero3 .cta .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .hero3 .cta .btn-lg {
    padding: 12px 10px;
    font-size: 14px;
  }
  .hero3 .cta .btn-lg .btn-price {
    margin-left: 6px;
  }
  .hero3 .stage-in {
    gap: 14px;
    padding-bottom: 22px;
  }
  .hero3 .panel,
  .hero3 .stage-in:has(.pc.on) .panel,
  .hero3 .stage-in.has-pc .panel {
    gap: 8px;
  }
  section.tight,
  section {
    padding: 36px 0;
  }
  .subnav + section {
    padding-top: calc(36px + 56px);
  }
}
/* "the badges are breaking out of the buttons" — two buttons with a chip each do not share one
   row on a phone. Below 440px they stack, full width, 46px tall, chip inline where it belongs. */
@media (max-width: 439px) {
  .hero3 .cta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero3 .cta .btn {
    flex: 1 1 100%;
    min-height: 46px;
  }
  .hero3 .cta .btn-lg {
    padding: 11px 16px;
    font-size: 14.5px;
  }
  .hero3 .cta .btn-lg .btn-price {
    margin-left: 8px;
  }
}
@supports (animation-timeline: view()) {
  /* 190 → 191: opacity only, no transforms. A phone is scrolled fast; a transform that is tied
     to the scroll position made the cards and the portrait's chips jump under a quick thumb
     ("the face basically spasms"). A fade cannot jump: at worst it is simply already visible. */
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    @keyframes hero-fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .hero3 .panel .pc,
    .stat-band .stat,
    .claim,
    .vcard,
    .ba-grid .ba-card,
    .faq details {
      animation: hero-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}