/* The ways in: Purchase a plan (/pricing) and the beta (/beta), owner direction 2026-11-09. Each
   opens on a photograph set into the wall as the back of a recess (home-wall.css draws the recess
   for .vp-plan), with the card that takes the visitor's next step laid over its calm left side.
   The beta's and For You's cards are inverted (dark), the way in that asks for an email; business
   is light, because it is booked rather than bought. */

/* ---------------- the stage ---------------- */
.plan-stage { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; margin-top: 56px; }
.plan-art { grid-column: 1 / -1; grid-row: 1; margin-left: clamp(150px, 20%, 240px); --well-depth: 30px; }
.plan-art > .kh-outcome-face { aspect-ratio: 3 / 2; padding: 0; background: #e9e1d4; }
.plan-art > .kh-outcome-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.plan-stage > :not(.plan-art) { grid-column: 1; grid-row: 1; position: relative; z-index: 6; }
/* The beta's card takes its own slot beside the photograph instead of crossing the recess's frame
   (owner, 2026-11-10): side by side, the photograph stretched to the card's height. */
.plan-stage--split { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 40px; align-items: stretch; }
.plan-stage--split > .plan-art { grid-column: 2; margin-left: 0; }
.plan-stage--split > .plan-art > .kh-outcome-face { aspect-ratio: auto; height: 100%; min-height: 420px; }
.plan-stage--split > .plan-art > .kh-outcome-face img { object-position: 60% 50%; }
.plan-stage--split > :not(.plan-art) { display: flex; }
.plan-stage--split .plan-card { flex: 1; }

/* ---------------- the card ---------------- */
.plan-card { border-radius: 22px; padding: 34px 32px 30px; box-shadow: 0 34px 80px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .08); }
.plan-card--light { background: #fff; color: var(--text); border: 1px solid rgba(17, 24, 39, .08); }
.plan-card--dark { background: #111827; color: #f8fafc; border: 1px solid #111827; }
.plan-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #a4562d; }
.plan-card--dark .plan-eyebrow { color: #f2a06e; }
.plan-card h2 { margin: 14px 0 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; color: inherit; text-wrap: balance; }
.plan-lead { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.plan-card--dark .plan-lead { color: rgba(248, 250, 252, .78); }
.plan-btn { display: flex; justify-content: center; width: 100%; margin-top: 28px; }
.plan-alt { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.plan-alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.plan-card--dark .plan-alt { color: rgba(248, 250, 252, .66); }
.plan-beta { display: inline-flex; gap: 6px; margin-top: 18px; padding-top: 18px; width: 100%; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15px; font-weight: 600; color: #f2a06e; text-decoration: none; }
.plan-beta:hover { color: #ffb88a; }

/* The form on the inverted card: the same fields, light on charcoal, the button turned white. */
.plan-card--dark :is(.door-form, .beta-form) { margin-top: 24px; }
.plan-card--dark :is(.door-field, .beta-field) > span { color: rgba(248, 250, 252, .84); }
.plan-card--dark :is(.door-in, .beta-in) { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #f8fafc; }
.plan-card--dark :is(.door-in, .beta-in)::placeholder { color: rgba(248, 250, 252, .5); }
.plan-card--dark :is(.door-in, .beta-in):focus { border-color: #e27f48; outline: none; box-shadow: 0 0 0 3px rgba(226, 127, 72, .32); }
.plan-card--dark :is(.door-btn, .beta-btn) { background: #fff; color: #111827; border: 0; }
.plan-card--dark :is(.door-btn, .beta-btn):hover { background: #f3ede6; }
.plan-card--dark :is(.door-btn, .beta-btn):focus-visible { outline: 2px solid #f2a06e; outline-offset: 3px; }
.plan-card--dark :is(.wl-msg, .door-field .door-error) { color: #fdb4a4; }
.plan-card--dark [aria-invalid="true"] { border: 2px solid #fdb4a4; }
.plan-card--dark :is(.door-done, .beta-done) :is(h3, .beta-done-mark) { color: #f8fafc; }
.plan-card--dark :is(.door-done p, .beta-done .sub, .beta-again) { color: rgba(248, 250, 252, .78); }
.plan-card--dark .beta-done-email { color: #fff; }
.plan-door.done :is(.door-form, .plan-beta) { display: none; }

/* ---------------- three recesses under the stage ---------------- */
.vp-pods--3 { --pods: 3; }
.vp-pods--3 > .kw-pod:nth-child(1) { --pod-camera-offset: var(--pitch); }
.vp-pods--3 > .kw-pod:nth-child(3) { --pod-camera-offset: calc(var(--pitch) * -1); }
.plan-points { margin-top: 88px; }
.plan-points .kw-moment-number { margin: 0; font-size: 13px; letter-spacing: .14em; color: #a4562d; }

@media (max-width: 960px) {
  /* The card moves under the photograph and overlaps its foot, so the picture stays whole. */
  .plan-stage { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .plan-art { grid-column: 1; grid-row: 1; margin-left: 0; }
  .plan-stage > :not(.plan-art) { grid-column: 1; grid-row: 2; width: min(560px, calc(100% - 32px)); margin: -56px auto 0; }
  .vp-pods--3 { --pods: 1; row-gap: 16px; max-width: 560px; margin-inline: auto; }
  .vp-pods--3 > .kw-pod:nth-child(n) { --pod-camera-offset: 0px; }
  .plan-points { margin-top: 64px; }
  /* Split: the photograph whole on top, the card under it, clear of its frame. */
  .plan-stage--split { row-gap: 24px; }
  .plan-stage--split > .plan-art { grid-column: 1; }
  .plan-stage--split > .plan-art > .kh-outcome-face { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .plan-stage--split > :not(.plan-art) { width: min(560px, 100%); margin: 0 auto; }
}
@media (max-width: 600px) {
  .plan-art { --well-depth: 16px; }
  .plan-stage > :not(.plan-art) { width: calc(100% - 8px); margin-top: -28px; }
  .plan-stage--split > :not(.plan-art) { width: 100%; margin-top: 0; }
  .plan-stage--split { row-gap: 16px; }
  .plan-card { padding: 26px 20px 22px; border-radius: 18px; }
  .plan-card h2 { font-size: 28px; }
  .plan-card--dark :is(.door-in, .beta-in) { font-size: 16px; }
}