/* /buy: the order form (the user's pick, 2026-10-20, "B"), one formal document in the site's theme: dark on dark and
   light on light (the user, 2026-10-20), with Paddle's payment frame in the matching theme (checkout.js), since the
   frame is transparent. The site's own type (the system face; ui-monospace for small capital labels, as in
   legal.css), the violet kept for links and list marks. No meters, no motion. */
.buy-main{padding-top:36px;padding-bottom:90px}
.buy-title{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 26px}
.buy-title h1{font-size:clamp(32px,3.6vw,44px);font-weight:450;letter-spacing:-1.6px;margin:12px 0 0;line-height:1.1}
.buy-title p{margin:0;font-size:13px;max-width:360px;text-align:right}

.doc{background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
[data-theme=light] .doc{background:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(18,15,28,.08),0 24px 70px rgba(64,40,100,.1)}
.doc p{color:var(--muted)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:30px 40px 24px;border-bottom:1px solid var(--line)}
.doc-brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:650;letter-spacing:-.6px}
.doc-brand img{width:34px;height:25px}
.doc-brand span span{font-weight:400}
.doc-meta{display:grid;grid-template-columns:auto auto;gap:5px 18px;margin:0;font-size:12px}
.doc-meta dt{font:500 9px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;color:var(--subtle);text-transform:uppercase;text-align:right}
.doc-meta dd{margin:0;color:var(--ink)}
.doc-order{padding:28px 40px 26px;border-bottom:1px solid var(--line)}
.doc-body{display:grid;grid-template-columns:minmax(330px,470px) minmax(0,1fr)}
.doc-pay{padding:28px 30px 16px 34px;border-right:1px solid var(--line);min-width:0}
.doc-terms{padding:28px 40px 30px;min-width:0}

.os-label{font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.os-section+.os-section{margin-top:28px}
.os-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.os-table th{font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--subtle);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--line)}
.os-table th:nth-child(3),.os-table td:nth-child(3){text-align:center;width:56px}
.os-table th:last-child,.os-table td:last-child{text-align:right;white-space:nowrap}
.os-table td{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top;line-height:1.55}
.os-table td:first-child{padding-right:12px}
.os-table td strong{display:block;color:var(--ink);font-weight:550;font-size:14px}
.os-table td:last-child{color:var(--ink)}
.os-table tr.os-sub td{padding:9px 0}
.os-table tr.os-total td{border-bottom:0;border-top:1px solid var(--ink);padding-top:13px;color:var(--ink);font-weight:600;font-size:15px}
.os-table tr.os-total td:last-child{font-size:22px;letter-spacing:-.3px}
.os-table tr.os-total small{font:500 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.3px;color:var(--subtle);margin-left:7px}
[data-order]:not([data-summary]) .os-table td:last-child{color:var(--subtle)}
.os-note{font-size:11.5px;margin:10px 0 0;line-height:1.6}
.os-incl{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.os-incl li{font-size:12.5px;color:var(--muted);padding-left:18px;position:relative;line-height:1.55}
.os-incl li:before{content:'↳';position:absolute;left:0;color:var(--violet)}
.os-incl li strong{color:var(--ink);font-weight:500}
.os-terms{display:grid;gap:11px;margin:0}
.os-terms>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;font-size:12.5px;line-height:1.6}
.os-terms dt{font:500 9px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--subtle);padding-top:2px}
.os-terms dd{margin:0;color:var(--muted)}
.os-terms a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:3px}
.os-terms a:hover{color:var(--violet)}

.pay-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 6px 16px}
.pay-head .os-label{margin:0}
.pay-head .lock{display:inline-flex;gap:7px;align-items:center;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.3px;color:var(--subtle);text-transform:uppercase}
.pay-head .lock svg{width:10px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4}
.pay-status{margin:0 6px 16px;font-size:13px;line-height:1.6;color:var(--ink)}
[data-state=loading] .pay-status{min-height:420px;display:grid;place-items:center;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.6px;text-transform:uppercase;color:var(--subtle)}
[data-state=paid] .pay-status{border-left:2px solid var(--violet);padding-left:12px}
[data-state=failed] .pay-status{border-left:2px solid #fe843d;padding-left:12px}

@media(max-width:900px){.doc-body{grid-template-columns:minmax(0,1fr)}.doc-pay{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:700px){
  .buy-main{padding-top:18px;padding-bottom:40px}
  .buy-title{display:block;margin-bottom:18px}.buy-title h1{font-size:30px;letter-spacing:-1.2px}.buy-title p{text-align:left;margin-top:8px}
  .doc{border-radius:4px}
  .doc-head{padding:20px 18px 16px;flex-wrap:wrap}.doc-meta{grid-template-columns:auto 1fr}.doc-meta dt{text-align:left}
  .doc-order{padding:20px 18px 18px}
  .os-table th:nth-child(2),.os-table td:nth-child(2){display:none}
  .doc-pay{padding:20px 6px 8px}.pay-head,.pay-status{margin-left:12px;margin-right:12px}
  .doc-terms{padding:22px 18px 24px}
  .os-terms>div{grid-template-columns:minmax(0,1fr);gap:3px}
}