/* Shared customer-facing checkout and support presentation; no admin UI selectors. */
body.of-customer { min-height: 100svh; display: flex; flex-direction: column; background: #f6f8fb; color: #08111f; }
.of-customer > main { flex: 1 0 auto; min-width: 0; }
.of-customer > header { background: #08111f; color: #fff; border-color: #26303e; }
.of-customer > header a { color: #d4dfed; }
.of-customer .brand { color: #fff; display: inline-flex; align-items: center; gap: .75rem; font-size: 1.25rem; }
.of-customer .customer-brand-mark { width: 32px; height: 32px; flex: 0 0 32px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.of-customer .customer-brand-mark path:last-child { stroke: #c9ff4a; }
.of-customer .brand .customer-brand-text { font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; color: white; text-transform: none; }
.of-customer .brand small { display: block; color: #bbc8d9; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-top: .3rem; }
.of-customer header a:focus-visible { outline-color: #c9ff4a; }
.of-customer h1 { letter-spacing: -.04em; line-height: 1.17; }
.of-customer :where(h1,h2,h3,p,li,a,code,strong) { overflow-wrap: anywhere; }
.of-customer .card { border-color: #d8e0e7; box-shadow: 0 4px 18px #08111f03; border-radius: 14px; }
.of-customer label { line-height: 1.6; }
.of-customer :where(input,select,textarea) { font-size: 1rem; min-width: 0; max-width: 100%; }
.of-customer :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 48px; border-color: #94a5bb; }
.of-customer :where(button,.button) { min-height: 48px; line-height: 1.45; }
.of-customer .primary { background: #08111f; border-color: #08111f; color: white; }
.of-customer .primary:hover { background: #243348; border-color: #243348; }
.of-customer .subtle { background: #edf3e7; border-color: #d5dfca; }
.of-customer .notice { line-height: 1.7; }
.of-customer :where(.check,.check-line) { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: .75rem; font-weight: 500; }
.of-customer :where(.check,.check-line) > input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: .25rem 0 0; accent-color: #2447a3; }
.of-customer :where(.check,.check-line) > span { min-width: 0; flex: 1; color: #34465e; }
.of-customer main:focus { outline: none; }
.of-customer .skip { position: fixed; z-index: 100; left: 1rem; top: .75rem; padding: .7rem 1rem; transform: translateY(calc(-100% - 2rem)); }
.of-customer .skip:not(:focus) { clip-path: inset(50%); }
.of-customer .skip:focus { color: #08111f; background: #c9ff4a; transform: none; border-radius: 6px; }
.of-customer footer { font-size: .8125rem; line-height: 1.8; color: #53647b; }
.of-customer .subtle .hint { color: #53647b; }
.of-support .header-inner { min-height: 80px; padding-block: 1rem; }
.of-support .header-inner nav { gap: 1.25rem; }
.of-support .header-inner nav a, .of-support .header-inner nav button { min-height: 44px; display: inline-flex; align-items: center; }
.of-support .header-inner nav .text-button { color: #d4dfed; }
.of-support main.shell { padding-top: 3rem; padding-bottom: 2rem; }
.of-support .columns { gap: 1.5rem; grid-template-columns: minmax(0,1.55fr) minmax(260px,1fr); }
.of-support .columns > * { min-width: 0; }
.of-support .lede { max-width: 42rem; line-height: 1.75; }
.of-support .security-check { overflow-x: auto; }
.of-support .message-meta { flex-wrap: wrap; }
.of-checkout > header { padding-block: 1rem; min-height: 80px; }
.of-checkout > header > a:last-child { min-height: 44px; display: flex; align-items: center; font-size: .875rem; }
.of-checkout .checkout-main { width: min(850px,100%); margin-top: 3rem; margin-bottom: 1rem; }
.of-checkout .checkout-main > .eyebrow { margin-bottom: 1rem; }
.of-checkout .checkout-main h1 { font-size: clamp(2rem,4vw,2.9rem); margin-bottom: 1.5rem; }
.of-checkout .checkout-main h2 { font-size: 1.4rem; margin-top: 0; }
.of-checkout .checkout-main .card { overflow: visible; padding: clamp(1.25rem,3vw,2rem); }
.of-checkout .checkout-currency { display: flex; gap: 1.25rem; align-items: end; }
.of-checkout .checkout-currency label { margin: 0; flex: 1; }
.of-checkout .checkout-currency .secondary { flex: 0 0 auto; }
.of-checkout .checkout-amount { margin: 1.25rem 0; line-height: 1.3; font-variant-numeric: tabular-nums; }
.of-checkout .checkout-amount small { white-space: nowrap; font-size: 1rem; }
.of-checkout .checkout-main form > button { max-width: 100%; white-space: normal; }
.of-checkout .checkout-main .setup-key { font: 1rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; border-radius: 8px; border: 1px solid #d8e0e7; margin-bottom: 1rem; word-break: break-all; }
.of-checkout .license-site { padding: 1.25rem 0; border-top: 1px solid #d8e0e7; }
.of-checkout .license-site p { margin-bottom: .6rem; }
.of-checkout details > summary { min-height: 44px; line-height: 1.6; padding-block: .5rem; }
.of-checkout footer { width: min(850px,100%); margin: 1rem auto 0; padding-top: 1.5rem; padding-bottom: 2rem; }
@media (max-width: 800px) {
  .of-support .columns { grid-template-columns: 1fr; }
  .of-support .header-inner { padding-inline: 20px; }
}
@media (max-width: 600px) {
  .of-customer .brand .customer-brand-text { font-size: 1.15rem; }
  .of-customer .customer-brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .of-support .header-inner { flex-wrap: wrap; gap: .6rem 1rem; padding-block: .85rem; }
  .of-support .header-inner nav { gap: 1rem; }
  .of-support main.shell { padding-top: 2rem; }
  .of-support .columns .card { padding: 1.25rem; }
  .of-support .field-pair { grid-template-columns: 1fr; gap: 0; }
  .of-checkout > header { padding-inline: 1rem; }
  .of-checkout .checkout-main { margin-top: 2rem; }
  .of-checkout .checkout-currency { flex-direction: column; align-items: stretch; gap: 1rem; }
  .of-checkout .checkout-main .actions > form { width: 100%; }
  .of-checkout .checkout-main .actions button { width: 100%; }
  .of-checkout .checkout-main .check-line { font-size: .9375rem; }
  .of-checkout .checkout-main .check-line > input { margin-top: .25rem; }
  .of-checkout .checkout-amount small { display: block; margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .of-customer *, .of-customer *::before, .of-customer *::after { scroll-behavior: auto; transition: none; } }
@media print { .of-customer { display: block; } .of-customer > header, .of-customer button { display: none; } .of-customer .card { box-shadow: none; } }