/* Customer enrollment surfaces. The payment service and its admin CSS stay shared. */
html:has(body.ce-checkout){color-scheme:light;scroll-padding-top:24px}
html[data-ce-theme=dark]:has(body.ce-checkout){color-scheme:dark}
body.ce-checkout{
  --bg:var(--ce-canvas);--panel:var(--ce-surface);--line:var(--ce-line);
  --text:var(--ce-ink);--muted:var(--ce-copy);--green:var(--ce-link,var(--ce-blue));
  --checkout-action:#27292d;--checkout-action-ink:#fff;
  --checkout-success:#23734d;--checkout-notice:#8b4c12;
  margin:0;background:var(--ce-canvas) var(--ce-paper) repeat;background-size:240px 240px;
  color:var(--ce-ink);font-family:var(--ce-font);font-size:var(--ce-text-base);line-height:var(--ce-leading-copy);
  -webkit-font-smoothing:antialiased;
}
html[data-ce-theme=dark] body.ce-checkout{
  --checkout-action:#edf0f5;--checkout-action-ink:#1a1d23;
  --checkout-success:#85d6a7;--checkout-notice:#e6b38b;background-size:200px 200px;
}
body.ce-checkout :is(a,button,input){transition:background-color .18s,border-color .18s,color .18s}
body.ce-checkout :is(button,a,input):focus-visible{outline:2px solid var(--ce-link,var(--ce-blue));outline-offset:4px}
body.ce-checkout a:hover{color:var(--ce-ink)}
body.ce-checkout ::selection{background:var(--ce-blue-soft);color:var(--ce-ink)}
body.ce-checkout :is(h1,h2,h3){font-family:var(--ce-heading);font-synthesis:none;color:var(--ce-ink);font-weight:650}
body.ce-checkout .header{width:min(var(--ce-content),calc(100% - var(--ce-gutter)));max-width:none;height:80px;padding:0;margin:auto;border:0;gap:20px}
body.ce-checkout .brand{gap:0;color:var(--ce-ink);font:600 18px/1 Avenir,"Avenir Next",var(--ce-font);letter-spacing:-.2px;min-height:44px;white-space:nowrap}
body.ce-checkout .brand-dot{color:var(--ce-blue)}
body.ce-checkout .header-tools{gap:20px;min-width:0}
body.ce-checkout .header .subtle{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--ce-copy);white-space:nowrap}
body.ce-checkout .header .subtle:hover{color:var(--ce-ink)}
body.ce-checkout .preview-tag{font-size:12px;background:var(--ce-soft);border-color:var(--ce-line);color:var(--ce-copy);padding:5px 12px}
body.ce-checkout .shell{width:min(var(--ce-content),calc(100% - var(--ce-gutter)));max-width:none;margin:auto;padding:34px 0 0}
body.ce-checkout .back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:22px;font-size:14px;color:var(--ce-copy)}
body.ce-checkout .eyebrow{font-family:var(--ce-font);font-size:12px;line-height:1.6;letter-spacing:.07em;color:var(--ce-muted)}
body.ce-checkout h1{font-size:clamp(28px,3.3vw,40px);line-height:1.45;letter-spacing:-.025em;margin-bottom:16px}
body.ce-checkout .page-heading>p:last-child{font-size:16px;line-height:1.8;color:var(--ce-copy)}
body.ce-checkout .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0 24px;padding:18px 0;border-block:1px solid var(--ce-line);color:var(--ce-muted)}
body.ce-checkout .steps li{font-size:14px;line-height:1.6;gap:10px;min-width:0}
body.ce-checkout .steps li span{width:30px;height:30px;flex:none;font-size:12px;border-color:var(--ce-line);background:var(--ce-surface);color:var(--ce-muted)}
body.ce-checkout .steps li.active{color:var(--ce-ink);font-weight:600}
body.ce-checkout .steps li.active span{background:var(--ce-blue-soft);border-color:var(--ce-blue-line);color:var(--ce-link,var(--ce-blue))}
body.ce-checkout .steps li.complete span{background:var(--ce-blue);border-color:var(--ce-blue);color:#fff}
body.ce-checkout .checkout-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px}
body.ce-checkout :is(.summary,.payment-card){background:var(--ce-surface);border:1px solid var(--ce-line);border-radius:20px;padding:32px;min-width:0;box-shadow:var(--ce-shadow)}
body.ce-checkout .payment-card{min-height:0;scroll-margin-top:24px}
body.ce-checkout .summary{background:linear-gradient(145deg,var(--ce-surface),var(--ce-soft));box-shadow:none}
body.ce-checkout .small-tag{font-size:12px;padding:4px 10px;border-radius:999px;border-color:var(--ce-line);background:var(--ce-surface);color:var(--ce-copy)}
body.ce-checkout .summary h2{font-size:30px;line-height:1.5;letter-spacing:-.02em;margin-bottom:16px}
body.ce-checkout .intro{font-size:14px;line-height:1.9;color:var(--ce-copy)}
body.ce-checkout .benefits li{font-size:14px;line-height:1.8;color:var(--ce-ink);margin-bottom:12px}
body.ce-checkout .benefits li::before{color:var(--ce-link,var(--ce-blue))}
body.ce-checkout .total{gap:16px;border-color:var(--ce-line);flex-wrap:wrap}
body.ce-checkout .total>span{font-size:14px;color:var(--ce-copy)}
body.ce-checkout .total strong{font:600 clamp(30px,3vw,36px)/1.3 var(--ce-font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.ce-checkout .summary-note{font-size:12px;color:var(--ce-muted);line-height:1.8}
body.ce-checkout .teacher{border-color:var(--ce-line);flex-wrap:wrap;gap:12px}
body.ce-checkout .teacher>img{border-radius:50%;background:#fff;flex:none}
body.ce-checkout .teacher strong{font-size:14px;font-weight:600;color:var(--ce-ink)}
body.ce-checkout .teacher span{font-size:12px;color:var(--ce-muted)}
body.ce-checkout .text-button{font-size:14px;line-height:1.6;min-height:44px;padding:8px 0;display:inline-flex;align-items:center;justify-content:center;color:var(--ce-copy)}
body.ce-checkout .text-button:hover{color:var(--ce-ink)}
body.ce-checkout .mode-note{background:var(--ce-soft);border:1px solid var(--ce-line);border-radius:12px;padding:14px 16px;margin-bottom:28px}
body.ce-checkout .status-dot{background:var(--ce-link,var(--ce-blue));margin-top:8px}
body.ce-checkout .mode-note strong{font-size:14px;font-weight:550;color:var(--ce-ink)}
body.ce-checkout .mode-note p{font-size:12px;color:var(--ce-muted);line-height:1.8}
body.ce-checkout .payment-card h2{font-size:24px;line-height:1.5;letter-spacing:-.02em;margin:8px 0 12px}
body.ce-checkout .card-intro{font-size:14px;line-height:1.8;color:var(--ce-copy);margin-bottom:24px}
body.ce-checkout .payment-card label:not(.consent){font-size:14px;line-height:1.6;color:var(--ce-ink);margin:20px 0 10px}
body.ce-checkout .payment-card input:not([type=checkbox]){background:var(--ce-surface);color:var(--ce-ink);border:1px solid #8993a3;border-radius:12px;padding:12px 14px;min-height:48px;font-size:16px;line-height:1.5}
body.ce-checkout .payment-card input::placeholder{color:var(--ce-muted);opacity:1}
body.ce-checkout .phone-field{border:1px solid #8993a3;border-radius:12px;background:var(--ce-surface);min-width:0}
body.ce-checkout .phone-field:focus-within{border-color:var(--ce-link,var(--ce-blue));outline:2px solid var(--ce-blue-soft);outline-offset:2px}
body.ce-checkout .phone-field>span{font-size:16px;padding-left:14px;color:var(--ce-copy)}
body.ce-checkout .payment-card .phone-field input{border:0;background:transparent;min-width:0}
body.ce-checkout .payment-card #login-code{font-size:18px;letter-spacing:3px}
body.ce-checkout .payment-card #login-code::placeholder{font-size:16px;letter-spacing:0}
html[data-ce-theme=dark] body.ce-checkout :is(.phone-field,.payment-card input:not([type=checkbox])){border-color:#687385}
body.ce-checkout .consent{font-size:12px;line-height:1.9;color:var(--ce-copy);gap:10px;margin:22px 0;min-height:44px;cursor:pointer}
body.ce-checkout .consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--ce-blue)}
body.ce-checkout .consent a{color:var(--ce-link,var(--ce-blue));text-decoration:underline;text-underline-offset:3px}
body.ce-checkout :is(.primary,.secondary){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.6;text-align:center}
body.ce-checkout .primary{background:var(--checkout-action);color:var(--checkout-action-ink);border-color:transparent}
body.ce-checkout .primary:hover{background:var(--checkout-action);color:var(--checkout-action-ink);filter:brightness(.94)}
body.ce-checkout .secondary{background:var(--ce-surface);color:var(--ce-ink);border-color:#8993a3}
body.ce-checkout .secondary:hover{background:var(--ce-soft);color:var(--ce-ink);border-color:var(--ce-muted)}
html[data-ce-theme=dark] body.ce-checkout .secondary{border-color:#687385}
body.ce-checkout button:disabled{cursor:not-allowed;opacity:1;filter:none;background:var(--ce-soft);color:var(--ce-muted);border-color:var(--ce-line)}
body.ce-checkout :is(.fine-print,.sms-note){font-size:12px;line-height:1.8;color:var(--ce-muted)}
body.ce-checkout .message{font-size:14px;line-height:1.8;color:var(--checkout-notice)}
body.ce-checkout #loading{font-size:14px;color:var(--ce-copy);padding-block:12px}
body.ce-checkout .account-bar{font-size:14px;border-color:var(--ce-line);padding-bottom:16px;margin-bottom:24px;gap:4px 16px}
body.ce-checkout .account-bar strong{color:var(--ce-ink);font-weight:600}
body.ce-checkout .pay-amount{font:600 36px/1.4 var(--ce-font);color:var(--ce-ink);letter-spacing:-.03em;margin:24px 0 6px}
body.ce-checkout .pay-caption{font-size:14px;color:var(--ce-copy);margin-bottom:24px}
body.ce-checkout .countdown{font-size:12px;color:var(--ce-muted);margin:16px 0 24px}
body.ce-checkout .order-meta{font-size:12px;line-height:1.8;border-top:1px solid var(--ce-line);padding-top:20px;margin-top:24px}
body.ce-checkout .order-meta div{gap:12px;margin:8px 0;align-items:flex-start}
body.ce-checkout .order-meta dt{flex:none;color:var(--ce-muted)}
body.ce-checkout .order-meta dd{font-family:var(--ce-font);font-size:12px;color:var(--ce-ink);overflow-wrap:anywhere;min-width:0}
body.ce-checkout :is(.cancel-link,.new-order){display:flex;font-size:14px;min-height:44px}
body.ce-checkout .success-icon{background:var(--ce-blue-soft);border-color:var(--ce-blue-line);color:var(--ce-link,var(--ce-blue));width:56px;height:56px}
body.ce-checkout .terminal-note{font-size:14px;line-height:1.9;color:var(--ce-copy)}
body.ce-checkout .order-receipt{padding:18px;border:1px solid var(--ce-line);background:var(--ce-soft);border-radius:12px;color:var(--ce-ink);font-size:14px}
body.ce-checkout .order-receipt strong{font-size:12px;color:var(--ce-muted);margin-bottom:8px}
body.ce-checkout .qr-pending{border-color:var(--ce-line);border-radius:12px;color:var(--ce-copy);font-size:14px}
body.ce-checkout .qr-area small{font-size:12px;color:#62666f}
body.ce-checkout .demo-controls{border-color:var(--ce-line)}
body.ce-checkout .demo-controls>p{font-size:12px;color:var(--ce-muted)}
body.ce-checkout .demo-controls .primary{font-size:14px;background:var(--checkout-action);color:var(--checkout-action-ink)}
body.ce-checkout .my-orders{background:var(--ce-surface);border:1px solid var(--ce-line);border-radius:20px;padding:28px 32px;margin-top:32px;scroll-margin-top:24px}
body.ce-checkout .my-orders h3{font-size:22px;line-height:1.5}
body.ce-checkout .mine-row{font-size:14px;line-height:1.8;min-height:64px;padding:18px 0;border-color:var(--ce-line);gap:16px}
body.ce-checkout .mine-row span{color:var(--ce-copy)}
body.ce-checkout .mine-row strong{font-size:14px;color:var(--ce-ink);font-weight:550}
body.ce-checkout .mine-row:hover span{color:var(--ce-ink)}
body.ce-checkout .my-orders .fine-print{text-align:left}
body.ce-checkout .next-notes{border-color:var(--ce-line);gap:32px;margin-top:48px;padding-top:32px}
body.ce-checkout .next-notes span{font-size:12px;color:var(--ce-muted)}
body.ce-checkout .next-notes h3{font-size:18px;line-height:1.6;margin:8px 0}
body.ce-checkout .next-notes p{font-size:14px;line-height:1.8;color:var(--ce-copy)}
body.ce-checkout .footer{display:block;background:#20252d url('/assets/home-footer-grain.svg') repeat;background-size:200px 200px;border:0;margin-top:64px;padding:40px 0;color:#bdc3ce}
body.ce-checkout .checkout-footer-inner{width:min(var(--ce-content),calc(100% - var(--ce-gutter)));margin:auto}
body.ce-checkout .checkout-footer-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid #3c444f;padding-bottom:24px}
body.ce-checkout .footer .brand{color:#f1f2f4}
body.ce-checkout .footer p{font-size:14px;margin:0;color:#bdc3ce}
body.ce-checkout .checkout-footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;font-size:12px;line-height:1.8}
body.ce-checkout .footer a{color:#d8dee8}
body.ce-checkout .footer a:hover{color:#fff}
body.ce-checkout dialog{background:var(--ce-surface);color:var(--ce-ink);border:1px solid var(--ce-line);border-radius:20px;padding:36px;width:min(420px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;box-shadow:var(--ce-shadow)}
body.ce-checkout dialog::backdrop{background:#11182766;backdrop-filter:blur(7px)}
body.ce-checkout dialog h2{font-size:26px;line-height:1.5}
body.ce-checkout dialog>p:not(.eyebrow){font-size:14px;color:var(--ce-copy)}
body.ce-checkout .dialog-close{width:44px;height:44px;min-height:44px;top:8px;right:8px;border-radius:50%;padding:0;color:var(--ce-copy)}
body.ce-checkout .dialog-close:hover{background:var(--ce-soft);color:var(--ce-ink)}
body.ce-checkout .terms-shell{max-width:800px}
body.ce-checkout .policy-version{font-size:12px!important;color:var(--ce-muted)!important;overflow-wrap:anywhere}
body.ce-checkout .terms-panel{margin-top:32px;padding:32px 40px;border-color:var(--ce-line);border-radius:20px;background:var(--ce-surface)}
body.ce-checkout .terms-panel h2{font-size:22px;line-height:1.5;margin:32px 0 12px}
body.ce-checkout .terms-panel h2:first-child{margin-top:0}
body.ce-checkout .terms-panel :is(p,li){font-size:16px;line-height:1.95;color:var(--ce-copy);margin-bottom:16px}
body.ce-checkout .terms-panel>.secondary{width:auto;margin-top:16px}
@media(max-width:809px){
  body.ce-checkout .header{height:72px;gap:16px}
  body.ce-checkout .header-tools{gap:12px}
  body.ce-checkout .shell{padding-top:24px}
  body.ce-checkout .checkout-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  body.ce-checkout .checkout-grid>.payment-card{grid-row:1}
  body.ce-checkout :is(.summary,.payment-card){padding:28px}
  body.ce-checkout .next-notes{gap:22px}
  body.ce-checkout .terms-panel{padding:28px}
}
@media(max-width:600px){
  body.ce-checkout .header .preview-tag{display:none}
  body.ce-checkout .header .subtle{font-size:14px}
  body.ce-checkout .brand{font-size:16px}
  body.ce-checkout .page-heading>p:last-child{font-size:14px}
  body.ce-checkout .steps{gap:8px;margin-block:24px;padding-block:16px}
  body.ce-checkout .steps li{gap:8px;font-size:12px;flex-direction:column;align-items:flex-start}
  body.ce-checkout .steps li span{width:26px;height:26px;font-size:12px}
  body.ce-checkout :is(.summary,.payment-card){padding:22px;border-radius:16px}
  body.ce-checkout .summary h2{font-size:26px}
  body.ce-checkout .payment-card h2{font-size:22px}
  body.ce-checkout .total strong{font-size:30px}
  body.ce-checkout .product-top{gap:12px;margin-bottom:20px}
  body.ce-checkout .my-orders{padding:22px;border-radius:16px}
  body.ce-checkout .dashboard-heading{gap:10px}
  body.ce-checkout .my-orders h3{font-size:20px}
  body.ce-checkout .mine-row{flex-wrap:wrap;gap:6px}
  body.ce-checkout .order-meta div{flex-wrap:wrap;gap:4px 12px}
  body.ce-checkout .next-notes{grid-template-columns:1fr;gap:24px;padding-top:28px}
  body.ce-checkout .next-notes>div{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px}
  body.ce-checkout .next-notes h3{margin:0 0 6px}
  body.ce-checkout .next-notes p{grid-column:2}
  body.ce-checkout .footer{margin-top:40px;padding-block:28px}
  body.ce-checkout .checkout-footer-meta{flex-direction:column;gap:8px}
  body.ce-checkout .terms-panel{padding:22px;border-radius:16px}
  body.ce-checkout .terms-panel h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){body.ce-checkout :is(a,button,input){transition:none}}
@media print{body.ce-checkout{background:#fff;color:#000}body.ce-checkout :is(.header,.footer){display:none}body.ce-checkout .terms-panel{border:0;padding:0}}