.compatibility-page { max-width: 1180px; }

.compatibility-intro {
  max-width: 900px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.compatibility-eyebrow,
.compatibility-result-kicker {
  margin: 0 0 var(--sp-3);
  color: var(--clr-gold);
  font: 700 .7rem/1.4 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.compatibility-intro h1,
.compatibility-result-header h2 {
  margin: 0;
  color: var(--clr-text);
  font: 400 clamp(3rem, 7vw, 5.7rem)/.92 var(--font-display);
  letter-spacing: -.055em;
}
.compatibility-intro-text {
  max-width: 760px;
  margin: var(--sp-5) auto 0;
  color: var(--clr-text-muted);
  font: 1rem/1.8 var(--font-body);
}

.compatibility-form-section {
  margin: 0 auto var(--sp-8);
  padding: clamp(1.35rem, 4vw, 3rem);
  border: 1px solid var(--clr-border);
  background: color-mix(in srgb, var(--clr-surface) 90%, transparent);
  box-shadow: var(--shadow-md);
}
.compatibility-form-section h2 {
  margin: 0 0 .6rem;
  color: var(--clr-text);
  font: 400 clamp(1.9rem, 4vw, 3rem)/1 var(--font-display);
}
.compatibility-form-lede { margin: 0 0 var(--sp-6); color: var(--clr-text-muted); line-height: 1.65; }
.compatibility-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-5); }
.compatibility-field { display: grid; gap: .55rem; }
.compatibility-field--wide { grid-column: 1 / -1; }
.compatibility-field label { color: var(--clr-text); font: 700 .72rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.compatibility-optional { color: var(--clr-text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.compatibility-field input,
.compatibility-field select,
.compatibility-field textarea {
  width: 100%;
  min-height: 50px;
  padding: .85rem 1rem;
  border: 1px solid var(--clr-border-strong);
  border-radius: 2px;
  background: var(--clr-bg);
  color: var(--clr-text);
  font: 1rem/1.5 var(--font-body);
}
.compatibility-field input:focus,
.compatibility-field select:focus,
.compatibility-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--clr-rose) 55%, transparent); outline-offset: 2px; }
.compatibility-error { margin: 0 0 var(--sp-4); color: var(--clr-reversed); font-weight: 600; }

.compatibility-result { scroll-margin-top: 105px; }
.compatibility-result-header { max-width: 850px; margin: 0 auto var(--sp-7); text-align: center; }
.compatibility-result-header h2 { font-size: clamp(2.7rem, 6vw, 5rem); }
.compatibility-result-meta { margin: var(--sp-4) 0 0; color: var(--clr-text-muted); font: italic 1.05rem/1.6 var(--font-card); }
.compatibility-reveal-stage {
  margin: 0 0 var(--sp-8);
  padding: clamp(1.2rem, 3.5vw, 2.5rem);
  border: 1px solid var(--clr-border);
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--clr-rose) 12%, transparent), transparent 60%), var(--clr-bg-alt);
  overflow: hidden;
}
.compatibility-reveal-status { margin: 0 0 var(--sp-5); color: var(--clr-text-muted); font: italic 1rem/1.5 var(--font-card); text-align: center; }
.compatibility-reveal-deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(.55rem, 1.2vw, 1rem); width: min(100%, 900px); margin: 0 auto; perspective: 1400px; }
.compatibility-reveal-card { grid-column: span 2; }
.compatibility-reveal-card:nth-child(5) { grid-column: 2 / span 2; }
.compatibility-reveal-card {
  min-width: 0;
  aspect-ratio: .575;
  padding: 4px;
  border: 1px solid var(--tarot-frame-edge);
  border-radius: 14px;
  background: linear-gradient(145deg, #f1b9d7, #a682d6);
  box-shadow: 0 0 0 1px rgba(84, 52, 116, .22), 0 15px 32px rgba(13, 4, 35, .24), 0 0 28px var(--tarot-frame-glow);
  perspective: 900px;
}
.compatibility-reveal-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.72,.22,1); }
.compatibility-reveal-card.is-revealed .compatibility-reveal-card-inner { transform: rotateY(180deg); }
.compatibility-reveal-face { position: absolute; inset: 0; padding: 0; border: 3px solid var(--tarot-frame-inner); border-radius: 9px; background: var(--tarot-frame-inner); box-shadow: none; backface-visibility: hidden; overflow: hidden; }
.compatibility-reveal-face img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.compatibility-reveal-front { transform: rotateY(180deg); }
.compatibility-reveal-image--reversed { transform: rotate(180deg); }
.compatibility-reveal-state { position: absolute; right: .55rem; bottom: .55rem; padding: .3rem .48rem; border-radius: 999px; background: rgba(255,248,252,.95); color: #7c315f; box-shadow: 0 3px 10px rgba(37,13,52,.22); font: 700 clamp(.48rem,.8vw,.63rem)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.compatibility-details { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.compatibility-details.is-visible { opacity: 1; transform: translateY(0); }
.compatibility-spread { display: grid; gap: 1px; border: 1px solid var(--clr-border); background: var(--clr-border); }
.compatibility-position-card {
  display: grid;
  grid-template-columns: 46px minmax(170px, 205px) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: var(--clr-bg-alt);
}
.compatibility-position-card:nth-child(even) { background: color-mix(in srgb, var(--clr-surface) 88%, var(--clr-bg)); }
.compatibility-position-number { align-self: start; color: var(--clr-rose-light); font: 500 1rem/1 var(--font-card); letter-spacing: .1em; }
.compatibility-card-visual { position: relative; display: block; padding: 4px; border: 1px solid var(--tarot-frame-edge); border-radius: 14px; background: linear-gradient(145deg, #f1b9d7, #a682d6); box-shadow: 0 0 0 1px rgba(84, 52, 116, .22), 0 15px 32px rgba(13, 4, 35, .24), 0 0 28px var(--tarot-frame-glow); overflow: hidden; }
.compatibility-card-image { display: block; width: 100%; aspect-ratio: .575; border: 3px solid var(--tarot-frame-inner); border-radius: 9px; background: var(--tarot-frame-inner); box-shadow: none; object-fit: cover; }
.compatibility-card-image--reversed { transform: rotate(180deg); }
.compatibility-state-badge { position: absolute; right: .8rem; bottom: .8rem; padding: .38rem .62rem; border: 1px solid rgba(124,49,95,.24); border-radius: 999px; background: rgba(255,248,252,.96); color: #7c315f; box-shadow: 0 4px 14px rgba(37,13,52,.24); font: 700 .67rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; }
.compatibility-position-kicker { margin: 0 0 .55rem; color: var(--clr-rose-light); font: 700 .7rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.compatibility-position-copy h3 { margin: 0 0 var(--sp-3); color: var(--clr-text); font: 400 clamp(1.7rem, 3vw, 2.5rem)/1 var(--font-display); }
.compatibility-position-note { margin: 0 0 var(--sp-4); color: var(--clr-text-muted); font: italic 1rem/1.6 var(--font-card); }
.compatibility-position-meaning { max-width: 720px; margin: 0; color: var(--clr-text); font: .95rem/1.82 var(--font-body); }
.compatibility-card-link { display: inline-block; margin-top: var(--sp-4); padding-bottom: .2rem; border-bottom: 1px solid var(--clr-gold); color: var(--clr-text); font: 700 .7rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }

.compatibility-summary-section { margin: var(--sp-8) 0 0; }
.compatibility-summary-section > h2 { margin: 0 0 var(--sp-5); color: var(--clr-text); font: 400 clamp(2.4rem, 5vw, 4rem)/1 var(--font-display); }
.compatibility-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--clr-border); background: var(--clr-border); }
.compatibility-summary-card { min-height: 210px; padding: clamp(1.3rem, 3vw, 2.1rem); background: var(--clr-bg-alt); }
.compatibility-summary-card:last-child { grid-column: 1 / -1; min-height: 0; }
.compatibility-summary-card h3 { margin: 0 0 var(--sp-4); color: var(--clr-rose-light); font: 700 .72rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.compatibility-summary-card p { margin: 0; color: var(--clr-text); font: .95rem/1.75 var(--font-body); }
.compatibility-actions { display: flex; justify-content: center; margin: var(--sp-6) 0; }
.compatibility-disclaimer { max-width: 800px; margin: 0 auto var(--sp-8); color: var(--clr-text-faint); font-size: .76rem; line-height: 1.7; text-align: center; }

@media (max-width: 760px) {
  .compatibility-form-grid { grid-template-columns: 1fr; }
  .compatibility-field--wide { grid-column: auto; }
  .compatibility-position-card { grid-template-columns: 32px minmax(105px, 135px) minmax(0, 1fr); column-gap: 1.25rem; }
  .compatibility-position-note { display: none; }
  .compatibility-position-meaning { font-size: .84rem; line-height: 1.6; }
}
@media (max-width: 540px) {
  .compatibility-position-card { grid-template-columns: 24px 96px minmax(0, 1fr); column-gap: .9rem; padding: 1.2rem .8rem; }
  .compatibility-position-copy h3 { font-size: 1.25rem; }
  .compatibility-position-kicker { font-size: .6rem; }
  .compatibility-state-badge { right: .5rem; bottom: .5rem; padding: .3rem .45rem; font-size: .55rem; }
  .compatibility-card-link { display: none; }
  .compatibility-summary { grid-template-columns: 1fr; }
  .compatibility-summary-card:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .compatibility-reveal-card-inner,
  .compatibility-details { transition: none; }
}