:root {
  --pricing-accent: var(--smh-deep-violet, #a78bfa);
  --pricing-action: var(--smh-ember-blue, var(--sm-cobalt, #0d52e8));
  --pricing-gradient: linear-gradient(135deg, var(--pricing-accent) 0%, var(--pricing-action) 100%);
  --pricing-paper: var(--smh-paper-white, #ffffff);
  --pricing-cream: var(--smh-cream-paper, #f4f3ef);
  --pricing-ink: var(--smh-ink-black, #111111);
  --pricing-muted: var(--smh-graphite-mid, #6d6c6b);
  --pricing-border: var(--smh-stone-border, rgba(17, 17, 17, 0.12));
  --pricing-soft: var(--smh-pearl-mist, #ecebea);
  --pricing-card-radius: var(--smh-radius-2xl, 22px);
  --pricing-image-radius: var(--smh-radius-lg, 12px);
  --pricing-max: var(--smh-page-max, 1420px);
  --pricing-font: var(--smh-font, 'Space Grotesk', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif);
}

body.smaug-route-pricing {
  background: var(--pricing-paper);
  color: var(--pricing-ink);
  font-family: var(--pricing-font);
}

.smaug-route-pricing .sm-surface-shell,
.smaug-route-pricing .sm-surface-main {
  background: var(--pricing-paper);
}

.smaug-route-pricing .sm-surface-grid,
.smaug-route-pricing .sm-surface-aurora {
  display: none;
}

.smaug-route-pricing .sm-surface-main {
  padding: 0 24px 96px;
}

.sm-pricing-page {
  width: min(100%, var(--pricing-max));
  margin: 0 auto;
  padding: 184px 0 0;
}

.sm-pricing-hero,
.sm-pricing-section-head,
.sm-pricing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sm-pricing-hero {
  gap: 24px;
  padding: 32px 0 40px;
}

.sm-pricing-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--pricing-border);
  border-radius: 9999px;
  color: var(--pricing-ink);
  background: var(--pricing-paper);
  box-shadow: var(--smh-shadow-subtle, inset 0 0 0 1px rgba(17, 17, 17, 0.05));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sm-pricing-step>span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--pricing-gradient);
  color: var(--pricing-paper);
  font-size: 14px;
}

.sm-pricing-title {
  max-width: 860px;
  margin: 0;
  color: var(--pricing-ink);
  font-family: var(--pricing-font);
  font-size: clamp(40px, 5.5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.sm-pricing-subhead,
.sm-pricing-section-head p,
.sm-pricing-cta p {
  max-width: 640px;
  margin: 0;
  color: var(--pricing-muted);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.sm-pricing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 720px);
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--pricing-border);
  border-radius: var(--pricing-card-radius);
  background: var(--pricing-paper);
  box-shadow: var(--smh-shadow-card, none);
}

.sm-pricing-toolbar>div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.sm-pricing-toolbar strong {
  color: var(--pricing-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}

.sm-pricing-toolbar span {
  color: var(--pricing-muted);
  font-size: 14px;
  line-height: 1.45;
}

.sm-pricing-billing-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--pricing-soft);
  width: max-content;
  margin: 0 auto;
}

.sm-pricing-billing-switch button {
  min-width: 92px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--pricing-ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.sm-pricing-billing-switch button.is-active {
  background: linear-gradient(90deg, #2a2c32 0%, #3d3f4a 58%, #292b32 100%);
  color: var(--pricing-paper);
}

html[data-theme="dark"] .sm-pricing-billing-switch button.is-active {
  color: #fff;
}

.sm-pricing-plans-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.sm-pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  margin-top: 40px;
}

.sm-pricing-card {
  --pricing-card-bg: linear-gradient(150deg, #ffffff 0%, #f4f5f8 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #ffffff 0%, #eef1f6 100%);
  --pricing-card-border: rgba(18, 22, 32, 0.1);
  --pricing-card-border-hover: rgba(18, 22, 32, 0.2);
  --pricing-card-shadow: 0 18px 52px rgba(30, 36, 52, 0.1);
  --pricing-card-shadow-hover: 0 28px 78px rgba(30, 36, 52, 0.18);
  --pricing-card-ink: #14171d;
  --pricing-card-muted: rgba(20, 23, 29, 0.62);
  --pricing-card-soft: rgba(20, 23, 29, 0.05);
  --pricing-card-rule: rgba(20, 23, 29, 0.1);
  --pricing-card-check: rgba(20, 23, 29, 0.58);
  --pricing-card-price: #14171d;
  --pricing-card-button-bg: #272b31;
  --pricing-card-button-bg-hover: #343941;
  --pricing-card-button-border: rgba(20, 23, 29, 0.12);
  --pricing-card-button-text: #ffffff;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 100%;
  padding: 32px;
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--pricing-card-radius);
  background: var(--pricing-card-bg);
  color: var(--pricing-card-ink);
  box-shadow: var(--pricing-card-shadow);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.sm-pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.86), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.46), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 48%);
  opacity: 0.84;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.sm-pricing-card>* {
  position: relative;
  z-index: 1;
}

.sm-pricing-card:nth-child(1) {
  --pricing-card-bg: linear-gradient(150deg, #ffffff 0%, #f3f4f7 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #ffffff 0%, #eceff4 100%);
  --pricing-card-border: rgba(18, 22, 32, 0.1);
  --pricing-card-border-hover: rgba(18, 22, 32, 0.2);
  --pricing-card-shadow: 0 18px 52px rgba(30, 36, 52, 0.1);
  --pricing-card-shadow-hover: 0 28px 78px rgba(30, 36, 52, 0.18);
}

.sm-pricing-card:nth-child(2) {
  --pricing-card-bg: linear-gradient(150deg, #ffffff 0%, #eceff4 56%, #f7f8fa 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #ffffff 0%, #e4e8ef 56%, #f3f5f8 100%);
  --pricing-card-border: rgba(37, 44, 58, 0.14);
  --pricing-card-border-hover: rgba(37, 44, 58, 0.28);
  --pricing-card-shadow: 0 20px 62px rgba(40, 48, 64, 0.12);
  --pricing-card-shadow-hover: 0 32px 88px rgba(40, 48, 64, 0.2);
  --pricing-card-button-bg: #f5f6f8;
  --pricing-card-button-bg-hover: #ffffff;
  --pricing-card-button-border: rgba(20, 23, 29, 0.16);
  --pricing-card-button-text: #25272d;
}

.sm-pricing-card:nth-child(3) {
  --pricing-card-bg: linear-gradient(150deg, #fffaf0 0%, #f7ebce 52%, #fff7e3 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #fffaf0 0%, #f2dfb4 52%, #fff0c8 100%);
  --pricing-card-border: rgba(166, 121, 36, 0.22);
  --pricing-card-border-hover: rgba(166, 121, 36, 0.44);
  --pricing-card-shadow: 0 22px 70px rgba(142, 102, 25, 0.16);
  --pricing-card-shadow-hover: 0 34px 96px rgba(142, 102, 25, 0.26);
  --pricing-card-price: #b7791f;
  --pricing-card-button-bg: #d9a63f;
  --pricing-card-button-bg-hover: #e5b957;
  --pricing-card-button-border: rgba(166, 121, 36, 0.34);
  --pricing-card-button-text: #1f1a10;
  --pricing-card-check: rgba(128, 92, 24, 0.72);
}

.sm-pricing-card:hover,
.sm-pricing-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--pricing-card-border-hover);
  background: var(--pricing-card-bg-hover);
  box-shadow: var(--pricing-card-shadow-hover);
}

.sm-pricing-card:hover::before,
.sm-pricing-card:focus-within::before {
  opacity: 1;
}

.sm-pricing-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
}

.sm-pricing-card h2 {
  margin: 0;
  color: var(--pricing-card-ink);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
}

.sm-pricing-badge {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--pricing-border);
  border-radius: 9999px;
  background: var(--pricing-gradient);
  color: var(--pricing-paper);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.sm-pricing-badge.is-muted {
  background: var(--pricing-card-soft);
  color: var(--pricing-card-muted);
}

.sm-pricing-card .sm-pricing-badge {
  border-color: var(--pricing-card-rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sm-pricing-card:nth-child(2) .sm-pricing-badge {
  background: rgba(20, 23, 29, 0.08);
  color: var(--pricing-card-ink);
}

.sm-pricing-card:nth-child(3) .sm-pricing-badge {
  background: rgba(217, 166, 63, 0.16);
  color: #8f6518;
  border-color: rgba(166, 121, 36, 0.22);
}

.sm-pricing-price-container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--pricing-card-rule);
  padding-bottom: 22px;
  margin-top: 24px;
}

.sm-pricing-price {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.sm-pricing-price strong {
  display: flex;
  align-items: baseline;
  color: var(--pricing-card-price);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sm-pricing-price strong span:first-child {
  margin-right: 4px;
  font-size: 30px;
}

.sm-pricing-price>span {
  margin-bottom: 6px;
  color: var(--pricing-card-muted);
  font-size: 14px;
  line-height: 1.4;
}

.sm-pricing-origin-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--pricing-card-muted) 78%, var(--pricing-card-ink));
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--pricing-card-muted) 74%, transparent);
}

.sm-pricing-origin-price[hidden] {
  display: none;
}

.sm-pricing-origin-price span:first-child {
  font-size: 12px;
}

.sm-pricing-card-body {
  min-height: 72px;
  margin: 22px 0 0;
  color: var(--pricing-card-muted);
  font-size: 16px;
  line-height: 1.5;
}

.sm-pricing-feature-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
}

.sm-pricing-feature-list li {
  position: relative;
  padding-left: 24px;
  color: color-mix(in srgb, var(--pricing-card-ink) 86%, var(--pricing-card-muted));
  font-size: 15px;
  line-height: 1.5;
}

.sm-pricing-feature-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 8px;
  height: 13px;
  border: solid var(--pricing-card-check);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.sm-pricing-plan-form {
  margin-top: auto;
}

.sm-pricing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid var(--pricing-border);
  border-radius: 24px;
  color: var(--pricing-ink);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.sm-pricing-button.is-primary {
  border-color: var(--pricing-action);
  background: var(--pricing-gradient);
  color: #ffffff;
}

.sm-pricing-button.is-secondary {
  background: transparent;
}

.sm-pricing-card .sm-pricing-button {
  border-color: var(--pricing-card-button-border);
  background: var(--pricing-card-button-bg);
  color: var(--pricing-card-button-text);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.sm-pricing-card .sm-pricing-button:hover,
.sm-pricing-card .sm-pricing-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pricing-card-button-border);
  background: var(--pricing-card-button-bg-hover);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sm-pricing-card:nth-child(1) .sm-pricing-button {
  background: #272b31;
}

.sm-pricing-card:nth-child(1) .sm-pricing-button:hover,
.sm-pricing-card:nth-child(1) .sm-pricing-button:focus-visible {
  background: #343941;
}

.sm-pricing-card:nth-child(3) .sm-pricing-price>span {
  color: rgba(143, 101, 24, 0.72);
}

.sm-pricing-disabled-note {
  margin: auto 0 0;
  color: var(--pricing-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sm-pricing-card .sm-pricing-disabled-note {
  color: var(--pricing-card-muted);
}

.sm-pricing-section-head {
  gap: 16px;
  margin: 0 auto 48px;
}

.sm-pricing-section-head h2,
.sm-pricing-cta h2 {
  max-width: 820px;
  margin: 0;
  color: var(--pricing-ink);
  font-family: var(--pricing-font);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.sm-pricing-compare {
  margin-top: 128px;
}

.sm-pricing-compare-table {
  position: relative;
  display: grid;
  width: min(100%, 900px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--pricing-border);
  border-radius: var(--pricing-image-radius);
  background: var(--pricing-paper);
  box-shadow: var(--smh-shadow-card, none);
}

.sm-pricing-compare-row {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.sm-pricing-compare-row>span {
  min-width: 0;
  padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--pricing-border) 66%, transparent);
  color: var(--pricing-muted);
  font-size: 14px;
  line-height: 1.45;
}

.sm-pricing-compare-row.is-head>span {
  color: var(--pricing-ink);
  font-size: 18px;
  font-weight: 500;
}

.sm-pricing-compare-row.is-head>span:nth-child(n + 2) {
  text-align: center;
}

.sm-pricing-compare-row>span:first-child {
  color: var(--pricing-ink);
  font-weight: 500;
  text-align: left;
}

.sm-pricing-compare-row .is-featured-col {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--pricing-accent) 14%, transparent),
      color-mix(in srgb, var(--pricing-action) 10%, transparent));
}

.sm-pricing-compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.sm-pricing-compare-mark {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.sm-pricing-compare-cell.is-yes .sm-pricing-compare-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--pricing-action);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.sm-pricing-compare-cell.is-no .sm-pricing-compare-mark::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background: var(--pricing-muted);
}

.sm-pricing-faq {
  margin-top: 128px;
}

.sm-pricing-faq-list {
  display: grid;
  gap: 16px;
  width: min(100%, 760px);
  margin: 0 auto;
}

.sm-pricing-faq-item {
  border: 1px solid var(--pricing-border);
  border-radius: var(--pricing-card-radius);
  background: var(--pricing-paper);
  box-shadow: var(--smh-shadow-subtle, none);
}

.sm-pricing-faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 64px;
  padding: 18px 24px;
  border: 0;
  background: transparent;
  color: var(--pricing-ink);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.sm-pricing-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.sm-pricing-faq-icon::before,
.sm-pricing-faq-icon::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 12px;
  height: 2px;
  border-radius: 9999px;
  background: var(--pricing-ink);
}

.sm-pricing-faq-icon::after {
  transform: rotate(90deg);
}

.sm-pricing-faq-item.is-open .sm-pricing-faq-icon::after {
  transform: rotate(0deg);
}

.sm-pricing-faq-panel {
  padding: 0 24px 22px;
}

.sm-pricing-faq-panel p {
  margin: 0;
  color: var(--pricing-muted);
  font-size: 16px;
  line-height: 1.6;
}

.sm-pricing-cta {
  gap: 24px;
  margin-top: 128px;
  padding: 64px 0 32px;
}

.sm-pricing-cta .sm-pricing-button {
  width: auto;
  min-width: 220px;
}

.sm-pricing-logo-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--pricing-border);
  border-radius: var(--pricing-image-radius);
  background: var(--pricing-gradient);
  color: var(--pricing-paper);
  font-size: 22px;
  font-weight: 500;
}

.smaug-route-pricing .sm-account-order-modal-panel {
  width: min(720px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  background: var(--pricing-paper);
  color: var(--pricing-ink);
  border: 1px solid var(--pricing-border);
  border-radius: var(--pricing-card-radius);
  box-shadow: none;
}

.smaug-route-pricing .sm-account-order-modal-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.smaug-route-pricing .sm-account-order-pay-title,
.smaug-route-pricing .sm-account-list-label,
.smaug-route-pricing .sm-account-order-detail-summary,
.smaug-route-pricing .sm-account-order-payment-note {
  color: var(--pricing-muted);
}

.smaug-route-pricing .sm-account-order-detail-block,
.smaug-route-pricing .sm-account-order-pay-box,
.smaug-route-pricing .sm-account-payment-method-body {
  border: 1px solid var(--pricing-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.smaug-route-pricing .sm-account-payment-method input:checked+.sm-account-payment-method-body {
  border-color: rgba(99, 122, 255, 0.6);
  background: rgba(99, 122, 255, 0.1);
}

.smaug-route-pricing .sm-account-payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

html[data-theme='dark'] body.smaug-route-pricing {
  --pricing-paper: #0b1020;
  --pricing-cream: #15171b;
  --pricing-ink: #f5f6fb;
  --pricing-muted: rgba(245, 246, 251, 0.62);
  --pricing-border: rgba(255, 255, 255, 0.1);
  --pricing-soft: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 16% 10%, rgba(67, 84, 255, 0.18), transparent 34%),
    radial-gradient(circle at 84% 2%, rgba(255, 118, 54, 0.12), transparent 30%),
    linear-gradient(180deg, #070b16 0%, #0b1020 44%, #090d18 100%);
}

html[data-theme='dark'] .smaug-route-pricing .sm-surface-shell,
html[data-theme='dark'] .smaug-route-pricing .sm-surface-main {
  background: transparent;
}

html[data-theme='dark'] .sm-pricing-step,
html[data-theme='dark'] .sm-pricing-toolbar,
html[data-theme='dark'] .sm-pricing-compare-table,
html[data-theme='dark'] .sm-pricing-faq-item,
html[data-theme='dark'] .sm-pricing-cta {
  background: rgba(12, 18, 34, 0.78);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 70px rgba(0, 0, 0, 0.28);
}

html[data-theme='dark'] .sm-pricing-billing-switch {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme='dark'] .sm-pricing-card {
  --pricing-card-bg: linear-gradient(150deg, #191c21 0%, #121418 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #20242a 0%, #15181d 100%);
  --pricing-card-border: rgba(255, 255, 255, 0.08);
  --pricing-card-border-hover: rgba(255, 255, 255, 0.18);
  --pricing-card-shadow: 0 24px 76px rgba(0, 0, 0, 0.36);
  --pricing-card-shadow-hover: 0 38px 112px rgba(0, 0, 0, 0.48);
  --pricing-card-ink: #f5f6fb;
  --pricing-card-muted: rgba(245, 246, 251, 0.6);
  --pricing-card-soft: rgba(255, 255, 255, 0.08);
  --pricing-card-rule: rgba(255, 255, 255, 0.08);
  --pricing-card-check: rgba(245, 246, 251, 0.72);
  --pricing-card-price: #f7f8ff;
  --pricing-card-button-bg: rgba(255, 255, 255, 0.1);
  --pricing-card-button-bg-hover: rgba(255, 255, 255, 0.16);
  --pricing-card-button-border: rgba(255, 255, 255, 0.08);
  --pricing-card-button-text: #ffffff;
}

html[data-theme='dark'] .sm-pricing-card::before {
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 48%);
  opacity: 0.88;
}

html[data-theme='dark'] .sm-pricing-card:nth-child(1) {
  --pricing-card-bg: linear-gradient(150deg, #1a1d22 0%, #121418 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #23272e 0%, #171a1f 100%);
}

html[data-theme='dark'] .sm-pricing-card:nth-child(2) {
  --pricing-card-bg: linear-gradient(150deg, #555961 0%, #181c22 58%, #121418 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #636872 0%, #20252d 58%, #15181d 100%);
  --pricing-card-button-bg: #f3f4f6;
  --pricing-card-button-bg-hover: #ffffff;
  --pricing-card-button-border: rgba(255, 255, 255, 0.7);
  --pricing-card-button-text: #25272d;
}

html[data-theme='dark'] .sm-pricing-card:nth-child(3) {
  --pricing-card-bg: linear-gradient(150deg, #5d5136 0%, #28281e 48%, #141619 100%);
  --pricing-card-bg-hover: linear-gradient(150deg, #715f3a 0%, #333123 48%, #181a1e 100%);
  --pricing-card-border: rgba(255, 211, 111, 0.18);
  --pricing-card-border-hover: rgba(255, 211, 111, 0.42);
  --pricing-card-price: #ffd36f;
  --pricing-card-button-bg: #ffd36f;
  --pricing-card-button-bg-hover: #ffe094;
  --pricing-card-button-border: rgba(255, 211, 111, 0.75);
  --pricing-card-button-text: #191713;
  --pricing-card-check: rgba(255, 232, 177, 0.82);
}

html[data-theme='dark'] .sm-pricing-card:nth-child(2) .sm-pricing-badge {
  background: rgba(18, 20, 26, 0.56);
  color: #ffffff;
}

html[data-theme='dark'] .sm-pricing-card:nth-child(3) .sm-pricing-badge {
  background: rgba(255, 211, 111, 0.16);
  color: #ffe4a3;
  border-color: rgba(255, 211, 111, 0.22);
}

html[data-theme='dark'] .sm-pricing-card:nth-child(1) .sm-pricing-button {
  background: #303338;
}

html[data-theme='dark'] .sm-pricing-card:nth-child(1) .sm-pricing-button:hover,
html[data-theme='dark'] .sm-pricing-card:nth-child(1) .sm-pricing-button:focus-visible {
  background: #3a3e44;
}

html[data-theme='dark'] .sm-pricing-card:nth-child(3) .sm-pricing-price>span {
  color: rgba(255, 225, 152, 0.82);
}

html[data-theme='dark'] .sm-pricing-compare-row .is-featured-col {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 211, 111, 0.05));
}

html[data-theme='dark'] .smaug-route-pricing .sm-account-order-detail-block,
html[data-theme='dark'] .smaug-route-pricing .sm-account-order-pay-box,
html[data-theme='dark'] .smaug-route-pricing .sm-account-payment-method-body {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-height: 780px), (max-width: 760px) {
  .smaug-route-pricing .sm-account-order-modal-panel {
    width: min(680px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 14px;
  }
}

@media (max-width: 980px) {
  .sm-pricing-title {
    font-size: 48px;
  }

  .sm-pricing-plans {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-pricing-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sm-pricing-toolbar>div:first-child {
    text-align: center;
  }

  .sm-pricing-billing-switch {
    justify-content: center;
  }

  .sm-pricing-compare-table {
    width: 100%;
    overflow-x: auto;
  }

  .sm-pricing-compare-row {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  .smaug-route-pricing .sm-surface-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sm-pricing-page {
    padding-top: 48px;
  }

  .sm-pricing-title {
    font-size: 38px;
    line-height: 1.14;
  }

  .sm-pricing-section-head h2,
  .sm-pricing-cta h2 {
    font-size: 34px;
  }

  .sm-pricing-subhead,
  .sm-pricing-section-head p,
  .sm-pricing-cta p {
    font-size: 16px;
  }

  .sm-pricing-card,
  .sm-pricing-toolbar {
    padding: 24px;
  }

  .sm-pricing-billing-switch {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--pricing-card-radius);
  }

  .sm-pricing-billing-switch button {
    width: 100%;
  }

  .sm-pricing-price strong {
    font-size: 42px;
  }

  .sm-pricing-compare,
  .sm-pricing-faq,
  .sm-pricing-cta {
    margin-top: 80px;
  }

  .sm-pricing-faq-toggle {
    font-size: 18px;
  }
}