:root {
    --checkout-ink: #181228;
    --checkout-muted: #6d657c;
    --checkout-border: #e7e1dc;
    --checkout-surface: #ffffff;
    --checkout-soft: #f8f5f1;
    --checkout-indigo: #6366f1;
    --checkout-pink: #ec4899;
    --checkout-teal: #005c77;
    --checkout-gradient: linear-gradient(135deg, var(--checkout-indigo), var(--checkout-pink));
    --checkout-shadow: 0 20px 60px rgba(24, 18, 40, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #fbfaf8;
    color: var(--checkout-ink);
    font-family: 'Poppins', sans-serif;
    line-height: 1.55;
}

a { color: inherit; }

button, input, select { font: inherit; }

button, select { cursor: pointer; }

.checkout-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.checkout-header {
    background: rgba(22, 22, 26, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 5;
}

.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }

.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-divider { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.28); flex-shrink: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font-size: 20px; font-weight: 700; }

.brand strong { color: var(--checkout-indigo); }

.checkout-brand-logo { display: block; height: 56px; object-fit: contain; width: auto; max-width: 200px; }

.checkout-chapter-logo { display: block; height: 42px; object-fit: contain; width: auto; max-width: 160px; }

.back-link { color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }

.back-link:hover, .back-link:focus-visible { color: #ffffff; }

.back-link i { margin-right: 8px; }

.checkout-hero { padding: 68px 0 46px; background: radial-gradient(circle at 12% 20%, rgba(99, 102, 241, .11), transparent 30%), radial-gradient(circle at 90% 10%, rgba(236, 72, 153, .08), transparent 28%); }

.eyebrow, .card-kicker { color: var(--checkout-indigo); font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }

.checkout-hero h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 14px; }

.hero-copy { color: var(--checkout-muted); font-size: 17px; margin: 0; }

.checkout-steps { display: flex; gap: 28px; list-style: none; margin: 36px 0 0; padding: 0; color: #a19aa9; font-size: 13px; font-weight: 600; }

.checkout-steps li { align-items: center; display: inline-flex; gap: 9px; }

.checkout-steps span { align-items: center; border: 1px solid #d8d0ca; border-radius: 50%; display: inline-flex; height: 26px; justify-content: center; width: 26px; }

.checkout-steps .step-active { color: var(--checkout-ink); }

.checkout-steps .step-active span { background: var(--checkout-gradient); border-color: transparent; color: white; }

.preview-banner { align-items: center; background: rgba(0, 92, 119, .08); border: 1px solid rgba(0, 92, 119, .18); border-radius: 11px; color: var(--checkout-teal); display: flex; font-size: 12px; gap: 8px; margin-top: 25px; max-width: 680px; padding: 11px 13px; }

.checkout-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); padding-bottom: 80px; }

.checkout-form { display: grid; gap: 20px; }

.form-card, .order-card, .help-card { background: var(--checkout-surface); border: 1px solid var(--checkout-border); border-radius: 22px; box-shadow: 0 8px 28px rgba(24, 18, 40, .03); }

.form-card { padding: clamp(24px, 4vw, 38px); }

.card-heading, .order-card-heading, .subheading-row { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; }

.card-heading h2, .order-card h2 { font-size: 24px; letter-spacing: -.03em; line-height: 1.2; margin: 0; }

.secure-note { color: var(--checkout-muted); font-size: 12px; padding-top: 5px; white-space: nowrap; }

.secure-note i { color: var(--checkout-teal); margin-right: 5px; }

.field-grid { display: grid; gap: 17px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }

.registration-mode { border: 0; display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }

.mode-option { align-items: flex-start; border: 1px solid var(--checkout-border); border-radius: 14px; cursor: pointer; display: flex; gap: 12px; padding: 15px; position: relative; }

.mode-option.selected { border-color: var(--checkout-indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, .09); }

.mode-option:focus-within { outline: 3px solid rgba(99, 102, 241, .18); outline-offset: 2px; }

.mode-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }

.mode-radio { border: 1px solid #c6bdc5; border-radius: 50%; flex: 0 0 18px; height: 18px; margin-top: 1px; position: relative; width: 18px; }

.mode-option input:checked + .mode-radio { border-color: var(--checkout-indigo); }

.mode-option input:checked + .mode-radio::after { background: var(--checkout-indigo); border-radius: 50%; content: ''; height: 8px; left: 4px; position: absolute; top: 4px; width: 8px; }

.mode-option span:last-child { display: grid; gap: 3px; }

.mode-option strong { font-size: 13px; }

.mode-option small, .mode-help { color: var(--checkout-muted); font-size: 12px; line-height: 1.5; }

.mode-help { background: var(--checkout-soft); border-radius: 9px; margin: 18px 0 -10px; padding: 10px 12px; }

.mode-panel[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field-hint { color: var(--checkout-muted); font-size: 12px; font-weight: 500; line-height: 1.45; }

.field-wide { grid-column: 1 / -1; }

.field span, .coupon-box label, .summary-label { color: var(--checkout-ink); font-size: 13px; font-weight: 700; }

.field b, .terms-row b { color: var(--checkout-pink); }

.field em { color: var(--checkout-muted); font-size: 11px; font-style: normal; font-weight: 400; margin-left: 5px; }

.field input, .field select, .coupon-input input { background: #fff; border: 1px solid var(--checkout-border); border-radius: 10px; color: var(--checkout-ink); min-height: 49px; outline: none; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }

.field input::placeholder, .coupon-input input::placeholder { color: #aaa2ad; }

.field input:focus, .field select:focus, .coupon-input input:focus { border-color: var(--checkout-indigo); box-shadow: 0 0 0 4px rgba(99, 102, 241, .1); }

.attendee-section { border-top: 1px solid var(--checkout-border); margin-top: 32px; padding-top: 28px; }

.subheading-row { align-items: center; }

.subheading-row h3 { font-size: 17px; margin: 0 0 4px; }

.subheading-row p { color: var(--checkout-muted); font-size: 13px; margin: 0; }

.text-button { background: transparent; border: 0; color: var(--checkout-indigo); font-size: 13px; font-weight: 700; padding: 10px 0; white-space: nowrap; }

.text-button:hover, .text-button:focus-visible { color: var(--checkout-pink); }

.attendees-list { display: grid; gap: 15px; margin-top: 20px; }

.attendee-card { background: var(--checkout-soft); border: 1px solid var(--checkout-border); border-radius: 15px; padding: 19px; }

.attendee-card-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }

.attendee-card-heading h4 { font-size: 14px; margin: 0; }

.remove-attendee { background: transparent; border: 0; color: var(--checkout-muted); font-size: 12px; padding: 5px; }

.remove-attendee:hover, .remove-attendee:focus-visible { color: #c0395c; }

.attendee-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.attendee-fields .field-wide { grid-column: 1 / -1; }

.payment-options { border: 0; display: grid; gap: 12px; margin: 30px 0 0; padding: 0; }

.payment-option { align-items: center; border: 1px solid var(--checkout-border); border-radius: 14px; display: flex; gap: 13px; padding: 17px; position: relative; }

.payment-option.selected { border-color: var(--checkout-indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, .09); }

.payment-option:focus-within { outline: 3px solid rgba(99, 102, 241, .18); outline-offset: 2px; }

.payment-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }

.radio-mark { border: 1px solid #c6bdc5; border-radius: 50%; height: 18px; position: relative; width: 18px; }

.payment-option input:checked + .radio-mark { border-color: var(--checkout-indigo); }

.payment-option input:checked + .radio-mark::after { background: var(--checkout-indigo); border-radius: 50%; content: ''; height: 8px; left: 4px; position: absolute; top: 4px; width: 8px; }

.payment-copy { display: grid; gap: 3px; min-width: 0; }

.payment-copy strong { font-size: 14px; }

.payment-copy small { color: var(--checkout-muted); font-size: 12px; line-height: 1.45; }

.payment-icon { color: var(--checkout-teal); font-size: 21px; margin-left: auto; }

.payment-option.is-disabled { background: #faf9f8; color: #a7a0aa; }

.payment-option.is-disabled .payment-copy small { color: #aaa3ac; }

.coming-soon { color: var(--checkout-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-left: auto; text-transform: uppercase; }

.consent-notice { background: #f7f6f8; border-radius: 14px; margin-top: 27px; padding: 16px 18px; }

.consent-notice p { color: var(--checkout-muted); font-size: 12px; line-height: 1.65; margin: 0; }

.consent-title { color: var(--checkout-ink); font-size: 13px; font-weight: 700; margin-bottom: 8px !important; }

.consent-notice a, .terms-row a { color: var(--checkout-indigo); font-weight: 600; }

.terms-row { align-items: flex-start; display: flex; gap: 10px; margin-top: 14px; }

.terms-row input { accent-color: var(--checkout-indigo); flex: 0 0 auto; height: 17px; margin-top: 3px; width: 17px; }

.terms-row label { color: var(--checkout-muted); font-size: 12px; line-height: 1.6; }

.form-status, .inline-status { color: #c0395c; font-size: 12px; margin: 15px 0 0; min-height: 18px; }

.submit-button { align-items: center; background: var(--checkout-gradient); border: 0; border-radius: 12px; box-shadow: 0 12px 24px rgba(99, 102, 241, .22); color: #fff; display: flex; font-size: 15px; font-weight: 700; gap: 10px; justify-content: center; min-height: 56px; padding: 14px 22px; transition: transform .2s ease, box-shadow .2s ease; width: 100%; }

.submit-button:hover, .submit-button:focus-visible { box-shadow: 0 16px 30px rgba(99, 102, 241, .3); transform: translateY(-2px); }

.submit-button:disabled { cursor: wait; opacity: .7; transform: none; }

.submit-button > i { margin-left: auto; }

.form-footnote { color: var(--checkout-muted); font-size: 11px; margin: -8px 0 0; text-align: center; }

.form-footnote i { color: var(--checkout-teal); margin-right: 5px; }

.order-column { position: sticky; top: 24px; }

.order-card { padding: 28px; }

.order-card-heading { align-items: center; margin-bottom: 26px; }

.order-badge { background: rgba(99, 102, 241, .1); border-radius: 20px; color: var(--checkout-indigo); font-size: 11px; font-weight: 800; padding: 7px 11px; }

.package-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236d657c' d='m2.1 4.2 3.9 4 3.9-4 .9.9-4.8 4.8-4.8-4.8z'/%3E%3C/svg%3E") no-repeat right 16px center; }

.package-meta { align-items: center; color: var(--checkout-muted); display: flex; font-size: 11px; justify-content: space-between; margin-top: 9px; }

.flash-sale-note { background: rgba(236, 72, 153, .08); border: 1px solid rgba(236, 72, 153, .18); border-radius: 10px; color: var(--checkout-pink); font-size: 12px; font-weight: 600; line-height: 1.45; margin: 12px 0 0; padding: 11px 12px; }

.status-dot { color: var(--checkout-teal); font-weight: 700; }

.status-dot i { font-size: 7px; margin-right: 3px; vertical-align: 1px; }

.member-choice { border-top: 1px solid var(--checkout-border); margin-top: 25px; padding-top: 23px; }

.membership-tip { align-items: flex-start; background: rgba(0, 92, 119, .07); border: 1px solid rgba(0, 92, 119, .14); border-radius: 10px; color: var(--checkout-teal); display: flex; font-size: 12px; gap: 8px; line-height: 1.45; margin-top: 24px; padding: 11px 12px; }

.membership-tip i { margin-top: 2px; }

.summary-label { margin: 0 0 9px; }

.segmented-control { background: var(--checkout-soft); border: 1px solid var(--checkout-border); border-radius: 9px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; }

.segmented-control label { position: relative; }

.segmented-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }

.segmented-control span { border-radius: 7px; color: var(--checkout-muted); display: block; font-size: 11px; font-weight: 600; padding: 9px 5px; text-align: center; }

.segmented-control input:checked + span { background: #fff; box-shadow: 0 2px 7px rgba(24, 18, 40, .09); color: var(--checkout-indigo); }

.segmented-control label:focus-within span { outline: 3px solid rgba(99, 102, 241, .18); outline-offset: 1px; }

.price-breakdown { border-bottom: 1px solid var(--checkout-border); border-top: 1px solid var(--checkout-border); display: grid; gap: 11px; margin-top: 26px; padding: 19px 0; }

.price-breakdown div { align-items: center; color: var(--checkout-muted); display: flex; font-size: 13px; justify-content: space-between; }

.price-breakdown div:first-child { color: var(--checkout-ink); font-weight: 700; }

.discount-row { color: var(--checkout-teal) !important; }

.coupon-box { border-bottom: 1px solid var(--checkout-border); padding: 20px 0; }

.coupon-input { display: flex; gap: 8px; margin-top: 9px; }

.coupon-input input { min-height: 43px; }

.coupon-input button { background: var(--checkout-soft); border: 1px solid var(--checkout-border); border-radius: 9px; color: var(--checkout-indigo); font-size: 12px; font-weight: 700; padding: 0 15px; }

.coupon-input button:hover, .coupon-input button:focus-visible { border-color: var(--checkout-indigo); }

.inline-status { min-height: 0; }

.total-row { align-items: end; display: flex; justify-content: space-between; padding: 22px 0 17px; }

.total-row span { font-size: 14px; font-weight: 700; }

.total-row strong { color: var(--checkout-indigo); font-size: 23px; letter-spacing: -.03em; }

.event-mini-details { background: var(--checkout-soft); border-radius: 12px; color: var(--checkout-muted); display: grid; font-size: 12px; gap: 9px; margin-top: 8px; padding: 15px; }

.event-mini-details i { color: var(--checkout-indigo); margin-right: 8px; width: 14px; }

.help-card { align-items: flex-start; display: flex; gap: 13px; margin-top: 16px; padding: 19px; }

.help-card > i { color: var(--checkout-indigo); font-size: 20px; }

.help-card strong { font-size: 13px; }

.help-card p { color: var(--checkout-muted); font-size: 11px; margin: 4px 0 0; }

.help-card a { color: var(--checkout-indigo); font-weight: 700; }

.dialog-backdrop { align-items: center; background: rgba(24, 18, 40, .58); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 20; }

.dialog-backdrop[hidden] { display: none; }

.success-dialog { background: #fff; border-radius: 24px; box-shadow: var(--checkout-shadow); max-width: 470px; padding: 42px 36px 36px; position: relative; text-align: center; width: 100%; }

.dialog-close { background: var(--checkout-soft); border: 0; border-radius: 50%; color: var(--checkout-muted); height: 34px; position: absolute; right: 17px; top: 17px; width: 34px; }

.dialog-close:hover, .dialog-close:focus-visible { color: var(--checkout-ink); }

.success-icon { align-items: center; background: rgba(0, 92, 119, .1); border-radius: 50%; color: var(--checkout-teal); display: flex; font-size: 25px; height: 66px; justify-content: center; margin: 0 auto 22px; width: 66px; }

.success-dialog h2 { font-size: 29px; letter-spacing: -.04em; line-height: 1.2; margin: 0 0 12px; }

.success-dialog > p:not(.eyebrow):not(.reference-label) { color: var(--checkout-muted); font-size: 13px; margin: 0 auto; max-width: 360px; }

.reference-label { background: var(--checkout-soft); border-radius: 9px; color: var(--checkout-muted); font-size: 12px; margin: 23px 0; padding: 12px; }

.reference-label strong { color: var(--checkout-ink); letter-spacing: .08em; margin-left: 5px; }

.payment-instructions { background: var(--checkout-soft); border: 1px solid var(--checkout-border); border-radius: 12px; margin: 0 0 23px; padding: 15px; text-align: left; }

.payment-instructions[hidden] { display: none; }

.instruction-title { color: var(--checkout-teal); font-size: 12px; font-weight: 800; margin: 0 0 12px; text-transform: uppercase; }

.instruction-content { align-items: center; display: flex; gap: 14px; }

.instruction-content img { background: #fff; border: 1px solid var(--checkout-border); border-radius: 7px; height: 90px; object-fit: contain; padding: 5px; width: 90px; }

.instruction-content dl { display: grid; gap: 5px; margin: 0; min-width: 0; width: 100%; }

.instruction-content dl div { display: flex; font-size: 11px; gap: 8px; justify-content: space-between; }

.instruction-content dt { color: var(--checkout-muted); }

.instruction-content dd { font-weight: 700; margin: 0; max-width: 65%; overflow-wrap: anywhere; text-align: right; }

.dialog-button { display: inline-flex; text-decoration: none; }

.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.preview-banner[hidden] { display: none; }

@media (max-width: 850px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .order-column { order: -1; position: static; }
    .order-card { margin-bottom: 0; }
}

@media (max-width: 800px) {
    .checkout-brand-logo { height: 44px; max-width: 140px; }
    .checkout-chapter-logo { height: 32px; max-width: 110px; }
    .brand-lockup { gap: 8px; }
    .brand-divider { height: 26px; }
}

@media (max-width: 560px) {
    .checkout-container { width: min(100% - 32px, 1180px); }
    .header-inner { min-height: calc(66px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
    .brand { font-size: 17px; }
    .checkout-brand-logo { height: 40px; width: auto; max-width: 120px; }
    .checkout-chapter-logo { height: 30px; width: auto; max-width: 96px; }
    .brand-lockup { gap: 8px; }
    .brand-divider { height: 24px; }
    .back-link { font-size: 0; }
    .back-link i { font-size: 16px; margin: 0; }
    .checkout-hero { padding: 44px 0 34px; }
    .checkout-steps { gap: 14px; justify-content: space-between; }
    .checkout-steps li { font-size: 11px; gap: 5px; }
    .checkout-steps span { height: 23px; width: 23px; }
    .field-grid, .attendee-fields { grid-template-columns: 1fr; }
    .field-wide, .attendee-fields .field-wide { grid-column: auto; }
    .form-card, .order-card { border-radius: 17px; padding: 22px 17px; }
    .mode-option { padding: 13px; }
    .card-heading, .subheading-row { display: block; }
    .secure-note { display: block; margin-top: 12px; }
    .text-button { margin-top: 12px; }
    .payment-option { align-items: flex-start; }
    .payment-icon, .coming-soon { margin-top: 2px; }
    .success-dialog { padding: 38px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}