/* V3.a.6 — 3D staircase as the visual; searchable plan details live in a stable HTML dock. */
.pricing-clay-stage {
  --pricing-navy: #23354c;
  --pricing-navy-deep: #152b45;
  --pricing-cream: #fff9eb;
  --pricing-mint: #b9e5d9;
  --pricing-green: #9bcb8a;
  --pricing-indigo: #3e697a;
  --pricing-yellow: #ffd53d;
  background:
    radial-gradient(circle at 1px 1px, rgba(185, 229, 217, .12) 1.15px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 52% 86%, rgba(67, 139, 143, .17), transparent 52%),
    linear-gradient(146deg, #263950 0%, #20344b 50%, #182c43 100%);
  color: var(--pricing-cream);
  overflow: clip;
  padding: clamp(54px, 4.6vw, 74px) 0 clamp(48px, 4vw, 64px);
  position: relative;
}

.pricing-clay-stage::before,
.pricing-clay-stage::after {
  border: 1px solid rgba(185, 229, 217, .13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  position: absolute;
}

.pricing-clay-stage::before { height: 460px; left: -355px; top: 130px; width: 460px; }
.pricing-clay-stage::after { height: 330px; right: -220px; top: -170px; width: 330px; }
.pricing-clay-stage__inner { position: relative; z-index: 1; }

.pricing-clay-stage__heading {
  margin: 0;
  max-width: 700px;
  position: relative;
  text-align: left;
  z-index: 5;
}

.pricing-clay-stage__eyebrow {
  align-items: center;
  color: var(--pricing-mint);
  display: inline-flex;
  font-size: 20px;
  font-weight: 800;
  gap: 9px;
  letter-spacing: .06em;
  margin: 0 0 16px;
}

.pricing-clay-stage__heading h2 {
  color: var(--pricing-cream);
  font-size: clamp(2.55rem, 3.45vw, 3.55rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.14;
  margin: 0;
}

.pricing-clay-stage__heading h2 span { color: var(--pricing-mint); }

.pricing-clay-stage__heading > p:last-child {
  color: rgba(255, 249, 235, .78);
  font-size: 20px;
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 680px;
}

/* The art is deliberately independent from the information dock. */
.pricing-clay-stage__stage {
  --pricing-traveler-x: 54.6%;
  --pricing-traveler-y: 43.6%;
  aspect-ratio: 1720 / 989;
  container-type: inline-size;
  isolation: isolate;
  margin: clamp(-132px, -8vw, -96px) auto 0;
  max-width: 1180px;
  position: relative;
  width: 100%;
}

.pricing-clay-stage__art {
  display: block;
  filter: drop-shadow(0 26px 27px rgba(6, 20, 34, .27));
  height: auto;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 1;
}

.pricing-clay-stage__traveler {
  height: clamp(62px, 6.8cqw, 84px);
  left: var(--pricing-traveler-x);
  pointer-events: none;
  position: absolute;
  top: var(--pricing-traveler-y);
  transform: translate(-50%, -100%);
  transition: left .46s cubic-bezier(.22, 1, .36, 1), top .46s cubic-bezier(.22, 1, .36, 1);
  width: clamp(58px, 6.2cqw, 76px);
  z-index: 3;
}

.pricing-clay-stage__traveler-shadow {
  background: radial-gradient(ellipse, rgba(21, 43, 69, .46) 0%, rgba(21, 43, 69, .22) 42%, transparent 74%);
  border-radius: 50%;
  bottom: -1%;
  filter: blur(.7px);
  height: 12%;
  left: 9%;
  position: absolute;
  transform: scaleY(.72);
  width: 82%;
}

.pricing-clay-stage__traveler::after {
  background: linear-gradient(180deg, rgba(250, 252, 246, .82), rgba(207, 223, 211, .92));
  border-radius: 50%;
  bottom: -1%;
  box-shadow: 0 1px 2px rgba(21, 43, 69, .16);
  content: "";
  height: 5%;
  left: 15%;
  position: absolute;
  width: 70%;
  z-index: 2;
}

.pricing-clay-stage__traveler-figure {
  bottom: 0;
  filter: drop-shadow(0 3px 2px rgba(21, 43, 69, .22));
  height: 100%;
  left: 50%;
  object-fit: contain;
  object-position: center bottom;
  position: absolute;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  width: 100%;
  z-index: 1;
}

.pricing-clay-stage__traveler.is-moving .pricing-clay-stage__traveler-figure { animation: pricing-traveler-hop .46s cubic-bezier(.22, 1, .36, 1); }
.pricing-clay-stage__traveler.is-moving .pricing-clay-stage__traveler-shadow { animation: pricing-traveler-shadow .46s ease-out; }

@keyframes pricing-traveler-hop {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  38% { transform: translateX(-50%) translateY(clamp(-13px, -1.45cqw, -8px)) rotate(-2deg); }
  67% { transform: translateX(-50%) translateY(clamp(-5px, -.55cqw, -3px)) rotate(1deg); }
}

@keyframes pricing-traveler-shadow {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  45% { opacity: .45; transform: scaleX(.62); }
}

.pricing-clay-stage__overlay { inset: 0; pointer-events: none; position: absolute; z-index: 4; }

.pricing-clay-stage__plan {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--pricing-navy-deep);
  cursor: pointer;
  font: inherit;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  text-align: left;
  width: 25.5%;
}

.pricing-clay-stage__plan--01 { left: 5.7%; top: 54.2%; }
.pricing-clay-stage__plan--02 { left: 37.2%; top: 45.7%; }
.pricing-clay-stage__plan--03 { left: 68.6%; top: 37.2%; }

.pricing-clay-stage__identity {
  align-items: center;
  background: linear-gradient(180deg, #fffef8 0%, #fbf5e9 74%, #f2eadc 100%);
  border: 1px solid rgba(62, 105, 122, .38);
  border-radius: clamp(12px, 1.1cqw, 17px);
  box-shadow: 0 clamp(4px, .38cqw, 6px) 0 rgba(93, 143, 125, .34), 0 clamp(8px, .8cqw, 13px) clamp(12px, 1.1cqw, 18px) rgba(21, 43, 69, .12), inset 0 2px 1px rgba(255, 255, 255, .95);
  display: grid;
  gap: clamp(6px, .65cqw, 10px);
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(10px, .9cqw, 14px) clamp(12px, 1.05cqw, 16px);
  position: relative;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.pricing-clay-stage__plan:is(:hover, :focus-visible, .is-active) .pricing-clay-stage__identity {
  border-color: var(--pricing-yellow);
  box-shadow: 0 clamp(4px, .38cqw, 6px) 0 #d6a500, 0 clamp(10px, .9cqw, 15px) clamp(16px, 1.25cqw, 22px) rgba(21, 43, 69, .2), 0 0 0 3px rgba(255, 213, 61, .14), inset 0 2px 1px rgba(255, 255, 255, .96);
  transform: translateY(-3px);
}

.pricing-clay-stage__plan:focus-visible { outline: none; }

.pricing-clay-stage__step-number {
  color: var(--pricing-indigo);
  font-size: clamp(22px, 2.15cqw, 30px);
  font-weight: 900;
  grid-row: 1 / span 2;
  letter-spacing: -.05em;
}

.pricing-clay-stage__plan--02 .pricing-clay-stage__step-number,
.pricing-clay-stage__plan--02 .pricing-clay-stage__step-price { color: #b97d00; }

.pricing-clay-stage__step-name {
  font-size: clamp(20px, 1.8cqw, 26px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.pricing-clay-stage__step-price {
  color: var(--pricing-navy-deep);
  font-size: clamp(20px, 1.72cqw, 25px);
  font-weight: 900;
  line-height: 1;
}

.pricing-clay-stage__step-price small { color: #52677a; font-size: 20px; font-weight: 800; }

.pricing-clay-stage__badge {
  background: var(--pricing-yellow);
  border: 1px solid rgba(21, 43, 69, .75);
  border-radius: 999px;
  box-shadow: 0 3px 0 #d6a500;
  color: var(--pricing-navy-deep);
  font-size: 20px;
  font-weight: 900;
  padding: 5px 11px;
  position: absolute;
  right: 12px;
  top: -18px;
  white-space: nowrap;
}

/* The comparison dock is normal document flow, so it cannot overflow the artwork. */
.pricing-clay-stage__comparison {
  background: rgba(7, 26, 45, .48);
  border: 1px solid rgba(185, 229, 217, .32);
  border-radius: 26px;
  box-shadow: 0 24px 42px rgba(5, 18, 32, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -22px auto 0;
  max-width: 1320px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  z-index: 6;
}

.pricing-clay-stage__card {
  background: linear-gradient(180deg, rgba(39, 59, 82, .78), rgba(18, 43, 69, .82));
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--pricing-cream);
  cursor: pointer;
  min-width: 0;
  padding: 22px;
  position: relative;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.pricing-clay-stage__card + .pricing-clay-stage__card { margin-left: 4px; }

.pricing-clay-stage__card:is(:hover, :focus-visible, .is-active) {
  background: linear-gradient(180deg, rgba(62, 105, 122, .48), rgba(21, 43, 69, .94));
  border-color: rgba(185, 229, 217, .52);
  box-shadow: inset 0 4px 0 var(--pricing-green), 0 14px 26px rgba(3, 16, 29, .2);
  outline: none;
  transform: translateY(-2px);
}

.pricing-clay-stage__card.is-active {
  border-color: rgba(255, 213, 61, .82);
  box-shadow: inset 0 4px 0 var(--pricing-yellow), 0 15px 28px rgba(3, 16, 29, .24);
}

.pricing-clay-stage__card header {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pricing-clay-stage__card header > span {
  color: var(--pricing-mint);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
}

.pricing-clay-stage__card.is-active header > span,
.pricing-clay-stage__card.is-active header > strong { color: var(--pricing-yellow); }

.pricing-clay-stage__card h3 {
  color: var(--pricing-cream);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
}

.pricing-clay-stage__card header p {
  color: rgba(255, 249, 235, .72);
  font-size: 20px;
  line-height: 1.45;
  margin: 7px 0 0;
}

.pricing-clay-stage__card header > strong {
  color: var(--pricing-mint);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.pricing-clay-stage__card header > strong small { color: rgba(255, 249, 235, .72); font-size: 20px; font-weight: 800; }

.pricing-clay-stage__card-badge {
  background: var(--pricing-yellow);
  border-radius: 999px;
  color: var(--pricing-navy-deep);
  font-size: 20px;
  font-weight: 900;
  padding: 5px 11px;
  position: absolute;
  right: 18px;
  top: -15px;
}

.pricing-clay-stage__includes {
  color: var(--pricing-green);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  margin: 18px 0 10px;
}

.pricing-clay-stage__card ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }

.pricing-clay-stage__card li {
  align-items: flex-start;
  background: rgba(255, 249, 235, .055);
  border: 1px solid rgba(185, 229, 217, .12);
  border-radius: 11px;
  color: var(--pricing-cream);
  display: flex;
  font-size: 20px;
  font-weight: 800;
  gap: 9px;
  line-height: 1.35;
  padding: 8px 10px;
}

.pricing-clay-stage__card li::before {
  background: var(--pricing-green);
  border-radius: 50%;
  content: "";
  flex: 0 0 8px;
  height: 8px;
  margin-top: .5em;
  width: 8px;
}

.pricing-clay-stage__card.is-active li::before { background: var(--pricing-yellow); }
.pricing-clay-stage__card li > span { display: grid; gap: 2px; }

.pricing-clay-stage__card li small {
  color: rgba(255, 249, 235, .68);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.pricing-clay-stage__footer {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 22px auto 0;
  max-width: 1320px;
}

.pricing-clay-stage__note { color: rgba(255, 249, 235, .66); font-size: 20px; line-height: 1.5; margin: 0; }

.pricing-clay-stage__cta {
  align-items: center;
  background: var(--pricing-yellow);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(5, 18, 32, .25), inset 0 2px 1px rgba(255, 255, 255, .55);
  color: var(--pricing-navy-deep);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 900;
  gap: 5px;
  justify-content: center;
  min-height: 54px;
  padding: 11px 24px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.pricing-clay-stage__cta:hover { box-shadow: 0 14px 28px rgba(5, 18, 32, .32), inset 0 2px 1px rgba(255, 255, 255, .62); transform: translateY(-2px); }
.pricing-clay-stage__cta b { font-size: 24px; margin-left: 10px; }

@media (max-width: 1180px) {
  .pricing-clay-stage__stage { margin-top: -66px; max-width: 1000px; }
  .pricing-clay-stage__plan { width: 27%; }
  .pricing-clay-stage__plan--01 { left: 4.5%; top: 53.5%; }
  .pricing-clay-stage__plan--02 { left: 36.5%; top: 45%; }
  .pricing-clay-stage__plan--03 { left: 68%; top: 36.5%; }
  .pricing-clay-stage__step-price small,
  .pricing-clay-stage__badge { font-size: 20px; }
  .pricing-clay-stage__comparison { margin-top: -12px; }
  .pricing-clay-stage__card { padding: 20px 16px; }
  .pricing-clay-stage__card header { grid-template-columns: auto minmax(0, 1fr); }
  .pricing-clay-stage__card header > strong { grid-column: 2; }
}

@media (max-width: 900px) {
  .pricing-clay-stage { overflow: hidden; padding-top: 50px; }
  .pricing-clay-stage__heading { max-width: none; }
  .pricing-clay-stage__heading h2 { font-size: clamp(2.35rem, 8vw, 3.2rem); }
  .pricing-clay-stage__heading br,
  .pricing-clay-stage__heading > p:last-child br { display: none; }
  .pricing-clay-stage__stage { aspect-ratio: auto; margin: 28px 0 0; max-width: none; }
  .pricing-clay-stage__art { margin-left: -14%; width: 128%; }
  .pricing-clay-stage__overlay,
  .pricing-clay-stage__traveler { display: none; }
  .pricing-clay-stage__comparison { grid-template-columns: 1fr; margin-top: -4px; overflow: visible; }
  .pricing-clay-stage__card + .pricing-clay-stage__card { margin-left: 0; margin-top: 8px; }
  .pricing-clay-stage__card header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pricing-clay-stage__card header > strong { grid-column: auto; }
  .pricing-clay-stage__footer { align-items: stretch; flex-direction: column; }
  .pricing-clay-stage__cta { align-self: flex-start; }
}

@media (max-width: 620px) {
  .pricing-clay-stage__art { margin-left: -26%; width: 152%; }
  .pricing-clay-stage__comparison { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .pricing-clay-stage__card { padding: 22px 18px; }
  .pricing-clay-stage__card header { grid-template-columns: auto minmax(0, 1fr); }
  .pricing-clay-stage__card header > strong { grid-column: 2; }
  .pricing-clay-stage__card header p { max-width: 26ch; }
  .pricing-clay-stage__cta { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-clay-stage__traveler,
  .pricing-clay-stage__traveler-figure,
  .pricing-clay-stage__traveler-shadow,
  .pricing-clay-stage__identity,
  .pricing-clay-stage__card,
  .pricing-clay-stage__cta { animation: none !important; transition: none !important; }
}