/* ─────────────────────────────────────────────────────────────────────────────
   ETERNAL VOID — checkout

   The house tokens are redeclared here because checkout is its own document and
   index.html keeps its system in an inline <style>. The values are copied, not
   reinvented: same gold, same ivory, same easing curves. When those move to a
   shared stylesheet this block is the only thing to delete.

   The room is quieter than the boutique on purpose. There is one gold rule per
   region, gold marks state rather than decorating, and nothing glows.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --void-black: #080808;
    --void-obsidian: #050505;
    --void-white: #f5f2ec;
    --void-accent: #c7a96c;
    --void-gold-soft: #d8c08a;
    --void-gold-bright: #f2e2bd;
    --void-gold-gradient: linear-gradient(135deg, #e7d4a6 0%, #c7a96c 46%, #9c7c46 100%);

    --void-text: #f5f2ec;
    --void-text-soft: rgba(245, 242, 236, 0.7);
    --void-text-muted: rgba(245, 242, 236, 0.44);
    --void-text-faint: rgba(245, 242, 236, 0.26);

    --ck-rule: rgba(245, 242, 236, 0.1);
    --ck-rule-soft: rgba(245, 242, 236, 0.06);
    --ck-gold-line: rgba(199, 169, 108, 0.3);
    --ck-danger: #d99a86;

    --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

    --ck-stage-in: 560ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    background: #000;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 169, 108, 0.4) #060606;
}

body {
    min-height: 100svh;
    background: #000;
    color: var(--void-text);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Layering contract ───────────────────────────────────────────────────────
   0  atmosphere      fixed, decorative, never interactive
   1  content         every top-level region
   2  header

   The atmosphere is positioned with z-index 0, so it paints in the
   positioned-descendants step — above the *inline content* of any sibling that
   is not itself positioned. .ck-shell opted in; .ck-confirm did not, so the
   result page had its entire confirmation painted over by an opaque gradient.
   Both regions now carry the same stamp, and the atmosphere is pinned behind
   them rather than the content being pushed above it with a large z-index. */
.ck-atmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 44% at 12% 0%, rgba(199, 169, 108, 0.055), transparent 68%),
        linear-gradient(180deg, #050505 0%, #000 62%);
}

/* Purely decorative, and so is anything it grows: nothing here may ever take a
   pointer or sit in front of the interface. */
.ck-atmos,
.ck-atmos::before,
.ck-atmos::after {
    pointer-events: none;
}

.ck-atmos::before,
.ck-atmos::after {
    z-index: 0;
}

/* Every top-level region declares itself above the atmosphere. Adding a new one
   without this line is the bug that hid the confirmation. */
.ck-shell,
.ck-confirm {
    position: relative;
    z-index: 1;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.ck-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 1px solid rgba(199, 169, 108, 0.7);
    outline-offset: 3px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ck-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.6rem clamp(1.1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--ck-rule-soft);
}

.ck-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--void-text-muted);
    cursor: pointer;
    transition: color 0.4s ease, transform 0.42s var(--ease-lux);
}

.ck-back:hover { color: var(--void-text); transform: translateX(-3px); }
.ck-back i { width: 14px; height: 1px; background: currentColor; font-style: normal; }

.ck-mark {
    justify-self: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-decoration: none;
    color: var(--void-text);
}

.ck-mark sup { font-size: 0.36em; margin-left: 0.04em; vertical-align: super; }

.ck-secure {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--void-text-faint);
}

.ck-secure svg { width: 11px; height: 11px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
/* position/z-index come from the layering contract above. */
.ck-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.6rem) clamp(1.1rem, 4vw, 3rem) 5rem;
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.ck-progress {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    list-style: none;
}

.ck-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--void-text-faint);
    transition: color 0.5s var(--ease-lux);
}

.ck-step::after {
    content: '';
    width: clamp(14px, 3vw, 40px);
    height: 1px;
    background: var(--ck-rule);
    transition: background 0.5s var(--ease-lux);
}

.ck-step:last-child::after { display: none; }
.ck-step[data-state="done"] { color: var(--void-text-muted); }
.ck-step[data-state="done"]::after { background: rgba(199, 169, 108, 0.28); }
.ck-step[data-state="active"] { color: var(--void-accent); }
.ck-step-n { font-variant-numeric: tabular-nums; }
.ck-step-label { display: none; }
.ck-step[data-state="active"] .ck-step-label { display: inline; }

/* ── Stages ─────────────────────────────────────────────────────────────── */
.ck-stage { display: none; }
.ck-stage.is-active { display: block; }

/* The stage arrives behind a thin rule that draws across first, so the section
   reads as being set rather than swapped. */
.ck-stage.is-entering { animation: ckStageIn var(--ck-stage-in) var(--ease-lux) backwards; }
.ck-stage.is-leaving { animation: ckStageOut 260ms var(--ease-inout) forwards; }

@keyframes ckStageIn {
    0% { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0); }
    45% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

@keyframes ckStageOut {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to { opacity: 0; transform: translateY(-8px); filter: blur(1.6px); }
}

.ck-stage-index {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--void-accent);
}

.ck-stage-title {
    margin: 0.5rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.ck-stage-note {
    margin-top: 0.8rem;
    max-width: 46ch;
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--void-text-muted);
}

.ck-stage-rule {
    height: 1px;
    margin: clamp(1.6rem, 3vw, 2.2rem) 0;
    background: linear-gradient(90deg, var(--ck-gold-line), rgba(199, 169, 108, 0));
    transform-origin: 0 50%;
}

.ck-stage.is-entering .ck-stage-rule { animation: ckRuleIn 620ms var(--ease-lux) backwards; }

@keyframes ckRuleIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.ck-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.4rem;
}

.ck-field { display: flex; flex-direction: column; }
.ck-field.is-wide { grid-column: 1 / -1; }

.ck-label {
    margin-bottom: 0.5rem;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--void-text-muted);
    transition: color 0.35s ease;
}

.ck-label .ck-opt {
    margin-left: 0.5rem;
    letter-spacing: 0.18em;
    color: var(--void-text-faint);
}

/* A ruled line, not a box. Focus lifts the rule to gold and nothing else. */
.ck-input,
.ck-select {
    width: 100%;
    padding: 0.6rem 0 0.55rem;
    border: 0;
    border-bottom: 1px solid var(--ck-rule);
    border-radius: 0;
    background: transparent;
    color: var(--void-text);
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: border-color 0.4s var(--ease-lux), color 0.3s ease;
}

.ck-input::placeholder { color: var(--void-text-faint); }
.ck-input:focus,
.ck-select:focus { outline: none; border-bottom-color: rgba(199, 169, 108, 0.65); }
.ck-field:focus-within .ck-label { color: var(--void-gold-soft); }

.ck-select {
    appearance: none;
    padding-right: 1.6rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--void-text-muted) 50%),
                      linear-gradient(135deg, var(--void-text-muted) 50%, transparent 50%);
    background-position: right 8px center, right 3px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.ck-select option { background: #0a0a0a; color: var(--void-text); }

.ck-error {
    margin-top: 0.45rem;
    min-height: 0;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ck-danger);
}

.ck-field.is-invalid .ck-input,
.ck-field.is-invalid .ck-select { border-bottom-color: rgba(217, 154, 134, 0.7); }

/* ── Shipping methods ───────────────────────────────────────────────────── */
.ck-methods { display: flex; flex-direction: column; }

.ck-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--ck-rule-soft);
    cursor: pointer;
}

.ck-method input { position: absolute; opacity: 0; pointer-events: none; }

/* The indicator is the only gold in the list, and only when chosen. */
.ck-method-mark {
    width: 1px;
    height: 22px;
    background: var(--ck-rule);
    transition: background 0.45s var(--ease-lux), height 0.45s var(--ease-lux);
}

.ck-method:has(input:checked) .ck-method-mark { background: var(--void-accent); height: 30px; }
.ck-method:has(input:checked) .ck-method-name { color: var(--void-text); }
.ck-method:has(input:focus-visible) { outline: 1px solid rgba(199, 169, 108, 0.6); outline-offset: 4px; }

.ck-method-name {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--void-text-muted);
    transition: color 0.4s ease;
}

.ck-method-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--void-text-faint);
}

.ck-method-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    color: var(--void-text-soft);
}

/* ── Checkbox ───────────────────────────────────────────────────────────── */
.ck-check {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--void-text-muted);
    cursor: pointer;
}

.ck-check input { position: absolute; opacity: 0; pointer-events: none; }

.ck-check-box {
    width: 13px;
    height: 13px;
    flex: none;
    border: 1px solid var(--ck-rule);
    transition: border-color 0.35s ease, background 0.35s ease;
}

.ck-check input:checked + .ck-check-box {
    border-color: var(--void-accent);
    background: linear-gradient(135deg, rgba(199, 169, 108, 0.9), rgba(156, 124, 70, 0.9));
}

.ck-check input:focus-visible + .ck-check-box { outline: 1px solid rgba(199, 169, 108, 0.7); outline-offset: 3px; }

/* ── Actions ────────────────────────────────────────────────────────────── */
.ck-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: clamp(2rem, 4vw, 2.8rem);
}

.ck-cta {
    position: relative;
    min-width: min(300px, 100%);
    min-height: 54px;
    padding: 0 1.6rem;
    border: 1px solid rgba(199, 169, 108, 0.55);
    border-radius: 2px;
    background: transparent;
    color: var(--void-text);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.45s var(--ease-lux), color 0.45s ease, background 0.45s var(--ease-lux);
}

.ck-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--void-gold-gradient);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease-lux);
}

.ck-cta:hover:not(:disabled) { border-color: rgba(226, 199, 138, 0.9); background: rgba(199, 169, 108, 0.08); }

/* The final commitment is the one solid gold surface in the checkout. */
.ck-cta.is-final { background: var(--void-gold-gradient); border-color: transparent; color: #120d05; }
.ck-cta.is-final:hover:not(:disabled) { filter: brightness(1.06); background: var(--void-gold-gradient); }

.ck-cta:disabled { opacity: 0.45; cursor: default; }

.ck-cta.is-busy { color: transparent; }

/* A line that travels rather than a spinner. */
.ck-cta.is-busy::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 232, 202, 0.9), transparent);
    animation: ckTravel 1.15s var(--ease-inout) infinite;
}

@keyframes ckTravel {
    from { transform: translateX(-100%); }
    to { transform: translateX(330%); }
}

.ck-back-link {
    border: 0;
    background: transparent;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--void-text-faint);
    cursor: pointer;
    transition: color 0.35s ease;
}

.ck-back-link:hover { color: var(--void-text-muted); }

/* ── Notices ────────────────────────────────────────────────────────────── */
.ck-notice {
    margin-top: 1.6rem;
    padding: 1.1rem 1.2rem;
    border-left: 1px solid rgba(217, 154, 134, 0.55);
    background: rgba(217, 154, 134, 0.05);
    font-size: 0.78rem;
    line-height: 1.75;
    color: rgba(245, 242, 236, 0.78);
}

.ck-notice[hidden] { display: none; }
.ck-notice-title {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ck-danger);
}

.ck-notice.is-neutral {
    border-left-color: var(--ck-gold-line);
    background: rgba(199, 169, 108, 0.04);
}

.ck-notice.is-neutral .ck-notice-title { color: var(--void-accent); }

/* A refused payment. Same crimson and the same two-frame flicker as the result
   page, so the two places a payment can fail read as one language. */
.ck-notice.is-failure {
    border-left-color: rgba(192, 115, 106, 0.75);
    background: rgba(192, 115, 106, 0.05);
    animation: ckNoticeCut 380ms cubic-bezier(0.7, 0, 0.15, 1) backwards;
}

.ck-notice.is-failure .ck-notice-title {
    color: #c0736a;
    animation: ckFlicker 220ms steps(1, end) 300ms 2;
}

@keyframes ckNoticeCut {
    0% { opacity: 0; transform: translateX(-8px); clip-path: inset(0 0 100% 0); }
    55% { opacity: 1; clip-path: inset(0 0 0 0); }
    70% { opacity: 0.6; }
    100% { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

/* ── Payment ────────────────────────────────────────────────────────────── */
.ck-pay-label {
    margin-bottom: 1rem;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--void-text-muted);
}

.ck-express { margin-bottom: 2rem; }
.ck-express[hidden] { display: none; }

.ck-express-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    font-size: 0.54rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--void-text-faint);
}

.ck-express-rule::before,
.ck-express-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ck-rule-soft);
}

/* Stripe mounts inside this; its own fields are themed through the supported
   appearance API in void-checkout.js, never by reaching into the iframe. */
#ckPaymentElement { min-height: 220px; }

.ck-legal {
    margin-top: 1.8rem;
    font-size: 0.66rem;
    line-height: 1.9;
    color: var(--void-text-faint);
}

.ck-legal a { color: var(--void-text-muted); text-decoration: none; border-bottom: 1px solid var(--ck-rule); }
.ck-legal a:hover { color: var(--void-text-soft); }

/* ── Summary ────────────────────────────────────────────────────────────── */
.ck-summary {
    position: sticky;
    top: 2rem;
    padding: 1.7rem 0 0;
    border-top: 1px solid var(--ck-gold-line);
}

.ck-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.ck-summary-title {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--void-accent);
}

.ck-summary-count { font-size: 0.66rem; letter-spacing: 0.12em; color: var(--void-text-faint); }

.ck-lines { list-style: none; }

.ck-line {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--ck-rule-soft);
}

/* The garment floats on the panel; no tile, no frame. */
.ck-line-media {
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
}

.ck-line-media img { width: 100%; height: 100%; object-fit: contain; }

.ck-line-name {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--void-text);
}

.ck-line-meta {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--void-text-faint);
}

.ck-line-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    color: var(--void-text-soft);
    white-space: nowrap;
}

.ck-qty { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.45rem; }

.ck-qty button {
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border: 1px solid var(--ck-rule);
    background: transparent;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--void-text-muted);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.ck-qty button:hover:not(:disabled) { border-color: var(--ck-gold-line); color: var(--void-text); }
.ck-qty button:disabled { opacity: 0.3; cursor: default; }
.ck-qty span { min-width: 1.2em; text-align: center; font-size: 0.7rem; font-variant-numeric: tabular-nums; }

.ck-totals { margin-top: 1.5rem; }

.ck-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--void-text-faint);
}

.ck-total-row b { font-weight: 400; color: var(--void-text-muted); font-size: 0.82rem; letter-spacing: 0.02em; }

.ck-total-row.is-grand {
    margin-top: 1.1rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--ck-rule);
    color: var(--void-accent);
    font-weight: 600;
    letter-spacing: 0.3em;
}

/* The payable figure was set in Cormorant, whose old-style numerals sit on
   uneven baselines and read as decorative rather than exact. Jost — already
   the interface face here — is the legible one, and tabular figures keep the
   currency mark and the digits on a common rhythm. This is the only place the
   change applies; every other price keeps its serif. */
.ck-total-row.is-grand b {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: clamp(1.35rem, 3.4vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    color: var(--void-text);
}

.ck-summary-note {
    margin-top: 1.2rem;
    font-size: 0.62rem;
    line-height: 1.8;
    color: var(--void-text-faint);
}

/* ── Cart states ────────────────────────────────────────────────────────────
   Exactly one branch of the shell is ever laid out, and which one is decided by
   a single attribute rather than by `hidden` on three separate elements. That
   matters here: .ck-empty needs `display: grid` to lay out, and an author
   `display` beats the UA sheet's `[hidden] { display: none }` — so the empty
   state rendered permanently, underneath which the real checkout also rendered.

   Default is hidden for all three, so `loading` shows nothing at all and the
   empty state cannot appear before the bag has been read. */
#ckMain,
.ck-summary,
.ck-empty { display: none; }

.ck-shell[data-cart="ready"] #ckMain { display: block; }
.ck-shell[data-cart="ready"] .ck-summary { display: block; }

.ck-empty {
    grid-column: 1 / -1;
    place-items: center;
    gap: 1.6rem;
    min-height: 46svh;
    text-align: center;
}

.ck-shell[data-cart="empty"] .ck-empty { display: grid; }

.ck-empty-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 500;
}

.ck-empty-note { max-width: 34ch; font-size: 0.8rem; line-height: 1.8; color: var(--void-text-muted); }

/* ── Result states ──────────────────────────────────────────────────────────
   One layout, three readings. --ck-result is the only colour that changes; the
   black and the gold underneath it are untouched, so a confirmation still reads
   as VOID first and as a status second.

   Success resolves: the ring closes, the mark is inscribed, the light swells
   once and settles. Failure interrupts: the seal arrives broken, the ring
   stalls before completing, the mark snaps in with two frames of flicker, and
   the copy enters sideways rather than rising. Different axis, different
   easing, different rhythm — recognisable apart with the colour ignored. */
.ck-confirm {
    --ck-result: var(--void-accent);
    --ck-result-soft: rgba(199, 169, 108, 0.5);
}

.ck-confirm[data-result="success"] {
    --ck-result: #8faa86;
    --ck-result-soft: rgba(143, 170, 134, 0.45);
}

.ck-confirm[data-result="failed"] {
    --ck-result: #c0736a;
    --ck-result-soft: rgba(192, 115, 106, 0.45);
}

.ck-result-mark {
    width: 46px;
    height: 46px;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Drawn. An entrance state is applied only once JS has confirmed it can run
   the entrance — see [data-motion="on"] below. Nothing here needs a script to
   become visible. */
.ck-mark-ring {
    stroke: var(--ck-result-soft);
    stroke-width: 1;
    stroke-dasharray: 132;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.ck-mark-glyph {
    stroke: var(--ck-result);
    stroke-width: 1.5;
    stroke-dasharray: 46;
    stroke-dashoffset: 0;
    opacity: 1;
}

[data-motion="on"] .ck-mark-ring { stroke-dashoffset: 132; }
[data-motion="on"] .ck-mark-glyph { stroke-dashoffset: 46; opacity: 0; }

.ck-confirm[data-result="pending"] .ck-mark-glyph { display: none; }

[data-motion="on"] .ck-confirm[data-result="pending"] .ck-mark-ring { animation: ckRingDraw 1100ms var(--ease-lux) 240ms forwards; }

/* Success: closes, then is signed, then breathes once. */
[data-motion="on"] .ck-confirm[data-result="success"] .ck-mark-ring {
    animation: ckRingDraw 900ms var(--ease-lux) 220ms forwards,
               ckResultGlow 1600ms var(--ease-inout) 1100ms;
}

[data-motion="on"] .ck-confirm[data-result="success"] .ck-mark-glyph {
    animation: ckGlyphDraw 620ms var(--ease-lux) 900ms forwards;
}

/* Failure: the ring hesitates, and the mark arrives rather than being drawn. */
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-mark-ring {
    animation: ckRingStall 820ms cubic-bezier(0.9, 0, 0.1, 1) 180ms forwards;
}

[data-motion="on"] .ck-confirm[data-result="failed"] .ck-mark-glyph {
    animation: ckGlyphSnap 300ms cubic-bezier(0.7, 0, 0.2, 1) 780ms forwards,
               ckFlicker 260ms steps(1, end) 1080ms 2;
}

@keyframes ckRingDraw {
    to { stroke-dashoffset: 0; }
}

/* Two thirds, a hold, then the rest — the pause is the whole point. */
@keyframes ckRingStall {
    0% { stroke-dashoffset: 132; }
    46% { stroke-dashoffset: 44; }
    62% { stroke-dashoffset: 44; }
    100% { stroke-dashoffset: 0; }
}

@keyframes ckGlyphDraw {
    0% { opacity: 1; stroke-dashoffset: 46; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes ckGlyphSnap {
    0% { opacity: 0; stroke-dashoffset: 0; transform: scale(1.35); }
    100% { opacity: 1; stroke-dashoffset: 0; transform: scale(1); }
}

@keyframes ckFlicker {
    0% { opacity: 1; }
    50% { opacity: 0.25; }
    100% { opacity: 1; }
}

/* A swell that recedes to almost nothing — never a permanent halo. */
@keyframes ckResultGlow {
    0% { filter: drop-shadow(0 0 0 transparent); }
    38% { filter: drop-shadow(0 0 9px var(--ck-result-soft)); }
    100% { filter: drop-shadow(0 0 0 transparent); }
}

.ck-confirm[data-result="success"] .ck-confirm-eyebrow,
.ck-confirm[data-result="failed"] .ck-confirm-eyebrow { color: var(--ck-result); }

.ck-confirm[data-result="failed"] .ck-seal {
    /* Arrives already broken: three segments with gaps where the line failed. */
    background: linear-gradient(90deg, transparent, var(--ck-result) 18%, transparent 34%,
                transparent 42%, var(--ck-result) 52%, transparent 62%,
                transparent 70%, var(--ck-result) 84%, transparent);
}

[data-motion="on"] .ck-confirm[data-result="failed"] .ck-seal {
    animation: ckSealBreak 520ms cubic-bezier(0.8, 0, 0.2, 1) 80ms forwards;
}

@keyframes ckSealBreak {
    0% { transform: scaleX(0.02); opacity: 0; }
    40% { transform: scaleX(0.72); opacity: 1; }
    58% { transform: scaleX(0.72); opacity: 0.45; }
    100% { transform: scaleX(1); opacity: 0.8; }
}

.ck-confirm[data-result="success"] .ck-seal {
    background: linear-gradient(90deg, transparent, var(--ck-result), transparent);
}

/* Failure copy slides in off-axis and settles; success rises. */
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-confirm-eyebrow,
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-confirm-number,
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-confirm-copy,
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-confirm-panel,
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-confirm-actions {
    animation-name: ckSlipIn;
    animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1);
}

@keyframes ckSlipIn {
    from { opacity: 0; transform: translateX(-9px); }
    to { opacity: 1; transform: translateX(0); }
}

.ck-cta.is-quiet {
    border-color: var(--ck-rule);
    background: transparent;
    color: var(--void-text-muted);
}

.ck-cta.is-quiet:hover:not(:disabled) {
    border-color: var(--ck-gold-line);
    color: var(--void-text);
    background: transparent;
}

/* ── Processing veil ─────────────────────────────────────────────────────────
   Held while Stripe works. It uses the confirmation's ring geometry at the same
   size and position, so the move to /checkout/success reads as the mark being
   completed rather than a second page starting. It never loops after a result
   arrives — .is-settled and .is-broken both end the animation. */
.ck-veil {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    background:
        radial-gradient(46% 34% at 50% 44%, rgba(199, 169, 108, 0.05), transparent 70%),
        rgba(3, 3, 3, 0.96);
    animation: ckVeilIn 420ms var(--ease-lux) backwards;
}

.ck-veil[hidden] { display: none; }

.ck-veil-inner {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    text-align: center;
    padding: 2rem;
}

.ck-veil-mark {
    width: 46px;
    height: 46px;
    overflow: visible;
    fill: none;
}

.ck-veil-track {
    stroke: rgba(245, 242, 236, 0.09);
    stroke-width: 1;
}

/* A short arc travelling the ring — the seal being drawn, not a spinner. */
.ck-veil-arc {
    stroke: var(--void-accent);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 26 106;
    transform-origin: 50% 50%;
    animation: ckVeilArc 1500ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.ck-veil-stage {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--void-accent);
    transition: opacity 0.32s ease;
}

.ck-veil-stage.is-turning { opacity: 0; }

.ck-veil-note {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: var(--void-text-faint);
}

/* Accepted: the arc closes into a whole ring and holds, so the navigation
   happens on a completed mark. */
.ck-veil.is-settled .ck-veil-arc {
    animation: ckVeilClose 460ms var(--ease-lux) forwards;
}

/* Refused: the arc stalls, fractures into segments and pulses crimson once. */
.ck-veil.is-broken .ck-veil-arc {
    stroke: #c0736a;
    animation: ckVeilBreak 620ms cubic-bezier(0.7, 0, 0.15, 1) forwards;
}

.ck-veil.is-broken .ck-veil-stage { color: #c0736a; }

.ck-veil.is-leaving { animation: ckVeilOut 320ms var(--ease-inout) forwards; }

@keyframes ckVeilIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ckVeilOut {
    to { opacity: 0; }
}

@keyframes ckVeilArc {
    0% { transform: rotate(-90deg); stroke-dasharray: 12 120; }
    50% { stroke-dasharray: 54 78; }
    100% { transform: rotate(270deg); stroke-dasharray: 12 120; }
}

@keyframes ckVeilClose {
    to { stroke-dasharray: 132 0; transform: rotate(270deg); }
}

@keyframes ckVeilBreak {
    0% { stroke-dasharray: 26 106; }
    34% { stroke-dasharray: 40 92; opacity: 1; }
    46% { opacity: 0.25; }
    58% { opacity: 1; }
    100% { stroke-dasharray: 9 13; opacity: 0.85; transform: rotate(-90deg); }
}

/* ── Atmospheric bloom ───────────────────────────────────────────────────────
   A single centred source behind the seal, driven from the result state on
   <body> because the atmosphere is a sibling of the confirmation, not a
   descendant. It swells once as the mark resolves and settles almost entirely
   back into darkness — no permanently animating full-screen layer. */
.ck-atmos::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    width: min(70vw, 620px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0.7);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, var(--ck-bloom, rgba(199, 169, 108, 0.14)), transparent 68%);
}

body[data-result="success"] { --ck-bloom: rgba(143, 170, 134, 0.16); }
body[data-result="failed"] { --ck-bloom: rgba(192, 115, 106, 0.11); }

[data-motion="on"] body[data-result="success"] .ck-atmos::after {
    animation: ckBloomSettle 2600ms var(--ease-lux) 260ms forwards;
}

/* Weaker, and it arrives interrupted rather than swelling. */
[data-motion="on"] body[data-result="failed"] .ck-atmos::after {
    animation: ckBloomFault 1700ms cubic-bezier(0.7, 0, 0.15, 1) 160ms forwards;
}

@keyframes ckBloomSettle {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    42% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
    100% { opacity: 0.26; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ckBloomFault {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
    28% { opacity: 0.85; }
    36% { opacity: 0.2; }
    48% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.16; transform: translate(-50%, -50%) scale(0.98); }
}

/* Reduced motion keeps the light, just not the swell. */
body[data-result="success"] .ck-atmos::after,
body[data-result="failed"] .ck-atmos::after {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Confirmation ───────────────────────────────────────────────────────── */
.ck-confirm {
    display: grid;
    justify-items: center;
    gap: 1.4rem;
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(3rem, 10vw, 6rem) clamp(1.1rem, 4vw, 2rem) 4rem;
    text-align: center;
}

/* A point of light that becomes a line, then the room settles. Nothing
   celebrates; it is a certificate being issued. */
.ck-seal {
    width: 100%;
    max-width: 260px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--void-accent), transparent);
    opacity: 0.75;
}

[data-motion="on"] .ck-seal {
    opacity: 0;
    transform: scaleX(0.02);
    animation: ckSeal 1400ms var(--ease-lux) 120ms forwards;
}

@keyframes ckSeal {
    0% { transform: scaleX(0.02); opacity: 0; }
    22% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 0.75; }
}

.ck-confirm-eyebrow {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--void-accent);
}

.ck-confirm-number {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.1rem, 6vw, 3rem);
    font-weight: 500;
    letter-spacing: 0.06em;
}

/* The reference, when the headline is an actual EV code rather than a phrase.
   Set at a fraction of the display size and widely tracked: a code is read
   character by character, so it wants air and even figures, not a serif
   display face carrying it at three rem. */
.ck-ref-label {
    margin-bottom: 0.1rem;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.44em;
    text-indent: 0.44em;
    text-transform: uppercase;
    color: rgba(199, 169, 108, 0.62);
}

.ck-confirm-number.is-ref {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: clamp(1.15rem, 3.2vw, 1.45rem);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    color: var(--void-text);
}

/* A hairline under the code, the width of the code — it reads as struck into
   the document rather than typed onto it. */
.ck-confirm-number.is-ref::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, transparent, var(--ck-result-soft), transparent);
}

.ck-confirm-copy {
    max-width: 40ch;
    font-size: 0.86rem;
    line-height: 1.9;
    color: var(--void-text-muted);
}


/* The staggered entrance, applied only once JS has confirmed it can run.
   Without it every one of these elements is already in its final state. */
[data-motion="on"] .ck-confirm-eyebrow {
    animation: ckRise 700ms var(--ease-lux) 620ms backwards;
}

[data-motion="on"] .ck-confirm-number {
    animation: ckRise 760ms var(--ease-lux) 800ms backwards;
}

[data-motion="on"] .ck-confirm-copy {
    animation: ckRise 760ms var(--ease-lux) 940ms backwards;
}

[data-motion="on"] .ck-confirm-panel {
    animation: ckRise 800ms var(--ease-lux) 1080ms backwards;
}

[data-motion="on"] .ck-confirm-actions {
    animation: ckRise 800ms var(--ease-lux) 1500ms backwards;
}

/* The summary enters as a group, then the figure resolves on its own beat —
   the rule draws, the label arrives, the amount rises last. Hierarchy, rather
   than eight elements doing the same thing at the same time. */
[data-motion="on"] .ck-confirm .ck-line {
    animation: ckRise 620ms var(--ease-lux) backwards;
    animation-delay: calc(1180ms + var(--ck-line-i, 0) * 90ms);
}

[data-motion="on"] .ck-confirm .ck-total-row {
    animation: ckRise 560ms var(--ease-lux) backwards;
    animation-delay: calc(1300ms + var(--ck-row-i, 0) * 80ms);
}

[data-motion="on"] .ck-confirm .ck-total-row.is-grand {
    position: relative;
    overflow: hidden;
    animation: ckTotalResolve 720ms var(--ease-lux) 1460ms backwards;
}

/* One pass of warm light across the figure, once, then gone. */
[data-motion="on"] .ck-confirm .ck-total-row.is-grand::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(232, 212, 172, 0.16) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: ckTotalSheen 1100ms var(--ease-inout) 1900ms;
}

@keyframes ckTotalResolve {
    0% { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ckTotalSheen {
    to { transform: translateX(120%); }
}

/* Nothing was charged, so the figure is context rather than a receipt: it is
   muted and gets no sheen. The copy above says so in words as well, since the
   distinction must not rest on colour alone. */
.ck-confirm[data-result="failed"] .ck-total-row.is-grand { color: var(--void-text-muted); }
.ck-confirm[data-result="failed"] .ck-total-row.is-grand b { color: var(--void-text-soft); }
[data-motion="on"] .ck-confirm[data-result="failed"] .ck-total-row.is-grand::after { animation: none; }

@keyframes ckRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ck-confirm-panel {
    width: 100%;
    margin-top: 2.4rem;
    text-align: left;
}

.ck-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.6rem;
}

.ck-confirm-actions .ck-cta { min-width: 240px; }

/* ── Processing ─────────────────────────────────────────────────────────── */
.ck-processing {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--void-accent);
}

.ck-processing[hidden] { display: none; }

.ck-processing i {
    position: relative;
    width: 54px;
    height: 1px;
    background: var(--ck-rule);
    overflow: hidden;
}

.ck-processing i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--void-gold-bright), transparent);
    animation: ckTravel 1.3s var(--ease-inout) infinite;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ck-shell { grid-template-columns: minmax(0, 1fr); }

    /* The manifest moves above the form and collapses, so the CTA stays within
       reach instead of sitting under a long summary. */
    .ck-summary {
        position: static;
        order: -1;
        padding-top: 1.4rem;
    }

    .ck-summary-body[hidden] { display: none; }

    .ck-summary-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        border: 0;
        background: transparent;
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--void-accent);
        cursor: pointer;
    }

    .ck-summary-toggle i {
        width: 8px; height: 8px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        font-style: normal;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.4s var(--ease-lux);
    }

    .ck-summary-toggle[aria-expanded="true"] i { transform: rotate(225deg) translate(-2px, -2px); }
}

@media (min-width: 901px) {
    .ck-summary-toggle { display: none; }
    .ck-summary-body[hidden] { display: block; }
}

@media (max-width: 600px) {
    .ck-fields { grid-template-columns: minmax(0, 1fr); }
    .ck-head { padding: 1.1rem; }
    .ck-mark { font-size: 1.2rem; }
    .ck-secure span { display: none; }
    .ck-actions { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
    .ck-cta { width: 100%; }
    .ck-step-label { display: none !important; }
    .ck-line { grid-template-columns: 48px 1fr auto; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ck-stage.is-entering,
    .ck-stage.is-leaving,
    .ck-stage.is-entering .ck-stage-rule,
    .ck-seal,
    .ck-confirm-eyebrow,
    .ck-confirm-number,
    .ck-confirm-copy,
    .ck-confirm-panel,
    .ck-confirm-actions {
        animation: none !important;
    }

    .ck-seal { transform: scaleX(1); opacity: 0.75; }

    /* The result still reads — the mark is drawn, just not animated into being,
       and the atmosphere holds its settled level rather than swelling. */
    .ck-mark-ring,
    .ck-mark-glyph,
    .ck-atmos::after,
    .ck-confirm .ck-line,
    .ck-confirm .ck-total-row,
    .ck-confirm .ck-total-row.is-grand,
    .ck-confirm .ck-total-row.is-grand::after {
        animation: none !important;
    }

    .ck-mark-ring,
    .ck-mark-glyph {
        stroke-dashoffset: 0;
        opacity: 1;
        transform: none;
    }

    /* The veil still holds the room and still names the stage; only the
       travelling arc and the fade are dropped. */
    .ck-veil,
    .ck-veil-arc { animation: none !important; }
    .ck-veil-arc { stroke-dasharray: 132 0; }

    .ck-cta.is-busy::after,
    .ck-processing i::after { animation-duration: 2.4s; }
    * { transition-duration: 0.01ms !important; }
}