/* A short look at the experiment on the landing page. The full sequence lives at /experiment/. */
.experiment-preview__intro {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.experiment-preview__eyebrow {
  margin: 0 0 12px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.experiment-preview__intro .lede {
  max-width: 61ch;
}

.experiment-preview__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.experiment-preview__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.7vw, 20px);
  min-width: 0;
}

.experiment-preview__images figure {
  min-width: 0;
  margin: 0;
}

.experiment-preview__images img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}

.experiment-preview__images figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.experiment-preview__images figcaption span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 750;
}

.experiment-preview__images figure:last-child figcaption span {
  background: var(--ok-soft);
  color: var(--ok);
}

.experiment-preview__badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12px;
  font-weight: 750;
}

.experiment-preview__decision h3 {
  max-width: 19ch;
  margin: 20px 0 14px;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.024em;
  text-wrap: balance;
}

.experiment-preview__decision p {
  max-width: 42ch;
  margin: 0 0 22px;
  color: var(--ink-2);
  line-height: 1.6;
}

.experiment-preview__decision .link-arrow svg {
  transition: transform var(--t-mid) var(--ease);
}

.experiment-preview__decision .link-arrow:hover svg {
  transform: translateX(3px);
}

.experiment-next {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.experiment-next .wrap {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.experiment-next .h2,
.experiment-next .lede {
  margin: 0;
}

@media (max-width: 800px) {
  .experiment-preview__panel {
    grid-template-columns: 1fr;
  }

  .experiment-preview__images {
    max-width: 620px;
  }

  .experiment-preview__decision h3 {
    max-width: 24ch;
  }
}

@media (max-width: 560px) {
  .experiment-preview__images figcaption {
    align-items: flex-start;
    font-size: 12px;
  }
}

/* A second, compact doorway into the separate geography story. */
.geo-preview{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,54px);margin-top:18px;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-xl);background:#fcfcff;box-shadow:var(--shadow-rest)}
.geo-preview__question h3{max-width:20ch;margin:12px 0;font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.geo-preview__question p{max-width:42ch;margin:0 0 19px;color:var(--ink-2);font-size:14px;line-height:1.55}
.geo-preview__visual{display:grid;gap:12px;min-width:0}
.geo-preview__ad{display:grid;grid-template-columns:50% 50%;grid-template-rows:minmax(0,1fr);height:178px;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 8px 22px -14px rgba(20,24,36,.28)}
.geo-preview__ad img{width:100%;height:100%;object-fit:cover;object-position:center 47%}
.geo-preview__ad>div{display:flex;flex-direction:column;align-items:start;justify-content:center;gap:8px;min-width:0;min-height:0;padding:15px}
.geo-preview__ad small{color:var(--ink-2);font-size:10px;font-weight:700}
.geo-preview__ad strong{max-width:13ch;color:var(--ink);font-size:clamp(16px,1.65vw,21px);line-height:1.1;letter-spacing:-.025em}
.geo-preview__ad>div>span{display:inline-block;padding:6px 9px;border-radius:5px;background:var(--accent-ink);color:#fff;font-size:10px;font-weight:750}
.geo-preview__comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.geo-preview__comparison>div{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:3px 7px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-variant-numeric:tabular-nums}
.geo-preview__comparison strong{font-size:11px;white-space:nowrap}.geo-preview__comparison span:not(.geo-preview__pin){grid-column:2;color:var(--ink-2);font-size:10px}.geo-preview__comparison b{grid-column:3;grid-row:1/3;color:var(--ink);font-size:13px;white-space:nowrap}
.geo-preview__comparison>div:last-child{border-color:#d8d3f0;background:#f8f7ff}.geo-preview__comparison>div:last-child b{color:var(--accent-ink)}
.geo-preview__pin{grid-column:1;grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--warn)}.geo-preview__pin--la{background:var(--accent-ink)}
@media(max-width:800px){.geo-preview{grid-template-columns:1fr}.geo-preview__visual{max-width:600px}}
@media(max-width:560px){.geo-preview__ad{height:132px}.geo-preview__ad>div{gap:5px;padding:10px}.geo-preview__comparison{gap:5px}.geo-preview__comparison>div{grid-template-columns:7px 1fr;gap:2px 5px;padding:8px}.geo-preview__comparison strong{font-size:10px}.geo-preview__comparison b{grid-column:2;grid-row:3;font-size:12px}.geo-preview__pin{width:7px;height:7px}}