/* Exact-host customer purchase; branding is presentation, never payment authority. */
.native-customer-purchase {
  --purchase-primary: var(--website-canvas-primary, #d8b36a);
  --purchase-primary-ink: var(--website-canvas-primary-ink, #10110f);
  --purchase-secondary: var(--website-canvas-secondary, #4d7c8a);
  --purchase-radius: var(--website-canvas-radius, 20px);
  --purchase-bg: #0d0e0e;
  --purchase-surface: #181a19;
  --purchase-ink: #f8f5ed;
  --purchase-muted: #b9b5aa;
  --purchase-line: rgba(248, 245, 237, .18);
  margin: 0;
  min-height: 100vh;
  color-scheme: dark;
  background: var(--purchase-bg);
  color: var(--purchase-ink);
  font: 400 1rem/1.55 "TDC Website ABeeZee", "Trebuchet MS", sans-serif;
  overflow-wrap: anywhere;
}
html[data-theme="light"] .native-customer-purchase { --purchase-bg: #f4f2ed; --purchase-surface: #fff; --purchase-ink: #171717; --purchase-muted: #62605d; --purchase-line: rgba(23, 23, 23, .18); color-scheme: light; }
.native-customer-purchase[data-purchase-background="surface"] { background: var(--purchase-surface); }
.native-customer-purchase[data-purchase-background="tint"] { background: color-mix(in srgb, var(--purchase-surface) 92%, var(--purchase-primary)); }
.native-customer-purchase[data-purchase-background="frame_glow"] { background: linear-gradient(135deg, color-mix(in srgb, var(--purchase-secondary) 15%, transparent), transparent 36%), var(--purchase-bg); }
.native-customer-purchase[data-purchase-background="hero_glow"] { background: linear-gradient(115deg, color-mix(in srgb, var(--purchase-secondary) 24%, transparent), transparent 55%), var(--purchase-bg); }
.native-customer-purchase:is([data-purchase-background="plan_tone"], [data-purchase-background="compact"]) { background: color-mix(in srgb, var(--purchase-surface) 88%, var(--purchase-secondary)); }
.native-customer-purchase:is([data-purchase-background="featured_plan"], [data-purchase-background="emphasis"]) { background: color-mix(in srgb, var(--purchase-surface) 82%, var(--purchase-primary)); }
.native-customer-purchase[data-purchase-background="media_blend"] { background: linear-gradient(145deg, color-mix(in srgb, var(--purchase-primary) 34%, transparent), transparent), color-mix(in srgb, var(--purchase-secondary) 25%, var(--purchase-surface)); }
.native-customer-purchase[data-purchase-background="aurora"] { background: radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--purchase-primary) 30%, transparent), transparent 38%), linear-gradient(125deg, color-mix(in srgb, var(--purchase-secondary) 26%, transparent), transparent 64%), var(--purchase-bg); }
.native-customer-purchase[data-purchase-background="spotlight"] { background: radial-gradient(circle at 74% 22%, color-mix(in srgb, var(--purchase-secondary) 34%, transparent), transparent 32%), linear-gradient(145deg, color-mix(in srgb, var(--purchase-primary) 24%, transparent), transparent 58%), color-mix(in srgb, var(--purchase-surface) 88%, var(--purchase-bg)); }
.native-customer-purchase[data-purchase-background="duotone"] { background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--purchase-bg) 72%, transparent)), linear-gradient(145deg, color-mix(in srgb, var(--purchase-primary) 72%, var(--purchase-surface)), color-mix(in srgb, var(--purchase-secondary) 78%, var(--purchase-bg))); }
.native-customer-purchase[data-purchase-background="event_poster"] { background: linear-gradient(180deg, transparent 25%, #000000c7), linear-gradient(145deg, color-mix(in srgb, var(--purchase-primary) 65%, var(--purchase-secondary)), var(--purchase-secondary)); }
.native-customer-purchase *, .native-customer-purchase *::before, .native-customer-purchase *::after { box-sizing: border-box; }
.native-customer-purchase [hidden] { display: none !important; }
.purchase-stage { width: min(100%, 76rem); padding: 0 clamp(1rem, 4vw, 3rem) 4rem; margin-inline: auto; }
.purchase-nav { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--purchase-line); }
.purchase-brand { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; font-size: 1.25rem; }
.purchase-brand img { display: block; width: auto; max-width: min(40vw, 15rem); max-height: 4rem; object-fit: contain; }
.purchase-secure, .purchase-eyebrow { font-size: .7rem; letter-spacing: .1em; }
.purchase-secure { text-align: right; flex-shrink: 0; color: var(--purchase-muted); }
.purchase-stage main { max-width: 48rem; margin-inline: auto; }
.purchase-heading { max-width: 48rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
.purchase-eyebrow { margin: 0 0 .75rem; color: var(--purchase-muted); }
.native-customer-purchase :is(h1, h2) { color: inherit; font-family: "TDC Website Abel", "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: -.025em; text-wrap: balance; }
.purchase-heading h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 1.05; }
.purchase-heading > p:not(.purchase-eyebrow) { max-width: 42rem; margin: 1rem 0 0; color: var(--purchase-muted); white-space: pre-line; }
.purchase-price-recap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-top: 1.25rem; }
.purchase-price-recap strong { font-size: 1.25rem; font-weight: 400; }
.purchase-price-recap span { color: var(--purchase-muted); font-size: .85rem; }
.purchase-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.purchase-main { min-width: 0; background: var(--purchase-surface); border: 1px solid var(--purchase-line); border-radius: var(--purchase-radius); padding: clamp(1.25rem, 3vw, 2.25rem); }
.purchase-main fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.purchase-main legend, .purchase-main h2 { margin: 0 0 1.25rem; font: 400 1.8rem/1.2 "TDC Website Abel", "Arial Narrow", sans-serif; }
.purchase-main legend { padding: 0; }
.purchase-main form h2 { margin-top: 2rem; }
.purchase-main label:not(.purchase-consent) { display: block; margin-bottom: 1rem; font-size: .85rem; }
.purchase-main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .purchase-main select, .purchase-main textarea { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: .45rem; border: 1px solid var(--purchase-line); border-radius: max(0px, calc(var(--purchase-radius) - 8px)); padding: .8rem 1rem; color: var(--purchase-ink); background: var(--purchase-bg); font: inherit; font-size: 1rem; }
.purchase-main textarea { resize: vertical; min-height: 7rem; }
.purchase-method-choice { margin-block: 1.5rem; }
.purchase-method-choice .purchase-consent { min-height: 44px; align-items: center; margin-block: .25rem; font-size: .9rem; }
.purchase-main input[readonly], .purchase-main fieldset:disabled input { opacity: .8; }
.purchase-optional, .purchase-note, .purchase-terms { color: var(--purchase-muted); font-size: .8rem; }
.purchase-terms { white-space: pre-line; }
.purchase-test { border-left: 3px solid var(--purchase-primary); padding-left: 1rem; font-size: .85rem; }
.purchase-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.purchase-consent { display: flex; align-items: flex-start; gap: .75rem; margin: 1.25rem 0; font-size: .8rem; }
.purchase-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin: .1rem 0 0; accent-color: var(--purchase-primary); }
.purchase-consent span { min-width: 0; }
.purchase-button { display: block; width: 100%; min-height: 48px; margin-top: 1.5rem; padding: .9rem 1.2rem; border: 1px solid transparent; border-radius: var(--purchase-radius); background: var(--purchase-primary); color: var(--purchase-primary-ink); font: inherit; font-size: .8rem; letter-spacing: .06em; cursor: pointer; }
.purchase-button:disabled { opacity: .55; cursor: default; }
.purchase-button:hover:not(:disabled) { filter: brightness(1.08); }
.purchase-button[data-loading="true"]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .65rem; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: purchase-spin .8s linear infinite; }
.purchase-main > .purchase-text-link { margin-top: 1.5rem; }
.purchase-text-link { display: inline-flex; align-items: center; min-height: 44px; border: 0; padding: .5rem 0; background: transparent; color: inherit; font: inherit; font-size: .7rem; letter-spacing: .04em; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.purchase-main details summary { display: flex; align-items: center; min-height: 44px; font-size: .75rem; text-transform: uppercase; cursor: pointer; }
.purchase-payment:not([hidden]) { margin-top: 1.5rem; }
.purchase-payment:first-child { margin-top: 0; }
.purchase-payment[data-loading="true"] [data-purchase-payment] { min-height: 12rem; }
.purchase-progress:not(:first-child) { margin-top: 1.5rem; }
.purchase-progress-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.purchase-progress h2 { margin: 0; }
.purchase-spinner { display: none; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; border: 2px solid var(--purchase-line); border-top-color: var(--purchase-primary); border-radius: 50%; animation: purchase-spin .8s linear infinite; }
.purchase-progress[data-loading="true"] .purchase-spinner { display: block; }
.purchase-progress p { margin: 0; color: var(--purchase-muted); font-size: .85rem; }
.purchase-progress[data-error="true"] p { color: var(--purchase-ink); }
.purchase-recovery { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .75rem; }
.purchase-back { margin-top: 1rem; }
.purchase-skip { position: fixed; top: -5rem; left: 1rem; z-index: 10; padding: .75rem; background: var(--purchase-surface); color: var(--purchase-ink); }
.purchase-skip:focus { top: 1rem; }
.native-customer-purchase :is(a, button, input, select, textarea, summary, [data-purchase-title]):focus-visible { outline: 3px solid var(--purchase-ink); outline-offset: 4px; }
@keyframes purchase-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .purchase-nav { min-height: 5rem; gap: .75rem; } .purchase-heading { padding-block: 2rem; } }
@media (max-width: 420px) { .purchase-pair { grid-template-columns: minmax(0, 1fr); gap: 0; } .purchase-secure { max-width: 5rem; font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) { .native-customer-purchase { scroll-behavior: auto; } .purchase-spinner, .purchase-button[data-loading="true"]::before { animation: none; } }

/* Prominent saved-flow processing. Stripe's in-progress bank verification is
   left on its own surface; this overlay begins after its return or preparation. */
.purchase-progress[data-overlay="true"] {
  position: fixed;
  inset: 0;
  z-index: 40;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: safe center;
  align-items: center;
  overflow-y: auto;
  gap: 1rem;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: var(--purchase-bg);
  color: var(--purchase-ink);
  text-align: center;
}
.purchase-progress[data-overlay="true"] > * { flex-shrink: 0; max-width: 100%; }
.purchase-progress[data-overlay="true"] .purchase-progress-heading { margin: 0; }
.purchase-progress[data-overlay="true"] h2 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; }
.purchase-progress[data-overlay="true"] p { max-width: 38rem; color: var(--purchase-ink); font-size: 1rem; line-height: 1.65; }