/* 2026-11-12 /buy/ "Searching on your own vs. searching with us." as ONE framed picture read in two seconds, built to
   the floor (skills/house_design/_refs/floor_agents_compare_20261112_1440.jpg): two equal halves in one frame, "vs" on
   the seam. Left, on mist: the real sites a buyer checks alone, as equal white cards with their own marks, drawn
   browser tabs for the listing portals, and dark tags (another tab, another login, copy and paste), all tied together
   in a dense web. Right, on the dark panel: one calm real screen of our home search, large enough to read. One whole
   sentence under each side, a one-line truth caption, the six rows collapsed below.
   fix1b-buy-rework built the first version; fin1-buy rebuilt it to the floor (equal halves, real marks, calm screen).
   Scoped to .g6vs (template-parts/buy-deep.php; .g6v-* is taken by gen6-v9-composition.css). Tokens only (the page's
   computed gen6 tokens). Auto-loaded by inc/gen6-owner-punch.php; motion by js/gen6-punch-versus.js. */

.g6vs .g6vs-pic {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1180px;
  margin: 8px auto 0;
  border-radius: var(--g6-radius);
  box-shadow: var(--g6-floating-shadow);
}
.g6vs .g6vs-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3.4vw, 48px) clamp(28px, 3vw, 40px);
}
.g6vs .g6vs-them { background: var(--g6-mist); border-radius: var(--g6-radius) 0 0 var(--g6-radius); }
.g6vs .g6vs-us { background: var(--g6-slate); border-radius: 0 var(--g6-radius) var(--g6-radius) 0; }
.g6vs .g6vs-label {
  margin: 0 0 14px;
  color: var(--g6-slate);
  font: 700 .875rem/1.2 var(--g6-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.g6vs .g6vs-us .g6vs-label { color: color-mix(in srgb, var(--g6-paper) 82%, var(--g6-channel)); }
.g6vs .g6vs-feel {
  max-width: 30ch;
  margin: auto 0 0;
  padding-top: 24px;
  color: var(--g6-slate);
  font: 500 clamp(1.5rem, 2vw, 1.875rem)/1.22 var(--g6-display);
  text-wrap: pretty;
}
.g6vs .g6vs-us .g6vs-feel { color: var(--g6-paper); }
.g6vs .g6vs-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--g6-paper);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--g6-paper) 35%, transparent), var(--g6-floating-shadow);
  color: var(--g6-ink);
  font: italic 500 1.5rem/1 var(--g6-display);
}

/* their side: equal cards jumbled in a dense web */
.g6vs .g6vs-web { position: relative; flex: 1 1 auto; min-height: 430px; }
.g6vs .g6vs-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g6vs .g6vs-lines--p { display: none; }
.g6vs .g6vs-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--g6-slate) 48%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.g6vs .g6vs-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  width: 142px;
  height: 62px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--g6-paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g6-slate) 10%, transparent), 0 10px 24px color-mix(in srgb, var(--g6-ink) 14%, transparent);
  color: var(--g6-slate);
  font: 700 .875rem/1.15 var(--g6-ui);
  transform: translate(-50%, -50%);
}
.g6vs .g6vs-tile img { display: block; max-width: 100%; max-height: 42px; width: auto; height: auto; }
.g6vs .g6vs-tile--named { justify-content: flex-start; }
.g6vs .g6vs-tile--named img { flex: none; max-height: 34px; }
.g6vs .g6vs-tile--named span { min-width: 0; }
/* a drawn browser tab: a tab strip with a site glyph, its name and a close mark, over an empty page */
.g6vs .g6vs-tile--tab {
  width: 176px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.g6vs .g6vs-tabbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--g6-slate) 9%, var(--g6-paper));
  font-style: normal;
  white-space: nowrap;
}
.g6vs .g6vs-tabbar svg { flex: none; width: 15px; height: 15px; color: var(--g6-ink); }
.g6vs .g6vs-tabbar span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; }
.g6vs .g6vs-tabbar b { flex: none; color: color-mix(in srgb, var(--g6-slate) 70%, transparent); font-weight: 500; }
.g6vs .g6vs-tabpage {
  flex: 1 1 auto;
  margin: 9px 12px;
  background:
    linear-gradient(color-mix(in srgb, var(--g6-slate) 16%, transparent), color-mix(in srgb, var(--g6-slate) 16%, transparent)) 0 0 / 70% 5px no-repeat,
    linear-gradient(color-mix(in srgb, var(--g6-slate) 10%, transparent), color-mix(in srgb, var(--g6-slate) 10%, transparent)) 0 11px / 92% 5px no-repeat;
}
.g6vs .g6vs-tile--chip {
  z-index: 2;
  width: auto;
  height: auto;
  min-height: 34px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g6-slate) 82%, var(--g6-mist));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--g6-ink) 16%, transparent);
  color: var(--g6-paper);
  font: 600 .875rem/1.2 var(--g6-ui);
  white-space: nowrap;
}
.g6vs .g6vs-tile--chip svg { flex: none; width: 17px; height: 17px; color: var(--g6-paper); }

/* our side: one real screen in a plain window, calm */
.g6vs .g6vs-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.g6vs .g6vs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px 12px 0 0;
  background: var(--g6-mist);
  color: var(--g6-slate);
  font: 600 .8125rem/1 var(--g6-ui);
}
.g6vs .g6vs-bar span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--g6-slate) 25%, transparent); }
.g6vs .g6vs-bar b { margin-left: 10px; font-weight: 600; }
.g6vs .g6vs-screen,
.g6vs .g6vs-screen img { display: block; width: 100%; height: auto; }
.g6vs .g6vs-screen img { aspect-ratio: 4 / 3; border-radius: 0 0 12px 12px; background: var(--g6-paper); }
.g6vs .g6vs-pic > figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 14px 0 0;
  color: var(--g6-slate);
  font: 500 .875rem/1.5 var(--g6-ui);
  text-align: center;
}
.g6vs .g6vs-cap-narrow { display: none; }

/* the six rows, collapsed under the picture */
.g6vs .g6vs-more { max-width: 980px; margin: 72px auto 0; }
.g6vs .g6vs-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 6px;
  color: var(--g6-ink);
  font: 600 1rem/1.2 var(--g6-ui);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  list-style: none;
  cursor: pointer;
}
.g6vs .g6vs-more > summary::-webkit-details-marker { display: none; }
.g6vs .g6vs-more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--g6-motion) ease;
}
.g6vs .g6vs-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.g6vs .g6vs-more > summary:focus-visible { outline: 3px solid var(--g6-channel); outline-offset: 3px; border-radius: 6px; }
.g6vs .g6vs-sum { width: 100%; margin: 16px 0 0; border-collapse: collapse; font-family: var(--g6-ui); }
.g6vs .g6vs-sum th,
.g6vs .g6vs-sum td {
  padding: 14px 20px 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--g6-slate) 14%, transparent);
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  line-height: 1.45;
}
.g6vs .g6vs-sum thead th {
  padding-bottom: 10px;
  border-top: 0;
  color: var(--g6-slate);
  font: 700 .875rem/1.2 var(--g6-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.g6vs .g6vs-sum tbody th { width: 14%; color: var(--g6-slate); font-weight: 700; }
.g6vs .g6vs-sum tbody td { width: 43%; color: var(--g6-slate); }
/* ours set darker and bold, never in the link colour on this page (it is not a link) */
.g6vs .g6vs-sum tbody td:last-child { color: var(--g6-slate); font-weight: 600; }
.g6vs .g6vs-sum tbody tr:last-child > * { border-bottom: 1px solid color-mix(in srgb, var(--g6-slate) 14%, transparent); }
.g6vs .g6vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g6vs .g6s-compare-action { margin-top: 28px; }

/* motion, once (JS adds .is-armed only while the picture is below the fold, then .is-play when it is seen). Our
   screen is already there, dimmed, while the web draws, so the right half is never empty. */
.g6vs .g6vs-pic.is-armed .g6vs-lines path { stroke-dashoffset: 1; }
.g6vs .g6vs-pic.is-armed .g6vs-tile { opacity: 0; transform: translate(-50%, -30%); }
.g6vs .g6vs-pic.is-armed .g6vs-window { opacity: .35; }
.g6vs .g6vs-pic.is-play .g6vs-lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms cubic-bezier(.45, 0, .25, 1) calc(300ms + var(--i) * 30ms); }
.g6vs .g6vs-pic.is-play .g6vs-tile { opacity: 1; transform: translate(-50%, -50%); transition: opacity 280ms ease calc(var(--i) * 55ms), transform 460ms cubic-bezier(.22, 1.25, .36, 1) calc(var(--i) * 55ms); }
.g6vs .g6vs-pic.is-play .g6vs-window { opacity: 1; transition: opacity 640ms ease 1500ms; }

@media (max-width: 1100px) and (min-width: 960px) {
  .g6vs .g6vs-tile { width: 124px; height: 56px; padding: 7px 10px; }
  .g6vs .g6vs-tile--tab { width: 160px; padding: 0; }
  .g6vs .g6vs-tile--named img { max-height: 28px; }
  .g6vs .g6vs-tile--chip { width: auto; height: auto; }
}
@media (max-width: 959px) {
  .g6vs .g6vs-pic { grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .g6vs .g6vs-side { box-shadow: var(--g6-floating-shadow); }
  .g6vs .g6vs-them { border-radius: var(--g6-radius) var(--g6-radius) 0 0; padding-bottom: 48px; }
  .g6vs .g6vs-us { border-radius: 0 0 var(--g6-radius) var(--g6-radius); padding-top: 48px; }
  .g6vs .g6vs-vs { position: relative; left: auto; top: auto; justify-self: center; margin: -32px 0; }
  .g6vs .g6vs-web { min-height: 0; aspect-ratio: 1 / 1.22; }
  .g6vs .g6vs-lines--d { display: none; }
  .g6vs .g6vs-lines--p { display: block; }
  .g6vs .g6vs-tile { left: var(--px); top: var(--py); width: 108px; height: 50px; padding: 6px 8px; gap: 6px; border-radius: 12px; font-size: .8125rem; }
  .g6vs .g6vs-tile img { max-height: 32px; }
  .g6vs .g6vs-tile--named img { max-height: 24px; }
  .g6vs .g6vs-tile--named span { font-size: .8125rem; line-height: 1.1; }
  .g6vs .g6vs-tile--tab { width: 150px; padding: 0; }
  .g6vs .g6vs-tabbar { height: 26px; padding: 0 8px; gap: 5px; }
  .g6vs .g6vs-tabbar b { display: none; }
  .g6vs .g6vs-tabbar span { font-size: .8125rem; }
  .g6vs .g6vs-tabbar svg { width: 13px; height: 13px; }
  .g6vs .g6vs-tabpage { margin: 7px 9px; }
  .g6vs .g6vs-tile--chip { width: auto; height: auto; min-height: 30px; padding: 5px 11px 5px 9px; font-size: .8125rem; }
  .g6vs .g6vs-tile--deskonly { display: none; }
  .g6vs .g6vs-feel { max-width: none; font-size: 1.5rem; }
  .g6vs .g6vs-screen img { aspect-ratio: 1 / 1; }
  .g6vs .g6vs-pic > figcaption { position: static; grid-column: 1; margin-top: 14px; text-align: left; }
  .g6vs .g6vs-cap-wide { display: none; }
  .g6vs .g6vs-cap-narrow { display: inline; }
  .g6vs .g6vs-more { margin-top: 28px; }
}
@media (max-width: 759px) {
  .g6vs .g6vs-side { padding-inline: 18px; }
  .g6vs .g6vs-sum, .g6vs .g6vs-sum tbody, .g6vs .g6vs-sum tr { display: block; width: 100%; }
  .g6vs .g6vs-sum thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g6vs .g6vs-sum tr { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--g6-slate) 14%, transparent); }
  .g6vs .g6vs-sum tbody tr:last-child { border-bottom: 1px solid color-mix(in srgb, var(--g6-slate) 14%, transparent); }
  .g6vs .g6vs-sum th, .g6vs .g6vs-sum td, .g6vs .g6vs-sum tbody tr:last-child > * { display: block; width: auto; padding: 2px 0; border: 0; }
  .g6vs .g6vs-sum tbody th, .g6vs .g6vs-sum tbody td { width: auto; }
  .g6vs .g6vs-sum tbody th { margin-bottom: 4px; }
  .g6vs .g6vs-sum td::before { content: attr(data-side) ": "; color: var(--g6-slate); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .g6vs .g6vs-pic * { transition: none !important; }
}