.order-hero { padding: 34px 0 76px; color: #fff; background: linear-gradient(135deg, #102a43, #164f93); }
.crumb { display: flex; gap: 9px; margin-bottom: 50px; color: #c7dcf5; font-size: 14px; }
.crumb a { color: #fff; text-decoration: none; }
.order-hero h1 { margin: 0; font-size: clamp(42px, 7vw, 72px); line-height: 1.04; letter-spacing: -.04em; }
.order-hero .lead { max-width: 680px; margin: 22px 0 0; color: #d9eaff; font-size: clamp(18px, 2.2vw, 22px); }
.order-hero .badges { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 32px 0 0; padding: 0; list-style: none; }
.order-hero .badges li { position: relative; padding-left: 26px; color: #eaf3ff; font-size: 15px; font-weight: 650; }
.order-hero .badges li::before { position: absolute; left: 0; content: "✓"; color: #79e2ae; font-weight: 900; }

.section-head .eyebrow { color: var(--blue-dark); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.plan { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 8px 24px rgba(16, 42, 67, .07); transition: .2s ease; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan-media { min-height: 132px; display: grid; place-items: center; padding: 20px; background: var(--sky); }
.plan-media img { max-height: 96px; object-fit: contain; }
.plan-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.plan h3 { margin: 0 0 8px; color: var(--navy); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.plan p { flex: 1; margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.plan-price { flex: none; display: flex; align-items: baseline; gap: 3px; margin: 0; color: var(--navy); font-size: 38px; font-weight: 800; letter-spacing: -.03em; }
.plan-price .currency { font-size: 22px; font-weight: 750; }
.plan-license { display: block; margin: 4px 0 20px; color: var(--muted); font-size: 14px; }
.plan .button { width: 100%; }
.plan .text-link { align-self: flex-start; margin-top: 14px; font-size: 15px; }

.pay { padding-top: 0; }
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pay-card { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.pay-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 19px; }
.pay-card p { margin: 0; color: var(--muted); font-size: 15px; }
.pay-card p + p { margin-top: 12px; }
.pay-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.pay-card li { position: relative; padding: 5px 0 5px 22px; color: var(--muted); font-size: 15px; }
.pay-card li::before { position: absolute; left: 0; top: 5px; content: "—"; color: var(--blue); }
.pay-card a { color: var(--blue-dark); font-weight: 650; text-decoration: none; }
.pay-card a:hover { text-decoration: underline; }

.order-note { padding: 0 0 84px; }
.order-note .container { padding: 24px 28px; border: 1px solid #c8dcf2; border-radius: 16px; background: #eaf3ff; color: #486581; }
.order-note strong { color: var(--navy); }
.order-note a { color: var(--blue-dark); font-weight: 650; }

.nav a[aria-current="page"] { color: #fff; }

@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .order-hero { padding-bottom: 54px; }
  .crumb { margin-bottom: 34px; }
  .plans { grid-template-columns: 1fr; }
  .order-note { padding-bottom: 54px; }
  .order-note .container { padding: 20px; }
}