/* OwnBrand Fitness · /price and /order, v2 (round 2, 30 Sep 2026).
   Load after styles.css and assets/site-v2.css. Keeps every id and the pr-* names the tests
   read; the look comes from site-v2.css's hp-* set. No inline styles: the CSP forbids them. */

/* ================= /price ================= */

/* one ink card: the offer, then the pay form in a paper panel (beside it from 1100) */
.hp .pr-wrap{padding:0 calc(var(--hp-gut) - 4px)}
.hp .pr-card{display:grid;padding:6px;border-radius:28px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .pr-offer{container-type:inline-size;padding:24px 16px 28px}
/* The live line is plain text from price.js, so its break is set here: three balanced lines
   when narrow, and from 460px of column a first line that ends at "a month". */
.hp .pr-price-line{margin:14px 0 0;font:600 30px/1.06 var(--hp-display);letter-spacing:-.04em;text-wrap:balance}
@container (min-width:460px){.hp .pr-price-line{max-width:14.5em;text-wrap:wrap}}
.hp .pr-price-fail{margin:16px 0 0}
/* while the price can't load, the error takes the headline's place */
.hp .pr-price:has(#offer-error:not([hidden])) .pr-price-line{display:none}
.hp .pr-included{margin-top:28px;padding-top:22px;border-top:1px solid var(--mk-line-ink)}
.hp .pr-included h2{margin:0;font:500 11px/1.3 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-on-flood-soft)}
.hp .pr-checks{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none;font-size:15.5px;line-height:1.5}
.hp .pr-checks li{position:relative;padding-left:26px}
.hp .pr-checks li::before{content:"";position:absolute;top:6px;left:2px;width:10px;height:5px;border:solid var(--mk-on-flood-soft);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.hp .pr-checks li:empty{display:none}

.hp .pr-pay-card{display:flex;flex-direction:column;padding:22px 16px;border-radius:22px;background:var(--mk-paper);color:var(--mk-ink)}
.hp .pr-pay-card form{display:flex;flex-direction:column}
.hp .pr-pay-resume{margin:0 0 20px}
.hp .pr-already{display:grid;gap:24px}
.hp .pr-already .hp-status{font:600 20px/1.25 var(--hp-display);letter-spacing:-.025em}
.hp .pr-already .hp-status::before{top:2px}
.hp .pr-already .hp-status::after{top:7px}
.hp .pr-already .hp-btn{width:100%}
.hp .pr-tick{margin-top:14px}
.hp .pr-submit{width:100%;height:60px;margin-top:16px}
.hp .pr-note{margin:16px 0 0}
.hp .pr-fine{display:grid;gap:10px;margin-top:16px}
.hp .pr-help{margin:0;font-size:14px;line-height:1.5;color:var(--mk-dim)}
.hp .pr-help:empty{display:none}
.hp .pr-fine #pay-start-window{padding-top:10px;border-top:1px solid var(--hp-line-2);color:var(--mk-ink)}

/* Good to know */
.hp .pr-faq{padding:64px var(--hp-gut)}
.hp .pr-faq .hp-qs{margin-top:28px}
.hp .pr-list{margin:0;padding-left:20px}

@media (min-width:1100px){
  .hp .pr-wrap{padding:0 var(--hp-gut)}
  .hp .pr-card{grid-template-columns:minmax(0,1fr) 440px;gap:12px;padding:12px;border-radius:40px}
  .hp .pr-offer{padding:52px 48px 56px 56px}
  /* sized to its column, so the line breaks after "a month" at every desktop width */
  .hp .pr-price-line{margin-top:22px;font-size:clamp(34px,7.1cqi,44px);line-height:1.04}
  .hp .pr-included{margin-top:44px;padding-top:28px}
  .hp .pr-included h2{font-size:12px}
  .hp .pr-checks{gap:14px;margin-top:20px;font-size:17px}
  .hp .pr-checks li{padding-left:30px}
  .hp .pr-checks li::before{top:7px}
  .hp .pr-pay-card{padding:40px 36px;border-radius:30px}
  .hp .pr-already .hp-status{font-size:22px}
  .hp .pr-tick{margin-top:16px}
  .hp .pr-submit{height:64px;margin-top:20px;font-size:19px}
  .hp .pr-note{margin-top:18px}
  .hp .pr-fine{gap:12px;margin-top:20px}
  .hp .pr-help{font-size:15px;line-height:1.55}
  .hp .pr-faq{display:grid;grid-template-columns:400px minmax(0,1fr);gap:96px;padding:104px var(--hp-gut) 112px}
  .hp .pr-faq .hp-qs{margin-top:0}
}

/* ================= /order ================= */
/* one centred column; every state is a mono label, a title, one line and at most one action */
.hp .pr-order{display:grid;gap:28px;padding:32px var(--hp-gut) 64px}
.hp .pr-order>*{width:100%;max-width:720px;margin-inline:auto}
.hp .pr-state{display:block}
.hp .pr-state .hp-h1{margin-top:10px;font-size:38px;line-height:.98}
.hp .pr-order-lede{margin:16px 0 0;font-size:17px;line-height:1.5;color:var(--mk-ink)}
.hp .pr-state>p:not(.hp-mono):not(.pr-order-lede):not(.hp-status){margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--mk-dim)}
.hp .pr-state>.hp-status{margin-top:16px}
.hp .pr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hp .pr-actions .hp-btn{flex:1 1 100%}

/* paid and building: your next step (ink), what I'm doing (sand), then the fine print */
.hp .od-work{display:grid;gap:12px}
.hp .od-next{padding:24px 20px;border-radius:24px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .od-next h2{margin:0}
.hp .od-next-t{margin:10px 0 0;font:600 20px/1.3 var(--hp-display);letter-spacing:-.025em;text-wrap:pretty}
.hp .od-next .pr-actions{margin-top:20px}
.hp .od-next-head+.pr-actions{margin-top:20px}
.hp .od-next .pr-note{margin-top:16px}
/* once the build has started the program is in: the card keeps only the workspace button */
.hp #order-building:not([hidden])~#order-workspace .od-next-head{display:none}
.hp #order-building:not([hidden])~#order-workspace .od-next .pr-actions{margin-top:0}
.hp .od-doing{padding:24px 20px 8px;border-radius:24px;background:var(--mk-paper-alt)}
.hp .od-doing h2{margin:0}
.hp .od-steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:od}
.hp .od-steps li{position:relative;display:grid;gap:2px;min-height:44px;padding:1px 0 20px 38px;counter-increment:od}
.hp .od-steps li::before{content:counter(od);position:absolute;top:0;left:0;display:grid;place-items:center;width:24px;height:24px;box-sizing:border-box;border:1.5px solid rgba(var(--mk-ink-rgb),.35);border-radius:50%;background:var(--mk-paper-alt);color:var(--mk-dim);font:500 11px/1 var(--hp-mono)}
.hp .od-steps li:not(:last-child)::after{content:"";position:absolute;top:28px;bottom:4px;left:11px;width:2px;border-radius:1px;background:var(--hp-line-2)}
.hp .od-steps li[hidden]{display:none}
.hp .od-steps li:has(+ li[hidden])::after{display:none}
.hp .od-billing{margin-top:18px}
.hp .od-step-t{font:500 17px/1.3 var(--hp-display);letter-spacing:-.02em;color:var(--mk-dim)}
.hp .od-step-d{font-size:14.5px;line-height:1.45;color:var(--mk-dim)}
.hp .od-step-d:empty{display:none}
.hp .od-steps li.is-now::before{border:2px solid var(--mk-ink);color:var(--mk-ink);font-weight:700}
.hp .od-steps li.is-now .od-step-t{font-weight:600;color:var(--mk-ink)}
.hp .od-steps li.is-now .od-step-d{color:var(--mk-ink)}
.hp .od-steps li.is-done::before{content:"";border:0;background:var(--mk-flood)}
.hp .od-steps li.is-done .od-step-t{font-weight:600;color:var(--mk-ink)}
.hp .od-steps li.is-done .od-step-t::before{content:"";position:absolute;top:6px;left:9px;width:5px;height:10px;border:solid var(--mk-on-flood);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hp .od-steps li.is-done:not(:last-child)::after{background:var(--mk-flood)}
.hp .od-fine{display:grid;gap:10px;margin-top:8px}

.hp .pr-order-extras{display:grid;gap:18px;padding-top:24px;border-top:1px solid var(--mk-line)}
.hp .pr-extra{display:grid;gap:10px;justify-items:start}
.hp .pr-extra h2{margin:0;font:600 21px/1.2 var(--hp-display);letter-spacing:-.03em}
.hp .pr-extra p{margin:0;font-size:16px;line-height:1.55;color:var(--mk-dim)}
.hp .pr-extra .hp-btn{margin-top:6px}
.hp .pr-order-help{padding-top:20px;border-top:1px solid var(--mk-line)}

@media (min-width:1100px){
  .hp .pr-order{gap:32px;padding:88px var(--hp-gut) 120px}
  .hp .pr-state .hp-h1{margin-top:16px;font-size:60px;line-height:.95}
  .hp .pr-order-lede{margin-top:22px;font-size:20px}
  .hp .pr-state>p:not(.hp-mono):not(.pr-order-lede):not(.hp-status){font-size:17px}
  .hp .pr-actions{margin-top:28px}
  .hp .pr-actions .hp-btn{flex:0 0 auto;height:64px;padding:0 36px;font-size:19px}
  .hp .od-work{gap:16px}
  .hp .od-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 32px;padding:36px 40px;border-radius:32px}
  .hp .od-next-t{font-size:23px}
  .hp .od-next .pr-actions,.hp .od-next-head+.pr-actions{margin-top:0}
  .hp .od-next .pr-note{grid-column:1 / -1;margin-top:0}
  .hp #order-building:not([hidden])~#order-workspace .od-next{grid-template-columns:auto}
  .hp .od-doing{padding:32px 40px 16px;border-radius:32px}
  .hp .od-step-t{font-size:19px}
  .hp .od-step-d{font-size:15.5px}
}