/* ── Checkout ───────────────────────────────────────────────────────────────
   A compact cart on one flat surface. A line drawing on top puts the reading
   in a bag; under it the reading is one cart line with its price, the launch
   price counts down, then one address, the total and one button. No frames and
   no gradients: blocks differ by a shade of the surface and by air. */

.numerology-checkout {
    --checkout-surface: #10151e;
    --checkout-raised: #161c26;
    --checkout-tile: #1f2733;
    --checkout-well: #0a0e15;
    width: min(26rem, calc(100vw - 1.5rem));
}

.numerology-checkout.dialog--fallback-open > .dialog__surface {
    width: min(26rem, calc(100vw - 1.5rem));
}

.numerology-checkout__surface {
    padding: var(--home-space-5) var(--home-space-6) var(--home-space-6);
    overflow-x: hidden;
    scrollbar-gutter: auto;
    border: 0;
    border-radius: 1.5rem;
    background: var(--checkout-surface);
    box-shadow: 0 2rem 4.5rem rgb(0 0 0 / 0.6);
    font-family: var(--home-font), serif;
    font-variant-numeric: lining-nums;
}

.numerology-checkout__close {
    position: absolute;
    z-index: 1;
    top: var(--home-space-4);
    right: var(--home-space-4);
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--checkout-raised);
    color: var(--home-text-soft);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.numerology-checkout__close svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.numerology-checkout__close:is(:hover, :focus-visible) {
    background: var(--checkout-tile);
    color: var(--home-text);
}

.numerology-checkout__close:focus-visible {
    outline: 2px solid var(--home-focus);
    outline-offset: 2px;
}

/* The picture on top: the reading drops into a bag. */
.numerology-checkout__hero {
    display: grid;
    place-items: center;
    pointer-events: none;
}

.checkout-hero {
    display: block;
    width: 8.75rem;
    height: auto;
    overflow: visible;
}

.checkout-hero__orbit {
    fill: none;
    stroke: rgb(197 207 219 / 0.2);
    stroke-width: 0.75;
    animation: checkout-hero-fade 700ms ease-out both;
}

.checkout-hero__handle {
    fill: none;
    stroke: var(--home-silver);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 100;
    animation: checkout-hero-draw 640ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

.checkout-hero__card {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: checkout-hero-drop 780ms cubic-bezier(0.34, 0, 0.2, 1) 560ms both;
}

.checkout-hero__card-face {
    fill: var(--checkout-surface);
    stroke: var(--home-silver-strong);
    stroke-width: 1.3;
}

.checkout-hero__card-frame {
    fill: none;
    stroke: rgb(224 230 238 / 0.45);
    stroke-width: 0.75;
}

.checkout-hero__card-star { fill: var(--home-silver-strong); }

.checkout-hero__bag {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation:
        checkout-hero-catch 560ms cubic-bezier(0.3, 1.4, 0.5, 1) 1180ms both,
        checkout-hero-glow 1200ms ease-out 1180ms both;
}

.checkout-hero__bag-body {
    fill: var(--checkout-surface);
    stroke: var(--home-silver-strong);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    animation: checkout-hero-draw 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.checkout-hero__spark {
    fill: var(--home-silver-strong);
    opacity: 0.75;
    transform-box: fill-box;
    transform-origin: center;
    animation: checkout-hero-spark 640ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
    animation-delay: calc(1260ms + var(--spark-order) * 90ms);
}

@keyframes checkout-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes checkout-hero-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@keyframes checkout-hero-drop {
    0% { opacity: 0; transform: translateY(-58px) rotate(-14deg); }
    20% { opacity: 1; }
    74% { transform: translateY(5px) rotate(2deg); }
    88% { transform: translateY(-2px) rotate(-1deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes checkout-hero-catch {
    0% { transform: none; }
    35% { transform: scale(1.045, 0.93); }
    100% { transform: none; }
}

@keyframes checkout-hero-glow {
    0% { filter: none; }
    35% { filter: drop-shadow(0 0 7px rgb(224 230 238 / 0.7)); }
    100% { filter: drop-shadow(0 0 2px rgb(224 230 238 / 0.22)); }
}

@keyframes checkout-hero-spark {
    0% { opacity: 0; transform: scale(0) rotate(-45deg); }
    60% { opacity: 1; transform: scale(1.3) rotate(0deg); }
    100% { opacity: 0.75; transform: scale(1); }
}

.numerology-checkout__heading {
    margin: var(--home-space-2) 0 var(--home-space-5);
    color: var(--home-text);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
}

.numerology-checkout .numerology-checkout__form {
    display: grid;
    gap: 0;
    min-width: 0;
    margin: 0;
}

/* The cart line: the reading, its date and its price. */
.numerology-checkout__item {
    min-width: 0;
    padding: var(--home-space-4) var(--home-space-5);
    border-radius: 1.125rem;
    background: var(--checkout-raised);
}

.numerology-checkout__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--home-space-4);
    min-width: 0;
}

.numerology-checkout__identity {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.numerology-checkout__name {
    margin: 0;
    color: var(--home-text);
    font-size: 1.125rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.numerology-checkout__meta {
    margin: 0;
    color: var(--home-text-muted);
    font-size: var(--font-size-caption);
    line-height: 1.35;
}

.numerology-checkout__price {
    display: grid;
    justify-items: end;
    gap: 0.15rem;
    margin: 0;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.numerology-checkout__current {
    color: var(--home-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

.numerology-checkout__regular {
    color: var(--home-text-faint);
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration-thickness: 1px;
}

/* The launch price and the time left at it. */
.numerology-checkout__offer {
    display: grid;
    gap: var(--home-space-3);
    margin-block-start: var(--home-space-5);
}

.numerology-checkout__offer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--home-space-3);
    margin: 0;
}

.numerology-checkout__offer-title {
    color: var(--home-text-soft);
    font-size: var(--font-size-caption);
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.numerology-checkout__badge {
    padding: 0.2rem 0.6rem;
    border-radius: var(--home-radius-control);
    background: var(--home-silver);
    color: var(--home-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.numerology-checkout__clock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.375rem;
}

.numerology-checkout__unit {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
}

.numerology-checkout__digits {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.25rem;
}

.numerology-checkout__tile {
    display: grid;
    height: 2.75rem;
    place-items: center;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--checkout-tile);
    color: var(--home-text);
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.numerology-checkout__digit {
    display: block;
}

.numerology-checkout__tile.is-turning .numerology-checkout__digit {
    animation: numerology-checkout-turn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes numerology-checkout-turn {
    from { opacity: 0; transform: translateY(-45%); }
    to { opacity: 1; transform: none; }
}

.numerology-checkout__colon {
    display: grid;
    height: 2.75rem;
    place-items: center;
    color: var(--home-text-faint);
    font-size: 1.125rem;
    line-height: 1;
}

.numerology-checkout__caption {
    color: var(--home-text-muted);
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.02em;
}

/* The address. */
.numerology-checkout__field {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    margin-block-start: var(--home-space-5);
}

.numerology-checkout__label {
    color: var(--home-text-soft);
    font-size: var(--font-size-caption);
    line-height: 1.3;
}

.numerology-checkout .numerology-checkout__field input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 3.125rem;
    min-height: 0;
    padding: 0 var(--home-space-4);
    border: 0;
    border-radius: 0.875rem;
    outline: none;
    background: var(--checkout-well);
    color: var(--home-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.numerology-checkout .numerology-checkout__field input[type="email"]::placeholder {
    color: var(--home-text-faint);
}

/* Focus lights the well instead of framing it: no frames in this window. */
.numerology-checkout .numerology-checkout__field input[type="email"]:focus {
    background: var(--checkout-tile);
}

.numerology-checkout__hint {
    margin: 0;
    color: var(--home-text-muted);
    font-size: var(--font-size-caption);
    line-height: 1.45;
    text-wrap: pretty;
}

.numerology-checkout__feedback {
    margin: var(--home-space-3) 0 0;
    color: var(--color-warning);
    font-size: var(--font-size-caption);
    line-height: 1.45;
}

.numerology-checkout__feedback a { color: var(--home-silver-strong); }

/* The total and the one way to pay. */
.numerology-checkout__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--home-space-4);
    margin: var(--home-space-6) 0 0;
    color: var(--home-text-soft);
    font-size: 1rem;
    line-height: 1.2;
}

.numerology-checkout__total {
    color: var(--home-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
}

.numerology-checkout .numerology-checkout__form .numerology-checkout__submit {
    gap: var(--home-space-2);
    width: 100%;
    min-height: 3.25rem;
    margin-block-start: var(--home-space-4);
    border: 0;
    font-size: 1.0625rem;
    letter-spacing: 0.01em;
}

.numerology-checkout__submit svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--motion-fast) ease;
}

.numerology-checkout__submit:is(:hover, :focus-visible):not(:disabled) svg { transform: translateX(0.2rem); }
.numerology-checkout .numerology-checkout__form .numerology-checkout__submit:active:not(:disabled) { transform: translateY(1px); }
.numerology-checkout .numerology-checkout__form .numerology-checkout__submit:disabled { cursor: default; opacity: 0.72; }
.numerology-checkout .numerology-checkout__form .numerology-checkout__submit.is-busy { opacity: 1; }

.numerology-checkout .numerology-checkout__form .numerology-checkout__submit:focus-visible {
    outline: 2px solid var(--home-focus);
    outline-offset: 3px;
}

/* On a phone the cart rises from the bottom edge, like a checkout sheet. */
@media (max-width: 30rem) {
    .numerology-checkout:modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 0.75rem);
        margin: auto 0 0;
    }

    .numerology-checkout.dialog--fallback-open { align-items: end; }
    .numerology-checkout.dialog--fallback-open > .dialog__surface { width: 100%; }

    .numerology-checkout__surface {
        max-height: calc(100dvh - 0.75rem);
        padding: var(--home-space-4) var(--home-space-4) max(var(--home-space-5), env(safe-area-inset-bottom));
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .checkout-hero { width: 7.75rem; }
    .numerology-checkout__item { padding-inline: var(--home-space-4); }
}

@media (max-width: 22.5rem) {
    .numerology-checkout__clock { column-gap: 0.25rem; }
    .numerology-checkout__digits { gap: 0.1875rem; }
    .numerology-checkout__tile,
    .numerology-checkout__colon { height: 2.5rem; }
    .numerology-checkout__tile { font-size: 1.3125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .numerology-checkout__hero * { animation: none !important; }
    .numerology-checkout__tile.is-turning .numerology-checkout__digit { animation: none; }
    .numerology-checkout__submit svg { transition: none; }
}

/* ── Payment return page ──────────────────────────────────────────────────── */

.numerology-payment {
    width: min(calc(100% - 2rem), 46rem);
    margin-inline: auto;
    padding-block: clamp(5rem, 9vw, 9rem);
}

.numerology-payment h1 { margin-block: var(--home-space-4); }
.numerology-payment [role="status"] { margin-block: var(--home-space-8); }