/* Capriastro pre-payment purchase form + money-page CTA (D4 / 1l: purchase
   form as a rounded form panel; hero badges are page-level eyebrows/price).
   Literal-free: every value is a var(--cap-*); components.css carries the design. */
.cap-shell .cap-purchase { max-width: var(--cap-col-money); margin-left: auto; margin-right: auto; }
.cap-shell .cap-purchase__form { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-purchase__place { position: relative; }
/* The cells card (.cap-fcard, D4 26 Sep) is drawn only by the money page's form on DESKTOP and on a PHONE (1l, 27 Sep) — get-your-reading.css;
   the tablet (700–1023) and everywhere else
   it is transparent — its cells stay the form's own flex items — and the time helper returns under the date/time row, so the
   pill form reads exactly as it did before the card existed. */
.cap-shell .cap-purchase .cap-fcard { display: contents; }
.cap-shell .cap-purchase .cap-fcard > .cap-field:first-child { order: 1; }
.cap-shell .cap-purchase .cap-fcard > .cap-birth { order: 2; }
.cap-shell .cap-purchase .cap-purchase__time-hint { order: 3; }
.cap-shell .cap-purchase .cap-fcard > .cap-purchase__place { order: 4; }
.cap-shell .cap-purchase .cap-fcard > .cap-field:last-child { order: 5; }
.cap-shell .cap-purchase .cap-purchase__form > :not(.cap-fcard):not(.cap-purchase__time-hint) { order: 6; }
@media (min-width: 1280px) { .cap-shell .cap-purchase .cap-purchase__form > .cap-purchase__error.cap-alert { order: 0; margin-top: calc(var(--cap-space-gap-5) - var(--cap-space-gap-6)); } }   /* D1b: on desktop the alert box sits right under the card (the phone keeps it above the button) */
.cap-shell .cap-purchase__submit { margin-top: var(--cap-space-sm); }
.cap-shell .cap-purchase__badge,
.cap-shell .cap-reading-cta__badge { display: block; margin: var(--cap-space-sm) auto 0; text-align: center; }
.cap-shell .cap-reading-cta { text-align: center; margin: var(--cap-space-lg) 0; display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-sm); }
.cap-shell .cap-reading-cta__badge { max-width: var(--cap-measure); }
.cap-shell .cap-reading-cta__button { margin-top: var(--cap-space-md); }
html { scroll-behavior: smooth; }
.cap-shell #get-your-reading-form { scroll-margin-top: var(--cap-space-xl); }

/* the ⓘ at the end of the helper line (1l, 27 Sep): a 12 ring in a 32 tap target that pulls in around the line; a tap
   opens the tip in the cream tip card under the line (purchase.js; the calculator's card, owner 2026-09-29) */
.cap-shell .cap-purchase__time-hint { position: relative; }
.cap-shell .cap-purchase__help { white-space: nowrap; }   /* round 22 D1: "Find your birth time" and its ⓘ wrap as one; the button starts on the circle (one space after the link, never over it — its 44 band reaches right) */
.cap-shell .cap-hint .cap-purchase__tip { display: inline-flex; align-items: center; justify-content: flex-start; width: 22px; height: 32px; margin: -10px -10px -10px 0; padding: 0; vertical-align: middle; background: none; border: 0; color: var(--cap-color-caption); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* geometry: the 32 tap target */
.cap-shell .cap-hint .cap-purchase__tip:focus:not(:hover):not(.is-open) { background: none; color: var(--cap-color-caption); }   /* the kit's button:focus plum, held off */
 .cap-shell .cap-hint .cap-purchase__tip.is-open { background: none; color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-hint .cap-purchase__tip:hover { background: none; color: var(--cap-color-text); } }
.cap-shell .cap-purchase__i { width: 12px; height: 12px; border-radius: var(--cap-radius-pill); border: var(--cap-border-hairline) solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-style: normal; font-weight: 600; font-size: var(--cap-mp-type-tip-mark); line-height: 1; } /* geometry: the 12 ring */
.cap-shell .cap-purchase__pop { display: block; margin-top: var(--cap-space-gap-4); padding: var(--cap-space-chip-gap) var(--cap-space-md); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-md); background: var(--cap-color-surface); color: var(--cap-color-text); box-shadow: none; font-family: var(--cap-font-ui); font-style: normal; font-weight: 400; font-size: var(--cap-type-input); line-height: var(--cap-leading-lede); letter-spacing: var(--cap-track-data); text-transform: none; white-space: normal; }   /* THE TIP CARD (owner 2026-09-29: one tip style — the calculator's cream inline card): in the flow under the line, its edges the form's (the hint line is the form's width), never floating over the button */
.cap-shell .cap-purchase__pop[hidden] { display: none; }