@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Instrument Sans;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Plex Mono;
  src: url(/fonts/plexmono-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Plex Mono;
  src: url(/fonts/plexmono-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --bg: #f4f0e8;
  --surface-1: #fbf9f5;
  --surface-2: #eae4d8;
  --surface-3: #ded6c6;
  --surface-4: #cfc6b4;
  --line: #dcd4c6;
  --line-soft: #e8e2d6;
  --ink: #17171a;
  --text-primary: #17171a;
  --text-secondary: #4a4944;
  --text-muted: #6e6a62;
  --text-faint: #9a958b;
  --tone: #2f6b62;
  --tone-deep: #245149;
  --slate: #eae4d8;
  --slate-2: #ded6c6;
  --accent: #17171a;
  --accent-2: #2f6b62;
  --rust: #b5471b;
  --pop: #cfc6b4;
  --good: #2f6b62;
  --warn: #b8860b;
  --crit: #b5471b;
  --aqua: #2f6b62;
  --yellow: #b8860b;
  --violet: #5b5a9e;
  --red: #b5471b;
  --magenta: #a65c7b;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:
    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
  --shadow: 0 12px 40px rgba(23, 23, 26, 0.1);
  --shadow-sm: 0 2px 10px rgba(23, 23, 26, 0.06);
  --nav-h: 64px;
  --subnav-h: 52px;
  --crop-stick: calc(var(--nav-h) + var(--subnav-h) + 28px);
  /* build 162: glass is one material, on the navigation bar. Every small control (chips, toggles,
     pager, pills, secondary buttons) is solid cream with a hairline — the "glass" tokens they read
     resolve to that, so nothing else on the page carries a painted highlight. */
  --glass-fill: var(--surface-1);
  --glass-fill-strong: rgba(255, 255, 255, 0.58);
  --glass-rim: var(--line);
  --glass-shadow: 0 18px 40px -20px rgba(23, 23, 26, 0.35);
  --glass-blur: blur(28px) saturate(1.7);
  --glass-hi: 0 0 0 0 transparent;
  --glass-lo: 0 0 0 0 transparent;
  --glass-smoke: rgba(23, 23, 26, 0.58);
  --glass-smoke-rim: rgba(255, 255, 255, 0.22);
  --card-rim: rgba(255, 255, 255, 0.85);
  --card-shadow:
    0 0 0 1px rgba(23, 23, 26, 0.055), 0 24px 48px -32px rgba(23, 23, 26, 0.28);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--nav-h) + 58px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--text-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
img,
canvas,
svg,
video {
  max-width: 100%;
  display: block;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0 0 0.35em;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
h4 {
  margin: 0 0 10px;
}
.card > h1,
.card > h2,
.card > h3,
.owner-top .brand,
.panel-h,
.sheet h2 {
  line-height: 1.18;
}
h1 {
  font-size: clamp(42px, 6.6vw, 84px);
  line-height: 0.96;
}
h2 {
  font-size: clamp(34px, 4.6vw, 58px);
}
h3 {
  font-size: 26px;
  line-height: 1.1;
}
h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 10px;
}
.t2 {
  color: inherit;
  display: block;
  font-style: normal;
}
.t2.inline {
  display: inline;
}
p {
  margin: 0 0 14px;
  color: var(--text-secondary);
}
p.lede {
  font-size: 18px;
  line-height: 1.5;
  max-width: 60ch;
  color: var(--text-secondary);
}
strong {
  color: var(--text-primary);
  font-weight: 560;
}
em {
  font-style: normal;
  color: var(--text-primary);
}
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text-primary);
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--text-muted);
}
.small {
  font-size: 13.5px;
}
.tiny {
  font-size: 12px;
}
.center {
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: 16px;
}
.eyebrow:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone);
  display: inline-block;
}
.eyebrow.bare {
  border: 0;
  padding: 0;
  background: none;
  margin-bottom: 10px;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.narrow {
  max-width: 820px;
}
section {
  padding: clamp(56px, 6.5vw, 84px) 0;
}
section.tight {
  padding: 48px 0;
}
section.flush {
  padding: 0;
}
hr.sep {
  border: 0;
  height: 1px;
  background: var(--line-soft);
  margin: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
.sec-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.was {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-weight: inherit;
}
.region.part > .region-h {
  cursor: pointer;
  user-select: none;
}
.region-fold {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  transition:
    transform 0.2s ease,
    background 0.15s ease;
}
.region-fold:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.region-fold svg {
  width: 15px;
  height: 15px;
  transition: transform 0.22s ease;
}
.region.collapsed > .region-h .region-fold svg {
  transform: rotate(-90deg);
}
.region.collapsed > :not(.region-h) {
  display: none !important;
}
.region.collapsed > .region-h {
  margin-bottom: 0;
}
.fold-controls {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}
.fold-all {
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
}
.fold-all:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
@media print {
  .region.collapsed > :not(.region-h) {
    display: block !important;
  }
  .region-fold,
  .fold-controls {
    display: none !important;
  }
}
.potential {
  margin: 14px 0 0;
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pot-body {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 640px) {
  .pot-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.pot-radar {
  max-width: 300px;
  margin: 0 auto;
}
.pot-list ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.pot-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  line-height: 1.4;
}
.pot-list li > b {
  white-space: nowrap;
}
.pot-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(1px);
}
.pot-list li.chg .pot-dot {
  background: var(--tone);
}
.pot-list li.pot-keep .pot-dot {
  background: transparent;
  border: 1.5px solid var(--line-soft);
}
.pot-list li.pot-keep {
  color: var(--text-muted);
}
.pot-list li.pot-keep b {
  color: var(--text-secondary);
  font-weight: 560;
}
.norwood {
  margin: 14px 0 0;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.nw-scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 6px 0 2px;
}
.nw-head {
  margin: 0;
  text-align: center;
}
.nw-head svg {
  display: block;
  margin: 0 auto;
  max-width: 56px;
}
.nw-head figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 2px;
}
.nw-head.on {
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border-radius: 10px;
  padding: 4px 2px;
}
.nw-head.on figcaption {
  color: var(--tone-deep);
  font-weight: 700;
}
@media (max-width: 520px) {
  .nw-scale {
    gap: 3px;
  }
  .nw-head figcaption {
    font-size: 11px;
  }
}
.sec-head p {
  margin: 14px auto 0;
  max-width: 52ch;
}
.sec-head.left {
  text-align: left;
  margin-left: 0;
}
.sec-head.left p {
  margin-left: 0;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 12px 12px 0;
  pointer-events: none;
  transition: top 0.25s ease;
}
.nav:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 132px;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, #0009 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 46%, #0009 72%, transparent 100%);
}
@media print {
  .nav:before {
    display: none;
  }
}
.nav-in {
  max-width: 1180px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--glass-fill-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
  pointer-events: auto;
  transition: background 0.3s;
}
.nav.on-dark .nav-in {
  background: #171a1d61;
  border-color: #ffffff24;
  color: #fff;
}
@media (max-width: 760px) {
  .nav {
    padding: 8px 8px 0;
    background: linear-gradient(
      180deg,
      var(--bg) 0,
      var(--bg) 8px,
      rgba(244, 240, 232, 0) 100%
    );
  }
  .nav.on-dark {
    background: linear-gradient(180deg, #1b1e21 0 8px, #1b1e2100);
  }
  .nav-in {
    background: #ffffffe0;
  }
  .nav.on-dark .nav-in {
    background: #171a1dc7;
  }
  .nav-in {
    height: 46px;
    gap: 10px;
    padding: 0 5px 0 14px;
  }
  .nav-in .logo {
    font-size: 19px;
  }
  .nav-in .logo svg {
    width: 24px;
    height: 24px;
  }
  .nav-right {
    gap: 4px;
  }
  .nav-in .btn {
    padding: 9px 13px;
    font-size: 13px;
    white-space: nowrap;
  }
  .burger {
    width: 36px;
    height: 36px;
  }
}
.nav.on-dark .logo,
.nav.on-dark .nav-link {
  color: #fff;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 23px;
  color: var(--text-primary);
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}
.logo svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
}
.nav-link:hover {
  text-decoration: none;
  color: var(--text-primary);
}
/* build 166 · the written pages get a way in from the bar itself, not only the burger and the footer */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
}
.nav-links a {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 8px 11px;
  border-radius: 9px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text-primary);
  background: #17171a0a;
}
.nav.on-dark .nav-links a {
  color: #ffffffc7;
}
.nav.on-dark .nav-links a:hover {
  color: #fff;
  background: #ffffff14;
}
@media (max-width: 899px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 640px) {
  .nav-link {
    display: none;
  }
}
.burger {
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  display: grid;
  place-items: center;
  padding: 0;
}
.burger:hover {
  background: #171a1d0f;
}
.burger i {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  border-radius: 2px;
}
.burger i:before,
.burger i:after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.burger i:before {
  top: -6px;
}
.burger i:after {
  top: 6px;
}
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #f4f0e8e6;
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  display: none;
  overflow: auto;
}
.menu.open {
  display: block;
  animation: fadein 0.18s ease;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.menu-close {
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-primary);
  border-radius: 10px;
}
.menu-close:hover {
  background: #171a1d0f;
}
.menu-main {
  margin-top: 40px;
}
.menu-main a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -0.01em;
  font-weight: 400;
  padding: 6px 0;
  color: var(--text-primary);
}
.menu-main a:hover {
  text-decoration: none;
  color: var(--tone-deep);
}
.menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}
.menu-cols a {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.menu-cols a:hover {
  color: var(--text-primary);
}
body.menu-lock {
  overflow: hidden;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 520;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    box-shadow 0.15s;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: scale(0.985);
}
.btn-primary {
  background: var(--tone);
  color: #fff;
}
.btn-primary:hover {
  background: var(--tone-deep);
}
.btn-white {
  background: #fff;
  color: var(--ink);
}
.btn-white:hover {
  background: #f7f5f0;
}
.btn-teal {
  background: var(--tone);
  color: #fff;
}
.btn-teal:hover {
  background: var(--tone-deep);
}
.btn-secondary {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--surface-3);
}
.btn-glass {
  background: #ffffff2e;
  border-color: #ffffff59;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-glass:hover {
  background: #ffffff47;
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn .arr {
  transition: transform 0.15s;
}
.btn:hover .arr {
  transform: translate(3px);
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
}
.card.tight {
  padding: 16px 18px;
}
.card.soft {
  background: var(--surface-2);
  border-color: transparent;
}
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card > b {
  display: block;
  margin: 4px 0 5px;
  font-size: 16px;
  color: var(--text-primary);
}
a.card > span {
  display: block;
  line-height: 1.5;
}
a.card:hover {
  border-color: var(--tone);
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.callout {
  border-left: 2px solid var(--tone);
  background: var(--surface-2);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 18px 0;
}
.callout.good {
  border-left-color: var(--good);
}
.callout.crit {
  border-left-color: var(--crit);
}
.callout.warn {
  border-left-color: var(--warn);
}
.callout.info {
  border-left-color: var(--accent-2);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout .ct {
  font-weight: 560;
  color: var(--text-primary);
  font-size: 14.5px;
  margin-bottom: 5px;
}
blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
blockquote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--text-muted);
  margin-top: 8px;
}
.rows {
  display: grid;
  gap: 10px;
}
.row-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.row-item .th {
  width: 88px;
  height: 64px;
  border-radius: 9px;
  background: var(--slate);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.row-item .th svg,
.row-item .th img,
.row-item .th canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.row-item b {
  display: block;
  font-weight: 540;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.row-item span.d {
  font-size: 13.5px;
  color: var(--text-muted);
}
.row-item .r {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .row-item {
    grid-template-columns: 64px 1fr;
  }
  .row-item .th {
    width: 64px;
    height: 48px;
  }
  .row-item .r {
    display: none;
  }
}
.pill.verdict {
  padding: 3px 8px;
  border-radius: 6px;
  margin: 0;
  border-width: 1px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
  max-width: 100%;
}
/* a pill carrying a sentence wraps instead of running off the side of a phone */
@media (max-width: 600px) {
  .pill {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}
.p-ok {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.p-wr {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: #8a6410;
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}
.p-no {
  background: color-mix(in srgb, var(--crit) 12%, transparent);
  color: var(--crit);
  border-color: color-mix(in srgb, var(--crit) 30%, transparent);
}
.p-nu {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--line);
}
.p-in {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
}
.p-ac {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.p-A {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.p-B {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
}
.p-C {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: #8a6410;
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}
.p-D {
  background: color-mix(in srgb, var(--crit) 12%, transparent);
  color: var(--crit);
  border-color: color-mix(in srgb, var(--crit) 30%, transparent);
}
.p-info {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--line);
}
.tw {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.6px;
  min-width: 560px;
}
th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 500;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface-2);
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--text-secondary);
}
tbody tr:last-child td {
  border-bottom: 0;
}
td strong {
  color: var(--text-primary);
}
.num {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 12.6px;
  white-space: nowrap;
}
.compare td:first-child {
  color: var(--text-primary);
  font-weight: 520;
}
.compare .us {
  background: color-mix(in srgb, var(--tone) 9%, transparent);
}
.compare th.us {
  color: var(--text-primary);
}
footer {
  background: var(--ink);
  color: #aab1b8;
  padding: 64px 0 48px;
  font-size: 13.5px;
  margin-top: 40px;
}
footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
}
footer a {
  color: #dfe3e7;
}
footer .logo {
  color: #fff;
}
footer h4 {
  color: #7d8790;
  margin-bottom: 10px;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer li {
  margin: 0 0 7px;
}
.disclaimer {
  font-size: 12px;
  color: #8a929a;
  line-height: 1.55;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.disclaimer strong {
  color: #e6e9ec;
}
@media (max-width: 760px) {
  footer .cols {
    grid-template-columns: 1fr 1fr;
  }
}
.hero-scroll {
  position: relative;
  height: 420vh;
  background: var(--slate);
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #c3cfd6 0%,
    var(--slate) 55%,
    #adbcc5 100%
  );
}
.hero-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(18px, 4vw, 56px) clamp(24px, 5vh, 56px);
  color: #fff;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero-copy {
    bottom: auto;
    top: 50%;
    transform: translateY(-46%);
    right: auto;
    width: min(440px, 36vw);
  }
  .hero-copy h1 {
    font-size: clamp(44px, 4.6vw, 66px);
  }
}
.hero-copy > * {
  pointer-events: auto;
}
.hero-copy .join {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}
.hero-copy h1 {
  color: #fff;
  max-width: 12ch;
}
@media (max-width: 899px) {
  .hero-copy h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .hero-copy p {
    font-size: 14px;
    margin: 8px 0 14px;
    max-width: 34ch;
  }
  .hero-copy .join {
    display: none;
  }
  .hero-hud {
    top: calc(var(--nav-h) + 10px);
  }
  .hero-cta .btn {
    flex: 1 1 140px;
    padding: 13px 16px;
    font-size: 14.5px;
  }
}
.hero-copy h1 .t2 {
  color: inherit;
}
.hero-copy p {
  color: #ffffffe0;
  font-size: 16px;
  max-width: 52ch;
  margin: 14px 0 22px;
}
.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-cta .btn {
  flex: 1 1 220px;
  max-width: 340px;
}
@media (min-width: 900px) {
  .hero-cta .btn {
    flex: 0 0 auto;
  }
}
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(180deg, #171a1d00, #171a1d8c);
  pointer-events: none;
}
.hero-hud {
  position: absolute;
  top: calc(var(--nav-h) + 22px);
  left: clamp(18px, 4vw, 56px);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}
.hero-hud span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 7px;
  background: #171a1d59;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.35s,
    transform 0.35s;
}
.hero-hud span.on {
  opacity: 1;
  transform: none;
}
.hero-progress {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-progress i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff59;
  transition:
    background 0.3s,
    transform 0.3s;
}
.hero-progress i.on {
  background: #fff;
  transform: scale(1.4);
}
.hero-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translate(-50%);
  color: #ffffffb3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%,
  to {
    transform: translate(-50%);
  }
  50% {
    transform: translate(-50%, 5px);
  }
}
.hero-panel {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, 24vw);
  display: none;
}
@media (min-width: 900px) {
  .hero-panel {
    display: block;
  }
}
.hero-panel .pc {
  background: #ffffffe6;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 10px 30px #141a1e26;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.hero-panel .pc.on {
  opacity: 1;
  transform: none;
}
.hero-panel .pc .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-panel .pc .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-top: 2px;
}
.hero-panel .pc .v small {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
  font-weight: 400;
}
.hero-panel .pc svg {
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.press {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.press-in {
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.press-in span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.press-in i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  display: inline-block;
}
.vcard {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}
.vcard .vis {
  aspect-ratio: 4/3;
  background: var(--slate);
  position: relative;
  overflow: hidden;
}
.vcard .vis canvas,
.vcard .vis svg,
.vcard .vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vcard .cap {
  padding: 18px 20px 22px;
}
.vcard .cap b {
  display: block;
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.vcard .cap span {
  font-size: 14px;
  color: var(--text-muted);
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.step {
  padding: 22px 22px 24px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.step .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
}
.step b {
  display: block;
  font-size: 18px;
  font-weight: 540;
  letter-spacing: -0.015em;
  margin: 10px 0 6px;
}
.step p {
  font-size: 14px;
  margin: 0;
  color: var(--text-muted);
}
.stat {
  padding: 22px 4px;
}
.stat .n {
  font-family: var(--serif);
  font-size: clamp(44px, 5.4vw, 66px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.stat .l {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.45;
  max-width: 30ch;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.report-preview {
  background: var(--slate);
  border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 40px);
  overflow: hidden;
}
.report-preview .sheet {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px #141a1e40;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}
.dark-band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
}
.dark-band h2,
.dark-band strong {
  color: #fff;
}
.dark-band p {
  color: #c2c8ce;
}
.dark-band .t2 {
  color: inherit;
}
.dark-band .btn-primary {
  background: #fff;
  color: var(--ink);
}
.dark-band .btn-secondary {
  background: #ffffff14;
  border-color: #fff3;
  color: #fff;
}
.ba {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--slate);
  aspect-ratio: 4/3;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ba > canvas,
.ba > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ba img,
.ba canvas,
.ba svg,
.ba2 img,
.ba2 canvas,
.ba2 svg {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.ba .top {
  clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0);
}
.ba.patch .top {
  clip-path: inset(0 0 0 var(--x, 50%));
}
.ba .print-after {
  display: none;
}
.ba .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 1.5px;
  background: #fff;
  transform: translate(-0.75px);
  box-shadow: 0 0 0 0.5px #00000040;
  pointer-events: none;
}
.ba .knob {
  position: absolute;
  top: 50%;
  left: var(--x, 50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff59;
  border: 1.5px solid #fff;
  color: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 4px 16px #00000040;
  pointer-events: none;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ba .lbl {
  position: absolute;
  top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  background: #171a1d59;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ba .lbl.l {
  left: 12px;
}
.ba .lbl.r {
  right: 12px;
}
.ba input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  pointer-events: none;
}
.ba input[type="range"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  opacity: 0.001;
}
.alpha {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.alpha label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.alpha input[type="range"] {
  flex: 1;
  min-width: 160px;
  accent-color: var(--ink);
}
.alpha output {
  font-family: var(--mono);
  font-size: 12.5px;
  min-width: 210px;
  color: var(--text-primary);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
select,
input[type="text"],
input[type="email"] {
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14.5px;
  width: 100%;
}
select:focus,
input:focus {
  outline: none;
  border-color: var(--ink);
}
.drop {
  border: 1.5px dashed #b8b0a2;
  border-radius: var(--r-lg);
  padding: 38px 22px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.drop:hover,
.drop.over {
  border-color: var(--ink);
  background: #e4ddcf;
}
.drop input {
  display: none;
}
.photo-preview-frame {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-3);
  overflow: hidden;
}
.photo-preview {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
  image-orientation: from-image;
}
@media (max-width: 640px) {
  .photo-preview-frame {
    max-width: 100%;
    aspect-ratio: 4/3;
  }
}
.drop .ill {
  width: 120px;
  height: 130px;
  margin-bottom: 6px;
  overflow: hidden;
}
.drop .ill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}
.drop .big {
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.choice label {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.choice label:hover {
  border-color: var(--slate-2);
}
.choice input {
  accent-color: var(--ink);
  margin: 0;
}
.choice label:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-2);
}
.slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .slots {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .slots {
    grid-template-columns: repeat(2, 1fr);
  }
}
.slot {
  border: 1px dashed #c9c1b2;
  border-radius: 14px;
  padding: 14px 12px 12px;
  text-align: left;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.slot:hover {
  border-color: var(--ink);
  background: var(--bg);
}
.slot.req {
  border-style: solid;
  border-color: var(--ink);
}
.slot b {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 560;
}
.slot span:not(.ico) {
  line-height: 1.4;
}
.slot em {
  font-style: normal;
  color: var(--tone);
  font-weight: 560;
}
.slot img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface-3);
}
.slot .ico {
  width: 56px;
  height: 63px;
  display: block;
  margin: 0 0 4px -2px;
}
.slot .ico {
  position: relative;
  width: 58px;
  height: 72px;
  margin: 0 0 6px;
  border-radius: 9px;
  overflow: hidden;
  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2060%22%3E%3Crect%20x=%22.9%22%20y=%22.9%22%20width=%2246.2%22%20height=%2258.2%22%20rx=%227%22%20fill=%22%23FBF9F5%22%20stroke=%22%23CFC6B4%22%20stroke-width=%221.4%22/%3E%3C/svg%3E)
    center/100% 100% no-repeat;
}
.slot .ico svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 54px;
  transform: translate(-50%, calc(-50% + var(--hy, 0px))) scale(var(--hs, 0.76));
  transform-origin: 50% 50%;
}
.slot .ico:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--guide,url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2060%22%3E%3Cpath%20d=%22M6%2025H42%22%20stroke=%22%232F6B62%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E)) center/100% 100% no-repeat;
}
.slot:has(input[data-slot="skin"]) .ico {
  --hs: 1.28;
  --hy: 4px;
  --guide: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2060%22%3E%3Cpath%20d=%22M6%2024H42%22%20stroke=%22%232F6B62%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E);
}
.slot:has(input[data-slot="hair"]) .ico {
  --hs: 0.6;
  --hy: 11px;
  --guide: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2060%22%3E%3Cpath%20d=%22M6%2034H42%22%20stroke=%22%232F6B62%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M9%2028H39%22%20stroke=%22%232F6B62%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M24%205.4v19%22%20stroke=%22%23B3ADA1%22%20stroke-width=%221.1%22/%3E%3Cpath%20d=%22M22.5%2022.6l1.5%202.6%201.5-2.6z%22%20fill=%22%23B3ADA1%22/%3E%3Cpath%20d=%22M22.5%207.2l1.5-2.6%201.5%202.6z%22%20fill=%22%23B3ADA1%22/%3E%3C/svg%3E);
}
.slot:has(input[data-slot="hairtop"]) .ico {
  --guide: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2060%22%3E%3Cg%20transform=%22rotate(34%2021%2029)%22%3E%3Cpath%20d=%22M21%2018c5.5%200%209.5%204%209.5%209l1.3%203.5-2.6%201.1c.4%201.4.2%202.4-.6%203.2l.3%201.6c-.5%202.2-2.5%204-4.9%204.4-5%20.8-10-2.4-11.6-7.2-1.4-4.2-.4-10%203-13%201.6-1.5%203.6-2.6%205.6-2.6z%22%20fill=%22%23FBF9F5%22%20stroke=%22%2317171A%22%20stroke-width=%221.6%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2226.2%22%20cy=%2225.6%22%20r=%221.15%22%20fill=%22%2317171A%22/%3E%3Cpath%20d=%22M13.9%2023.4q3.6-6%2012.2-5.2%22%20stroke=%22%232F6B62%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%3C/g%3E%3Crect%20x=%2235%22%20y=%2218.4%22%20width=%227.6%22%20height=%2213%22%20rx=%221.9%22%20fill=%22%2317171A%22/%3E%3Ccircle%20cx=%2238.8%22%20cy=%2222%22%20r=%221.25%22%20fill=%22%23F4F0E8%22/%3E%3Cpath%20d=%22M34.6%2021.6%2019.6%2014.6%22%20stroke=%22%232F6B62%22%20stroke-width=%221.4%22%20stroke-dasharray=%222.4%201.9%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M32.4%2041.6q-3.4%204-8.2%204.6%22%20stroke=%22%23B3ADA1%22%20stroke-width=%221.4%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M25.2%2043.6l-1.6%202.7%203%20.3z%22%20fill=%22%23B3ADA1%22/%3E%3C/svg%3E");
}
.slot:has(input[data-slot="hairtop"]) .ico svg {
  display: none;
}
.slot.done .ico {
  display: none;
}
@media (max-width: 600px) {
  .slot .ico {
    width: 52px;
    height: 65px;
  }
}
@media print {
  .slot .ico {
    background: none;
  }
  .slot .ico:after {
    display: none;
  }
}
.slot .ico svg {
  width: 100%;
  height: 100%;
}
.slot.done {
  border-style: solid;
  border-color: var(--tone);
}
.slot .tag {
  position: absolute;
  top: 6px;
  right: 6px;
}
.views {
  margin-top: 30px;
  padding: 20px 22px 22px;
  background: var(--surface-2);
  border-radius: var(--r-lg);
}
.views-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.views-h > div > b {
  display: block;
  font-size: 17px;
  font-weight: 560;
  margin: 2px 0 4px;
}
.views-h .small {
  display: block;
  max-width: 64ch;
}
.view-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.view-head b {
  font-size: 15px;
}
.slot input {
  display: none;
}
.capture-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.capture-tips div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.capture-tips svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--tone-deep);
}
.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.stepbar {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.stepbar b {
  color: var(--text-primary);
  font-weight: 500;
}
.stepbar .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.stepbar .cur {
  color: var(--text-primary);
  font-weight: 500;
  background: var(--surface-3);
  padding: 4px 9px;
  border-radius: 6px;
}
.check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.check:last-child {
  border-bottom: 0;
}
.check .ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.check.pass .ic {
  background: var(--good);
}
.check.warn .ic {
  background: var(--warn);
  color: #111;
}
.check.reject .ic {
  background: var(--crit);
}
.check.note .ic {
  background: var(--line);
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 600;
}
.check .lbl {
  font-weight: 520;
  color: var(--text-primary);
}
.check .msg {
  grid-column: 2 / -1;
  color: var(--text-secondary);
  font-size: 13px;
  max-width: 78ch;
}
.check .val {
  max-width: 30%;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (max-width: 640px) {
  .check {
    grid-template-columns: auto 1fr;
  }
  .check .val {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    text-align: left;
    font-size: 12px;
  }
  .check .msg {
    grid-column: 2;
    grid-row: 3;
  }
}
.check .val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.progress {
  height: 3px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--ink);
  width: 0;
  transition: width 0.3s;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.report {
  --gap: 22px;
}
.report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px) {
  .report-hero {
    grid-template-columns: 1fr;
  }
}
.photo-frame {
  background: var(--slate);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.photo-frame canvas {
  width: 100%;
  height: auto;
  display: block;
}
.photo-frame .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  background: #171a1d59;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.toggles button {
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
}
.toggles button.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.profile-card {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.profile-card .kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  font-size: 13.5px;
  margin-top: 14px;
}
.profile-card .kv dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.profile-card .kv dd {
  margin: 0;
  color: var(--text-primary);
}
.summary-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-top: var(--gap);
}
.summary-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}
.fp {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-secondary);
}
.region {
  margin-top: 40px;
}
.region .crop {
  align-self: start;
}
.region .feat-grid.one {
  margin-bottom: 10px;
}
.region .metrics > figure:first-child,
.region .metrics > .bas-block:first-child {
  margin-top: 0;
}
.region-body {
  row-gap: 14px;
}
@media (max-width: 900px) {
  .region {
    margin-top: 30px;
  }
  .region-body {
    row-gap: 12px;
  }
}
.region-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.region-h h3 {
  margin: 0;
  font-size: 26px;
}
.region-h .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.region-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px) {
  .region-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.crop {
  background: var(--slate);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: sticky;
  top: var(--crop-stick);
}
.crop canvas {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - var(--crop-stick) - 24px);
  display: block;
  margin-inline: auto;
}
.crop .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  background: #171a1d59;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .crop {
    position: relative;
    top: auto;
  }
  .crop canvas {
    max-height: none;
    width: 100%;
  }
}
.metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.region-body.lean {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .region-body.lean {
    grid-template-columns: 1fr;
  }
}
.metric {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  align-items: start;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.metric:hover {
  border-color: var(--slate-2);
  box-shadow: var(--shadow-sm);
}
.metric .val {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric .val small {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
  font-family: var(--mono);
}
.metric .lbl {
  font-weight: 540;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.metric .txt {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.55;
}
.metric .cav {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
  border-left: 2px solid var(--warn);
  padding-left: 10px;
  line-height: 1.5;
}
.metric .cite {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 8px;
}
.metric .cite a {
  color: var(--text-muted);
}
.metric .curve {
  width: 100%;
  height: auto;
}
.metric details.more {
  margin-top: 8px;
}
.metric details.more summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.metric details.more summary::-webkit-details-marker {
  display: none;
}
.metric details.more summary:before {
  content: "+";
  font-size: 14px;
  line-height: 1;
}
.metric details.more[open] summary:before {
  content: "–";
}
.metric details.more .body {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
[hidden] {
  display: none !important;
}
@media print {
  .metric details.more {
    display: block;
  }
  .metric details.more summary {
    display: none;
  }
  .metric details.more .body {
    display: block;
  }
}
.metric .pctl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}
.metric.locked {
  background: var(--surface-2);
  border-style: dashed;
}
.metric.locked .val {
  filter: blur(0);
  color: var(--text-faint);
}
.metric .lockmark {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 80px;
  color: var(--text-muted);
  font-size: 12.5px;
  gap: 6px;
}
.metric .lockmark svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 700px) {
  .metric {
    grid-template-columns: 1fr;
  }
}
.thirds-viz {
  display: flex;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.thirds-viz div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  font-weight: 500;
}
.lockbox {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  background: var(--surface-2);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.paywall {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
  margin-top: 48px;
}
.paywall h3 {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.03em;
}
.paywall p {
  color: #c2c8ce;
  font-size: 15px;
}
.paywall ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #e6e9ec;
  font-size: 14px;
  display: grid;
  gap: 8px;
}
.paywall li:before {
  content: "— ";
  color: #8fa4ae;
}
.paywall .pw-price {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
}
.paywall .pw-price small {
  font-size: 14px;
  color: #8fa4ae;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 8px;
}
.paywall .btn-white {
  width: 100%;
  margin-top: 16px;
}
@media (max-width: 800px) {
  .paywall {
    grid-template-columns: 1fr;
  }
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gallery div {
  aspect-ratio: 3/4;
  background: var(--slate);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery span {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #171a1d66;
  padding: 3px 7px;
  border-radius: 5px;
}
.proto {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.proto .h {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.proto .h b {
  font-size: 15.5px;
  font-weight: 540;
}
.proto p {
  font-size: 13.6px;
  margin: 8px 0 0;
}
.proto .k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 12px;
}
.crisis {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 18px;
  line-height: 1.5;
}
.faq details {
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.faq summary {
  padding: 18px 0;
  cursor: pointer;
  font-weight: 520;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:after {
  content: "+";
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 300;
}
.faq details[open] summary:after {
  content: "–";
}
.faq .body {
  padding: 0 0 18px;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 70ch;
}
.price {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.price.hi {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.price.hi .kicker,
.price.hi .small,
.price.hi ul,
.price.hi p {
  color: #b8c0c7;
}
.price.hi .p {
  color: #fff;
}
.price .p {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 8px 0 2px;
}
.price .p small {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
}
.price ul {
  padding-left: 0;
  list-style: none;
  margin: 16px 0 22px;
  color: var(--text-secondary);
  font-size: 14px;
  flex: 1;
  display: grid;
  gap: 8px;
}
.price li:before {
  content: "— ";
  color: var(--tone);
}
.bar {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}
.bar .bl {
  color: var(--text-secondary);
  text-align: right;
  font-size: 12.5px;
  line-height: 1.25;
}
.bar .bt {
  height: 12px;
  background: var(--surface-3);
  border-radius: 0 4px 4px 0;
  position: relative;
  overflow: hidden;
}
.bar .bf {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--tone);
}
.bar .bv {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 60px;
  text-align: right;
}
@media (max-width: 640px) {
  .bar {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .bar .bl {
    text-align: left;
  }
}
.print-only {
  display: none;
}
.doc {
  max-width: 860px;
  margin: 0 auto;
}
.doc-hero {
  padding: clamp(64px, 9vw, 104px) 0 30px;
}
.doc-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
}
.doc-hero .lede {
  margin-top: 16px;
}
.doc-toc {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 22px 0 0;
}
.doc-toc a {
  font-size: 12.5px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-1);
}
.doc-toc a:hover {
  text-decoration: none;
  border-color: var(--ink);
  color: var(--text-primary);
}
.doc h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-top: 64px;
  scroll-margin-top: 90px;
}
/* ── Reading the written pages ────────────────────────────────────────────────────────────────
   These pages were set at 860px and 15.5px, which is about 95 characters a line: too wide to
   track comfortably, and it is part of why they read as a wall. 68ch and 16.5px is the range
   long-form text is normally set at. The rule above each section gives the page a spine without
   adding weight, and the lede reads as a standfirst rather than as the first body paragraph. */
.doc p,
.doc li,
.doc dd {
  max-width: 68ch;
}
.doc-hero .lede {
  font-size: clamp(17.5px, 2vw, 20px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
}
.doc h2 {
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.doc-hero + h2,
.doc-hero + section > h2:first-child {
  margin-top: 26px;
}
.doc h2 + p,
.doc h2 + .sect-help {
  margin-top: 14px;
}
.doc .tw,
.doc table,
.doc figure,
.doc .ladder,
.doc .callout {
  max-width: none;
}
/* a number worth stopping on, pulled out of the sentence it was buried in */
.doc .keynum {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--surface-2);
  border-radius: var(--r-3, 14px);
  max-width: 68ch;
}
.doc .keynum b {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 400;
  line-height: 1;
  color: var(--tone);
  flex: none;
}
.doc .keynum span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
@media (max-width: 560px) {
  .doc .keynum {
    gap: 12px;
    padding: 15px 16px;
  }
}
/* share-of-sample bars inside a table cell: the number and its size in one glance */
.cbar {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 10px;
  align-items: center;
  margin: 3px 0;
}
.cbar i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tone) 26%, transparent);
  position: relative;
}
.cbar i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: 4px;
  background: var(--tone);
}
.cbar em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cbar-l {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 7px;
}
.doc h3 {
  font-size: 19px;
  margin-top: 30px;
}
.doc p,
.doc li {
  font-size: 16.5px;
  line-height: 1.68;
}
.doc details {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 18px;
  margin: 12px 0;
  background: var(--surface-1);
}
.doc summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 520;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.doc summary::-webkit-details-marker {
  display: none;
}
.doc summary:after {
  content: "+";
  color: var(--text-muted);
  font-size: 18px;
}
.doc details[open] summary:after {
  content: "–";
}
.doc details .body {
  padding: 0 0 16px;
}
.diagram {
  background: var(--slate);
  border-radius: var(--r-lg);
  padding: 8px;
  overflow: hidden;
}
.diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
.diagram-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  margin: 10px 0 0;
  text-transform: uppercase;
}
.pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.pipeline > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 16px;
  background: var(--surface-1);
  position: relative;
}
.pipeline div .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.pipeline div b {
  display: block;
  font-weight: 540;
  font-size: 14.5px;
  margin: 8px 0 3px;
  letter-spacing: -0.01em;
}
.pipeline div span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  display: block;
}
.formula {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--text-primary);
  overflow-x: auto;
  margin: 14px 0;
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.facts > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.facts .v .pill {
  white-space: normal;
}
.facts .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts .v {
  font-size: 16px;
  font-weight: 520;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.insight-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.insight-card:hover {
  border-color: var(--slate-2);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.insight-card .vis {
  aspect-ratio: 4/3;
  background: var(--slate);
}
.insight-card .vis svg {
  width: 100%;
  height: 100%;
}
.insight-card .cap {
  padding: 14px 16px 16px;
}
.insight-card .cap b {
  display: block;
  font-weight: 540;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.insight-card .cap span {
  font-size: 12.5px;
  color: var(--text-muted);
}
.insight-card .cap .pill {
  margin-bottom: 8px;
}
.auth-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bg);
  padding: 90px 18px 40px;
}
.auth-card {
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  padding: 34px 32px 30px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 80px #17171a2e;
}
.auth-card h1 {
  font-size: 34px;
  color: #fff;
}
.auth-card h1 .t2 {
  color: inherit;
}
.auth-card p {
  color: #fffc;
  font-size: 14px;
}
.auth-card input {
  background: #ffffff1a;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14.5px;
  width: 100%;
  margin-bottom: 10px;
}
.auth-card input::placeholder {
  color: #ffffff8c;
}
.auth-card input:focus {
  border-color: #fff;
}
.auth-card .btn {
  width: 100%;
}
.auth-card .or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff8c;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 16px 0;
}
.auth-card .or:before,
.auth-card .or:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #fff3;
}
.auth-msg {
  margin-top: 12px;
  font-size: 13px;
  color: #fff;
  min-height: 1.2em;
}
.acct-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 110px;
}
.owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rlist {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.rlist .r {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rlist .r b {
  font-weight: 540;
}
.rlist .r span {
  font-size: 13px;
  color: var(--text-muted);
}
.userchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.userchip i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.userchip i {
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .userchip {
    padding: 5px;
    gap: 0;
  }
  .userchip .who {
    display: none;
  }
}
main.pad {
  padding-top: calc(var(--nav-h) + 40px);
}
@page {
  margin: 14mm;
}
@media print {
  :root {
    --bg: #fff;
    --surface-1: #fff;
    --surface-2: #f4f4f2;
    --surface-3: #ececea;
    --line: #cfcfc9;
    --line-soft: #e3e3df;
    --text-primary: #000;
    --text-secondary: #333;
    --text-muted: #666;
    --text-faint: #888;
    --accent: #000;
    --accent-2: #1d5fb0;
    --good: #177a52;
    --warn: #a06a00;
    --crit: #b93a3a;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11.5pt;
  }
  .nav,
  .menu,
  .no-print,
  footer .cols,
  .toggles,
  .alpha,
  .btn,
  .tabs,
  .paywall,
  .hero-hint,
  .promo-bar,
  .mnt-bar,
  .bj-chip,
  .bj-overlay,
  .cam,
  .pay-modal,
  .ms-overlay,
  .restore-bar,
  .teaser-bar,
  .act-row {
    display: none !important;
  }
  .subnav,
  .crop,
  .act-row,
  .hero-stage,
  .hero3 .stage,
  .sticky,
  [style*="position:sticky"] {
    position: relative !important;
    inset: auto !important;
  }
  .crop canvas {
    max-height: none !important;
    width: 100% !important;
  }
  .print-only {
    display: block;
  }
  .wrap {
    max-width: none;
    padding: 0;
  }
  main.pad {
    padding-top: 0;
  }
  section {
    padding: 14pt 0;
    break-inside: auto;
  }
  .metric {
    grid-template-columns: 1fr 160px;
    break-inside: avoid;
    border-color: #ddd;
  }
  .region-body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10pt;
  }
  .region-body .crop {
    max-width: 96mm;
    margin: 0 auto 8pt;
  }
  .crop {
    position: relative;
    top: auto;
  }
  .card,
  .metric,
  .proto,
  .stat {
    box-shadow: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .metric .cite a:after {
    content: " (" attr(href) ")";
    font-size: 9px;
  }
  h2,
  .region-h {
    break-after: avoid;
  }
  .ba {
    aspect-ratio: auto;
    height: 280pt;
  }
}
@media (max-width: 700px) {
  .press-in {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 22px;
    scrollbar-width: none;
  }
  .press-in span {
    white-space: nowrap;
  }
}
.cast {
  display: block;
  width: 100%;
  height: auto;
}
.cast .ink {
  fill: var(--ink);
}
.cast .teal {
  fill: var(--tone);
}
.hero3 {
  position: relative;
  background: var(--bg);
}
.hero3 .stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  align-items: safe center;
  overflow: hidden;
}
.hero3 .stage-in {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 26px 22px;
}
.hero3 .stage-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px) minmax(0, 200px);
  gap: 18px 36px;
  align-items: center;
}
@media (min-width: 900px) and (max-width: 1120px) {
  .hero3 .stage-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 232px) minmax(0, 152px);
    gap: 12px 20px;
  }
}
@media (min-width: 1121px) and (max-width: 1320px) {
  .hero3 .stage-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 296px) minmax(0, 184px);
    gap: 16px 30px;
  }
}
@media (min-width: 1461px) {
  .hero3 .stage-in {
    max-width: 1290px;
  }
}
.hero3 .copy {
  position: relative;
  width: auto;
  max-width: 640px;
  z-index: 2;
}
.hero3 .copy h1 {
  max-width: none;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 0.98;
  font-size: clamp(34px, 5.05vw, 68px);
  color: var(--text-primary);
}
@media (max-width: 899px) {
  .hero3 .copy h1 {
    letter-spacing: -0.018em;
    line-height: 1.04;
  }
}
/* build 168 · the front page headline, treatment 03: the answer line in the serif italic and the
   site green. Italic and colour together read as a change of voice rather than as a highlighter. */
.hero3 .copy h1 .hl2 {
  display: block;
  font-style: italic;
  color: var(--tone);
  font-weight: 400;
}
@media (min-width: 900px) {
  .hero3 .copy .hero-points p {
    padding: 10px 0;
    font-size: 15.5px;
  }
  .hero3 .copy .hero-points {
    margin: 14px 0 18px;
  }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero3 .panel .hint {
    display: none;
  }
  .hero3 .copy .hero-points p {
    padding: 7px 0;
  }
  .hero3 .copy .hero-points {
    margin: 10px 0 14px;
  }
}
@media (min-width: 900px) and (max-height: 700px) {
  .hero3 .copy h1 {
    font-size: clamp(34px, 4.4vw, 58px);
  }
  .hero3 .copy .hero-points p:nth-child(4) {
    display: none;
  }
}
@media (min-width: 900px) and (max-height: 620px) {
  .hero3 .copy .eyebrow {
    display: none;
  }
  .hero3 .copy .hero-points p:nth-child(2) {
    display: none;
  }
}
.hero3 .copy p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-primary);
  max-width: 44ch;
  margin: 18px 0 24px;
}
.hero3 .copy p .sub2 {
  display: block;
  margin-top: 9px;
  color: var(--text-secondary);
}
.hero3 .cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero3 .fig {
  position: relative;
  width: 100%;
  aspect-ratio: 870/1408;
  justify-self: center;
  align-self: center;
  margin-inline: auto;
  z-index: 1;
  max-width: min(100%, calc((88svh - var(--nav-h)) * 870 / 1408));
}
.hero3 .panel {
  z-index: 2;
}
.hero3 .fig.scan {
  background: transparent;
  border-radius: 18px 18px 0 0;
  overflow: visible;
}
.hero3 .scan-win {
  position: absolute;
  inset: 0;
}
.hero3 .fig svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease;
}
.hero3 .fig .lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero3 .fig .lines line,
.hero3 .fig .lines path {
  stroke: var(--tone);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition:
    stroke-dashoffset 0.5s ease,
    opacity 0.3s;
}
.hero3 .fig .lines .thirds {
  stroke: var(--rust);
}
.hero3 .fig .lines .on {
  stroke-dashoffset: 0;
}
.hero3 .fig .lines .dot {
  fill: var(--tone);
  stroke: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.hero3 .fig .lines .dot.on {
  opacity: 1;
}
.hero3 .fig .after {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.05s linear;
}
.hero3 .fig .split {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 1.5px;
  background: var(--ink);
  left: 100%;
  opacity: 0;
  pointer-events: none;
}
.hero3 .fig .split-lbl {
  position: absolute;
  top: 2%;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.hero3 .fig .split-lbl.on {
  opacity: 1;
}
.hero3 .panel {
  position: relative;
  width: auto;
  display: none;
  gap: 10px;
}
@media (min-width: 900px) {
  .hero3 .panel {
    display: grid;
  }
}
.hero3 .pc {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.hero3 .pc.on {
  opacity: 1;
  transform: none;
}
.hero3 .pc .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero3 .pc .v {
  font-family: var(--serif);
  font-size: 28px;
  margin-top: 2px;
}
.hero3 .pc .v small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}
.hero3 .hud {
  position: absolute;
  left: 22px;
  top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hero3 .hud span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.35s,
    transform 0.35s;
  position: absolute;
  left: 0;
  white-space: nowrap;
}
.hero3 .hud span.on {
  opacity: 1;
  transform: none;
}
.hero3 .dots {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
}
@media (min-width: 900px) {
  .hero3 .dots {
    display: none;
  }
}
.hero3 .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.22;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.hero3 .dots i.on {
  opacity: 1;
  transform: scale(1.4);
}
.hero3 .hint {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  margin: 0 0 4px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  transition: opacity 0.45s ease;
}
.hero3 .hint svg {
  width: 20px;
  height: 28px;
  flex: none;
  color: var(--tone);
  animation: cx-bob 2.1s ease-in-out infinite;
}
.hero3 .hint b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.15;
  color: var(--ink);
}
.hero3 .hint span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
@keyframes cx-bob {
  0%,
  to {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero3 .hint svg {
    animation: none;
  }
}
@media (max-width: 899px) {
  .hero3 .copy h1 {
    font-size: clamp(29px, 7.8vw, 38px);
    line-height: 1.04;
  }
  .hero3 .copy p {
    font-size: 14px;
    margin: 6px 0 10px;
    max-width: 36ch;
  }
  .hero3 .copy .eyebrow {
    margin-bottom: 8px;
  }
  .hero3 .hud {
    top: calc(var(--nav-h) + 6px);
  }
}
@media (max-width: 899px) {
  .hero3 .fig .split-lbl {
    top: auto;
    bottom: -24px;
    font-size: 9px;
    padding: 3px 6px;
  }
  .hero3 .fig .split-lbl.r {
    right: 0 !important;
  }
  .hero3 .fig .split-lbl.l {
    left: 0 !important;
  }
}
@media (max-height: 700px) and (max-width: 899px) {
  .hero3 .fig {
    max-width: min(190px, 42vw);
  }
  .hero3 .copy p {
    display: none;
  }
}
.hero3 .stage-in > .fig {
  align-self: center;
  justify-self: center;
}
.ba-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
.ba-card {
  margin: 0;
  min-width: 0;
}
.ba-cap {
  margin: 9px 2px 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-secondary);
  text-align: center;
}
@media (max-width: 760px) {
  .ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    overflow: visible;
  }
  .ba-grid .ba-card {
    max-width: none;
    min-width: 0;
  }
  .ba-cap {
    font-size: 11.5px;
    line-height: 1.3;
    margin: 7px 1px 0;
  }
  .ba-grid .ba2 .lbl {
    letter-spacing: 0.02em;
    padding: 3px 6px;
    top: 8px;
  }
  .ba-grid .ba2 .grip {
    width: 34px;
    height: 34px;
  }
  .ba-grid .ba2 {
    max-width: none;
    touch-action: pan-y;
    cursor: ew-resize;
  }
  .ba-grid .ba2 .divider {
    width: 2px;
  }
}
.ba-swipe {
  display: none;
}
.ba2 {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1/1;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  --x: 50%;
}
.ba2 img {
  position: absolute;
  display: block;
  object-fit: fill;
  max-width: none;
}
.ba2.groom img {
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba2.groom .topwrap .flaws {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba2 .topwrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.ba2.patch .topwrap {
  clip-path: inset(0 0 0 var(--x));
}
.ba2 .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  background: var(--ink);
  transform: translate(-1px);
  pointer-events: none;
}
.ba2 .grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 14px #17171a24;
}
.ba2 .grip i {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  display: block;
}
.ba2 .grip i:first-child {
  border-right: 6px solid var(--ink);
}
.ba2 .grip i:last-child {
  border-left: 6px solid var(--ink);
}
.ba2 .lbl {
  position: absolute;
  top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  pointer-events: none;
}
.ba2 .lbl.l {
  left: 10px;
}
.ba2 .lbl.r {
  right: 10px;
  background: var(--tone);
}
.ba2 input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.ba2 input[type="range"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  opacity: 0.001;
}
.ba.snapping .top,
.ba2.snapping .topwrap,
.ba.snapping .handle,
.ba.snapping .knob,
.ba2.snapping .divider {
  transition:
    clip-path 0.18s ease,
    left 0.18s ease;
}
@media (hover: none) {
  .ba .knob,
  .ba2 .grip {
    width: 44px;
    height: 44px;
  }
}
.ba2 .cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: #fbf9f5e6;
  border-radius: 8px;
  padding: 6px 9px;
  pointer-events: none;
  text-align: center;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  max-width: 840px;
  margin-inline: auto;
}
.tier {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier.hi {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tier.hi .muted,
.tier.hi li,
.tier.hi p {
  color: #c9c6bd;
}
.tier .p {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  margin: 10px 0 2px;
}
.tier .p small {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-left: 8px;
  color: var(--text-muted);
}
.tier.hi .p small {
  color: #a9a69d;
}
.tier ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 22px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  flex: 1;
}
.tier li:before {
  content: "— ";
  color: var(--tone);
}
.tier .best {
  position: absolute;
  top: -11px;
  left: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--tone);
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
}
.tier .gift {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
}
.tier.hi .gift a {
  color: #fff;
}
.legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #8a929a;
  margin-top: 14px;
}
.legal-links a {
  color: #aab1b8;
}
.checkout {
  max-width: 560px;
  margin: 0 auto;
}
.checkout .opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--surface-1);
}
.checkout .opt:has(input:checked) {
  border-color: var(--ink);
}
.checkout textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--surface-1);
}
.notice {
  font-size: 12.5px;
  color: var(--text-muted);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.figwrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.figwrap img {
  display: block;
  width: 100%;
  height: auto;
}
.figwrap .lines,
.hero3 .fig .lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lines.static line {
  stroke: var(--tone);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.lines.static .thirds {
  stroke: var(--rust);
}
.lines.static .dot {
  fill: var(--tone);
}
.figwrap.crop-eyes {
  overflow: hidden;
  height: 100%;
}
.figwrap.crop-eyes img {
  width: 170%;
  margin-left: -35%;
  margin-top: -18%;
}
.hero3 .fig img:not(.fs-layer) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero3 .fig img.pair {
  inset: auto;
  object-fit: fill;
  max-width: none;
}
.hero3 .fig .split {
  width: 2px;
  top: 0;
  bottom: 0;
  transform: translate(-1px);
}
.hero3 .fig .flawwrap {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hero3 .fig .flawwrap .flaws {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vcard .vis {
  aspect-ratio: 4/3;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.vcard .vis .figwrap {
  max-width: 62%;
  margin: 0 auto;
}
.report-preview {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 40px);
  overflow: hidden;
}
.report-preview .sheet {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px #17171a1f;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}
.glance {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.region-h {
  flex-wrap: wrap;
}
.glance-grid {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.gl-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 44px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.gl-row .gl-l {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-bar {
  position: relative;
  height: 10px;
  background: var(--surface-3);
  border-radius: 5px;
}
.gl-bar b {
  position: absolute;
  inset: 0 25%;
  background: var(--pop);
  border-radius: 5px;
  opacity: 0.7;
}
.gl-bar i {
  position: absolute;
  top: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  left: calc((100% - 16px) * var(--at, 0));
  transform: none;
  z-index: 1;
  border: 2px solid var(--surface-1);
}
.gl-row.locked .gl-bar i {
  background: var(--text-faint);
}
.gl-p {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}
.why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.why .w {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: var(--surface-1);
}
.why .w b {
  font-family: var(--serif);
  font-size: 30px;
  display: block;
  line-height: 1;
}
.why .w span {
  display: block;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.why .w cite {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: normal;
  text-transform: uppercase;
}
.subnav {
  position: sticky;
  top: calc(var(--nav-h) + 6px);
  z-index: 61;
  background: none;
  border-bottom: 0;
  padding: 0 12px;
  pointer-events: none;
}
.subnav-in {
  width: -moz-max-content;
  width: max-content;
  max-width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  height: 44px;
  border-radius: 999px;
  pointer-events: auto;
}
.subnav-in::-webkit-scrollbar {
  display: none;
}
.subnav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subnav a:hover {
  color: var(--text-primary);
}
.subnav a.on {
  color: var(--tone);
  border-bottom-color: var(--tone);
  border-radius: 0;
}
.subnav a.go {
  margin-left: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  position: relative;
}
/* the chevron that says the pill has more of itself to the right, and the soft edge that makes a
   cut-off name read as "there is more" rather than as a mistake */
.subnav {
  position: sticky;
}
.subnav-more {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glass-rim);
  background: var(--surface-1);
  color: var(--text-secondary);
  box-shadow: 0 2px 8px #17171a1f;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.subnav-more svg {
  width: 15px;
  height: 15px;
}
.subnav.can-scroll:not(.at-end) .subnav-more {
  display: grid;
}
.subnav.can-scroll:not(.at-end) .subnav-in {
  padding-right: 42px;
}
@media print {
  .subnav-more {
    display: none !important;
  }
}
.subnav a.go:before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
@media (max-width: 700px) {
  .subnav a.go {
    display: none;
  }
}
.gallery.locked div {
  background: transparent;
}
.gallery.locked .ph {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-2) 0 8px,
    var(--surface-1) 8px 16px
  );
  border: 1px dashed var(--line);
}
.gallery.locked span {
  color: var(--text-secondary);
  background: var(--bg);
}
.mnt-body {
  background: var(--bg);
}
.mnt {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 40px 22px;
}
.mnt-in {
  max-width: 520px;
  width: 100%;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-inline: auto;
}
.mnt-in > * {
  margin-inline: auto;
}
.mnt-in h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin: 6px 0 10px;
  text-wrap: balance;
}
.mnt-in p {
  color: var(--text-secondary);
  max-width: 46ch;
  margin-inline: auto;
}
.mnt-in .figwrap {
  margin-bottom: 10px;
}
.mnt-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--rust);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-align: center;
}
.promo-bar {
  background: var(--tone);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  padding: 9px 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 62;
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.promo-bar.gone {
  transform: translateY(-100%);
}
body.has-promo .nav {
  top: var(--promo-h, 36px);
  transition: top 0.25s ease;
}
body.has-promo.promo-hidden .nav {
  top: 0;
}
body.has-promo {
  padding-top: var(--promo-h, 36px);
}
body.has-promo .subnav {
  top: calc(var(--nav-h) + 6px + var(--promo-h, 36px));
  transition: top 0.25s ease;
}
@media (min-width: 900px) {
  body.has-promo .hero3 .stage {
    top: calc(var(--nav-h) + var(--promo-h, 36px));
    height: calc(100svh - var(--nav-h) - var(--promo-h, 36px));
  }
  body.has-promo.promo-hidden .hero3 .stage {
    top: var(--nav-h);
    height: calc(100svh - var(--nav-h));
  }
  /* the bar takes a band of the window, so the hero gives the same band back: the cue card goes
     and the point list tightens, the way it does in any other short window */
  body.has-promo .hero3 .panel .hint {
    display: none;
  }
  body.has-promo .hero3 .copy .hero-points p {
    padding: 7px 0;
  }
  body.has-promo .hero3 .copy .hero-points {
    margin: 10px 0 14px;
  }
  body.has-promo .hero3 .fig {
    max-width: min(100%, calc((88svh - var(--nav-h) - var(--promo-h, 36px)) * 870 / 1408));
  }
}
@media (min-width: 900px) and (max-height: 745px) {
  body.has-promo .hero3 .copy h1 {
    font-size: clamp(34px, 4.4vw, 58px);
  }
  body.has-promo .hero3 .copy .hero-points p:nth-child(4) {
    display: none;
  }
}
@media (max-width: 899px) {
  body.has-promo .hero3 .stage {
    top: calc(var(--nav-h) + var(--promo-h, 36px));
  }
  body.has-promo.promo-hidden .hero3 .stage {
    top: var(--nav-h);
  }
}
body.has-promo.promo-hidden .subnav {
  top: calc(var(--nav-h) + 6px);
}
@media (max-width: 600px) {
  .promo-bar {
    font-size: 12px;
    padding: 7px 12px;
  }
}
.nf {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px 22px 60px;
}
.faq.compact details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 8px;
  background: var(--surface-1);
}
.faq.compact summary {
  padding: 12px 0;
  font-size: 14.5px;
  cursor: pointer;
}
.faq.compact .body {
  padding: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
#p-store input[type="text"],
#p-store input[type="url"],
#p-store input[type="number"],
#p-store input[type="email"],
#p-store textarea {
  width: 100%;
  margin-top: 4px;
}
#p-store label.small {
  display: block;
}
.cam {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #17171ad1;
  display: grid;
  place-items: center;
  padding: 16px;
}
.cam-in {
  background: var(--ink);
  color: #f4f0e8;
  border-radius: 18px;
  width: min(560px, 100%);
  overflow: hidden;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.cam-in > .cam-top {
  flex: 0 0 auto;
}
.cam-in > .cam-actions {
  flex: 0 0 auto;
  margin-top: auto;
}
.cam-in > .cam-hint {
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.cam-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 15px;
}
.cam-x {
  background: none;
  border: 0;
  color: #f4f0e8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.cam-stage {
  position: relative;
  background: #000;
  aspect-ratio: 4/3;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 52dvh;
}
.cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cam-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cam-angle {
  position: absolute;
  right: 10px;
  top: 10px;
  opacity: 0.9;
}
.cam-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 96px;
  color: #f4f0e8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.cam-hint {
  font-size: 13px;
  color: #cfc8ba;
  padding: 10px 16px 0;
  margin: 0;
}
.cam-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 16px;
  flex-wrap: wrap;
}
.cam-actions .btn-secondary {
  background: transparent;
  color: #f4f0e8;
  border-color: #f4f0e859;
}
.cam-actions .cam-flip {
  white-space: normal;
  text-align: center;
  max-width: min(230px, 52%);
  line-height: 1.25;
}
.cam-actions .cam-flip[data-mode="mirror"][aria-pressed="true"] {
  background: #f4f0e829;
  border-color: #f4f0e899;
  color: #fff;
}
.cam-actions .cam-flip[data-mode="mirror"]:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(244, 240, 232, 0.55);
  background: transparent;
  transition: background 0.15s;
}
.cam-actions .cam-flip[data-mode="mirror"][aria-pressed="true"]:before {
  background: #f4f0e8;
}
@media (max-width: 420px) {
  .cam-actions .cam-flip {
    max-width: 100%;
    flex: 1 1 100%;
    order: 3;
  }
}
.slot-cam {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ink);
  color: #f4f0e8;
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.25;
  z-index: 3;
}
.slot-cam:hover {
  background: var(--tone-deep);
}
/* build 190: the guided-camera button on each card is the thing to press, so it looks like one */
.slot-cam {
  padding: 8px 13px;
  font-size: 12.5px;
  background: var(--tone-deep, #1f4a44);
  box-shadow: 0 2px 8px rgba(23, 23, 26, 0.25);
}
.slot-cam-inline {
  display: inline-block;
  background: var(--tone-deep, #1f4a44);
  color: #f4f0e8;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: 1px;
}
/* until a photo is picked, the guided camera is the primary action on the front step */
#analyze-row:has(#analyze:disabled) button#use-camera.btn.btn-secondary {
  background-color: #2a5f57;
  color: #f4f0e8;
  border-color: transparent;
  box-shadow:
    inset 0 0 0 3px #2a5f57,
    inset 0 0 0 4px #f4f0e84d,
    inset 0 0 0 999px #2a5f57,
    0 8px 18px -12px #245149a6;
}
#analyze-row:has(#analyze:disabled) button#use-camera.btn.btn-secondary:hover {
  background-color: #245149;
  box-shadow:
    inset 0 0 0 3px #245149,
    inset 0 0 0 4px #f4f0e873,
    inset 0 0 0 999px #245149,
    0 14px 26px -14px #245149b3;
}
#analyze-row:has(#analyze:disabled) #analyze {
  order: 2;
}
.refstrip .docket-out {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.refstrip.share .rs-code {
  font-size: 15px;
}
.slot-note {
  display: block;
  color: var(--text-muted);
}
.slot-note.ok {
  color: var(--good);
}
.slot-note.warn {
  color: var(--warn);
}
.slot-note.bad {
  color: var(--crit);
}
.slot-note.slot-ear {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.slot-retake {
  display: inline-block;
  margin: 6px 0 0;
  background: var(--ink);
  color: #f4f0e8;
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.25;
}
.slot-retake:hover {
  background: var(--tone-deep);
}
.choice.big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choice.big label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.choice.big label:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-2);
}
.choice.big input {
  margin-bottom: 2px;
}
.choice.big b {
  font-size: 15px;
}
.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.unit-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text-secondary);
}
.unit-toggle button.on {
  background: var(--ink);
  color: #fff;
}
.hairline-cta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tone);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}
.hairline-cta svg {
  color: var(--tone);
  flex: none;
  margin-top: 2px;
}
.hairline-cta b {
  display: block;
  font-size: 14px;
}
.hairline-cta span {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.hairline-cta.done {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 8%, transparent);
}
.hairline-cta.done svg {
  color: var(--good);
}
abbr.term {
  text-decoration: none;
  border-bottom: 1px dotted var(--text-faint);
  cursor: help;
}
abbr.term:hover {
  border-bottom-color: var(--tone);
}
.metric .candid {
  margin-top: 8px;
  padding: 8px 11px;
  border-left: 3px solid var(--rust);
  background: var(--surface-1);
  border-radius: 0 6px 6px 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.style-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px;
}
.style-card .h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.style-card .h b {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone);
}
.style-card .t {
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 6px;
  color: var(--text-primary);
}
.style-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.style-card .views-note {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--tone-deep);
  font-style: italic;
}
.harmony {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: 12px;
}
.harmony .kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tone);
  margin-bottom: 6px;
}
.harmony p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-primary);
}
@media print {
  abbr.term {
    border-bottom: none;
  }
  .style-card {
    break-inside: avoid;
  }
}
abbr.term {
  cursor: pointer;
  border-bottom: 1px dashed var(--tone);
  color: inherit;
}
.pill[data-def] {
  cursor: pointer;
}
.term-pop {
  position: absolute;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 12px 32px #00000047;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: pop 0.14s ease-out;
}
.term-pop b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
}
.term-pop a {
  color: #cfe3de;
  font-size: 12px;
  margin-top: 4px;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.metric .define {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: -2px 0 8px;
  line-height: 1.45;
}
.metric .define:before {
  content: "What it is · ";
  color: var(--tone);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pill.verdict {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.metric.locked .define {
  opacity: 0.85;
}
.view-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.view-thumbs figure {
  margin: 0;
  width: 78px;
}
.view-thumbs img {
  width: 78px;
  height: 98px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  background: var(--surface-2);
}
.view-thumbs figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
  text-align: center;
}
.region-views {
  padding: 10px 0 0;
}
.region-views.locked {
  opacity: 0.75;
}
.look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.look-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.look-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.45;
}
.look-txt b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
}
.ba.look {
  background: var(--surface-2);
  aspect-ratio: 4/5;
}
.ba.look .handle {
  background: #fff;
  width: 1.5px;
  box-shadow: 0 0 6px #00000047;
}
.ba.look .knob {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fffffff0;
  border: 0;
  color: var(--ink);
  box-shadow: 0 2px 10px #00000047;
  gap: 3px;
  top: 46%;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ba.look .knob i {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  display: block;
}
.ba.look .knob i:first-child {
  border-right: 5px solid var(--ink);
  border-left: 0;
}
.ba.look .knob i:last-child {
  border-left: 5px solid var(--ink);
  border-right: 0;
}
.ba.look .lbl {
  top: 14px;
  background: #fff;
  color: var(--ink);
  border: 0;
  border-radius: 5px;
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: 0.13em;
  box-shadow: 0 1px 6px #00000029;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ba.look .lbl.l {
  left: 14px;
  opacity: clamp(0, calc((var(--xn, 0.5) - 0.1) * 14), 1);
  transition: opacity 0.12s linear;
}
.ba.look .lbl.r {
  right: auto;
  left: max(calc(var(--x, 50%) + 12px), 104px);
  opacity: clamp(0, calc((0.95 - var(--xn, 0.5)) * 14), 1);
  transition: opacity 0.12s linear;
}
.ba.look .look-stamp {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #17171a6b;
  border-radius: 5px;
  padding: 6px 8px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (max-width: 560px) {
  .ba.look .lbl {
    font-size: 9.5px;
    padding: 5px 8px;
    top: 10px;
  }
  .ba.look .lbl.l {
    left: 10px;
  }
  .ba.look .lbl.r {
    left: calc(var(--x, 50%) + 8px);
  }
  .ba.look .look-stamp {
    font-size: 8px;
    left: 9px;
    bottom: 9px;
    padding: 5px 6px;
  }
}
.ba.look > img {
  object-fit: cover;
}
.look-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  color: var(--text-primary);
  background: linear-gradient(180deg, #fbf9f58c, #fbf9f5e6);
}
.ba.look.pending .bottom {
  filter: saturate(0.6) blur(1px);
}
.look-veil b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
}
.look-veil .cx-scan {
  margin-bottom: 2px;
}
.summary-card.standing .stand-top {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
}
.stand-num {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stand-num small {
  font-size: 18px;
  color: var(--text-muted);
  margin-left: 2px;
}
.stand-top > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stand-bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--surface-2),
    color-mix(in srgb, var(--tone) 40%, transparent),
    var(--surface-2)
  );
  margin: 14px 0 22px;
}
.stand-bar i {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  transform: translate(-50%);
  box-shadow: 0 2px 6px #0003;
}
.stand-bar span {
  position: absolute;
  top: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stand-bar .a {
  left: 0;
}
.stand-bar .b {
  right: 0;
}
.stand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .stand-grid {
    grid-template-columns: 1fr;
  }
}
.tier-strip {
  margin-top: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: 16px 18px;
}
.ts-head {
  font-size: 14px;
  margin-bottom: 12px;
}
.ts-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ts-col {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
}
.ts-col.on {
  border-color: var(--tone);
  box-shadow: inset 0 0 0 1px var(--tone);
}
.ts-col b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
}
.ts-col ul {
  margin: 0;
  padding-left: 16px;
  line-height: 1.55;
  flex: 1;
  color: var(--text-secondary);
}
.ts-col .btn,
.ts-col .pill {
  align-self: flex-start;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .ts-cols {
    grid-template-columns: 1fr;
  }
}
.slot.over {
  border-color: var(--tone);
  background: color-mix(in srgb, var(--tone) 8%, var(--surface-1));
}
@media print {
  .tier-strip,
  .look-veil {
    display: none !important;
  }
  .look-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ba.look {
    aspect-ratio: 4/5;
    height: auto;
  }
  .alt-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.region.part {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.region-why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 92ch;
  margin: -4px 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--tone);
  background: var(--surface-1);
  border-radius: 0 12px 12px 0;
}
.region-why b {
  color: var(--text-primary);
  font-weight: 600;
}
.region-why .tiny {
  display: block;
  margin-top: 4px;
}
.region-plan {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.region-plan .kicker {
  margin-bottom: 6px;
}
.region-plan.locked {
  border-style: dashed;
}
.rp-item {
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}
.rp-item:first-of-type {
  border-top: 0;
}
.rp-h {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.rp-h .rp-t {
  color: var(--text-muted);
  font-size: 13px;
}
.rp-item p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.summary-card.bottomline {
  border-left: 4px solid var(--rust);
}
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.bl-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.bl-list li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.summary-card .bl-verdict,
.bl-verdict {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--ink);
  color: #fff !important;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}
.summary-card .kicker {
  margin-bottom: 2px;
}
.crop .view-thumbs {
  padding: 10px 12px;
}
@media (max-width: 860px) {
  .bl-grid {
    grid-template-columns: 1fr;
  }
}
@media print {
  .region.part {
    break-inside: auto;
  }
  .bl-verdict {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 10px;
}
.cmp th,
.cmp td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cmp th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.cmp td:not(:first-child) {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cmp td:first-child {
  color: var(--text-primary);
}
.cmp tr:nth-child(2n) td {
  background: var(--surface-1);
}
@media (max-width: 700px) {
  .cmp td:not(:first-child) {
    white-space: normal;
  }
}
.angles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.angles figure {
  margin: 0;
  width: 72px;
}
.angles img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.angles figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.3;
}
.feat-grid.one {
  margin-bottom: 12px;
}
#overlay {
  transition: transform 0.35s;
}
.look-lead .look-card {
  max-width: 460px;
  margin: 0 auto;
}
.look-lead .look-txt {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
}
.alt-looks {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.alt-grid {
  display: grid;
  gap: 22px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 320px));
  max-width: 1020px;
  margin: 0 auto;
  min-width: 0;
  justify-content: center;
}
.look-one {
  display: block;
  min-width: 0;
}
.look-one figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.look-one img {
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
  display: block;
}
.look-one figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tone);
}
.more-looks {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.more-looks > summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.more-looks > summary::-webkit-details-marker {
  display: none;
}
.more-looks > summary:before {
  content: "+";
  font-family: var(--mono);
  color: var(--tone);
  font-size: 15px;
}
.more-looks[open] > summary:before {
  content: "–";
}
.more-looks > summary:hover {
  color: var(--text-primary);
}
.alt-grid .look-card {
  min-width: 0;
}
.look-card.alt-idle .alt-face {
  aspect-ratio: 4/5;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 20px;
}
.look-card.alt-idle .alt-face b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
}
.look-card.alt-idle .alt-face .hs-spec {
  display: none;
}
@media (max-width: 560px) {
  .alt-grid {
    grid-template-columns: 1fr;
  }
}
#results.teaser .locked {
  position: relative;
  overflow: hidden;
}
#results.teaser .locked > *:not(.lock-badge):not(.lk-head) {
  filter: blur(13px) saturate(0.75);
  pointer-events: none;
  user-select: none;
}
#results.teaser .locked.lk-row .lk-peek > * {
  filter: none;
}
#results.teaser .locked.lk-sample {
  max-height: 380px;
}
#results.teaser .locked.lk-sample:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f4f0e800 40%, #f4f0e8d9);
  pointer-events: none;
}
#ref-card.flash .refcard {
  animation: refflash 2.4s ease;
}
@keyframes refflash {
  0% {
    box-shadow: 0 0 #2f6b628c;
  }
  12% {
    box-shadow: 0 0 0 7px #2f6b6238;
  }
  to {
    box-shadow: 0 0 #2f6b6200;
  }
}
.tz-ref {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.tz-ref b {
  color: var(--text-primary);
}
.tz-ref a {
  font-weight: 560;
  white-space: nowrap;
}
.lk-intro {
  margin: 34px 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--tone);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 80ch;
}
.lk-intro b {
  color: var(--text-primary);
}
#results.teaser .locked.lk-empty {
  display: none;
}
#results.teaser .locked.lk-row {
  margin-top: 9px;
  max-height: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  padding: 0;
  overflow: hidden;
}
#results.teaser .locked.lk-row .lk-peek {
  max-height: 46px;
  overflow: hidden;
  opacity: 0.45;
  margin: 0;
  padding: 0 14px;
}
#results.teaser .locked.lk-row .lk-peek > * {
  margin: 0;
}
#results.teaser .locked.lk-row:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  background: linear-gradient(
    180deg,
    rgba(251, 249, 245, 0),
    var(--surface-1) 78%
  );
  pointer-events: none;
}
.lk-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px 7px;
  position: relative;
  z-index: 2;
}
.lk-head .lk-lock {
  display: inline-flex;
  color: var(--text-muted);
  flex: none;
}
.lk-head .lk-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.2;
}
.lk-head .lk-what {
  font-size: 12.5px;
  color: var(--text-secondary);
  flex: 1 1 240px;
  min-width: 0;
}
.lk-head .lk-go {
  flex: none;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 560;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 6px 13px;
  text-decoration: none;
  white-space: nowrap;
}
.lk-head .lk-go:hover {
  background: #000;
  text-decoration: none;
}
@media (max-width: 560px) {
  .lk-head {
    padding: 12px 12px 8px;
    gap: 6px;
  }
  .lk-head .lk-name {
    flex: 1 1 100%;
  }
  .lk-head .lk-what {
    flex: 1 1 100%;
    font-size: 12px;
  }
  .lk-head .lk-go {
    margin-left: 0;
  }
  #results.teaser .locked.lk-row .lk-peek {
    max-height: 38px;
  }
  #results.teaser .locked.lk-row:after {
    height: 38px;
  }
}
#results.teaser .lock-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 560;
  text-decoration: none;
  box-shadow: 0 8px 24px #17171a38;
}
#results.teaser .lock-badge:hover {
  background: #000;
}
#results.teaser .lock-badge svg {
  flex: none;
}
#paywall-top {
  margin: 18px 0 8px;
}
.points-tile .points-wrap {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 8px;
  max-width: 100%;
  overflow: hidden;
}
.map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.map-wrap .points-wrap {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 10px;
  max-width: 520px;
  overflow: hidden;
}
.map-wrap .points-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .map-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .map-wrap .points-wrap {
    max-width: 100%;
  }
}
.points-tile {
  max-width: 100%;
  grid-column: 1/-1;
  justify-self: stretch;
}
.points-tile svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.points-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  margin: 0 auto;
}
.points-map line.mid {
  stroke-dasharray: 4 4;
  opacity: 0.6;
}
.teaser-card .tz-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
}
@media (max-width: 860px) {
  .teaser-card .tz-grid {
    grid-template-columns: 1fr;
  }
}
.teaser-card .tz-stats {
  display: grid;
  gap: 10px;
  align-content: start;
}
.teaser-card .tz-stat {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.teaser-card .tz-stat b {
  font-size: 30px;
  font-family: var(--mono);
  line-height: 1;
  min-width: 2.2ch;
}
.teaser-card .tz-stat span {
  font-size: 13.5px;
  color: var(--text-secondary);
}
.teaser-card .tz-stat.t-ok b {
  color: var(--good);
}
.teaser-card .tz-stat.t-wr b {
  color: var(--crit);
}
.teaser-card .tz-stat.t-in b {
  color: #8a6410;
}
.teaser-card .tz-stat.t-ac b {
  color: var(--accent-2);
}
.teaser-card .tz-say p {
  margin: 0 0 12px;
}
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #17171a8c;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
}
.pay-box {
  background: #fff;
  border-radius: 18px;
  max-width: 560px;
  width: 100%;
  padding: 14px 14px 18px;
  box-shadow: 0 30px 80px #00000059;
  position: relative;
  max-height: 92svh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: payIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes payIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pay-box {
    animation: none;
  }
}
.pay-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px 12px;
}
.pay-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
#pay-mount {
  min-height: 420px;
}
@media (max-width: 560px) {
  .pay-modal {
    padding: 0;
    place-items: end center;
  }
  .pay-box {
    padding: 10px 8px 14px;
    border-radius: 18px 18px 0 0;
    max-height: 94svh;
  }
  #pay-mount {
    min-height: 360px;
  }
}
.pay-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.pay-x:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.verdict .vd-why {
  margin-top: 6px;
}
.verdict .vd-why summary {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fn-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 3fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.fn-row .fn-l {
  font-size: 13.5px;
  color: var(--text-secondary);
}
.fn-row .fn-bar {
  background: var(--surface-3);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.fn-row .fn-bar i {
  display: block;
  height: 100%;
  background: var(--accent-2);
  border-radius: 999px;
}
.fn-row b {
  font-size: 14px;
  min-width: 3ch;
  text-align: right;
}
.look-grid .look-card[data-look="potential"] {
  grid-column: 1/-1;
}
.look-grid .look-card[data-look="potential"] .ba.look {
  max-width: 560px;
  margin: 0 auto;
}
@media print {
  details:not([open]) > :not(summary) {
    content-visibility: visible !important;
    display: revert !important;
  }
  details {
    break-inside: auto;
  }
  details > summary {
    list-style: none;
    break-after: avoid;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
  .card,
  .metric,
  .proto,
  .stat,
  .style-card,
  .look-card,
  .feat-tile,
  .callout,
  .pc,
  .hs-spec,
  .faq details,
  figure,
  table,
  .region-h,
  .potential,
  .norwood,
  .bl-verdict,
  .view-thumbs figure {
    break-inside: avoid;
  }
  h1,
  h2,
  h3,
  h4,
  .kicker,
  .eyebrow,
  .lbl,
  .sec-head {
    break-after: avoid;
  }
  p,
  li,
  .txt {
    orphans: 3;
    widows: 3;
  }
  .ba,
  .ba2,
  .ba.look {
    position: relative !important;
  }
  .ba input[type="range"],
  .ba .divider,
  .ba .handle,
  .ba .knob,
  .ba2 input[type="range"],
  .ba2 .divider {
    display: none !important;
  }
  .ba .topwrap,
  .ba2 .topwrap {
    position: static !important;
    width: auto !important;
    clip-path: none !important;
  }
  .ba.patch .top {
    display: none !important;
  }
  .ba .print-after {
    display: block !important;
  }
  .ba,
  .ba2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    aspect-ratio: auto !important;
    height: auto !important;
  }
  .ba img,
  .ba2 img,
  .ba canvas {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    break-inside: avoid;
  }
  .ba .lbl,
  .ba2 .lbl {
    position: static !important;
    display: block;
    text-align: center;
    background: none !important;
    color: #17171a !important;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #results.teaser .locked > *:not(.lock-badge) {
    filter: none !important;
  }
  .look-card,
  .feat-tile,
  .metric {
    break-inside: avoid;
  }
  .region {
    break-inside: auto;
  }
  .crop canvas,
  .crop img,
  .photo-frame img,
  .photo-frame canvas,
  .ov-fig img,
  .figwrap img {
    max-height: 120mm !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
  }
}
.ms-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #f4f0e8f0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: msIn 0.45s ease;
}
.ms-overlay[hidden] {
  display: none;
}
@keyframes msIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.measuring-open {
  overflow: hidden;
}
.ms-box {
  width: 100%;
  max-width: 460px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px 22px;
  box-shadow: 0 30px 70px #17171a29;
  text-align: center;
}
.ms-art {
  position: relative;
  width: 100%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
}
.cx-scan {
  display: inline-block;
  line-height: 0;
  color: var(--tone);
}
.cx-scan svg {
  width: 38px;
  height: 38px;
  display: block;
  overflow: visible;
}
.cx-scan.lg svg {
  width: 72px;
  height: 72px;
}
.cx-scan.sm svg {
  width: 26px;
  height: 26px;
}
.cx-scan .cxs-eye {
  transform-origin: 12px 12px;
  animation: cxsBlink 6.6s ease-in-out infinite;
}
.cx-scan .cxs-line {
  animation: cxsSweep 3.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes cxsSweep {
  0% {
    transform: translateY(5.6px);
  }
  50% {
    transform: translateY(18.4px);
  }
  to {
    transform: translateY(5.6px);
  }
}
@keyframes cxsBlink {
  0%,
  86%,
  to {
    transform: scaleY(1);
  }
  89% {
    transform: scaleY(0.06);
  }
  92% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.06);
  }
  98% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cx-scan .cxs-eye,
  .cx-scan .cxs-line {
    animation: none;
  }
}
.ms-art .cx-scan {
  color: var(--tone);
}
.ms-h {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
}
.ms-p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 8px 0 18px;
  line-height: 1.55;
}
.ms-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 9px;
}
.ms-steps li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: baseline;
  opacity: 0.4;
  transition: opacity 0.55s ease;
}
.ms-steps li.now,
.ms-steps li.done {
  opacity: 1;
}
.ms-steps li i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text-faint);
  display: block;
  position: relative;
  top: 2px;
}
.ms-steps li.now i {
  border-color: var(--line);
  border-top-color: var(--tone);
  border-right-color: var(--tone);
  animation: msSpin 2s linear infinite;
}
.ms-steps li.done i {
  border-color: var(--tone);
  background: var(--tone);
}
.ms-steps li.done i:after {
  content: "";
  position: absolute;
  left: 3.4px;
  top: 1.2px;
  width: 3.4px;
  height: 6.4px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
@keyframes msSpin {
  to {
    transform: rotate(360deg);
  }
}
.ms-steps li b {
  font-size: 14px;
  font-weight: 500;
}
.ms-steps li span {
  grid-column: 2;
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}
.ms-p {
  min-height: 3.4em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .ms-p {
    min-height: 5.2em;
  }
}
.ms-fact {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 0.85s ease,
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  min-height: 74px;
}
.ms-fact.in {
  opacity: 1;
  transform: none;
}
.ms-fact .kicker {
  margin: 0 0 4px;
}
.ms-fact p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
@media (max-width: 520px) {
  .ms-fact {
    min-height: 96px;
  }
  .ms-fact p {
    font-size: 12.5px;
  }
}
.ms-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ms-slow {
  margin-top: 14px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px 14px;
}
@media (max-width: 480px) {
  .ms-box {
    padding: 22px 18px 18px;
  }
  .ms-h {
    font-size: 21px;
  }
  .ms-steps li span {
    font-size: 11.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-steps li.now i {
    animation: none;
    border-color: var(--tone);
  }
}
.store-state {
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.store-state.ok {
  background: #eaf3f0;
  border: 1px solid #bfdcd4;
  color: #1d4b43;
}
.store-state.bad {
  background: #fbede8;
  border: 1px solid #f0c4b4;
  color: #7a2f16;
}
.gift-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  color: var(--text-secondary);
  cursor: pointer;
}
.gift-toggle input {
  width: auto;
  margin: 0;
}
.gift-toggle:hover {
  color: var(--text-primary);
}
.teaser-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: #17171af0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13.5px;
  animation: tbIn 0.4s 0.8s ease both;
}
@keyframes tbIn {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
.teaser-bar b {
  font-weight: 600;
}
.teaser-bar .btn {
  flex: none;
}
body.measuring-open .teaser-bar {
  display: none;
}
@media (max-width: 560px) {
  .teaser-bar {
    font-size: 12.5px;
    gap: 9px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .teaser-bar span {
    flex: 1 1 100%;
    text-align: center;
  }
}
@media print {
  .teaser-bar {
    display: none;
  }
}
.vd-plain {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  margin: 6px 0 4px;
  color: var(--text-primary);
  max-width: 26ch;
}
@media (max-width: 760px) {
  .vd-plain {
    font-size: 17px;
    max-width: none;
  }
}
.blem-pattern {
  margin: 14px 0 4px;
}
.blem-pattern .ct {
  font-weight: 600;
}
.pctl-plain {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-primary);
  margin-top: 4px;
}
#overlay {
  cursor: ns-resize;
  touch-action: pan-x;
}
#overlay.placing {
  cursor: grabbing;
}
#overlay:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .tbl-wrap,
  .blem-table-wrap {
    overflow: visible;
  }
  table.tbl,
  table.tbl tbody,
  table.tbl tr,
  table.tbl td,
  table.tbl th,
  table.blem-table,
  table.blem-table tbody,
  table.blem-table tr,
  table.blem-table td,
  table.blem-table th {
    display: block;
    width: auto;
  }
  table.tbl thead,
  table.blem-table thead {
    display: none;
  }
  table.tbl tr,
  table.blem-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 8px;
    background: var(--surface-1);
  }
  table.tbl tbody th[scope="row"],
  table.blem-table tbody th[scope="row"] {
    font-size: 14px;
    font-weight: 600;
    padding: 0 0 6px;
    border: 0;
  }
  table.tbl td,
  table.blem-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 3px 0;
    border: 0;
    text-align: right;
  }
  table.tbl td:before,
  table.blem-table td:before {
    content: attr(data-h);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
  }
  table.tbl td:empty,
  table.tbl td[data-h=""],
  table.blem-table td[data-h=""] {
    display: none;
  }
  table.tbl tfoot tr,
  table.blem-table tfoot tr {
    background: var(--surface-2);
  }
  table.blem-table caption {
    display: block;
    text-align: left;
    padding: 0 0 8px;
  }
}
.vd-plain-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 2px 0 6px;
  max-width: 44ch;
}
@media (max-width: 760px) {
  .tiny {
    font-size: 12px;
    line-height: 1.5;
  }
  .small {
    font-size: 13.5px;
    line-height: 1.55;
  }
  .kicker,
  .eyebrow,
  .mono.tiny,
  .tiny.mono {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  small,
  .mono small,
  .pc .v small,
  .vd-num small {
    font-size: 11.5px;
  }
  .facts .k,
  .hero-panel .pc .k,
  .proto .k,
  .tier .best,
  .scan-txt {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .pctl,
  .pctl-plain {
    font-size: 12px;
  }
  .feat-tile figcaption .tiny {
    font-size: 11.5px;
  }
  .vd-plain-note {
    font-size: 12.5px;
  }
  table.tbl td:before {
    font-size: 11.5px;
  }
  .scan-hud span,
  .ms-foot,
  .scan-hud .scan-txt,
  .pill {
    font-size: 11px;
  }
  .hero3 .pc .k,
  .pc .k {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .ba2 .lbl,
  .ba .lbl {
    font-size: 11px;
    padding: 4px 7px;
  }
  .ba-grid .ba2 .lbl,
  .best,
  .z {
    font-size: 11px;
  }
  .teaser-bar {
    font-size: 13px;
  }
}
.report-nav {
  top: calc(var(--nav-h) + 6px);
}
.report-nav .subnav-in {
  height: 44px;
}
@media print {
  .report-nav {
    display: none !important;
  }
}
.pager,
.pager-menu {
  display: none;
}
@media (max-width: 700px) {
  .report-nav .subnav-in {
    display: none;
  }
  .pager {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 8px;
    height: 48px;
  }
  .pager-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 0;
  }
  .pager-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .pager-arrow:disabled {
    opacity: 0.3;
  }
  .pager-arrow:active:not(:disabled) {
    background: var(--wash, rgba(0, 0, 0, 0.05));
  }
  .pager-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .pager-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pg-chev {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
  }
  .pager.open .pg-chev {
    transform: rotate(180deg);
  }
  .pager.open .pager-title {
    border-color: var(--tone);
    color: var(--tone);
  }
  .pager-menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: min(62vh, 460px);
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px #00000021;
    padding: 6px;
    z-index: 40;
    -webkit-overflow-scrolling: touch;
  }
  .pager-menu[hidden] {
    display: none;
  }
  .pager-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    color: var(--text-primary);
  }
  .pager-menu button + button {
    border-top: 1px solid var(--line);
  }
  .pager-menu .pg-n {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-secondary);
    flex: 0 0 auto;
  }
  .pager-menu button[aria-current="true"] {
    color: var(--tone);
    font-weight: 600;
  }
  .pager-menu button[aria-current="true"] .pg-n {
    color: var(--tone);
  }
}
.mock-how {
  margin: 14px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.mock-how summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  list-style: none;
}
.mock-how summary::-webkit-details-marker {
  display: none;
}
.mock-how summary:before {
  content: "▸ ";
  color: var(--tone);
}
.mock-how[open] summary:before {
  content: "▾ ";
}
.mock-how p {
  max-width: 86ch;
  margin: 10px 0 0;
}
.smile-fig {
  margin: 14px 0 0;
}
.smile-fig .feat-tile img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface-2);
}
.smile-fig .feat-tile {
  max-width: 820px;
  margin: 0 auto;
}
/* build 177 · blackjack motion tokens. One easing curve and one set of durations, so the
   rhythm of a hand is retuned here and nowhere else. The game module reads these same
   custom properties off :root at run time — there are no duplicated millisecond figures
   in the JavaScript, only these.

   These are the figures of a hand being dealt rather than a hand being reported. A card
   takes --bj-card-in to cross the felt and --bj-step before the next one leaves the shoe,
   which is the difference between four cards arriving and four cards appearing. --bj-beat
   is the pause between the last card landing and the figures catching up to it. --bj-hold
   is the dealer visibly taking their turn before anything of theirs moves, and --bj-flip
   is the hole card itself, which is the one moment in the hand worth the most time. */
:root {
  --bj-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  /* THE TIME IS IN THE MOTION, NOT IN THE GAPS.
     "it does look like it's a little bugged, in that when the dealer deals a drop card, it
      freezes for a second, and then it does it very quickly."
     That is exactly what the old figures did. A card was preceded by --bj-draw of a still
     table and then crossed the felt in 400ms, so every card was a pause followed by a flick:
     the eye registers the pause as the event and the throw as a glitch. The fix is not to add
     more waiting — it is to take the waiting out and give it to the card. --bj-card-in is now
     nearly twice what it was and --bj-draw is shorter than it was, so the felt is in motion
     for almost the whole of a deal and the dealing itself reads half as fast. */
  --bj-card-in: 900ms;
  /* Shorter than --bj-card-in on purpose: consecutive cards OVERLAP in the air. Four cards at
     a 520ms stagger is one continuous deal lasting 2.28s, where 430/400 was four separate
     arrivals with a gap between each. */
  --bj-step: 640ms;
  --bj-beat: 480ms;
  --bj-flip: 1350ms;
  --bj-hold: 1300ms;
  --bj-flip-settle: 420ms;
  /* The dead beat in front of a dealer's draw. It is deliberately SMALLER than it was: the
     card behind it now takes 720ms of its own, which is where the weight belongs. */
  --bj-draw: 420ms;
  --bj-settle: 380ms;
  /* The press acknowledgement. The button dimming used to be followed by a full --bj-settle of
     a motionless table before the card left the shoe, which was the freeze the reader saw on
     every Hit. It is its own, much shorter figure now. */
  --bj-press: 180ms;
  --bj-result-hold: 460ms;
  --bj-amount: 400ms;
  --bj-confetti-lag: 360ms;
  --bj-push-hold: 1900ms;
  --bj-push-out: 320ms;
  --bj-open: 280ms;
  --bj-close: 220ms;
  --bj-confetti: 2200ms;
  --bj-wave2: 520ms;
  /* The ambient sheen that crosses a face-down card. It is the one loop in the game, and it
     is here so the felt is never completely still while a card is owed a reveal. */
  --bj-sheen: 2400ms;
}

.bj-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #17171a80;
  opacity: 0;
  transition: opacity var(--bj-close) var(--bj-ease);
}
.bj-overlay.in {
  opacity: 1;
}
.bj-overlay.out {
  opacity: 0;
}
.bj-modal {
  position: relative;
  width: min(480px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px #17171a52;
  transform: translateY(10px) scale(0.98);
  transition: transform var(--bj-open) var(--bj-ease);
}
.bj-overlay.in .bj-modal {
  transform: none;
}
.bj-x {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.bj-x:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.bj-body {
  padding: 26px 24px 22px;
}
.bj-head {
  text-align: center;
  margin-bottom: 14px;
}
.bj-head.tight {
  margin-bottom: 10px;
}
.bj-motif {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 66px;
  margin: 2px 0;
  pointer-events: none;
}
.bj-motif .m-card {
  width: 46px;
  height: 64px;
  border-radius: 7px;
  background: #fbf9f5;
  position: relative;
  flex: none;
  box-shadow: 0 6px 16px #17171a2e;
  color: var(--ink);
  font-family: var(--serif);
  opacity: 0;
  animation: bjMotifIn calc(var(--bj-settle) * 1.6) var(--bj-ease) both;
}
.bj-motif .m-card:nth-child(1) {
  transform: rotate(-13deg) translate(9px);
  z-index: 1;
  animation-delay: 0.02s;
}
.bj-motif .m-card:nth-child(2) {
  transform: translateY(-6px);
  z-index: 3;
  animation-delay: 0.1s;
}
.bj-motif .m-card:nth-child(3) {
  transform: rotate(13deg) translate(-9px);
  z-index: 2;
  animation-delay: 0.18s;
}
.bj-motif .m-card.red {
  color: #c0392b;
}
.bj-motif .m-card.back {
  background: linear-gradient(150deg, #2f6b62, #245149);
  border: 1.5px solid #f4f0e8;
}
.bj-motif .m-card.back .bj-eye {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.bj-motif .m-card.back .bj-eye svg {
  width: 22px;
  height: 22px;
}
.bj-motif .m-r {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 13px;
  line-height: 1;
}
.bj-motif .m-s {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
}
@keyframes bjMotifIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bj-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tone);
  margin-bottom: 8px;
}
.bj-free {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tone-deep);
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.bj-q {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: center;
  margin: 4px 0;
}
.bj-title {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 5.4vw, 30px);
  line-height: 1.08;
  margin: 0;
}
.bj-title.small {
  font-size: clamp(20px, 4.6vw, 24px);
}
/* The amount is written into the line with the rest of the sentence but does not arrive with
   it: .pending holds it back, .pop brings it in one --bj-amount later, on its own. */
.bj-win {
  color: var(--tone-deep);
  font-weight: 700;
  display: inline-block;
}
.bj-win.pending {
  opacity: 0;
}
.bj-win.pop {
  animation: bjWinPop calc(var(--bj-settle) * 2) cubic-bezier(0.18, 0.9, 0.28, 1.28) both;
}
@keyframes bjWinPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  55% {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.bj-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 10px auto 0;
}
.bj-gate {
  display: grid;
  gap: 10px;
  max-width: 340px;
  margin: 16px auto 0;
}
.bj-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.4;
}
.bj-gate input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  font-size: 16px;
}
.bj-gate input:focus {
  outline: 2px solid var(--tone);
  outline-offset: 1px;
  border-color: var(--tone);
}
.bj-btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--surface-1);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    background 0.15s ease;
}
.bj-btn:hover {
  background: var(--surface-2);
}
.bj-btn:active {
  transform: translateY(1px);
}
.bj-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.bj-btn.primary:hover {
  background: #000;
}
.bj-btn.ghost {
  border-color: var(--line);
  color: var(--text-secondary);
  background: transparent;
}
.bj-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.bj-skip {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.bj-never {
  display: block;
  margin: 2px auto 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.62;
  font-size: 11.5px;
  cursor: pointer;
  padding: 3px 4px;
}
.bj-never:hover {
  opacity: 0.9;
  text-decoration: underline;
}
.bj-acct {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  margin: -2px 0 2px;
}
.bj-fine {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 2px 0 0;
  text-align: center;
}
.bj-err {
  color: var(--rust);
  font-size: 13px;
  margin: 0;
  text-align: center;
}
.bj-line {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 4px;
  text-align: center;
}
.bj-code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--surface-3);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.bj-felt {
  background: linear-gradient(160deg, var(--tone-deep), var(--tone));
  border-radius: 16px;
  padding: 16px 14px;
  margin: 6px 0 14px;
  box-shadow: inset 0 2px 20px #0000002e;
}
.bj-seat-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #eaf1ef;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 2px 7px;
  opacity: 0.9;
}
.bj-total {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.blemish-map,
.blemish-legend,
.blem-table,
.blem-map-note {
  display: none !important;
}
.blemish-map,
.blemish-legend,
.blem-table,
.blem-map-note {
  margin: 0 !important;
  padding: 0 !important;
}
.bj-row {
  display: flex;
  gap: 8px;
  min-height: 92px;
  align-items: center;
  flex-wrap: wrap;
  perspective: 800px;
}
.bj-divide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 11px 2px;
  color: #cfe0dc;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bj-divide:before,
.bj-divide:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #f4f0e838;
}
.bj-card {
  width: 64px;
  height: 90px;
  border-radius: 9px;
  background: #fbf9f5;
  position: relative;
  flex: none;
  box-shadow: 0 3px 8px #00000038;
  color: var(--ink);
  font-family: var(--serif);
}
.bj-card.red {
  color: #c0392b;
}
.bj-card .bj-r {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 17px;
  line-height: 1;
}
.bj-card .bj-r.bot {
  inset: auto 7px 5px auto;
  transform: rotate(180deg);
}
.bj-card .bj-s {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
}
.bj-card.back {
  background: linear-gradient(150deg, #2f6b62, #245149);
  border: 2px solid #f4f0e8;
}
.bj-card.back .bj-eye {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.bj-card.back .bj-eye svg {
  width: 30px;
  height: 30px;
}
/* A card that is in the row but has not been dealt yet. The stagger used to be an
   animation-delay, whose clock starts when the element becomes animatable rather than when it was
   appended — so behind an overlay that is still coming up, the first card's delay expired before
   anyone could see it and the card teleported into its seat. The stagger is a timer in the game
   module now, and this is what holds the card until its turn. */
.bj-card.pre {
  opacity: 0;
}
.bj-card.deal {
  animation: bjDeal var(--bj-card-in) var(--bj-ease) both;
  transform-origin: top right;
  will-change: transform, opacity;
}
/* At --bj-card-in the card has room for a real throw and a real landing: it comes in from off
   the right of the felt, overshoots its seat a little at 78%, and rocks back onto it. The eye
   has time to follow one card to its place before the next leaves the shoe. The class is
   removed on animationend so the fill mode never pins a transform on a card that has to flip
   later. */
@keyframes bjDeal {
  0% {
    opacity: 0;
    /* The throw is longer because the card now has 720ms to make it. At the old 96px a card
       given that much time crawls instead of being dealt: the distance and the duration have to
       move together, or the extra time reads as lag rather than as weight. */
    transform: translate(152px, -110px) rotate(-19deg) scale(0.86);
  }
  22% {
    opacity: 1;
  }
  78% {
    transform: translate(-5px, 4px) rotate(1.6deg) scale(1.022);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The hole card is a real two-sided card from the moment it is dealt: a transparent shell the
   size of a card carrying a back face and a face face, each with its own backface hidden. The
   reveal turns the shell 180deg, so the card lands exactly where it started and nothing beside
   it moves. Nothing swaps its contents mid-air. */
.bj-card.bj-flip3d {
  background: none;
  box-shadow: none;
  border: 0;
  transform-style: preserve-3d;
}
/* The dealer's hand goes to the hole card before it turns it. --bj-arming is that reach: the
   card lifts off the felt and cants over, and it holds there until the turn begins. It is the
   whole of the dealer's beat, so the felt is doing something for every one of those ms. */
.bj-card.bj-flip3d.arming {
  animation: bjArm var(--bj-hold) var(--bj-ease) both;
}
@keyframes bjArm {
  0% {
    transform: none;
  }
  to {
    transform: translateY(-9px) rotateZ(-2.2deg) scale(1.035);
  }
}
/* The turn itself. A transition could only interpolate between two transforms; the lift at the
   midpoint — the card coming up off the felt as it goes through its edge, where it is thinnest
   and least readable — needs a keyframe of its own, so this is an animation. .turned carries
   the end state as well, so the card stays face up once the animation is done with it. */
.bj-card.bj-flip3d.turned {
  transform: rotateY(180deg);
}
.bj-card.bj-flip3d.turning {
  animation: bjFlip var(--bj-flip) linear both;
}
/* ── WHY THIS HAS SEVENTEEN STOPS AND STAYS ON `linear` ───────────────────────────────────────────
   "it's a little too clunky and bugged when the cards flip."
   It was, and the reason is a CSS detail that is easy to get backwards: animation-timing-function
   is applied BETWEEN EACH PAIR OF KEYFRAMES, not across the animation. So an eased curve on a
   four-stop flip is four separate slow-fast-slow segments — four clunks — which is why this
   animation is on `linear` and has to be. But the four stops it had were spaced 0/14/50/80/100
   against angles of 0/16/90/150/180, and linear interpolation through those gives angular rates
   of 0.12, 0.22, 0.21, 0.16 deg/ms: the card barely moves for the first eighth of a second, then
   nearly doubles its rate in one frame. That step change IS the clunk.
   So the easing lives in the VALUES instead. rotateY follows 90(1-cos(pi t)) — a true ease-in-out
   — blended 70/30 with a linear ramp so it does not start from a dead stop, and sampled every
   6.25%. The rate between neighbouring segments now changes by at most 1.52x, and that one
   happens at 65deg/s where it cannot be seen; through the fast middle it is 1.03x. Measured, not
   asserted: flipcurve.mjs samples the live computed matrix frame by frame. The lift and the scale peak at the midpoint, where the
   card is edge on and least readable, and both land back at rest exactly as the card seats. */
@keyframes bjFlip {
  0% {
    transform: translateY(-9.0px) rotateZ(-2.20deg) rotateY(0.0deg) scale(1.035);
  }
  6.25% {
    transform: translateY(-12.5px) rotateZ(-1.93deg) rotateY(4.6deg) scale(1.063);
  }
  12.5% {
    transform: translateY(-15.9px) rotateZ(-1.68deg) rotateY(11.5deg) scale(1.090);
  }
  18.75% {
    transform: translateY(-19.0px) rotateZ(-1.45deg) rotateY(20.7deg) scale(1.115);
  }
  25% {
    transform: translateY(-21.6px) rotateZ(-1.24deg) rotateY(32.0deg) scale(1.136);
  }
  31.25% {
    transform: translateY(-23.6px) rotateZ(-1.04deg) rotateY(44.9deg) scale(1.153);
  }
  37.5% {
    transform: translateY(-25.0px) rotateZ(-0.86deg) rotateY(59.1deg) scale(1.165);
  }
  43.75% {
    transform: translateY(-25.7px) rotateZ(-0.70deg) rotateY(74.3deg) scale(1.172);
  }
  50% {
    transform: translateY(-25.5px) rotateZ(-0.55deg) rotateY(90.0deg) scale(1.173);
  }
  56.25% {
    transform: translateY(-24.5px) rotateZ(-0.42deg) rotateY(105.7deg) scale(1.167);
  }
  62.5% {
    transform: translateY(-22.8px) rotateZ(-0.31deg) rotateY(120.9deg) scale(1.156);
  }
  68.75% {
    transform: translateY(-20.3px) rotateZ(-0.21deg) rotateY(135.1deg) scale(1.140);
  }
  75% {
    transform: translateY(-17.1px) rotateZ(-0.14deg) rotateY(148.0deg) scale(1.118);
  }
  81.25% {
    transform: translateY(-13.4px) rotateZ(-0.08deg) rotateY(159.3deg) scale(1.093);
  }
  87.5% {
    transform: translateY(-9.2px) rotateZ(-0.03deg) rotateY(168.5deg) scale(1.064);
  }
  93.75% {
    transform: translateY(-4.7px) rotateZ(-0.01deg) rotateY(175.4deg) scale(1.032);
  }
  to {
    transform: translateY(-0.0px) rotateZ(-0.00deg) rotateY(180.0deg) scale(1.000);
  }
}
/* A card that is face down is a card that owes the reader something. The sheen says so, and it
   is the reason no beat in this game is ever a still frame. */
.bj-flip3d > .f-back:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(
    104deg,
    #f4f0e800 38%,
    #f4f0e82e 50%,
    #f4f0e800 62%
  );
  background-size: 260% 100%;
  animation: bjSheen var(--bj-sheen) linear infinite;
  pointer-events: none;
}
@keyframes bjSheen {
  0% {
    background-position: 130% 0;
  }
  to {
    background-position: -130% 0;
  }
}
.bj-flip3d > .bj-card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bj-flip3d > .f-front {
  transform: rotateY(180deg);
}
/* Actions recede rather than vanish when the turn passes to the dealer; the buttons stay in
   flow so the modal does not change height while the dealer is acting. */
.bj-actions.spent {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bj-settle) var(--bj-ease);
}
/* One settle step. --d stages the result: total, then outcome, then the buttons. */
.bj-settle {
  animation: bjSettle var(--bj-settle) var(--bj-ease) var(--d, 0ms) both;
}
@keyframes bjSettle {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bj-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
.bj-confetti i {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: bjBurst var(--bj-confetti) cubic-bezier(0.12, 0.66, 0.3, 1) forwards;
}
@keyframes bjBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
  }
  12% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px) + 70px)
      )
      scale(1) rotate(var(--dr, 300deg));
  }
}
.bj-push {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--tone-deep) 30%, transparent);
  border-radius: 20px;
  animation: bjPushIn var(--bj-settle) var(--bj-ease) both;
}
.bj-push.out {
  animation: bjPushOut var(--bj-push-out) var(--bj-ease) both;
}
.bj-push-word {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: clamp(52px, 15vw, 84px);
  color: #f4f0e8;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  animation: bjPushPop calc(var(--bj-settle) * 2) cubic-bezier(0.16, 0.9, 0.28, 1.4) both;
}
.bj-push-sub {
  font-family: var(--sans);
  font-size: 14.5px;
  color: #eaf1ef;
  max-width: 26ch;
  text-align: center;
  line-height: 1.4;
}
@keyframes bjPushIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bjPushOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes bjPushPop {
  0% {
    transform: scale(0.4) rotate(-6deg);
    opacity: 0;
  }
  55% {
    transform: scale(1.14) rotate(1deg);
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
.bj-actions {
  display: grid;
  gap: 9px;
}
/* ── the saved state ────────────────────────────────────────────────────────────────────────
   What a reader sees the instant their win is banked. It is a receipt, not a checkout: the
   amount, the address it sits against, and what happens next without them doing anything. */
.bj-saved {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin: 2px 0 14px;
}
.bj-saved-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tone);
  margin-bottom: 6px;
}
.bj-saved-mark svg {
  width: 24px;
  height: 24px;
}
.bj-saved-amt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 7vw, 38px);
  line-height: 1;
  color: var(--tone-deep);
  letter-spacing: -0.02em;
}
.bj-saved-at {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.45;
  max-width: 34ch;
}
.bj-saved-at b {
  color: var(--text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bj-saved-how {
  display: grid;
  gap: 7px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.bj-saved-how li {
  list-style: none;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}
.bj-saved-how li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone);
}
.bj-saved-how li b {
  color: var(--text-primary);
  font-weight: 600;
}
.bj-chip {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px #17171a47;
}
.bj-chip:hover {
  background: #000;
}
.bj-chip-eye {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--tone);
  border-radius: 50%;
}
.bj-chip-eye svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 520px) {
  .bj-body {
    padding: 22px 16px 18px;
  }
  .bj-card {
    width: 56px;
    height: 80px;
  }
  .bj-card .bj-s {
    font-size: 26px;
  }
  .bj-card .bj-r {
    font-size: 15px;
  }
  .bj-row {
    min-height: 82px;
  }
  .bj-chip {
    left: 12px;
    bottom: 12px;
    font-size: 13px;
    padding: 10px 14px 10px 11px;
  }
}
@media print {
  .bj-overlay,
  .bj-chip {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bj-card.deal,
  .bj-motif .m-card,
  .bj-win,
  .bj-win.pop,
  .bj-push,
  .bj-push.out,
  .bj-push-word,
  .bj-settle,
  .bj-card.bj-flip3d.arming,
  .bj-card.bj-flip3d.turning,
  .bj-flip3d > .f-back:after {
    animation: none !important;
  }
  /* Every end state is still reached, it is simply reached at once: the hole card is face up
     rather than turning, the amount is on screen rather than arriving, and nothing waits. */
  .bj-card.bj-flip3d.turned {
    transform: rotateY(180deg) !important;
  }
  .bj-win.pending {
    opacity: 1;
  }
  .bj-flip3d > .f-back:after {
    display: none;
  }
  .bj-card.bj-flip3d,
  .bj-actions.spent {
    transition: none !important;
  }
  .bj-motif .m-card {
    opacity: 1;
  }
  .bj-confetti {
    display: none !important;
  }
  .bj-btn {
    transition: none;
  }
}
.h-two,
h4.h-two,
h5.h-two {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  text-transform: none;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.2;
  margin: 0 0 10px;
}
.h-two b {
  font-weight: 600;
  color: var(--ink);
}
.mag-block {
  margin: 22px 0 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.mag-intro {
  margin: 0 0 14px;
  max-width: 64ch;
}
.mag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* The grid carries its count. A lone sample (the hair tile, usually) used to sit in the first of
   four columns with three empty ones beside it; it is a row now — picture left, reading right —
   and two or three samples share the width instead of leaving a quarter of it blank. */
.mag-grid.n1 {
  grid-template-columns: 1fr;
}
.mag-grid.n1 .mag {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  align-items: start;
}
.mag-grid.n1 .mag-img {
  aspect-ratio: 1/1;
  max-width: 260px;
}
.mag-grid.n1 .mag figcaption {
  padding: 14px 18px 16px;
}
.mag-grid.n1 .mag-reads {
  grid-template-columns: auto 1fr;
  max-width: 62ch;
}
.mag-grid.n2 {
  grid-template-columns: repeat(2, 1fr);
}
.mag-grid.n3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .mag-grid,
  .mag-grid.n3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mag-grid,
  .mag-grid.n2,
  .mag-grid.n3 {
    grid-template-columns: 1fr;
  }
  .mag-grid.n1 .mag {
    grid-template-columns: 1fr;
  }
  .mag-grid.n1 .mag-img {
    max-width: none;
  }
}
.mag {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.mag-img {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface-2);
}
.mag-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mag-zoom {
  position: absolute;
  right: 7px;
  bottom: 7px;
  background: #0000009e;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
.mag figcaption {
  padding: 11px 12px 13px;
  display: grid;
  gap: 3px;
}
.mag figcaption > b {
  font-size: 14px;
}
.mag-reads {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 9px;
  margin: 8px 0 0;
  align-items: start;
}
.mag-reads dt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.mag-reads dd {
  margin: 0;
  display: grid;
  gap: 2px;
}
.mag-reads dd .pill {
  justify-self: start;
}
.mag-reads dd .tiny {
  line-height: 1.35;
}
.rec-group {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.rec-intro {
  margin: 0 0 6px;
  max-width: 66ch;
}
.rec-sub {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 270px);
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.rec-sub:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.rec-txt h5 {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rec-txt p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.rec-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 0;
}
.rec-fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg);
}
.rec-fig img {
  width: 100%;
  display: block;
}
.rec-fig figcaption {
  padding: 7px 9px 8px;
  line-height: 1.35;
}
.rec-summary {
  margin: 16px 0 0;
  padding: 15px 17px;
  border-radius: 12px;
  background: var(--tone-deep);
  color: #f4f0e8;
}
.rec-summary .kicker {
  color: #f4f0e8a8;
  margin: 0 0 5px;
}
.rec-summary p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #f4f0e8;
}
.rec-summary ul {
  margin: 9px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}
.rec-summary li {
  font-size: 13.5px;
  line-height: 1.5;
  color: #f4f0e8eb;
}
.rec-summary ul {
  color: #f4f0e8eb;
}
.ov {
  margin: 20px 0;
}
.ov-body {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 24px;
  align-items: start;
}
.ov-fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}
.ov-fig img {
  width: 100%;
  display: block;
}
.ov-side {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-top: 4px;
}
.ov-word {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.02;
  color: var(--ink);
}
.ov-scale {
  margin: 16px 0 4px;
}
.ov-track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
}
.ov-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--tone);
}
.ov-mark {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tone-deep);
  border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px #0003;
}
.ov-tick {
  position: absolute;
  top: 10px;
  transform: translate(-50%);
  display: grid;
  justify-items: center;
  gap: 1px;
}
.ov-tick i {
  width: 1px;
  height: 5px;
  background: var(--line);
  display: block;
  margin-top: -11px;
}
.ov-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}
.ov-cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.ov-cell {
  display: grid;
  gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
}
.ov-cell b {
  font-size: 16px;
}
.ov-text {
  margin: 16px 0 4px;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 70ch;
}
@media (max-width: 720px) {
  .rec-sub {
    grid-template-columns: minmax(0, 1fr);
  }
  .rec-fig {
    max-width: 320px;
  }
  .ov-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ov-fig {
    max-width: 340px;
  }
}
@media print {
  .mag-block {
    break-inside: auto;
  }
  .mag-img,
  .rec-group,
  .rec-fig {
    break-inside: avoid;
  }
  .rec-summary {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.views-list {
  margin: 10px 0 8px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.views-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 7px;
  align-items: baseline;
}
.views-list li b {
  color: var(--ink);
  font-weight: 600;
}
.views-list .vk {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--line-strong, #b9b5ab);
  text-align: center;
}
.views-list li.got .vk {
  color: var(--good, #3f7d53);
}
.views-list li.got b,
.views-list li.got {
  color: var(--ink);
}
.fold-hint {
  margin: 0 0 10px;
  padding: 8px 11px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--surface-1);
}
@media (min-width: 721px) {
  .fold-hint {
    display: none;
  }
}
@media (max-width: 720px) {
  .region.part.collapsed > .region-h {
    margin-bottom: 0;
  }
  .region.part.collapsed {
    padding-bottom: 6px;
  }
}
.hero-points {
  display: grid;
  gap: 0;
  margin: 22px 0 26px;
  max-width: 46ch;
  border-top: 1px solid var(--line);
}
.hero3 .copy .hero-points p,
.hero-points p {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(14.5px, 1.5vw, 15.5px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: none;
}
.hero3 .copy .hero-points b,
.hero-points b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 899px) {
  .hero3 .copy .hero-points p {
    font-size: 14px;
    margin: 0;
    padding: 6px 0;
  }
  .hero-points {
    margin: 12px 0 13px;
  }
}
.glasses-q {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
}
.glasses-q .choice {
  margin-top: 2px;
}
.ov-fig,
.rec-fig,
.mag-img {
  background: var(--surface-2);
}
.ov-fig img,
.rec-fig img {
  display: block;
  width: 100%;
}
.ov-fig {
  aspect-ratio: auto;
}
.mag-img {
  aspect-ratio: 1/1;
}
.bas-block {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.bas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 12px;
  align-items: start;
}
.ba-strip {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.bas-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px 7px;
  border-bottom: 1px solid var(--line-soft);
}
.bas-head b {
  font-size: 13.5px;
}
.bas-row {
  position: relative;
  display: block;
  background: var(--surface-2);
}
.bas-row img {
  width: 100%;
  height: auto;
  display: block;
}
.bas-row.after {
  border-top: 2px solid var(--tone);
}
.bas-tag {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: #0000009e;
  color: #fff;
}
.bas-row.after .bas-tag {
  background: var(--tone-deep);
}
.bas-note {
  margin: 0;
  padding: 8px 11px 10px;
  font-size: 11.5px;
}
.bas-keep {
  margin: 16px 0 0;
  padding: 13px 15px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: var(--bg);
}
.bas-keep p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
@media print {
  .ba-strip {
    break-inside: avoid;
  }
}
.look-lead {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.look-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
  justify-content: center;
}
@media (max-width: 640px) {
  .look-lead {
    max-width: 100%;
  }
}
.hairline-handle,
.hl-handle {
  cursor: ns-resize;
}
.pot-hit {
  cursor: pointer;
}
.pot-dotm,
.pot-lbl {
  transition:
    fill 0.12s ease,
    font-size 0.12s ease;
}
.potential.on .pot-dotm:not(.hot) {
  opacity: 0.35;
}
.potential.on .pot-lbl:not(.hot) {
  opacity: 0.4;
}
.pot-dotm.hot {
  fill: #d4783c !important;
  r: 4.4;
}
.pot-lbl.hot {
  fill: var(--ink) !important;
  font-weight: 600;
}
.pot-list li {
  transition: background 0.12s ease;
  border-radius: 7px;
  padding: 2px 6px;
  margin-left: -6px;
  cursor: default;
}
.pot-list li.hot {
  background: var(--surface-2);
}
.potential.on .pot-list li:not(.hot) {
  opacity: 0.45;
}
.region-summary {
  margin: 16px 0 0;
}
.region .region-summary {
  border-radius: 12px;
}
@media (max-width: 720px) {
  .region-summary {
    margin-top: 12px;
  }
}
.hs-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hs-num {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: 1.02;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.hs-grade {
  font-family: var(--sans);
  font-size: 11px;
}
.hs-pct {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 2px;
}
.hs-flag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone-deep);
  margin-top: 4px;
}
.rh-top {
  flex: 1 1 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.hs-head {
  flex: 1 1 100%;
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.hs-head .hs-num {
  font-size: clamp(38px, 5.2vw, 52px);
  gap: 10px;
}
.hs-head .hs-out {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-muted);
  align-self: flex-end;
  margin-bottom: 8px;
}
.hs-head .hs-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hs-head .hs-pct {
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 0;
}
.hs-head .hs-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.hs-head.hs-touched {
  border-color: var(--tone);
  box-shadow: inset 0 0 0 1px var(--tone);
}
@media (max-width: 520px) {
  .hs-head {
    gap: 13px;
    padding: 12px 14px;
  }
  .hs-head .hs-num {
    font-size: 34px;
  }
  .hs-head .hs-out {
    display: none;
  }
}
@media print {
  .hs-head {
    break-inside: avoid;
  }
}
.callout-fig {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-1);
}
.callout-fig img {
  width: 100%;
  display: block;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  background: var(--surface-2);
}
.callout-fig figcaption {
  padding: 8px 11px 9px;
  line-height: 1.4;
}
@media print {
  .callout-fig {
    break-inside: auto;
  }
  .callout-fig img {
    break-inside: avoid;
  }
}
.glass-read {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.gl-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.gl-cell {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
}
.gl-v {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}
.gl-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.gl-n {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.gl-probs {
  margin: 12px 0 0;
  padding-left: 18px;
}
.gl-probs li {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 7px;
}
@media print {
  .glass-read {
    break-inside: avoid;
  }
}
.measuring {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--tone-deep);
}
.measuring[hidden] {
  display: none;
}
.measuring .cx-scan {
  flex: none;
  color: var(--tone-deep);
}
.measuring .cx-scan svg {
  width: 60px;
  height: 60px;
}
.measuring b {
  display: block;
  font-size: 14.5px;
  color: var(--text-primary);
}
.measuring span {
  display: block;
  margin-top: 2px;
}
.region > .region-strip,
.region > .region-summary {
  grid-column: auto;
}
.region-strip:empty {
  display: none;
}
.region-strip .bas-block {
  margin: 18px auto 0;
  padding: 16px;
  max-width: 620px;
}
.region-strip .ba-strip {
  max-width: 560px;
  margin: 0 auto;
}
.region-strip .bas-grid {
  grid-template-columns: 1fr;
}
.region-strip .bas-row img {
  max-height: 260px;
  object-fit: contain;
  background: var(--surface-2);
}
#report-nav-in a.dead {
  opacity: 0.4;
  cursor: default;
}
@keyframes msBlink {
  0%,
  88%,
  to {
    transform: scaleY(1);
  }
  91% {
    transform: scaleY(0.08);
  }
  94% {
    transform: scaleY(1);
  }
  96.5% {
    transform: scaleY(0.08);
  }
  99% {
    transform: scaleY(1);
  }
}
.ms-art .ms-eye {
  transform-origin: 50% 50%;
  animation: msBlink 5.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ms-art .ms-eye {
    animation: none;
  }
}
.ms-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 14px 0 2px;
}
.ms-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--tone);
  transition: width 1.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.restore-bar {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: calc(14px + var(--teaser-h, 0px));
  z-index: 90;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: min(720px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px #0000001f;
  font-size: 13.5px;
  line-height: 1.45;
}
.restore-bar span {
  min-width: 0;
}
.restore-bar .btn {
  flex: 0 0 auto;
}
@media (max-width: 620px) {
  .restore-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    bottom: calc(10px + var(--teaser-h, 0px));
  }
}
@media print {
  .restore-bar {
    display: none;
  }
}
@media (max-width: 640px) {
  .report-hero .photo-frame {
    max-height: 62svh;
  }
  .report-hero .photo-frame {
    max-height: 62svh;
    overflow: hidden;
  }
  .report-hero .photo-frame canvas {
    max-height: 62svh;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    display: block;
  }
  .report-hero > div {
    min-width: 0;
  }
  .report-hero .toggles {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 2px;
  }
  .report-hero .toggles button {
    flex: 0 0 auto;
  }
  .report-hero .profile-card {
    padding: 14px 15px;
  }
  .report-hero .profile-card .kv {
    display: none;
  }
  .report-hero .profile-card.open .kv {
    display: grid;
  }
  .profile-more {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
  }
  .profile-more:after {
    content: "▾";
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  .report-hero .profile-card.open .profile-more:after {
    transform: rotate(180deg);
  }
}
@media (min-width: 641px) {
  .profile-more {
    display: none;
  }
}
@media (max-width: 899px) {
  .act-row {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-inline: -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--line);
    gap: 8px;
  }
  .act-row .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 48px;
  }
  .act-row #file-meta {
    flex: 1 0 100%;
    order: 3;
    margin: 0;
  }
  body.act-pinned .act-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px -18px #17171a80;
  }
  body.act-pinned #step-photos {
    padding-bottom: 108px;
  }
  .nav .btn-sm {
    min-height: 40px;
    padding-inline: 14px;
  }
  .nav .logo {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  footer a,
  .foot a,
  .legal-row a {
    display: inline-block;
    padding: 11px 2px;
  }
}
@media (max-width: 899px) {
  #results .metric details.more > summary,
  #results details > summary.tiny.muted {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  #results .cite a {
    display: inline-block;
    padding: 6px 0;
    min-height: 32px;
  }
  .seg button,
  .toggles button,
  .report button.chip,
  #results .seg button,
  #results .toggle-row button,
  #results .viewbar button,
  .btn,
  a.btn,
  .lk-go,
  .profile-more,
  .region-fold {
    min-height: 40px;
  }
  #results .btn,
  #results a.btn,
  #results .lk-go,
  #results .profile-more,
  #results .region-fold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #results .gl-l,
  .gl-l {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  #results .gl-row .gl-l {
    white-space: normal;
  }
  .photo-frame .tag,
  .crop .tag,
  .slot .tag {
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 5px 8px;
  }
  #results .hs-label,
  #results .hs-flag,
  #results .mag-zoom,
  #results .read-tag,
  #results dl dt,
  #results .kv dt {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}
.slot .prev-offer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.slot .prev-offer:hover {
  background: var(--surface-3);
  border-color: var(--tone);
}
.slot .prev-offer .po-k {
  font-size: 12.5px;
  font-weight: 600;
}
.slot .prev-offer .po-s {
  font-size: 11px;
  color: var(--text-muted);
}
@media (hover: none) {
  .slot .prev-offer {
    min-height: 44px;
  }
}
.scale-strip {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 6px;
}
.scale-strip div {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  min-width: 0;
}
.scale-strip b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--text-primary);
}
.scale-strip span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.scale-note {
  grid-column: 1/-1;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 82ch;
}
@media (max-width: 700px) {
  .scale-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .scale-strip b {
    font-size: 25px;
  }
  .scale-strip span {
    font-size: 11px;
  }
  .scale-note {
    font-size: 12px;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.qgrid a {
  display: block;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.35;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.qgrid a:hover {
  border-color: var(--tone);
  background: var(--surface-2);
}
@media (max-width: 560px) {
  .qgrid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .qgrid a {
    padding: 11px 13px;
    font-size: 14px;
  }
}
.lim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.lim-list li {
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
}
.lim-list.bad li {
  border-left-color: var(--crit);
}
.lim-list.note li {
  border-left-color: var(--line);
}
.lim-list.warn li {
  border-left-color: var(--warn);
}
.lim-list b {
  font-size: 13.5px;
}
.lim-list .small {
  color: var(--text-secondary);
  line-height: 1.5;
}
.insight-card.txt {
  border-left: 3px solid var(--tone);
}
.insight-card.txt .cap {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
}
.insight-card.txt .cap .pill {
  margin: 0;
  align-self: flex-start;
}
.insight-card.txt .what {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.insight-card.txt .more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11.5px;
  color: var(--tone);
}
.keep-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 32px));
}
.keep-modal::backdrop {
  background: #17171a75;
  backdrop-filter: blur(2px);
}
.keep-modal .km-in {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 80px #17171a38;
}
.keep-modal h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.28;
  margin: 8px 0 14px;
}
.keep-modal .km-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.keep-modal .km-list li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}
.keep-modal .km-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tone);
}
.keep-modal .km-list b {
  color: var(--text-primary);
}
.keep-modal .km-acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.keep-modal .km-acts .btn-ghost {
  margin-left: auto;
}
@media (max-width: 520px) {
  .keep-modal .km-acts {
    gap: 8px;
  }
  .keep-modal .km-acts .btn-ghost {
    margin-left: 0;
    width: 100%;
  }
}
@media print {
  .keep-modal {
    display: none !important;
  }
}
.look-lead .ba.look {
  max-height: 520px;
}
.look-lead .ba.look img {
  object-fit: cover;
}
@media (max-height: 820px) {
  .look-lead .ba.look {
    max-height: 430px;
  }
}
.alt-grid {
  align-items: stretch;
}
.alt-grid .look-card {
  height: 100%;
}
.alt-grid .look-card .look-txt {
  flex: 1 1 auto;
  min-height: 0;
}
.alt-grid .look-card .hs-spec {
  margin-top: auto;
}
.alt-grid .look-card .dupe-note {
  margin-top: 4px;
}
.alt-grid .look-card .look-txt > span {
  font-size: 13px;
  line-height: 1.45;
}
.look-veil {
  overflow: auto;
  justify-content: flex-start;
  padding: 16px 14px;
}
.look-veil > * {
  flex: none;
}
.look-veil .tiny {
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 46ch;
}
.alt-grid .look-veil {
  padding: 12px 10px;
}
.alt-grid .look-veil b {
  font-size: 14.5px;
}
.alt-grid .look-veil .tiny {
  font-size: 11px;
  line-height: 1.45;
}
.look-veil::-webkit-scrollbar {
  width: 6px;
}
.look-veil::-webkit-scrollbar-thumb {
  background: #0000002e;
  border-radius: 3px;
}
.vd-gmean {
  max-width: 52ch;
  margin-top: 4px;
  line-height: 1.5;
}
.hq {
  margin-top: 16px;
}
.hq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.hq-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 13px;
}
.hq-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hq-v {
  font-size: 26px;
  line-height: 1.05;
}
.hq-v small {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 2px;
}
.hq-track {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.hq-track i {
  display: block;
  height: 100%;
  background: var(--tone);
}
.col-panel {
  margin-top: 16px;
}
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.col-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 13px;
}
.col-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.col-v {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.15;
}
.col-advice {
  margin-top: 4px;
  max-width: 80ch;
}
.chin-panel {
  margin-top: 16px;
}
.chin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.chin-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 13px;
}
.chin-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chin-v {
  font-size: 24px;
  line-height: 1.05;
}
.chin-b {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.25;
}
.chin-advice {
  margin-top: 4px;
  max-width: 80ch;
}
.ear-detail {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 15px;
  margin-top: 12px;
}
.ear-detail .ear-h {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ear-dia {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 600px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--surface-2);
  margin: 0;
}
.ear-tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px;
  min-width: 0;
}
.ear-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px 11px;
}
.ear-tk {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ear-tv {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
}
.ear-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.ear-figure {
  margin: 0;
  min-width: 0;
}
.ear-figure figcaption {
  margin-top: 5px;
}
.ear-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-style: normal;
  font-size: 11px;
  color: var(--text-secondary);
  vertical-align: -2px;
}
.ear-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 860px) {
  .ear-split {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 20px;
  }
  .ear-dia {
    margin: 0;
  }
  .ear-tgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  }
}
.cam-review {
  margin: 0;
  padding: 0 14px;
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.cam-review img {
  display: block;
  width: 100%;
  max-height: min(44dvh, 620px);
  object-fit: contain;
  border-radius: 12px;
  background: #111416;
}
.cam-review-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: #ffffffc7;
  margin: 8px 0 0;
}
.cam-review-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cam-review-actions .btn {
  flex: 1 1 160px;
  max-width: 260px;
}
.rx {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: 16px 16px 14px;
  margin-top: 14px;
  container-type: inline-size;
}
.rx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rx-controls {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.rx-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.rx-sortb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
}
.rx-sortb.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-1);
}
.rx-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.rx-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 13px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.rx-tab.on {
  background: var(--tone-deep);
  border-color: var(--tone-deep);
  color: #fff;
}
.rx-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.rx-stage {
  margin: 0;
  min-width: 0;
}
.rx-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #12161a;
}
.rx-cap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 2.6em;
}
.rx-cap-t {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.rx-lists {
  min-width: 0;
}
.rx-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.rx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 46px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 8px;
  color: inherit;
  font: inherit;
}
.rx-row:hover,
.rx-row:focus-visible,
.rx-row.on {
  background: var(--surface-2);
  outline: none;
}
.rx-row.on {
  box-shadow: inset 3px 0 0 var(--tone-deep);
}
.rx-row.is-locked {
  cursor: default;
  opacity: 0.55;
}
.rx-name {
  font-size: 14px;
  line-height: 1.3;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rx-chip {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 2px 7px;
}
.rx-bar {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #d9a38c,
    #e4d2a8 26%,
    #9fc3bc,
    #e4d2a8 74%,
    #d9a38c
  );
  opacity: 0.85;
}
.rx-bar-none {
  background: var(--surface-3);
}
.rx-bar i {
  position: absolute;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--surface-1);
  left: calc((100% - 14px) * var(--at, 0));
}
.rx-p {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
}
@container (min-width:760px) {
  .rx-body {
    grid-template-columns: minmax(300px, 38%) minmax(0, 1fr);
    gap: 20px;
  }
  .rx-stage {
    position: sticky;
    top: var(--crop-stick);
  }
}
@container (max-width:520px) {
  .rx-row {
    grid-template-columns: minmax(0, 1fr) 76px 40px;
    gap: 8px;
  }
  .rx-list {
    max-height: none;
  }
}
@container (max-width:330px) {
  .rx-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
  }
  .rx-bar {
    display: none;
  }
}
@media print {
  .rx-list {
    max-height: none;
    overflow: visible;
  }
  .rx-tabs {
    display: none;
  }
  .rx-list[hidden] {
    display: flex !important;
  }
}
.cta-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 10px 0 0;
}
@media (max-width: 899px) {
  .cta-note {
    font-size: 11px;
    letter-spacing: 0.02em;
    margin-top: 7px;
    white-space: nowrap;
  }
}
.hero3 .copy .cta-note {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  max-width: none;
}
@media (max-width: 899px) {
  .hero3 .copy .cta-note {
    font-size: 11px;
    letter-spacing: 0.02em;
    margin: 7px 0 0;
  }
}
.center .cta-note {
  text-align: center;
}
.fixbox {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.fixbox:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--tone);
}
.fixbox.fix-no:before {
  background: var(--crit);
}
.fixbox.fix-wr:before {
  background: var(--rust);
}
.fixbox.fix-ok:before {
  background: var(--tone);
}
.fix-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.fix-grade {
  font-size: 11px;
  padding: 1px 6px;
}
.fix-verdict {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 8px;
  max-width: 60ch;
}
.fix-do,
.fix-avoid {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  max-width: 64ch;
}
.fix-do li,
.fix-avoid li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.fix-do li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--tone);
  font-weight: 600;
}
.fix-avoid li {
  color: var(--text-secondary);
}
.fix-avoid li:before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--crit);
  font-weight: 600;
}
.fixbox.fix-next {
  margin-top: 12px;
  padding-top: 12px;
}
.fix-more {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
}
.fix-locked {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 720px) {
  .fix-verdict {
    font-size: 15px;
  }
  .fix-do li,
  .fix-avoid li {
    font-size: 14px;
  }
}
.refbar {
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.refbar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--tone), var(--good));
  transition: width 0.5s ease;
}
.hero3 {
  background:
    radial-gradient(70% 50% at 90% 0%, #dde9e3 0, #dde9e300 60%),
    radial-gradient(60% 50% at 0% 100%, #eedfcb 0, #eedfcb00 60%), var(--bg);
}
body:has(main.pad):before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1040px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 92% 0, #dde9e3 0, #dde9e300 62%) no-repeat,
    radial-gradient(760px 520px at 0 220px, #eedfcb 0, #eedfcb00 62%) no-repeat;
}
/* the pill itself: the same glass as the Canthion bar, one hairline ring inside the rim so the
   two radii stay concentric, and one low shadow so it lifts off the section behind it */
.subnav-in {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow:
    var(--glass-hi),
    var(--glass-lo),
    0 14px 32px -22px #17171a59;
  gap: 2px;
}
@media (max-width: 760px) {
  .subnav {
    top: calc(var(--nav-h) + 4px);
    padding: 0 8px;
  }
  body.has-promo .subnav {
    top: calc(var(--nav-h) + 4px + var(--promo-h, 36px));
  }
  body.has-promo.promo-hidden .subnav {
    top: calc(var(--nav-h) + 4px);
  }
  .subnav-in {
    height: 40px;
    padding: 0 6px;
  }
}
.subnav a {
  border-bottom: 0;
  border-radius: 999px;
  padding: 9px 15px;
  color: var(--text-secondary);
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.subnav a:hover {
  background: #ffffff73;
  color: var(--text-primary);
}
.subnav a.on {
  color: var(--text-primary);
  border-bottom: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 1px 2px #17171a1f,
    0 6px 14px -6px #17171a40;
}
.subnav a.go {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
.subnav a.go:hover {
  background: var(--tone-deep);
}
/* ── BUTTONS, BUILD 168: CONCENTRIC TEAL + AMBIENT LIFT ─────────────────────────────────────
   One rule makes every button on the site. Fill: one flat teal, a half-step deeper than the brand
   tone so cream text passes 7:1 without a gradient. Ring: one cream hairline at a fixed inset, so
   its radius is the capsule's minus the inset and it stays concentric at every size. Lift: one
   wide, low shadow at rest and a deeper one 1px higher on hover. Press: the whole button to 98.5%.
   The fill is painted TWICE — as background-color and as a full-bleed inset shadow underneath the
   ring — because a button whose fill fails to paint for any reason is cream text on cream, and
   that is not a risk worth carrying on the one control the whole site is built around. */
.btn,
a.btn,
button.btn {
  background-image: none;
  text-shadow: none;
  transition:
    transform 0.14s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.18s ease;
}
.btn:after,
.btn:before {
  display: none;
}
.btn:active {
  transform: scale(0.985);
}
.btn-primary,
.btn-teal,
a.btn-primary,
a.btn-teal,
button.btn-primary,
button.btn-teal {
  position: relative;
  background-color: #2a5f57;
  color: #f4f0e8;
  border-color: transparent;
  box-shadow:
    inset 0 0 0 3px #2a5f57,
    inset 0 0 0 4px #f4f0e84d,
    inset 0 0 0 999px #2a5f57,
    0 8px 18px -12px #245149a6;
}
.btn-primary:hover,
.btn-teal:hover,
a.btn-primary:hover,
a.btn-teal:hover,
button.btn-primary:hover,
button.btn-teal:hover {
  background-color: #245149;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 3px #245149,
    inset 0 0 0 4px #f4f0e873,
    inset 0 0 0 999px #245149,
    0 14px 26px -14px #245149b3;
}
.btn-primary:active,
.btn-teal:active,
a.btn-primary:active,
a.btn-teal:active,
button.btn-primary:active,
button.btn-teal:active {
  background-color: #1c3f39;
  transform: scale(0.985);
  box-shadow:
    inset 0 0 0 3px #1c3f39,
    inset 0 0 0 4px #f4f0e88c,
    inset 0 0 0 999px #1c3f39,
    0 4px 10px -8px #24514999;
}
.btn-primary.btn-lg,
.btn-teal.btn-lg,
a.btn-primary.btn-lg,
button.btn-primary.btn-lg {
  box-shadow:
    inset 0 0 0 4px #2a5f57,
    inset 0 0 0 5px #f4f0e84d,
    inset 0 0 0 999px #2a5f57,
    0 10px 22px -12px #245149a6;
}
.btn-primary.btn-lg:hover,
.btn-teal.btn-lg:hover,
a.btn-primary.btn-lg:hover,
button.btn-primary.btn-lg:hover {
  box-shadow:
    inset 0 0 0 4px #245149,
    inset 0 0 0 5px #f4f0e873,
    inset 0 0 0 999px #245149,
    0 18px 32px -16px #245149b3;
}
.btn-primary.btn-lg:active,
.btn-teal.btn-lg:active,
a.btn-primary.btn-lg:active,
button.btn-primary.btn-lg:active {
  box-shadow:
    inset 0 0 0 4px #1c3f39,
    inset 0 0 0 5px #f4f0e88c,
    inset 0 0 0 999px #1c3f39;
}
.btn-primary > *,
.btn-teal > * {
  position: relative;
  z-index: 1;
}
.btn-secondary,
.btn-white,
a.btn-secondary,
a.btn-white,
button.btn-secondary,
button.btn-white {
  background-color: #fbf9f5;
  border-color: #cfc6b4;
  color: var(--text-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 0 3px #fbf9f5,
    inset 0 0 0 4px #17171a1a,
    inset 0 0 0 999px #fbf9f5,
    0 6px 14px -12px #17171a59;
}
.btn-secondary:hover,
.btn-white:hover,
a.btn-secondary:hover,
a.btn-white:hover,
button.btn-secondary:hover,
button.btn-white:hover {
  background-color: #fff;
  border-color: #a9a08f;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px #17171a26,
    inset 0 0 0 999px #fff,
    0 12px 24px -14px #17171a5e;
}
.btn-secondary:active,
.btn-white:active,
a.btn-secondary:active,
button.btn-secondary:active {
  background-color: var(--bg);
  transform: scale(0.985);
  box-shadow:
    inset 0 0 0 3px var(--bg),
    inset 0 0 0 4px #17171a33,
    inset 0 0 0 999px var(--bg);
}
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn-ghost:hover {
  color: var(--text-primary);
  background-color: #17171a0a;
  box-shadow: none;
}
.btn-glass {
  box-shadow: none;
}
.dark-band .btn-primary,
.dark-band a.btn-primary {
  background-color: #f4f0e8;
  color: #17171a;
  border-color: transparent;
  box-shadow:
    inset 0 0 0 3px #f4f0e8,
    inset 0 0 0 4px #17171a26,
    inset 0 0 0 999px #f4f0e8,
    0 10px 22px -12px #00000073;
}
.dark-band .btn-primary:hover,
.dark-band a.btn-primary:hover {
  background-color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px #17171a33,
    inset 0 0 0 999px #fff,
    0 16px 30px -14px #00000080;
}
.dark-band .btn-secondary {
  background-color: #ffffff14;
  border-color: #fff3;
  color: #fff;
  box-shadow: inset 0 1px #ffffff24;
}
.cam-actions .btn-secondary {
  background: transparent;
  color: #f4f0e8;
  border-color: #f4f0e859;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn[disabled] {
  box-shadow: none;
  opacity: 0.62;
}
@media (max-width: 480px) {
  .btn,
  a.btn {
    min-height: 44px;
  }
  .nav-in .btn,
  .nav-in a.btn {
    min-height: 40px;
  }
}
.btn-primary[disabled],
.btn-teal[disabled] {
  opacity: 1;
  background: #c3cfcb;
  color: #3d4a47;
  border-color: transparent;
  box-shadow: none;
}
.btn-primary[disabled] .arr,
.btn-teal[disabled] .arr {
  opacity: 0.7;
}
.btn-primary[disabled]:after,
.btn-teal[disabled]:after {
  display: none;
}
.pill,
.pill.verdict {
  border-radius: 999px;
}
.p-nu,
.p-info {
  background: var(--glass-fill);
  border-color: var(--glass-rim);
  color: var(--text-secondary);
}
.p-ac {
  box-shadow: none;
}
.rx-chip {
  background: var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-rim),
    var(--glass-hi);
  color: var(--text-secondary);
}
.rx-tab,
.rx-sortb,
.toggles button,
.fold-all {
  background: var(--glass-fill);
  border-color: var(--glass-rim);
  color: var(--text-secondary);
  box-shadow: var(--glass-hi), var(--glass-lo);
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.rx-tab:hover,
.rx-sortb:hover,
.toggles button:hover,
.fold-all:hover {
  background: #ffffff8c;
  color: var(--text-primary);
}
.rx-tab.on,
.rx-sortb.on,
.toggles button.on {
  background: #fff;
  border-color: #fff;
  color: var(--text-primary);
  box-shadow:
    0 1px 2px #17171a1f,
    0 6px 14px -6px #17171a40;
}
.pager-arrow,
.pager-title {
  background: var(--glass-fill);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-hi), var(--glass-lo);
}
.ba .lbl,
.ba2 .lbl,
.photo-frame .tag,
.crop .tag,
.bas-tag,
.hero-hud span {
  background: var(--glass-smoke);
  color: #fff;
  border: 1px solid var(--glass-smoke-rim);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px #ffffff38,
    0 8px 20px -10px #0006;
}
.ba2 .lbl.r,
.bas-row.after .bas-tag {
  background: #245149bd;
}
.bas-tag {
  border-radius: 6px;
}
.ba.look .lbl {
  background: #fff;
  color: var(--ink);
  border: 0;
  border-radius: 5px;
  box-shadow: 0 1px 6px #00000029;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero3 .hud span {
  background: var(--glass-fill-strong);
  color: var(--text-primary);
  border: 1px solid var(--glass-rim);
  border-radius: 999px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-hi),
    var(--glass-lo),
    0 8px 20px -12px #17171a59;
}
.hero3 .fig.scan .scan-hud span,
.hero3 .fig.scan .scan-ang,
.hero3 .fig.scan .scan-ticks .tk {
  border: 1px solid var(--glass-smoke-rim);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px #ffffff2e;
}
.hero3 .fig.scan .scan-hud span {
  background: #17171a9e;
}
.hero3 .fig.scan .scan-ang {
  background: #2f6b62d1;
}
.hero3 .fig.scan .scan-ticks .tk {
  background: #17171a80;
}
.hero3 .fig.scan .scan-ticks .tk.on {
  background: #17171abd;
}
.hero3 .fig.scan .scan-ticks .tk.done {
  background: #2f6b62d1;
}
.card,
.metric,
.summary-card,
.verdict-card,
.region .verdict:not(.pill),
.rx,
.potential,
.norwood,
.feat-tile,
.why .w,
.row-item,
.hero3 .pc,
.profile-card,
.lockbox,
.faq.compact details,
.insight-card {
  border-color: var(--card-rim);
  box-shadow: var(--card-shadow);
}
.card,
.metric,
.summary-card,
.verdict-card,
.region .verdict:not(.pill),
.rx,
.potential,
.norwood,
.profile-card,
.lockbox {
  border-radius: 20px;
}
.feat-tile,
.why .w,
.row-item,
.hero3 .pc,
.faq.compact details {
  border-radius: 18px;
}
.card.soft {
  border-color: transparent;
  box-shadow: none;
}
.metric:hover {
  border-color: var(--card-rim);
  box-shadow:
    0 0 0 1px #17171a14,
    0 24px 48px -30px #17171a57;
}
.metric.locked {
  box-shadow: none;
  border-color: var(--line);
}
.callout {
  border-radius: 0 18px 18px 0;
  box-shadow: 0 24px 48px -32px #17171a2e;
}
.tw {
  border-radius: 18px;
  border-color: var(--card-rim);
  box-shadow: var(--card-shadow);
}
.hero3 .fig.scan .mchip {
  background: #ffffff9e;
  border: 1px solid var(--glass-rim);
  border-radius: 11px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 0 0 0.5px #2f6b6280,
    var(--glass-hi),
    var(--glass-lo),
    0 16px 32px -16px #17171a66;
}
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --glass-fill: var(--surface-2);
    --glass-fill-strong: var(--surface-1);
    --glass-rim: var(--line);
    --glass-blur: none;
    --glass-hi: 0 0 0 0 transparent;
    --glass-lo: 0 0 0 0 transparent;
    --glass-shadow: 0 8px 30px rgba(23, 23, 26, 0.06);
    --glass-smoke: rgba(23, 23, 26, 0.86);
    --glass-smoke-rim: rgba(255, 255, 255, 0.18);
  }
  .nav-in,
  .subnav,
  .btn-secondary,
  .btn-ghost,
  .btn-white,
  .mchip,
  .ba .lbl,
  .ba2 .lbl,
  .photo-frame .tag,
  .crop .tag,
  .hero3 .hud span {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero3 .fig.scan .mchip {
    background: var(--surface-1);
    box-shadow:
      0 0 0 0.5px #2f6b6280,
      0 6px 16px #17171a24;
  }
  .btn-white {
    background: #fff;
  }
  .subnav a.on,
  .rx-tab.on,
  .rx-sortb.on,
  .toggles button.on {
    background: #fff;
    box-shadow: 0 1px 2px #17171a1f;
  }
  @media (max-width: 760px) {
    .nav-in {
      background: var(--surface-1);
    }
    .nav.on-dark .nav-in {
      background: #1b1e21;
    }
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: var(--surface-2);
    --glass-fill-strong: var(--surface-1);
    --glass-rim: var(--line);
    --glass-blur: none;
    --glass-hi: 0 0 0 0 transparent;
    --glass-lo: 0 0 0 0 transparent;
    --glass-shadow: 0 8px 30px rgba(23, 23, 26, 0.06);
    --glass-smoke: rgba(23, 23, 26, 0.86);
    --glass-smoke-rim: rgba(255, 255, 255, 0.18);
  }
  .nav-in,
  .subnav,
  .btn-secondary,
  .btn-ghost,
  .btn-white,
  .mchip,
  .ba .lbl,
  .ba2 .lbl,
  .photo-frame .tag,
  .crop .tag,
  .hero3 .hud span,
  .hero3 .fig.scan .scan-hud span,
  .hero3 .fig.scan .scan-ang,
  .hero3 .fig.scan .scan-ticks .tk {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero3 .fig.scan .mchip {
    background: var(--surface-1);
  }
  .btn-white {
    background: #fff;
  }
  @media (max-width: 760px) {
    .nav-in {
      background: var(--surface-1);
    }
  }
}
@media print {
  :root {
    --glass-fill: #fff;
    --glass-fill-strong: #fff;
    --glass-rim: #cfcfc9;
    --glass-blur: none;
    --glass-hi: 0 0 0 0 transparent;
    --glass-lo: 0 0 0 0 transparent;
    --glass-shadow: 0 0 0 0 transparent;
    --glass-smoke: #17171a;
    --glass-smoke-rim: #17171a;
    --card-rim: #cfcfc9;
    --card-shadow: 0 0 0 0 transparent;
  }
  .hero3 {
    background: #fff;
  }
  body:has(main.pad):before {
    display: none;
  }
  .subnav,
  .pill,
  .rx-tab,
  .rx-sortb,
  .toggles button,
  .mchip,
  .ba .lbl,
  .ba2 .lbl,
  .photo-frame .tag,
  .crop .tag,
  .bas-tag,
  .card,
  .metric,
  .callout,
  .tw {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .hero3 .fig.scan .mchip {
    background: #fff;
  }
}
:root {
  --r-4: 24px;
  --r-3: 18px;
  --r-2: 12px;
  --r-1: 6px;
  --r-cap: 999px;
  --r: var(--r-3);
  --r-sm: var(--r-1);
  --r-lg: var(--r-4);
}
:root .report-preview,
:root .paywall,
:root .dark-band,
:root .vcard,
:root .tier,
:root .price,
:root .drop,
:root .views,
:root .diagram,
:root .auth-card,
:root .cam-in,
:root .bj-modal,
:root .bj-push,
:root .keep-modal .km-in,
:root .ms-box {
  border-radius: var(--r-4);
}
:root .card,
:root .step,
:root .insight-card,
:root .metric,
:root .summary-card,
:root .profile-card,
:root .lockbox,
:root .tier-strip,
:root .rx,
:root .potential,
:root .norwood,
:root .verdict-card,
:root .region .verdict:not(.pill),
:root .tw,
:root .crop,
:root .photo-frame,
:root .ba,
:root .ba2,
:root .proto,
:root .crisis,
:root .slot,
:root .row-item,
:root .why .w,
:root .feat-tile,
:root .hero3 .pc,
:root .hero-panel .pc,
:root .hero3 .hint,
:root .faq.compact details,
:root .doc details,
:root .checkout .opt,
:root .pipeline > div,
:root .rlist .r,
:root .photo-preview-frame,
:root .region-plan,
:root .bj-felt,
:root .pay-box,
:root .stat,
:root .claim,
:root .cmp-card,
:root .cmp-diff,
:root .shape-card,
:root .shape-figure,
:root .refcard,
:root .refstrip,
:root .refin,
:root .col-card,
:root .col-locked,
:root .col-note,
:root .view-card,
:root .blemish-map,
:root .dim-overall,
:root .dim-empty,
:root .dim-skipped,
:root .brow-side,
:root .brow-img,
:root .vd-first,
:root .ear-card,
:root .ear-headline,
:root .ear-why,
:root .ear-ask,
:root .ear-detail,
:root .metrics .read-block,
:root .region-body .read-block,
:root .blem-consistency,
:root .blem-caveats,
:root .rec-group,
:root .mag-block,
:root .bas-block,
:root .hs-head,
:root .glass-read,
:root .measuring,
:root .restore-bar,
:root .store-state,
:root .ov-fig,
:root .look-one img,
:root .look-card.alt-idle .alt-face,
:root .scale-strip div,
:root .cam-review img,
:root .hero3 .fig.scan {
  border-radius: var(--r-3);
}
:root .callout {
  border-radius: 0 var(--r-3) var(--r-3) 0;
}
:root .metric .candid {
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
:root .lk-intro {
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
:root .hero3 .fig.scan .scan-win,
:root .hero3 .fig.scan .scan-ov,
:root .hero3 .fig.scan .scan-fr {
  border-radius: inherit;
  clip-path: inset(0 round var(--r-3));
}
:root .formula,
:root .harmony,
:root .style-card,
:root .hairline-cta,
:root .capture-tips div,
:root .choice label,
:root .choice.big label,
:root .facts > div,
:root .gallery div,
:root .gallery.locked .ph,
:root .term-pop,
:root .ts-col,
:root .shape-cell,
:root .calls-standing,
:root .call,
:root .blem-headline,
:root .gl-fig img,
:root .col-formula,
:root .blemish-map.empty p,
:root .col-swatch,
:root .pal-item i,
:root .hs-cell,
:root .summary-card .bl-verdict,
:root .bl-verdict,
:root #results.teaser .locked.lk-row,
:root .points-tile .points-wrap,
:root .map-wrap .points-wrap,
:root .teaser-card .tz-stat,
:root .ms-fact,
:root .ms-slow,
:root .bj-gate input,
:root .mag,
:root .rec-summary,
:root .glasses-q,
:root .ba-strip,
:root .callout-fig,
:root .qgrid a,
:root .hq-cell,
:root .col-cell,
:root .chin-cell,
:root .ear-dia,
:root .ear-t,
:root .view-thumbs img,
:root .ov-cell,
:root .slot .prev-offer,
:root .lim-list li,
:root .face-strip .fs-row img,
:root .nw-head.on,
:root .tz-ref,
:root .rec-fig,
:root .bas-keep,
:root .gl-cell,
:root .bj-card,
:root .fold-hint,
:root .hero3 .fig.scan .mchip,
:root .photo-preview,
:root .rx-canvas,
:root .angles img,
:root select,
:root input[type="text"],
:root input[type="email"],
:root textarea,
:root .auth-card input,
:root .checkout textarea,
:root .refin input,
:root .refstrip .rs-code,
:root .refcard .refc-code,
:root .pager-arrow,
:root .pager-title,
:root .rel-card {
  border-radius: var(--r-2);
}
@media (max-width: 700px) {
  :root .pager-menu button {
    border-radius: var(--r-2);
  }
}
@media (max-width: 640px) {
  :root table.tbl tr,
  :root table.blem-table tr {
    border-radius: var(--r-2);
  }
}
@media (max-width: 720px) {
  :root table.compare tr {
    border-radius: var(--r-2);
  }
  :root table.compare td.us {
    border-radius: var(--r-2);
  }
}
@media (max-width: 560px) {
  :root .pay-box {
    border-radius: var(--r-3) var(--r-3) 0 0;
  }
}
@media (max-width: 860px) {
  :root .stat {
    border-radius: 0;
  }
}
:root code,
:root .read-tag,
:root .blem-read-tags .read-tag,
:root .ba.look .lbl,
:root .ba.look .look-stamp,
:root .mag-zoom,
:root .bas-tag,
:root .hero3 .fig .split-lbl,
:root .bj-code,
:root .bj-motif .m-card,
:root .ear-key,
:root .stepbar .cur,
:root .tier .best,
:root .rx-row,
:root .fp,
:root .thirds-viz,
:root .region-fold,
:root .bj-confetti i,
:root .pot-list li,
:root .blem-quality {
  border-radius: var(--r-1);
}
:root .progress,
:root .gl-bar,
:root .gl-bar b,
:root .rx-bar,
:root .vd-bar,
:root .vd-bar i,
:root .refbar,
:root .refbar > span,
:root .ms-bar,
:root .ms-bar i,
:root .ov-track,
:root .ov-fill,
:root .stand-bar,
:root .hq-track,
:root .fn-row .fn-bar,
:root .dim-track,
:root .dim-ci,
:root .dim-mark,
:root .burger i,
:root .burger i:before,
:root .burger i:after,
:root .hero3 .fig.scan .scan-ticks .tk,
:root .spinner {
  border-radius: var(--r-cap);
}
:root .bar .bt,
:root .bar .bf {
  border-radius: 0 var(--r-cap) var(--r-cap) 0;
}
:root .burger,
:root .menu-close,
:root .nav-link {
  border-radius: var(--r-cap);
}
:root .feat-tile {
  --r-own: var(--r-3);
  --r-inset: 10px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
  padding: var(--r-inset);
}
:root .feat-tile > .feat-img,
:root .feat-tile > img {
  border-radius: var(--r-in, var(--r-1));
}
:root .row-item {
  --r-own: var(--r-3);
  --r-inset: 14px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
}
:root .row-item .th {
  border-radius: var(--r-in, var(--r-1));
}
:root .view-card {
  --r-own: var(--r-3);
  --r-inset: 14px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
}
:root .view-card .view-thumb,
:root .view-card .view-thumb-wrap,
:root .view-lock .view-thumb-wrap {
  border-radius: var(--r-in, var(--r-1));
}
:root .slot {
  --r-own: var(--r-3);
  --r-inset: 12px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
}
:root .slot img,
:root .slot .ico {
  border-radius: var(--r-in, var(--r-1));
}
:root .diagram {
  --r-own: var(--r-4);
  --r-inset: 8px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
  padding: var(--r-inset);
}
:root .diagram > img,
:root .diagram > svg,
:root .diagram > figure,
:root .diagram > canvas {
  border-radius: var(--r-in, var(--r-3));
}
:root .ba2 {
  --r-own: var(--r-3);
  --r-inset: 10px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
}
:root .ba2 .cap {
  border-radius: var(--r-in, var(--r-1));
}
:root .report-preview {
  --r-own: var(--r-4);
  --r-inset: clamp(16px, 3vw, 40px);
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
  padding: var(--r-inset);
}
:root .report-preview .sheet,
:root .report-preview #sheet {
  border-radius: var(--r-in, var(--r-3));
}
:root .ov-fig,
:root .blemish-map {
  --r-own: var(--r-3);
  --r-inset: 1px;
  --r-in: max(0px, calc(var(--r-own) - var(--r-inset)));
}
:root .ov-fig > img,
:root .blemish-map > img,
:root .blemish-map > canvas {
  border-radius: var(--r-in, var(--r-2));
}
:root .photo-frame > img,
:root .crop > img,
:root .crop > canvas,
:root .photo-frame > canvas,
:root .ba > img,
:root .ba > canvas,
:root .vcard > img,
:root .vcard > video,
:root .insight-card > img {
  border-radius: inherit;
}
:root .btn-primary,
:root .btn-teal,
:root .btn-white {
  font-weight: 600;
  letter-spacing: -0.005em;
}
:root .btn-secondary,
:root .btn-ghost {
  font-weight: 500;
}
:root .subnav a.go {
  font-weight: 580;
}
@media (min-width: 900px) {
  :root .btn-primary,
  :root .btn-teal,
  :root .btn-white {
    padding: 14px 26px;
    font-size: 15.5px;
  }
  :root .btn-primary.btn-lg,
  :root .btn-teal.btn-lg,
  :root .btn-white.btn-lg {
    padding: 18px 34px;
    font-size: 17px;
  }
  :root .btn-primary.btn-sm,
  :root .btn-teal.btn-sm {
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 580;
  }
  :root .nav-in .btn,
  :root .nav-in a.btn {
    padding: 10px 18px;
    font-size: 14px;
  }
}
:root .tier,
:root .price,
:root .stat,
:root .claim,
:root .cmp-card,
:root .cmp-diff,
:root .proto,
:root .step,
:root .col-card,
:root .col-note,
:root .view-card,
:root .shape-card,
:root .refcard,
:root .crisis,
:root .pipeline > div,
:root .checkout .opt,
:root .rlist .r,
:root .ear-card,
:root .doc details {
  border-color: var(--card-rim);
  box-shadow: var(--card-shadow);
}
:root .drop,
:root .slot,
:root .refin,
:root .col-locked {
  box-shadow: none;
}
@media (max-width: 860px) {
  :root .stat {
    box-shadow: none;
    border-color: transparent;
  }
}

/* a figure image capped at its own pixels sits centred in its tile rather than hugging the left */
#results img[data-px-capped] {
  display: block;
  margin-inline: auto;
}

/* the candid colour read in the skin section */
.candid-skin {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--tone);
  background: var(--surface-2);
  border-radius: 0 var(--r-3, 14px) var(--r-3, 14px) 0;
}
.candid-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   BUILD 161 · THE QUIETER REPORT
   Presentation only — no measurement is touched. The report measured 27 distinct type sizes
   against a reference report's six, 322 chips on one page, and a repeating solid-green slab
   after every region. The rules below collapse the small type onto four steps, take the
   colour out of the neutral chips so the graded ones stand out, turn the region summary into
   a rule-and-text rather than a slab, and give figures a number and a caption in one place.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
#results .tiny,
#results .feat-tile figcaption .tiny,
#results .read-tags,
#results .mag-reads dd .tiny,
#results .ear-t .tiny {
  font-size: 12.5px;
  line-height: 1.5;
}
#results .small,
#results .region-why,
#results .read-t,
#results .rec-summary li,
#results .metric .txt,
#results .callout p {
  font-size: 14px;
  line-height: 1.58;
}
#results .kicker,
#results .eyebrow,
#results .hs-label,
#results .region-h .n,
#results .mag-reads dt,
#results .angles figcaption {
  font-size: 11px;
  letter-spacing: 0.09em;
}
#results .pill {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
}
/* neutral chips carry information, not colour — the graded ones (ok / warn / crit / accent)
   keep theirs and read as the exceptions they are */
#results .pill.p-nu {
  background: transparent;
  border-color: var(--line);
  color: var(--text-secondary);
}
#results .read-tag {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding-left: 0;
}
/* the region summary: a rule and a paragraph, not a slab of green after every section */
#results .rec-summary.region-summary {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone-deep);
  border-radius: 0 12px 12px 0;
}
#results .rec-summary.region-summary .kicker {
  color: var(--tone-deep);
}
#results .rec-summary.region-summary p,
#results .rec-summary.region-summary li,
#results .rec-summary.region-summary ul {
  color: var(--text-primary);
}
/* every figure gets its caption in the same place, at the same size, and the number of the
   figure sits with it — a report is read by its figures first */
#results .feat-tile {
  counter-increment: fig;
}
#results .feat-tile figcaption > b::before {
  content: "Fig. " counter(fig) " · ";
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
#results {
  counter-reset: fig;
}
/* one voice for the standing explanations: the "why this region matters" boxes lose their
   tinted panel and read as a sub-heading paragraph */
#results .region-why {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 14px;
  max-width: 80ch;
}
/* the score card and the region heads keep their display numbers; nothing else in a region
   competes with them at that size */
#results .region-h h3 {
  font-size: 28px;
  letter-spacing: -0.01em;
}
/* phones: one column, full-bleed figures, no side-compression */
@media (max-width: 600px) {
  #results .region-body {
    gap: 14px;
  }
  #results .feat-tile,
  #results .mag-block,
  #results .callout,
  #results .metric {
    border-radius: 14px;
  }
  #results .metric {
    grid-template-columns: 1fr;
    padding: 16px 16px;
  }
  #results .ear-split {
    grid-template-columns: 1fr;
  }
  #results .grid2 {
    grid-template-columns: 1fr;
  }
  #results .alt-grid {
    grid-template-columns: 1fr;
  }
  #results .crop canvas {
    width: 100%;
  }
}

/* print: the figures that were being sawn across a sheet, and the toner slabs */
@media print {
  #results .crop,
  #results .feat-tile,
  #results .ear-detail,
  #results .mag,
  #results .look-card,
  #results .candid-skin {
    break-inside: avoid;
  }
  #results .rx .rx-canvas,
  #results .rx canvas {
    max-height: 110mm !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #results .rx-controls,
  #results .fold-controls,
  #results .region-fold {
    display: none !important;
  }
  #results .rec-summary.region-summary,
  #results .region-why,
  #results .callout {
    background: #fff !important;
    color: #111 !important;
    border-color: #bbb !important;
  }
  #results .pill.p-nu {
    border-color: #bbb;
  }
}

/* phones: nested cards stop eating the width — one border, one padding */
@media (max-width: 600px) {
  #results .card {
    padding: 14px 12px;
  }
  #results .card .card,
  #results .card .rx,
  #results .rx .card {
    padding: 10px 8px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #results .region-why {
    padding-left: 10px;
  }
  #results .rx-controls {
    gap: 6px;
  }
}
/* BUILD 162 · plain-spoken headings and the "about" spec list.
   Two-line headings are one colour now; emphasis comes from the line break, not a second tone. */
.about-lede {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--text-primary);
  text-align: center;
  max-width: 58ch;
  margin: 0 auto 26px;
}
.spec-list {
  margin: 0 auto;
  max-width: 720px;
  border-top: 1px solid var(--line);
}
.spec-list > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 6px 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec-list dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
  padding-top: 3px;
}
.spec-list dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.spec-list dd a,
.about-more a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: #17171a4d;
  text-underline-offset: 3px;
}
.spec-list dd a:hover,
.about-more a:hover {
  text-decoration-color: var(--text-primary);
}
.tail-cta {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 28px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: 0 18px 44px -34px #17171a66;
}
.tail-cta h2 {
  margin: 0;
}
.tail-cta p {
  margin: 12px auto 20px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.tail-cta .cta-note {
  margin: 12px 0 0;
  white-space: normal;
}
.tail-more {
  margin: 9px 0 0;
  font-size: 13.5px;
}
.tail-more a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#tail {
  padding: 60px 0 80px;
}
@media (max-width: 760px) {
  #tail {
    padding: 36px 0 48px;
  }
}
@media (max-width: 760px) {
  .tail-cta {
    padding: 24px 18px 22px;
    border-radius: 16px;
  }
  .tail-cta p {
    font-size: 14.5px;
    margin-bottom: 16px;
  }
  .tail-cta .btn {
    width: 100%;
    justify-content: center;
  }
}
.about-more {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .about-lede {
    text-align: left;
    font-size: 15.5px;
    line-height: 1.52;
    margin-bottom: 18px;
  }
  .spec-list {
    border-top: 0;
    display: grid;
    gap: 8px;
  }
  .spec-list > div {
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-1);
  }
  .spec-list dt {
    display: block;
    padding: 0;
    margin: 0 0 5px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--tone);
  }
  .spec-list dd {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
  }
  .about-more {
    font-size: 13.5px;
    margin-top: 18px;
  }
}
/* BUILD 162 · the overview and the candid read, structured instead of a paragraph */
.summary-card .ov {
  display: grid;
  gap: 12px;
}
.summary-card .ov .ov-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
}
.summary-card .ov .ov-lede b {
  font-weight: 600;
}
.summary-card .ov .ov-far {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0 4px;
}
.summary-card .ov .ov-far ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.summary-card .ov .ov-far li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.summary-card .ov .ov-far li b {
  font-weight: 540;
}
.summary-card .ov .ov-far li .mono {
  font-size: 11.5px;
  white-space: nowrap;
}
.summary-card .ov .ov-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.summary-card .ov .ov-src {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.bl-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  min-width: 0;
}
.bl-list li .bl-pct {
  font-size: 11px;
  white-space: nowrap;
}
.bl-list li .bl-note {
  flex: 1 1 100%;
}
/* BUILD 162 · explorer controls on a phone: one tidy row per group, left-aligned */
@media (max-width: 640px) {
  #results .rx-controls {
    justify-content: flex-start;
    flex-basis: 100%;
    gap: 8px 10px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  #results .rx-sort,
  #results .rx-tabs {
    flex: 0 0 auto;
  }
  #results .rx-sortb,
  #results .rx-tab {
    min-height: 36px;
    padding: 6px 11px;
  }
}
/* BUILD 162 · a citation link is allowed to break rather than push the page wider */
#results a[target="_blank"] {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  #results {
    overflow-x: clip;
  }
}
/* ── The lever ladder ─────────────────────────────────────────────────────────────────────────
   A ranked list where the ranking is the point, so the bar carries it. Used on /looksmaxxing
   in place of a 105-word sentence with six semicolons in it. */
.ladder {
  list-style: none;
  counter-reset: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.ladder li {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "n t" ". d";
  gap: 2px 12px;
  align-items: baseline;
  padding: 13px 14px 14px;
  border-radius: var(--r-2, 12px);
  isolation: isolate;
  overflow: hidden;
}
.ladder .ld-b {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  z-index: -1;
}
.ladder .ld-fixed .ld-b {
  background: color-mix(in srgb, var(--text-faint) 13%, transparent);
  border-right-color: color-mix(in srgb, var(--text-faint) 34%, transparent);
}
.ladder .ld-n {
  grid-area: n;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ladder b {
  grid-area: t;
  font-size: 16px;
  font-weight: 600;
}
.ladder .ld-d {
  grid-area: d;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 62ch;
}
@media (max-width: 560px) {
  .ladder li {
    padding: 11px 12px 12px;
    grid-template-columns: 24px 1fr;
    gap: 2px 9px;
  }
  .ladder b {
    font-size: 15px;
  }
  .ladder .ld-d {
    font-size: 13.5px;
  }
}
.doc table.conf td:last-child {
  min-width: 210px;
}
.doc table.conf .cbar-l:first-child {
  margin-top: 0;
}

/* ── build 166 · keep-reading rail at the foot of every written page ─────────────────────────── */
.keep {
  margin: 56px 0 48px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.keep-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.keep-h a {
  font-size: 13.5px;
  color: var(--tone);
}
.keep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.keep-card {
  display: block;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.keep-card:hover {
  text-decoration: none;
  border-color: var(--tone);
  box-shadow: var(--shadow-sm);
}
.keep-card b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.keep-card span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .keep-grid {
    grid-template-columns: 1fr;
  }
  .keep {
    margin: 40px 0 36px;
  }
}
@media print {
  .keep {
    display: none;
  }
}


/* build 166 · from any reading straight to the page that explains it */
.metric .m-how {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone);
  text-decoration: none;
}
.metric .m-how:hover {
  text-decoration: underline;
}
.term-pop .links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media print {
  .doc-fig,
  .mt-pipe,
  .mt-toc {
    break-inside: avoid;
  }
  .nav-links,
  .ni-instead {
    display: none;
  }
}

/* ── build 166 · page titles on the written pages ─────────────────────────────────────────────
   No coloured "emphatic line" anywhere: the title is one voice, in ink. What changes from page to
   page is the frame it sits in, drawn from the same vocabulary as the report: scan corners,
   caliper lines, a hairline rule, a folio, a landmark dot. */
.ph h1 .t2,
.doc-hero h1 .t2,
.sec-head h1 .t2 {
  color: inherit;
  font-style: normal;
  display: block;
}
/* the eyebrow is an inline-flex, so on its own it shares a line with the framed title box beside
   it; as a block-level flex it keeps its dot and takes its own line */
.ph > .eyebrow {
  display: flex;
  margin-bottom: 14px;
}
.ph-corners > .eyebrow {
  margin-bottom: 34px;
}
.ph-calipers > .eyebrow {
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .ph-corners > .eyebrow {
    margin-bottom: 26px;
  }
}
.ph-box {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* corners */
.ph-corners .ph-box {
  padding: 18px 22px 16px;
  margin: -18px -22px 12px;
}
.ph-corners .ph-box > i {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--tone);
  opacity: 0.85;
  pointer-events: none;
}
.ph-corners .ph-box > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.ph-corners .ph-box > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.ph-corners .ph-box > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.ph-corners .ph-box > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
/* calipers */
.ph-calipers .ph-box {
  padding: 0 0.32em;
  margin: 0 -0.32em;
}
.ph-calipers .ph-box > i {
  position: absolute;
  top: 0.16em;
  bottom: 0.06em;
  width: 1px;
  background: var(--tone);
  opacity: 0.75;
  pointer-events: none;
}
.ph-calipers .ph-box > i:before,
.ph-calipers .ph-box > i:after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: var(--tone);
}
.ph-calipers .ph-box > i:after { bottom: 0; }
.ph-calipers .ph-box > i.l { left: 0; }
.ph-calipers .ph-box > i.r { right: 0; }
.ph-calipers .ph-box > .tag {
  position: absolute;
  right: 0;
  top: -0.55em;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone);
  background: var(--bg);
  padding: 0 5px;
  font-style: normal;
}
/* rule */
.ph-rule .ph-rl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  max-width: 68ch;
}
.ph-rule .ph-rl:before,
.ph-rule .ph-rl:after {
  content: "";
  height: 1px;
  background: var(--tone);
  opacity: 0.7;
}
.ph-rule .ph-rl:before { width: 28px; }
.ph-rule .ph-rl:after { flex: 1; }
.ph-rule .ph-rl span {
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone);
  min-width: 0;
}
@media (max-width: 640px) {
  .ph-rule .ph-rl {
    flex-wrap: wrap;
  }
  .ph-rule .ph-rl:after {
    display: none;
  }
}
/* folio */
.ph-folio .ph-fo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ph-folio .ph-fo .n {
  color: var(--tone);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.ph-folio .ph-fo .ln {
  width: 44px;
  height: 1px;
  background: var(--tone);
  opacity: 0.7;
}
/* landmark dot on the closing character */
/* caret: a line that has just been typed and is waiting on you. Sized off the type itself, so it
   sits on the same baseline as the last character at any headline size, and it blinks. */
.ph-caret h1 .caret {
  display: inline-block;
  width: 0.055em;
  min-width: 2px;
  height: 0.74em;
  margin-left: 0.1em;
  vertical-align: -0.06em;
  background: var(--tone);
  border-radius: 1px;
  animation: phCaret 1.1s step-end infinite;
}
@keyframes phCaret {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-caret h1 .caret {
    animation: none;
    opacity: 0.9;
  }
}
/* the wash sits lower than the type it holds, so the paragraph under it needs a little room */
.ph-caret {
  margin-bottom: 14px;
}
/* the landmark dot stays available for the insight pages */
.ph-landmark h1 .q {
  position: relative;
  white-space: nowrap;
}
.ph-landmark h1 .q i {
  position: absolute;
  left: 50%;
  top: -0.42em;
  width: 0.17em;
  height: 0.17em;
  margin-left: -0.085em;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 0.075em #2f6b6229;
}
.ph-landmark h1 .q i:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 0.34em;
  background: var(--tone);
  opacity: 0.85;
}
@media (max-width: 640px) {
  .ph-corners .ph-box { padding: 12px 14px 10px; margin: -12px -14px 10px; }
  .ph-corners .ph-box > i { width: 18px; height: 18px; }
}

/* section headings on the written pages: a short green tick above, the number as a mono index */
.doc h2 {
  position: relative;
  border-top: 0;
  padding-top: 22px;
}
.doc h2:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 2px;
  background: var(--tone);
}
.doc h2 .h2n {
  display: inline-block;
  vertical-align: 0.55em;
  margin-right: 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--tone);
}
/* methodology: known limits as a ledger, the changelog as a timeline */
.limits {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
}
.limits li {
  max-width: none;
  padding: 16px 18px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-1);
  font-size: 15px;
  line-height: 1.55;
}
.limits li .k {
  display: block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.limits li b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.timeline {
  list-style: none;
  padding: 0 0 0 26px;
  margin: 18px 0 0;
  position: relative;
  max-width: 68ch;
}
.timeline:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.timeline li {
  position: relative;
  padding: 0 0 20px;
  max-width: none;
}
.timeline li:before {
  content: "";
  position: absolute;
  left: -25px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tone);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--tone);
}
.timeline li.plan:before {
  background: var(--bg);
  border-color: var(--bg);
  box-shadow: 0 0 0 1px var(--text-faint);
}
.timeline .v {
  display: inline-block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tone);
  border: 1px solid #2f6b6250;
  border-radius: 999px;
  padding: 5px 9px;
  margin-bottom: 8px;
}
.timeline li.plan .v {
  color: var(--text-muted);
  border-color: var(--line);
}
@media (max-width: 640px) {
  .limits { grid-template-columns: 1fr; }
}

/* ── build 168 · the sweep, moved off the front page and onto the page titles ─────────────────
   The homepage hero is a headline again. The idea the slider carried, ink turning to the site
   green from the right, survives here as a single pass over a written page's title the first time
   it is seen. It ends where it started, in ink, so nothing is left sitting in the accent colour. */
.ph-wipe .ph-box {
  position: relative;
  display: inline-block;
}
.ph-wipe .ph-box h1 {
  position: relative;
  margin: 0;
}
.ph-wipe .ph-box .sweep {
  position: absolute;
  inset: 0;
  color: var(--tone);
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--sw, 0%)) 0 var(--sl, 0%));
}
.ph-wipe.run .ph-box .sweep {
  animation: phSweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s 1 both;
}
@keyframes phSweep {
  0% {
    --sw: 0%;
    --sl: 0%;
  }
  45% {
    --sw: 100%;
    --sl: 0%;
  }
  100% {
    --sw: 100%;
    --sl: 100%;
  }
}
@property --sw {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --sl {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@media (prefers-reduced-motion: reduce) {
  .ph-wipe .ph-box .sweep {
    display: none;
  }
}

/* ── build 168 · the header treatments, used across the site ─────────────────────────────────
   The study we ran on the front-page slogan produced a small vocabulary. It is applied here to
   section heads and page titles so the site is not one flat ink voice from top to bottom. Each
   treatment is one idea, and no two neighbouring headings carry the same one. */

/* the draggable now/potential wipe, as a heading. Ink is now, the green comes in from the right,
   the same geometry as every comparison card. Drag it, or leave it and it sweeps on its own.
   Both layers are spans inside ONE box, and the green one inherits the box's padding at inset 0,
   so the two wrap identically at every width. */
.wipe-h {
  --x: 100%;
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0 26px 34px 0;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  outline: none;
  color: var(--text-primary);
}
.wipe-h .green {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: inherit;
  color: var(--tone);
  clip-path: inset(0 0 0 var(--x));
  pointer-events: none;
}
.wipe-h .bar {
  position: absolute;
  top: 0;
  bottom: 24px;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: var(--tone);
  pointer-events: none;
}
.wipe-h .knob {
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1.5px solid var(--tone);
  color: var(--tone);
  display: grid;
  place-items: center;
  box-shadow:
    0 8px 20px -8px #17171a5c,
    0 0 0 5px #2f6b621f;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.wipe-h .knob svg {
  width: 19px;
  height: 19px;
}
.wipe-h:focus-visible .knob,
.wipe-h.drag .knob {
  transform: scale(1.08);
  box-shadow:
    0 8px 20px -8px #17171a5c,
    0 0 0 9px #2f6b6229;
}
.wipe-h .lbl {
  position: absolute;
  bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}
.wipe-h .lbl.l {
  left: 0;
}
.wipe-h .lbl.r {
  right: 26px;
  color: var(--tone);
}
/* the knob shares a line with the two labels, so whichever label it is standing on gets out of
   its way rather than being printed through */
.wipe-h .lbl {
  transition: opacity 0.25s ease;
}
.wipe-h[data-side="potential"] .lbl.l,
.wipe-h[data-side="now"] .lbl.r {
  opacity: 0;
}
@media (max-width: 640px) {
  /* on a phone the headline is narrow enough that the knob and the two end labels fight for the
     same few pixels. The colour change and the cards under it carry the idea; the labels go. */
  .wipe-h {
    padding-right: 20px;
    padding-bottom: 40px;
  }
  .wipe-h .knob {
    width: 34px;
    height: 34px;
    bottom: -17px;
    margin-left: -17px;
  }
  .wipe-h .bar {
    bottom: 30px;
  }
  .wipe-h .lbl {
    display: none;
  }
}
@media print {
  .wipe-h .bar,
  .wipe-h .lbl {
    display: none;
  }
}

/* a heading with one word carried in the site green, used sparingly */
h2 .tone {
  color: var(--tone);
}
/* a heading with one word on a soft green wash, ink text so it stays readable */
h2 .wash {
  background: #2f6b6236;
  box-shadow:
    0 0 0 0.1em #2f6b6236,
    inset 0 -0.1em 0 #2f6b6252;
  border-radius: 2px;
}
/* a bare DOI is one unbreakable word and runs off the side of a phone; let it break */
a[href^="https://doi.org"],
a[href^="https://www.ncbi"],
a[href^="https://pubmed"] {
  overflow-wrap: anywhere;
}
/* the last phrase of a title on a soft wash, with the caret blinking at the end of it, inside
   the wash rather than floating past the full stop */
.hlw {
  background: #2f6b621c;
  box-shadow:
    0 0 0 0.08em #2f6b621c,
    inset 0 -0.08em 0 #2f6b6240;
  border-radius: 2px;
  padding: 0 0.02em;
  white-space: nowrap;
}
.hlw .caret {
  margin-left: 0.11em;
  margin-right: 0.02em;
}
/* a caret at the end of a heading, as if it had just been typed */
h2 .caret,
h1 .caret {
  display: inline-block;
  width: 0.055em;
  min-width: 2px;
  height: 0.74em;
  margin-left: 0.1em;
  vertical-align: -0.06em;
  background: var(--tone);
  border-radius: 1px;
  animation: phCaret 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  h2 .caret,
  h1 .caret {
    animation: none;
    opacity: 0.9;
  }
}

/* ── build 173 · mobile: iOS zooms the page when a sub-16px field takes focus ─────────────────
   .auth-card input is 14.5px (above, ~3193). On an iPhone, focusing a field below 16px makes
   Safari scale the whole page up, so tapping the email box on /account left the reader panning a
   zoomed sign-in card with the keyboard up — the first step of signing in. 16px is the threshold
   at which Safari leaves the viewport alone. Scoped below 640px so the desktop card is
   unchanged. ── */
@media (max-width: 640px) {
  .auth-card input {
    font-size: 16px;
  }
}

/* ── build 173 · the on-site payment modal ───────────────────────────────────────────────────
   Three things were wrong for a reader on a phone. The close button was positioned against
   .pay-box, and .pay-box is what scrolls, so the × left the screen as soon as Stripe's form was
   taller than the viewport. The sheet painted #fff and blurred what was behind it, which is the
   one material this palette does not use. And the page behind it still scrolled, because
   overflow:hidden on body alone does not hold on iOS.
   The head is now a sticky row that carries the ×, the sheet is card cream with a plain scrim
   behind it, and .pay-open locks html as well as body. .pay-foot is the new-tab escape hatch,
   which the script only writes when there is a link to put in it. ── */
.pay-modal {
  background: #17171acc;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overscroll-behavior: contain;
}
/* deliberately not a flex column: as flex items the mount would shrink below the height of
   Stripe's iframe and clip it. A plain block scroll container with a sticky head does not. */
.pay-box {
  background: var(--surface-1);
  padding: 0;
  overflow-x: hidden;
}
.pay-head {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-soft);
}
.pay-head-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pay-x {
  position: static;
  flex: 0 0 auto;
  margin: -2px -4px 0 0;
  display: grid;
  place-items: center;
}
#pay-mount {
  padding: 0 10px;
  overflow-x: hidden;
}
/* the escape hatch is pinned to the bottom edge of the sheet rather than left at the end of the
   scroll: Stripe's form is taller than any phone, and a control a reader has to scroll a whole
   payment form to find is not an escape from a form that will not load. */
.pay-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--surface-1);
  border-top: 1px solid var(--line-soft);
}
.pay-foot .tiny {
  flex: 1 1 150px;
}
html.pay-open,
html.pay-open body {
  overflow: hidden;
}
@media (max-width: 560px) {
  .pay-box {
    padding: 0;
    max-height: 92svh;
  }
  #pay-mount {
    padding: 0 6px;
  }
  .pay-foot {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
}

/* ── the blackjack win, carried to checkout ─────────────────────────────────────────────────
   A win played on this device applies itself, so none of this is the usual case. These are the
   two edges: the fallback code box for a reader who won on another device, and the one line
   that offers the winning address to a reader signed in under a different one. */
.code-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--tone);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.code-link:hover {
  color: var(--tone-deep);
}
.code-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.code-row input {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 240px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* One sentence, then the button it offers. Block flow keeps the address inside the sentence
   instead of making it a row of its own on a phone. */
.win-swap {
  display: block;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  line-height: 1.5;
}
.win-swap .btn-sm {
  display: block;
  width: 100%;
  margin-top: 9px;
  text-align: center;
}
@media (min-width: 560px) {
  .win-swap .btn-sm {
    display: inline-flex;
    width: auto;
    margin: 0 0 0 6px;
    vertical-align: baseline;
  }
}
/* The full price, struck through, beside the price a held win makes it. */
.tier .p .was,
.btn-price .was {
  font-size: 0.62em;
  margin-right: 0.28em;
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.tier.hi .p .was {
  color: #a9a69d;
}
.btn-price .was {
  color: #f4f0e8a6;
}


/* build 175 · the moment a win takes money off the price.
   At rest — every ordinary page load, including one that arrives with a win already held —
   .was is the plain struck figure it has always been and nothing below applies. Only a paint
   that is explicitly told to animate adds .px-cut, and only then is the native strike swapped
   for a line drawn left to right by a pseudo-element. --px-d staggers the elements a little so
   nine figures read as one event rather than nine; it is capped in paintPrices so the last
   element is never more than four steps behind the first. */
:root {
  --px-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --px-strike: 260ms;
  --px-in: 200ms;
  --px-stagger: 40ms;
}
.px-cut .was {
  text-decoration: none;
  position: relative;
}
.px-cut .was:after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.px-drawn .was:after {
  transform: scaleX(1);
  transition: transform var(--px-strike) var(--px-ease) var(--px-d, 0ms);
}
/* The new figure holds its space from the first frame, so the line draws and the price arrives
   without the button or the sentence around it changing width twice. */
.px-cut .now {
  opacity: 0;
  transform: translateY(2px);
}
.px-drawn .now {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--px-in) var(--px-ease) calc(var(--px-d, 0ms) + var(--px-strike)),
    transform var(--px-in) var(--px-ease) calc(var(--px-d, 0ms) + var(--px-strike));
}
.px-cut .now,
.px-drawn .now {
  display: inline-block;
}
/* A figure in running prose never carried a struck price beside it, so it turns over in place
   on the beat the lines finish drawing instead of growing a second number. */
.px-swap {
  animation: pxSwap var(--px-in) var(--px-ease) both;
}
@keyframes pxSwap {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-cut .was {
    text-decoration: line-through;
  }
  .px-cut .was:after {
    display: none;
  }
  .px-cut .now,
  .px-drawn .now {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .px-swap {
    animation: none;
  }
}

/* ── BUILD 182 · THE TABLE IS NEVER SILENT WHILE MONEY IS ON IT ─────────────────────────────
   .bj-holding is the line that stands where the controls will be during the double's deal, so
   the four seconds after "Risk it" say something instead of nothing. .bj-nudge is what a click
   on the backdrop does when there is an unclaimed discount: the modal answers the click rather
   than closing on it, so the reader learns the click landed and the win survives. */
.bj-holding {
  opacity: 0.72;
  font-style: italic;
}
@keyframes bjNudge {
  0% { transform: scale(1); }
  38% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.bj-modal.bj-nudge {
  animation: bjNudge 260ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .bj-modal.bj-nudge { animation: none; }
}

/* ── BUILD 186 · THE WIDE TABLES ON A PHONE ────────────────────────────────────────────────────
 *
 * Every wide table on this site sits in a `.tw` scroller, so nothing is ever cut off for good —
 * but on a 390px phone the visible part of the pricing table is its first column ALONE. A reader
 * on a phone sees a list of everything in the report and no indication of which tier gives it to
 * them: the one thing that table exists to say is the one thing off screen, with no cue that
 * there is anything to swipe to. Measured: table 560px wide in a 344px box, first column 340px of
 * it because of an inline min-width:260px.
 *
 * Two different tables, two different answers.
 *
 * THE PRICING TABLE FITS. Its other two columns are ticks, dashes and two short phrases, so they
 * need about 70px each; the first column gives up its 260px floor and the whole thing lands
 * inside the phone with nothing to swipe.
 *
 * THE PROSE TABLES CANNOT. Canthion-vs-Qoves and the methodology tables are three columns of
 * sentences, and squeezing those into 344px makes a column of one-word lines. They keep scrolling
 * — but the first column, the one that says which row you are reading, is pinned, so swiping the
 * comparison across keeps its labels in view instead of leaving you holding an anonymous column
 * of text.
 */
@media (max-width: 560px) {
  .tw table.cmp {
    width: 100%;
    /* every table on the site carries a base `min-width: 560px` — that floor is WHY the .tw
       scroller exists. The pricing table is the one table that does not need it on a phone. */
    min-width: 0;
    /* auto layout still sizes the first column to its content however small its min-width is, so
       the table stayed 560px wide and the tier columns stayed off screen. Fixed layout is what
       actually hands the leftover width to column one and holds the other two at 66px. */
    table-layout: fixed;
  }
  .tw table.cmp th:first-child,
  .tw table.cmp td:first-child {
    min-width: 0 !important;
    width: auto;
  }
  .tw table.cmp th:nth-child(2),
  .tw table.cmp td:nth-child(2) {
    width: 58px;
    text-align: center;
  }
  /* the paid column carries "$59 · one-time" under its heading and needs the wider of the two */
  .tw table.cmp th:nth-child(3),
  .tw table.cmp td:nth-child(3) {
    width: 86px;
    text-align: center;
  }
  .tw table.cmp th {
    white-space: normal;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .tw table.cmp th,
  .tw table.cmp td {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 720px) {
  .tw table:not(.cmp) th:first-child,
  .tw table:not(.cmp) td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface-1);
    box-shadow: 1px 0 0 var(--line);
  }
}

/* The sort control already wraps, but "MOST UNUSUAL FIRST" as one unbreakable mono line is wider
   than a 360px phone leaves for it once the "Order" label and the first pill have taken their
   share: measured 368px against a 360px viewport, so the last pill lost its right edge. The label
   inside a pill may break at narrow widths; the pills stay pills. */
@media (max-width: 380px) {
  .rx-sort {
    gap: 5px;
  }
  .rx-sortb {
    font-size: 10.5px;
    padding: 5px 8px;
    letter-spacing: 0.04em;
    white-space: normal;
    max-width: 100%;
  }
}

/* ── BUILD 190 · THE SCAN PAGE ON A PHONE: LESS AIR, SAME STEPS ─────────────────────────────── */
@media (max-width: 560px) {
  #step-photos .sec-head h2 {
    font-size: 26px !important;
  }
  #step-photos .sec-head {
    margin-bottom: 12px !important;
  }
  #step-photos .lede {
    font-size: 15.5px;
    line-height: 1.45;
  }
  #step-photos .sec-head p.small,
  #step-photos #photos-what {
    font-size: 13.5px;
  }
  #prequestions {
    padding: 12px 13px !important;
    margin: 12px 0 14px !important;
  }
  #prequestions .grid2 {
    gap: 10px !important;
  }
  .refin {
    padding: 10px 12px;
    margin: 10px 0 12px;
  }
  .drop {
    padding: 18px 14px;
  }
  .drop .ill {
    max-height: 120px;
  }
  .drop .big {
    font-size: 16px;
  }
  .drop .small {
    font-size: 12.5px;
  }
  .view-head .muted.small {
    font-size: 13px;
  }
  .act-row .btn-lg {
    padding: 12px 16px;
    font-size: 14.5px;
  }
}
/* ── BUILD 191 · the camera guide reads like the rest of the site ─────────────────────────── */
.cam-hint {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: #e6e0d4;
  letter-spacing: 0;
}
.cam-hint.cam-note b {
  font-weight: 600;
  color: #f4f0e8;
}
.cam-hint.cam-mirror {
  font-size: 12.5px;
  color: #b9b2a6;
}
.cam-top b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0;
}
/* build 191: the photo tags sit on one quiet line — smaller, tighter, never wrapped */
.crop .tag,
.photo-frame .tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(12, 14, 16, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── build 201 · written pages ──────────────────────────────────────────────────────────────── */
.rv-on .rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rv-d, 0ms),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rv-d, 0ms);
}
.rv-on .rv.rv-in {
  opacity: 1;
  transform: none;
}
@media print {
  .rv-on .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}
main.pv-page > h2 {
  margin-top: 56px;
}
main.pv-page > h2 + p,
main.pv-page > h2 + ul,
main.pv-page > h2 + ol,
main.pv-page > h2 + .tw {
  margin-top: 14px;
}
.pv-toc {
  margin: 22px 0 28px;
}
.pv-providers {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.pv-providers li {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 10px);
  background: var(--surface-1);
  font-size: 14px;
  line-height: 1.45;
}
.pv-providers li b {
  display: block;
  font-weight: 600;
}