/* Order pages: two editions side by side (tiered-comparison layout from the owner's pricing-page skill) */
.od { max-width: 1040px; }
.od-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 26px; padding: 0; counter-reset: s; }
.od-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; background: #eceef1; color: var(--ms-muted);
  font: 600 16px/1 var(--ms-cond); letter-spacing: .06em; text-transform: uppercase; }
.od-steps li:first-child { border-radius: 8px 0 0 8px; }
.od-steps li:last-child { border-radius: 0 8px 8px 0; }
.od-steps li + li { border-left: 2px solid #fff; }
.od-steps li.on { background: linear-gradient(#b5194d, var(--ms-berry)); color: #fff; }
.od-steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ms-berry); font: 700 14px/1 var(--ms-sans); }
.od-steps li:not(.on) b { background: #fff; color: var(--ms-muted); }

.od-sum { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; border: 1px solid var(--ms-line); border-radius: 10px; overflow: hidden; }
.od-sum th { background: var(--ms-char); color: #fff; text-align: left; font: 500 14px/1 var(--ms-cond); letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; }
.od-sum td { padding: 12px 16px; border-top: 1px solid var(--ms-line); vertical-align: top; }
.od-sum td:last-child, .od-sum th:last-child { text-align: right; white-space: nowrap; width: 110px; }
.od-sum tbody tr:nth-child(even) td { background: var(--ms-grey); }
.od-sum tfoot td { font-weight: 700; background: #fff8e1; color: var(--ms-ink); }

.od-h1 { font: 400 34px/1.25 var(--ms-head); color: var(--ms-ink); text-align: center; margin: 0 0 24px; }
.od-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.od-card { position: relative; border: 1px solid var(--ms-line); border-radius: 16px; padding: 30px 26px 24px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.od-card.od-vip { border: 2px solid var(--ms-berry); box-shadow: 0 14px 36px rgba(129,20,50,.16); padding-top: 38px; }
.od-ribbon { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--ms-berry); color: #fff; font: 600 13px/1 var(--ms-cond);
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 18px; border-radius: 30px; white-space: nowrap; box-shadow: 0 4px 10px rgba(129,20,50,.3); }
.od-card h2 { font: 400 25px/1.25 var(--ms-head); color: var(--ms-berry); text-align: center; margin: 0 0 10px; }
.od-note { text-align: center; font-weight: 700; color: var(--ms-ink); margin: 0 0 16px; }
.od-silver .od-note { font-weight: 400; color: var(--ms-muted); font-size: 15px; }
.od-form { margin: 0 0 16px; }
.od-pack { display: block; margin: 6px auto 14px; max-height: 240px; width: auto; }
.od-get { font: 600 14px/1 var(--ms-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); margin: 0 0 12px; }
.od-list > li { font-size: 16px; line-height: 1.45; margin-bottom: 10px; }
.od-trial { background: var(--ms-cream); border: 1px solid var(--ms-cream-line); border-radius: 12px; padding: 18px 18px 6px; margin: 18px 0 16px; }
.od-trial::after { content: ""; display: block; clear: both; }
.od-trial h3 { font: 700 17px/1.35 var(--ms-sans); color: var(--ms-ink); margin: 0 0 12px; }
.od-trial img { float: left; width: 110px; margin: 2px 14px 8px 0; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.od-trial p { font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.od-price { text-align: center; font: 400 22px/1.3 var(--ms-head); color: var(--ms-ink); margin: 18px 0 14px; }
.od-card .ms-secure { margin-bottom: 0; }
.od-close { max-width: 760px; margin: 10px auto 0; }
.od-close p { margin: 0 0 12px; }
.od-sig { display: block; max-width: 200px; margin: 4px 0 8px; }

@media (max-width: 860px) {
  .od-cards { grid-template-columns: 1fr; gap: 34px; }
  .od-h1 { font-size: 27px; }
}
@media (max-width: 560px) {
  .od-steps li { font-size: 12px; gap: 6px; height: 40px; }
  .od-steps b { width: 20px; height: 20px; font-size: 12px; }
  .od-sum { font-size: 14px; }
  .od-sum td, .od-sum th { padding: 10px; }
  .od-sum td:last-child, .od-sum th:last-child { width: 80px; }
  .od-card { padding: 30px 16px 20px; }
  .od-card h2 { font-size: 22px; }
}

/* Order-bump variant: the trial offer first, then "No thanks" with the one-time price */
.od-bump { max-width: 720px; margin: 0 auto; }
.od-bump h2 { margin-bottom: 16px; }
.od-nothanks { max-width: 720px; margin: 30px auto 0; text-align: center; border: 1px solid var(--ms-line); border-radius: 16px; padding: 24px 22px; background: #fff; }
.od-nothanks h2 { font: 400 22px/1.35 var(--ms-head); color: var(--ms-ink); margin: 0 0 6px; }
.od-nothanks .ms-btn { min-width: min(100%, 360px); }