#buyer { max-width: 52rem; }
#buyer .card { margin-bottom: 1.5rem; }
#buyer .row { margin-bottom: 1.25rem; }
#buyer .status:empty { display: none; }
#buyer .status:not(:empty) { margin-top: 1rem; }
#buyer .primary { width: 100%; }
#buyer .order-total { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#buyer .form-actions { margin: 1.25rem 0; }
.payment-card #card-entry { min-height: 90px; margin: 1.5rem 0; }
.payment-card .payment-divider { margin: 2rem 0 1rem; text-align: center; }
.payment-card #check-order { margin-top: 1.5rem; }
.payment-card button { min-height: 44px; }
.payment-card { max-width: 52rem; margin-inline: auto; }
.payment-card .primary { width: 100%; }
/* The ticket form shows what the buyer pays, line by line, before they commit. */
#buyer .bump{padding:1rem;border:1px solid #dee2e8;border-radius:.75rem;background:#f8fafc}
#buyer .bump strong{display:block}
#buyer .bump small{display:block;margin-top:.2rem}
#buyer .coupon{margin:0}
#buyer .coupon-apply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:end}
#buyer .coupon .help:empty{display:none}
#buyer .order-lines{border-top:1px solid #e4e7ec;padding-top:.75rem}
#buyer .order-lines p{display:flex;justify-content:space-between;gap:1rem;margin:.35rem 0;font-variant-numeric:tabular-nums}
#buyer .order-lines s{color:#5c626c;margin-right:.35rem}
#buyer .order-lines .order-total{font-size:1.25rem;font-weight:700;margin-top:.75rem}
#buyer [data-coupon-status][data-tone=ok]{color:#126451;font-weight:600}
#buyer [data-coupon-status][data-tone=error]{color:#a01625;font-weight:600}

/* One-click booth offers after the ticket, ClickFunnels style. */
.oto { text-align: center; }
.oto-steps { display: flex; justify-content: center; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.oto-steps li { padding: .35rem .8rem; border-radius: 999px; background: rgba(0,0,0,.06); color: inherit; opacity: .6; }
.oto-steps li.done { opacity: .85; }
.oto-steps li.done::before { content: "✓ "; }
.oto-steps li[aria-current="step"] { opacity: 1; background: #1f1712; color: #fff; }
.oto h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; margin: .5rem 0 .75rem; }
.oto > p { max-width: 36rem; margin-inline: auto; }
#buyer .oto .order-total { font-size: 2.25rem; font-weight: 800; margin: 1rem auto; }
.oto #offer-card-entry { min-height: 90px; max-width: 32rem; margin: 1rem auto; text-align: left; }
.oto .oto-yes { display: block; max-width: 32rem; min-height: 60px; margin: 1.25rem auto .75rem; font-size: 1.15rem; }
.oto .oto-no { display: block; margin: 0 auto; min-height: 44px; border: 0; background: none; color: inherit; opacity: .7; text-decoration: underline; box-shadow: none; }
.oto .oto-no:hover { opacity: 1; }
.oto .oto-exit { justify-content: center; margin-top: 1.5rem; font-size: .9rem; }
.oto .oto-exit .link { opacity: .7; }
.payment-card .save-note { margin-top: .75rem; }
.oto [hidden] { display: none !important; }
#buyer .oto .order-total { display: block; text-align: center; }

/* A conference's own brand on the pages that take the money. Only applied when
   its brand profile has colours, so an unbranded conference is untouched. */
[data-brand="on"] { --brand-ink: #202225; --brand-accent: #202225; --brand-bg: #f5f6f8; --brand-text: #202225; --brand-heading-font: inherit; --brand-body-font: inherit; }
[data-brand="on"] body { background: var(--brand-bg); color: var(--brand-text); font-family: var(--brand-body-font); }
[data-brand="on"] h1, [data-brand="on"] h2, [data-brand="on"] h3 { font-family: var(--brand-heading-font); font-weight: 400; letter-spacing: -.01em; }
[data-brand="on"] .topbar { background: var(--brand-ink); border-bottom-color: rgba(255,255,255,.14); color: #fff; }
[data-brand="on"] .topbar .brand { color: #fff; }
[data-brand="on"] .topbar .mark { background: var(--brand-accent); color: var(--brand-ink); }
[data-brand="on"] .topbar .brand-logo { height: 40px; width: auto; }
[data-brand="on"] .topbar .button { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
[data-brand="on"] .topbar .button:hover { background: rgba(255,255,255,.12); }
[data-brand="on"] .card { border-radius: 18px; border-color: rgba(0,0,0,.1); box-shadow: 0 18px 50px rgba(0,0,0,.07); }
[data-brand="on"] .primary { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
[data-brand="on"] .primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-ink); }
[data-brand="on"] .eyebrow { color: var(--brand-ink); opacity: .7; }
[data-brand="on"] .oto-steps li[aria-current="step"] { background: var(--brand-ink); }
[data-brand="on"] .oto .order-total, [data-brand="on"] #buyer .order-lines .order-total { color: var(--brand-ink); }
[data-brand="on"] a:focus-visible, [data-brand="on"] button:focus-visible, [data-brand="on"] input:focus-visible { outline-color: var(--brand-accent); }

/* The order form sells: what the ticket includes, what it is worth, and what
   this month costs. Quiet, credible, and readable on a phone. */
.sales-includes ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.sales-includes li { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; padding: .85rem 0; border-top: 1px solid rgba(0,0,0,.09); }
.sales-includes li strong { display: block; font-weight: 700; }
.sales-includes li span { display: block; margin-top: .2rem; font-size: .9rem; opacity: .75; }
.sales-includes li b { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .8; }
.sales-total { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 2px solid rgba(0,0,0,.15); font-weight: 800; font-size: 1.15rem; }
.sales-window { margin: 0 0 1rem; font-weight: 700; }
.sales-bullets { margin: 1rem auto; padding: 0; list-style: none; max-width: 34rem; text-align: left; }
.sales-bullets li { padding: .45rem 0 .45rem 1.6rem; position: relative; }
.sales-bullets li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.sales-assurances { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .85rem; opacity: .75; }
.sales-assurances li { padding: .2rem 0 .2rem 1.3rem; position: relative; }
.sales-assurances li::before { content: "🔒"; position: absolute; left: 0; font-size: .8rem; }
.sales-after ol { margin: .5rem 0 0; padding-left: 1.2rem; }
.sales-after li { padding: .3rem 0; }
[data-coupon-status][data-tone="ok"] { font-weight: 700; }
@media (max-width: 650px) { .sales-includes li { flex-direction: column; gap: .25rem; } }

/* The order bump. It has to be the one thing that catches the eye on this form,
   without pretending to be the primary action. */
.bump { position: relative; margin: 1.25rem 0; padding: 1.1rem 1.1rem 1rem; border: 2px dashed var(--brand-accent, #c88a2e); border-radius: 14px; background: color-mix(in srgb, var(--brand-accent, #c88a2e) 15%, #fff); }
.bump-badge { position: absolute; top: -.8rem; left: 1rem; margin: 0; padding: .2rem .7rem; border-radius: 999px; background: var(--brand-accent, #c88a2e); color: #1c1208; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bump-check { display: block; margin: 0; cursor: pointer; font-weight: 400; }
.bump-check > input { position: absolute; width: 26px; min-height: 26px; margin: .15rem 0 0; }
.bump-body { display: flex; gap: 1rem; align-items: flex-start; padding-left: 2.4rem; }
.bump-art { flex: 0 0 84px; width: 84px; height: auto; color: var(--brand-ink, #202225); }
.bump-words strong { display: block; font-size: 1.05rem; }
.bump-words > span { display: block; margin-top: .25rem; }
.bump-words ul { margin: .6rem 0 0; padding: 0; list-style: none; }
.bump-words li { position: relative; padding: .2rem 0 .2rem 1.4rem; font-size: .92rem; }
.bump-words li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--brand-accent, #c88a2e); }
.bump-words small { display: block; margin-top: .5rem; opacity: .7; }
.bump-check > input:checked ~ .bump-body .bump-words strong { text-decoration: none; }
.bump:has(input:checked) { border-style: solid; background: color-mix(in srgb, var(--brand-accent, #c88a2e) 16%, #fff); }
@media (max-width: 650px) { .bump-body { flex-direction: column; gap: .6rem; } .bump-art { width: 68px; flex-basis: auto; } }

.buy-steps { justify-content: flex-start; margin-bottom: 1.25rem; }
@media (max-width: 650px) { .buy-steps { font-size: .68rem; } .buy-steps li { padding: .3rem .55rem; } }

/* Step one is a button. Behind it, one question at a time, full bleed. */
.buy-start { text-align: center; }
.buy-start .buy-open { max-width: 26rem; min-height: 58px; margin: 1rem auto .5rem; font-size: 1.1rem; }

.tf { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; padding: 0; border: 0; background: var(--brand-ink, #16100c); color: #fff; }
.tf::backdrop { background: rgba(10,6,4,.7); }
.tf form { display: block; height: 100%; padding: 0; }
.tf-bar { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: rgba(255,255,255,.16); }
.tf-bar i { display: block; height: 100%; background: var(--brand-accent, #c88a2e); transition: width .35s cubic-bezier(.22,1,.36,1); }
.tf-close { position: fixed; top: 1rem; right: 1.25rem; min-height: 44px; padding: 0 .7rem; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 1.6rem; line-height: 1; }
.tf-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.tf-stage { display: grid; place-items: center; height: 100%; padding: clamp(1.5rem, 6vw, 4rem); }
.tf-card { width: min(46rem, 100%); }
.tf-card.is-in { animation: tf-in .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes tf-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tf-card.is-in { animation: none; } .tf-bar i { transition: none; } }
.tf-count { margin: 0 0 .75rem; color: var(--brand-accent, #c88a2e); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tf-card h2 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.tf-help { margin: 0 0 2rem; color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 34rem; }
.tf-fields { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.tf-field { flex: 1 1 16rem; display: block; }
.tf-field > span { display: block; margin-bottom: .35rem; color: rgba(255,255,255,.55); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tf-field input { width: 100%; padding: .35rem 0 .6rem; border: 0; border-bottom: 2px solid rgba(255,255,255,.28); border-radius: 0; background: transparent; color: #fff; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.tf-field input:focus { outline: none; border-bottom-color: var(--brand-accent, #c88a2e); }
.tf-field input::placeholder { color: rgba(255,255,255,.3); }
.tf-consent { display: flex; gap: 1rem; align-items: flex-start; max-width: 34rem; margin: 2.25rem 0 0; accent-color: var(--brand-accent, #c88a2e); color: rgba(255,255,255,.85); font-weight: 400; }
.tf-consent input { width: 26px; min-height: 26px; flex: 0 0 26px; }
.tf-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.25rem; }
#buyer .tf .tf-next { width: auto; min-height: 56px; padding: 0 2.25rem; font-size: 1.05rem; font-weight: 800; background: var(--brand-accent, #c88a2e); border-color: var(--brand-accent, #c88a2e); color: var(--brand-ink, #16100c); }
#buyer .tf .tf-next:hover { background: #fff; border-color: #fff; color: var(--brand-ink, #16100c); }
.tf-hint { color: rgba(255,255,255,.5); font-size: .85rem; }
.tf-hint b { color: rgba(255,255,255,.8); }
#buyer .tf .tf-skip { width: auto; border: 0; background: none; color: rgba(255,255,255,.6); text-decoration: underline; }
.tf-skip:hover { background: none; color: #fff; }
.tf-error { min-height: 1.5rem; margin: 1rem 0 0; color: #ffb4a6; font-weight: 700; }
.tf-code input { max-width: 12ch; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .3em; }
.tf .status { color: rgba(255,255,255,.85); }
@media (max-width: 520px) { .tf-fields { gap: 1.25rem; } .tf-field { flex: 1 1 100%; } }

/* The three windows, and the clock on the one that is open. */
.seat-choice { text-align: center; }
.seat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.seat-card { padding: 1.25rem 1rem; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; }
.seat-card h3 { margin: .5rem 0 .25rem; }
.seat-state { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.seat-price { margin: .25rem 0; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.seat-when { margin: 0; font-size: .85rem; opacity: .7; }
.seat-card.is-now { border: 2px solid var(--brand-accent, #c88a2e); background: color-mix(in srgb, var(--brand-accent, #c88a2e) 8%, #fff); }
.seat-card.is-now .seat-state { opacity: 1; color: var(--brand-ink, #202225); }
.seat-card.is-gone, .seat-card.is-soon { opacity: .55; }
.seat-clock { margin: 1rem 0 0; font-size: 1rem; font-weight: 700; }
.seat-clock b { display: inline-block; min-width: 12ch; padding: .2rem .6rem; border-radius: 8px; background: var(--brand-ink, #202225); color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 650px) { .seat-grid { grid-template-columns: 1fr; } }

.sales-refund { margin: 1rem 0 .5rem; padding: .85rem 1rem; border-left: 3px solid var(--brand-accent, #c88a2e); background: rgba(0,0,0,.03); font-size: .95rem; }
.sales-refund b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.sales-terms { margin: .75rem 0 0; font-size: .85rem; }

/* Collect.js hosts each card field in its own frame, so the page lays them out
   and the frames fill the boxes it gives them. */
.gateway-field { min-height: 46px; margin-bottom: .6rem; }
.gateway-field iframe { display: block; width: 100%; height: 46px; border: 0; }
#card-entry .gateway-field:last-child, #offer-card-entry .gateway-field:last-child { margin-bottom: 0; }