.compare-hero { padding-bottom: 2rem; }

.compare-tool {
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.compare-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1000px;
  margin: 0 auto 2.5rem;
  border-bottom: 1px solid var(--ink-softer);
  flex-wrap: wrap;
}

.compare-tab {
  position: relative;
  background: none;
  border: none;
  color: var(--bone-dim);
  padding: 0.6rem 0.2rem 1.1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-family: inherit;
  transition: color 0.3s;
}

.compare-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ember-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out-soft);
}

.compare-tab[aria-selected="true"]::after { transform: scaleX(1); }

.compare-tab-tier {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bone-dim);
  transition: color 0.3s;
}

.compare-tab[aria-selected="true"] .compare-tab-tier { color: var(--bone); }

.compare-tab-price {
  font-size: 1.6rem;
  font-family: var(--font-display);
  color: var(--ember-bright);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out-soft), opacity 0.3s;
}

.compare-tab[aria-selected="true"] .compare-tab-price {
  max-height: 2.5rem;
  opacity: 1;
}

.compare-stage {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-softer);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6);
  cursor: ew-resize;
  user-select: none;
}

.compare-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cl-t2, .cl-t3 { clip-path: inset(0 100% 0 0); }

.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0%;
  width: 3px;
  background: var(--bone);
  z-index: 5;
  cursor: ew-resize;
}

.compare-stage.snapping .compare-handle,
.compare-stage.snapping .cl-t2,
.compare-stage.snapping .cl-t3 {
  transition: left 0.5s var(--ease-physical), clip-path 0.5s var(--ease-physical);
}
.compare-handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

.compare-caption {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--bone-dim);
  font-size: 1rem;
}

/* ===== Tier 1 render (Current) — deliberately plain: default web font, no accent color, square corners ===== */
.cl-t1 {
  background: #FFFFFF;
  color: #222222;
  font-family: Arial, Helvetica, sans-serif;
}
.ct1-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid #E0E0E0;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
}
.ct1-nav { font-weight: 400; color: #666666; font-size: 0.85em; }
.ct1-hero { display: grid; grid-template-columns: 1fr 1fr; height: calc(100% - 52px); }
.ct1-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); }
.ct1-copy { padding: clamp(1rem, 4vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.ct1-copy h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.ct1-copy p { margin: 0; color: #555555; font-size: clamp(0.75rem, 1.5vw, 0.95rem); }
.ct1-hours { font-weight: 400; color: #222222 !important; }
.ct1-btn { margin-top: 0.5rem; width: fit-content; background: #444444; color: #fff; padding: 0.6rem 1.1rem; border-radius: 0; font-weight: 400; font-size: clamp(0.7rem, 1.4vw, 0.85rem); }

/* ===== Tier 2 render (Surge) ===== */
.cl-t2 {
  background: #241923;
  color: #F3EAE4;
  font-family: "Work Sans", sans-serif;
}
.ct2-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
}
.ct2-nav { font-family: "Work Sans", sans-serif; font-style: normal; color: #C7B4BC; font-size: 0.7em; }
.ct2-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; height: calc(100% - 52px); }
.ct2-copy { padding: clamp(1rem, 4vw, 2.5rem); }
.ct2-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(0.6rem, 1.2vw, 0.75rem); color: #C9A961; margin: 0 0 0.6rem; }
.ct2-copy h2 { font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(1.4rem, 3.8vw, 2.4rem); margin: 0; line-height: 1.1; }
.ct2-copy p { color: #C7B4BC; margin: 0.75rem 0 0; font-size: clamp(0.72rem, 1.5vw, 0.92rem); max-width: 30ch; }
.ct2-btn { display: inline-block; margin-top: 1rem; border: 1px solid #C9A961; padding: 0.55rem 1.1rem; font-size: clamp(0.68rem, 1.3vw, 0.85rem); }
.ct2-media { height: 100%; }
.ct2-media img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Tier 3 render (Flux) — layered depth + slow ambient motion to signal "this one moves" ===== */
.cl-t3 {
  background: var(--ink);
  color: var(--bone);
}
.ct3-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  position: relative;
  z-index: 2;
}
.ct3-nav { font-family: var(--font-body); font-weight: 400; color: var(--bone-dim); font-size: 0.7em; }
.ct3-hero {
  position: relative;
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.ct3-bg {
  position: absolute;
  inset: 0;
  opacity: 0.28;
}
.ct3-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1px) saturate(0.85);
  transform: scale(1.08);
}
.ct3-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(55% 60% at 65% 35%, rgba(209,228,250,0.4), transparent 65%);
  animation: ct3-pulse 6s ease-in-out infinite;
}
@keyframes ct3-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.ct3-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(209,228,250,0.14);
  border: 1px solid rgba(209,228,250,0.4);
  color: var(--ember-bright);
  font-size: clamp(0.62rem, 1.2vw, 0.74rem);
  letter-spacing: 0.03em;
  animation: ct3-badge-glow 2.4s ease-in-out infinite;
}
@keyframes ct3-badge-glow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
.ct3-hero h2 {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  margin: 0;
  letter-spacing: 0.03em;
  text-shadow: 0 0 40px rgba(209,228,250,0.5);
}
.ct3-hero p {
  position: relative;
  z-index: 2;
  margin: 0.75rem 0 0;
  color: var(--bone-dim);
  font-size: clamp(0.72rem, 1.5vw, 0.95rem);
}

@media (prefers-reduced-motion: reduce) {
  .ct3-glow, .ct3-badge { animation: none; }
}

@media (max-width: 640px) {
  .ct1-hero, .ct2-hero { grid-template-columns: 1fr; }
  .ct1-hero img, .ct2-media { display: none; }
}