/* OwnBrand Fitness — /price and /order. Builds on styles.css (mk-* system,
   blue palette). No inline styles anywhere: the CSP forbids them. */

/* --- the head of the price page --- */
.pr-head{width:var(--mk-w);margin:0 auto;padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,36px);display:grid;gap:14px}
.pr-head h1{font-size:clamp(46px,6.5vw,92px)}
.pr-head .mk-lede{max-width:56ch}

/* --- one card: price, what's included, pay; "Good to know" underneath --- */
.pr-wrap{width:min(760px,calc(100% - 48px));margin:0 auto;padding:0 0 clamp(56px,7vw,110px);display:grid;gap:clamp(32px,5vw,56px)}
.pr-card{display:grid;border:1px solid var(--mk-line);background:var(--mk-paper);box-shadow:0 18px 40px -28px rgba(14,17,22,.35)}
.pr-price,.pr-included,.pr-pay-card{padding:clamp(20px,3vw,32px);display:grid;gap:12px}
.pr-price{background:var(--mk-paper-alt)}
.pr-price p,.pr-included p{margin:0;font-size:15px;line-height:1.6}
.pr-price-line{font-family:var(--font-display),system-ui,sans-serif;font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.04em;line-height:1.1}
.pr-price-tax{color:var(--mk-dim);font-size:14px}
.pr-price-fail{color:#7A342C}
.pr-included{border-top:1px solid var(--mk-line)}
.pr-included h2{font-size:20px;letter-spacing:-.035em}
.pr-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.5}
.pr-checks li{position:relative;padding-left:28px}
.pr-checks li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;border-left:2px solid var(--mk-flood-deep);border-bottom:2px solid var(--mk-flood-deep);transform:rotate(-45deg)}

/* --- the pay form, inside the card --- */
.pr-pay-card{border-top:1px solid var(--mk-line);gap:14px}
.pr-pay-line{margin:0;font-size:15px;line-height:1.6}
.pr-pay-resume{margin:0;font-size:14px;line-height:1.5;border-left:3px solid var(--mk-flood);padding-left:10px}
.pr-already{display:grid;gap:14px;justify-items:start}
.pr-already p{margin:0;font-size:16px;line-height:1.5}
.pr-already[hidden],.pr-pay-card form[hidden]{display:none}
.pr-pay-card form{display:grid;gap:14px}
.pr-field label{display:block;font:10px var(--font-mono),monospace;letter-spacing:.12em;text-transform:uppercase;color:#5B6068}
.pr-field input,.pr-field textarea{width:100%;margin-top:8px;padding:12px 14px;min-height:46px;background:#fff;border:1px solid var(--mk-line);color:var(--mk-ink);font:15px var(--font-display),sans-serif;letter-spacing:-.01em;outline:none}
.pr-field textarea{min-height:84px;line-height:1.5;resize:vertical}
.pr-field input:focus-visible,.pr-field textarea:focus-visible{border-color:var(--mk-flood-deep);box-shadow:0 0 0 3px rgba(var(--mk-flood-rgb),.18)}
.pr-field input[readonly]{background:var(--mk-paper-alt);color:var(--mk-dim)}
.pr-tick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.5}
.pr-tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--mk-flood-deep)}
.pr-submit{width:100%;justify-content:center;text-align:center}
.pr-submit[disabled]{opacity:.6;cursor:progress}
.pr-help{margin:0;font-size:13px;line-height:1.5;color:var(--mk-dim)}
.pr-note{margin:0;font-size:14px;line-height:1.5;border-left:3px solid var(--mk-flood);padding-left:10px}

/* --- Good to know --- */
.pr-faq{display:grid;border-top:1px solid var(--mk-line)}
.pr-faq h2{font-size:22px;letter-spacing:-.035em;padding:22px 0 10px}
.pr-q{border-bottom:1px solid var(--mk-line);padding:0}
.pr-q summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font-size:16px;font-weight:600;letter-spacing:-.01em}
.pr-q summary::-webkit-details-marker{display:none}
.pr-q summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:20px;color:var(--mk-dim)}
.pr-q[open] summary::after{content:"\2212"}
.pr-q p{margin:0 0 12px;font-size:15px;line-height:1.6;max-width:62ch}
.pr-q .pr-list{margin-bottom:14px}
.pr-list{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.6}

/* --- the order page --- */
.pr-order{width:min(760px,calc(100% - 48px));margin:0 auto;padding:clamp(32px,6vw,80px) 0 clamp(56px,7vw,110px);display:grid;gap:22px}
.pr-state{display:grid;gap:14px}
.pr-state h1{font-size:clamp(34px,4.6vw,58px)}
.pr-state p{margin:0;font-size:16px;line-height:1.6}
.pr-order-lede{font-size:18px;line-height:1.55}
.pr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.pr-order-extras{display:grid;gap:18px;border-top:1px solid var(--mk-line);padding-top:22px}
.pr-extra{display:grid;gap:10px}
.pr-extra h2{font-size:20px;letter-spacing:-.035em}
.pr-extra p{margin:0;font-size:15px;line-height:1.6}
.pr-extra form{display:grid;gap:12px;border-left:3px solid var(--mk-line);padding-left:14px}
.pr-quiet-btn{justify-self:start;background:none;border:1px solid var(--mk-line);padding:10px 16px;cursor:pointer;font-size:14px;color:var(--mk-ink)}
.pr-quiet-btn:hover{border-color:var(--mk-ink)}
.pr-order-help{border-top:1px solid var(--mk-line);padding-top:18px}

@media (max-width:640px){
  .pr-head,.pr-wrap,.pr-order{width:calc(100% - 32px)}
}