/* ==========================================================================
   CLIENT PROOF — the shared vocabulary

   Two things are the same in all ten versions, because they are content and
   not design: the small page render, and the one link out. Everything else —
   how the businesses are laid out, how one is selected, how its detail is
   built — is the version's own decision and lives in its own file.

   The page render is the homepage's own .ss-shot, rebuilt on container
   queries so it holds its proportions at any size a version gives it.
   ========================================================================== */

/* ---------- the preview label, fixed so it costs the fold nothing -------- */
.q7-lab{
  position: fixed; z-index: 90; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 9px; max-width: min(420px, calc(100vw - 28px));
  padding: 8px 13px 8px 9px; border-radius: 999px;
  background: rgba(11,13,18,.9); color: #fff; backdrop-filter: blur(6px);
  font-size: 12px; line-height: 1.25; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.q7-lab b{ flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; color: #0B0D12; font-family: var(--mono);
  font-size: 11px; font-weight: 800; }
.q7-lab span{ min-width: 0; }
.q7-lab i{ display: block; font-style: normal; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .58; font-family: var(--mono); }
.q7-lab a{ margin-left: 4px; flex: none; opacity: .62; text-decoration: underline; }
.q7-lab a:hover{ opacity: 1; }
@media (max-width: 600px){ .q7-lab{ right: 10px; bottom: 10px; font-size: 11px; } }

/* ---------- the small page render --------------------------------------- */
.q7-shot{
  position: relative; display: block; margin: 0; container-type: inline-size;
  aspect-ratio: 16/10; overflow: hidden; background: #fff;
  border-radius: 8px; border: 1px solid var(--line-2);
}
.q7-shot .q7-chrome{
  position: absolute; inset: 0 0 auto; height: 8.4cqw; display: flex; align-items: center;
  gap: 1.2cqw; padding: 0 2.4cqw; background: #F1F3F6; border-bottom: 1px solid var(--line-2);
}
.q7-shot .q7-chrome i{ width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #CBD2DA; }
.q7-shot .q7-chrome s{
  margin-left: 1.4cqw; flex: 1; display: flex; align-items: center; height: 5cqw;
  padding: 0 2cqw; border-radius: 2.5cqw; background: #fff; border: 1px solid var(--line-2);
  font-size: 2.4cqw; color: var(--ink-4); text-decoration: none; overflow: hidden; white-space: nowrap;
}
.q7-shot .q7-page{ position: absolute; inset: 8.4cqw 0 0 0; display: flex; flex-direction: column; }
.q7-shot .q7-top{
  flex: none; height: 9cqw; display: flex; align-items: center; gap: 2.2cqw;
  padding: 0 3.4cqw; border-bottom: 1px solid var(--line-2);
}
.q7-shot .q7-top b{ font-size: 3.2cqw; font-weight: 800; letter-spacing: -.03em; color: var(--k);
  white-space: nowrap; overflow: hidden; }
.q7-shot .q7-top em{ width: 5cqw; height: 1.1cqw; border-radius: .6cqw; background: #DFE4EA; }
.q7-shot .q7-top em:first-of-type{ margin-left: auto; }
.q7-shot .q7-top u{
  margin-left: 1.4cqw; padding: 1.3cqw 2.4cqw; border-radius: 1.1cqw;
  background: var(--k); color: #fff; font-size: 2.4cqw; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.q7-shot .q7-banner{
  flex: 1; display: flex; align-items: center; gap: 3.2cqw; padding: 4.4cqw 4cqw; color: #fff;
  background: var(--k);
  background: linear-gradient(118deg, var(--k), color-mix(in srgb, var(--k) 62%, #05070C));
}
.q7-shot .q7-copy{ flex: 1.2; min-width: 0; }
.q7-shot .q7-copy b{ display: block; font-size: 5.2cqw; line-height: 1.05; font-weight: 800;
  letter-spacing: -.035em; }
.q7-shot .q7-copy i{ display: block; margin-top: 1.8cqw; font-style: normal; font-size: 2.5cqw;
  line-height: 1.4; opacity: .78; }
.q7-shot .q7-copy u{
  display: inline-flex; margin-top: 3cqw; padding: 1.8cqw 3.2cqw; border-radius: 1.3cqw;
  background: #fff; color: var(--k); font-size: 2.5cqw; font-weight: 750; text-decoration: none;
}
.q7-shot .q7-art{
  flex: 1; align-self: stretch; border-radius: 2cqw; min-width: 0;
  background:
    radial-gradient(72% 62% at 32% 24%, rgba(255,255,255,.40), rgba(255,255,255,.04) 70%),
    linear-gradient(158deg, rgba(0,0,0,.10), rgba(0,0,0,.42));
}

/* ---------- the one link out -------------------------------------------- */
.q7-story{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; letter-spacing: -.012em; color: var(--g-blue);
}
.q7-story svg{ width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s cubic-bezier(.4,0,.2,1); }
.q7-story:hover svg{ transform: translateX(3px); }

/* ---------- the reveal, shared timing ------------------------------------
   Height is animated from a measured pixel value rather than from `auto`,
   so the panel opens at the same speed whatever it contains. */
.q7-open{
  overflow: hidden; height: 0;
  transition: height .34s cubic-bezier(.32,.72,0,1), opacity .24s ease;
  opacity: 0;
}
.q7-open.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .q7-open{ transition: none; }
}