@charset "UTF-8";
:root {
  --sj-brand-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20912%20912%22%3E%3Cpath%20d%3D%22M625.97%2C265.95c-93.49%2C93.49-246.48%2C93.49-339.97%2C0l-20.07%2C20.07c-1.28%2C1.28-1.28%2C3.35-.02%2C4.65%2C89.14%2C91.62%2C89.14%2C239.01%2C0%2C330.63-1.26%2C1.3-1.27%2C3.37.02%2C4.65l20.07%2C20.07c93.49-93.49%2C246.48-93.49%2C339.97%2C0l20.07-20.07c1.28-1.28%2C1.28-3.35.02-4.65-89.14-91.62-89.14-239.01%2C0-330.63%2C1.26-1.3%2C1.27-3.37-.02-4.65l-20.07-20.07Z%22%2F%3E%3Cpath%20d%3D%22M123.99%2C618.03l80.83-90.32c1.21-1.35%2C1.09-3.42-.24-4.64-95.8-88.07-103.26-236.57-16.21-333.84%2C27.54-30.77%2C61.29-52.7%2C97.62-65.59l2.38-.81c1.71-.58%2C2.64-2.44%2C2.08-4.16L252.64%2C3.51c-.57-1.74-2.46-2.69-4.19-2.1h0c-57.88%2C19.52-111.68%2C53.81-155.32%2C102.58C-40.74%2C253.59-28.77%2C483.37%2C119.31%2C618.28c1.35%2C1.23%2C3.46%2C1.12%2C4.69-.25Z%22%2F%3E%3Cpath%20d%3D%22M787.98%2C293.93l-80.83%2C90.32c-1.21%2C1.35-1.09%2C3.42.24%2C4.64%2C95.8%2C88.07%2C103.26%2C236.57%2C16.21%2C333.84-27.54%2C30.77-61.29%2C52.7-97.62%2C65.59l-3.65%2C1.24c-1.13.38-2.38.13-3.27-.67l-91.36-81.76c-1.35-1.21-3.42-1.09-4.64.24-88.07%2C95.8-236.57%2C103.26-333.84%2C16.21-30.77-27.54-52.7-61.29-65.59-97.62l-.81-2.38c-.58-1.71-2.44-2.64-4.16-2.08L3.51%2C659.33c-1.74.57-2.69%2C2.46-2.1%2C4.19h0c19.52%2C57.88%2C53.81%2C111.68%2C102.58%2C155.32%2C149.02%2C133.35%2C377.61%2C121.99%2C512.73-24.48%2C1.71-1.85%2C4.77-1.17%2C5.56%2C1.22l37.05%2C112.87c.57%2C1.74%2C2.46%2C2.69%2C4.19%2C2.1h0c57.88-19.52%2C111.68-53.81%2C155.32-102.58%2C133.87-149.59%2C121.9-379.37-26.18-514.29-1.35-1.23-3.46-1.12-4.69.25Z%22%2F%3E%3Cpath%20d%3D%22M384.26%2C204.82c1.35%2C1.21%2C3.42%2C1.09%2C4.64-.24%2C88.07-95.8%2C236.57-103.26%2C333.84-16.21%2C31.15%2C27.88%2C52.59%2C60.9%2C66.39%2C100.03.6%2C1.7%2C2.43%2C2.62%2C4.15%2C2.06l115.15-37.8c1.75-.57%2C2.7-2.48%2C2.1-4.22-20.99-60.64-54.52-112.31-102.56-155.3C658.38-40.74%2C428.6-28.77%2C293.69%2C119.31c-1.23%2C1.35-1.12%2C3.46.25%2C4.69l90.32%2C80.83Z%22%2F%3E%3C%2Fsvg%3E");
  --sj-bg: #f3f2ee;

  --sj-ink: #172333;
  --sj-text: #354155;

  --sj-blue: #2169ed;
  --sj-blue-hover: #1452c3;
  --sj-blue-soft: #edf3ff;
  --sj-shadow: 0 18px 55px #1a345e10;
  --sj-mesh: #96b9f43d;
  --sj-canvas-warm: #deca9c42;
  --sj-canvas-line: #7e98ba0a;

  --sj-surface-top: #edf3fc;
  --sj-option-selected: #e6efff;
  --sj-option-hover: #d9e7ff;
  --sj-glass: #ffffffdb;

  color-scheme: light;

  --sj-card: #ffffff;
  --sj-soft: #edf2f7;
  --sj-line: #d8e2ee;
  --sj-muted: #607086;
  --sj-field: #f6f8fc;
  --sj-card-shadow: 0 1px 1px #0b254710, 0 10px 26px -14px #173e7140;
  --sj-surface: linear-gradient(
    145deg,
    var(--sj-surface-top) 0,
    var(--sj-card) 180px
  );
  --sj-surface-edge: #ffffffd9;
  --sj-radius: 22px;
  --sj-accent-tint: #e6f7f5;
  --sj-accent-ink: #127d78;
  --sj-header-surface: linear-gradient(115deg, #f2f7ff, #fdfefe 75%);

  --sj-header-glow: #2b7bf52e;
}
:root[data-theme="dark"] {
  --sj-blue: #7caaff;
  --sj-blue-hover: #a3c3ff;
  --sj-blue-soft: #243249;
  --sj-shadow: 0 18px 55px #00000038;
  --sj-mesh: #356ddd20;
  --sj-canvas-warm: #a6936410;
  --sj-canvas-line: #8d9bac06;

  --sj-option-selected: #293e5d;
  --sj-option-hover: #344e72;
  --sj-glass: #181e28df;

  color-scheme: dark;

  --sj-bg: #0d1420;
  --sj-card: #182230;
  --sj-soft: #111c2b;
  --sj-ink: #f3f7fc;
  --sj-muted: #a1b1c6;
  --sj-text: #ccd8e7;
  --sj-line: #2b3c52;
  --sj-field: #111c2a;
  --sj-surface-top: #24364c;
  --sj-card-shadow: 0 1px 0 #ffffff06 inset, 0 12px 28px -14px #00000085;
  --sj-surface-edge: #5e7ea32e;
  --sj-accent-tint: #173837;
  --sj-accent-ink: #7bdace;
  --sj-header-surface: linear-gradient(115deg, #243950, #1a2839 75%);

  --sj-header-glow: #73adff42;
}
.sj-site {
  position: relative;
  isolation: isolate;
  margin: 0;
  background:
    radial-gradient(ellipse at 95% 5%, var(--sj-mesh), transparent 55%),
    radial-gradient(ellipse at 5% 70%, var(--sj-canvas-warm), transparent 60%),
    repeating-linear-gradient(
      135deg,
      transparent 0 111px,
      var(--sj-canvas-line) 111px 112px,
      transparent 112px 224px
    ),
    var(--sj-bg);
  background-attachment: fixed;
  color: var(--sj-text);
  font:
    16px/1.65 "DM Sans",
    sans-serif;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.sj-site::before {
  content: "";
  position: fixed;
  top: 90px;
  right: -180px;
  width: clamp(420px, 60vw, 880px);
  aspect-ratio: 1;
  mask: var(--sj-brand-mark) center / contain no-repeat;
  background: var(--sj-blue);
  opacity: 0.065;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: -1;
}
.sj-brand-symbol {
  display: inline-block;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  mask: var(--sj-brand-mark) center / contain no-repeat;
  background: var(--sj-blue);
}
.sj-site *,
.sj-site *:before,
.sj-site *:after {
  box-sizing: border-box;
}
.sj-site [hidden] {
  display: none !important;
}
.sj-site h1,
.sj-site h2,
.sj-site h3,
.sj-site h4 {
  font-family: "Manrope", sans-serif;
  color: var(--sj-ink);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px;
  letter-spacing: -0.045em;
}
.sj-site h1 {
  font-size: clamp(38px, 4.8vw, 64px);
}
.sj-site h2 {
  font-size: clamp(30px, 3.2vw, 43px);
}
.sj-site h3 {
  font-size: 21px;
  letter-spacing: -0.025em;
}
.sj-site p {
  margin: 0 0 20px;
}
.sj-site a {
  color: var(--sj-blue);
  text-decoration: none;
}
.sj-site a:hover {
  text-decoration: none;
}
.sj-site button,
.sj-site input,
.sj-site select,
.sj-site textarea {
  font: inherit;
}
.sj-site button {
  cursor: pointer;
}
.sj-site img {
  max-width: 100%;
  height: auto;
}
.sj-site a,
.sj-site button {
  -webkit-tap-highlight-color: transparent;
}
.sj-site :focus-visible {
  outline: 3px solid #71aaff;
  outline-offset: 4px;
}
.sj-site em {
  font-style: normal;
  color: var(--sj-blue);
}
.sj-shell {
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
}
.sj-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.sj-site section[id],
.sj-site article[id] {
  scroll-margin-top: 110px;
}
.sj-skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--sj-card);
}
.sj-skip:focus {
  top: 10px;
}
.sj-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sj-bg);
  border-bottom: 1px solid var(--sj-line);
}
.sj-header-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 94px;
}
.sj-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.sj-logo {
  display: block;
  width: 145px;
  height: auto;
  max-height: 49px;
}
.sj-nav-secondary {
  display: none;
}
.sj-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.sj-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--sj-text);
  white-space: nowrap;
}
.sj-nav a:hover,
.sj-login-link:hover {
  color: var(--sj-blue);
}
.sj-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sj-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--sj-text);
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 0;
}
.sj-icon-btn:hover {
  background: var(--sj-soft);
  border-color: var(--sj-line);
}
.sj-sun {
  display: none;
}
[data-theme="dark"] .sj-sun {
  display: inline-flex;
}
[data-theme="dark"] .sj-moon {
  display: none;
}
.sj-menu-toggle {
  display: none;
}
.sj-login-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--sj-ink) !important;
}
.sj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 15px 23px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;

  text-align: center;
  white-space: normal;
}
.sj-site .sj-btn-primary,
.sj-site .btn-primary {
  color: #fff;

  border-color: #1960d0;
  box-shadow:
    0 1px 0 #ffffff45 inset,
    0 -2px 0 #00358330 inset,
    0 6px 15px #075ee92b;

  background: linear-gradient(110deg, #0b5ddc, #267bff, #0b5ddc);
  background-size: 200% 100%;
  background-position: 0% 50%;
}
.sj-site .sj-btn-primary:is(:hover, :focus-visible),
.sj-site .btn-primary:is(:hover, :focus-visible) {
  background-position: 100% 50%;
  border-color: #1d72f0;
  box-shadow:
    0 1px 0 #ffffff50 inset,
    0 7px 20px #0a67ff38;
}
.sj-site .sj-btn-outline {
  color: var(--sj-ink);
  border-color: var(--sj-line);

  background: var(--sj-surface);
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-site .sj-btn-outline:hover {
  border-color: var(--sj-blue);
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-site .sj-btn-white {
  background: #fff;
  color: #001048;
}
.sj-btn-small {
  min-height: 42px;
  padding: 10px 17px;
  font-size: 13px;
}
.sj-btn-small .sj-icon {
  width: 18px;
  height: 18px;
}
.sj-btn-block {
  display: flex;
  width: 100%;
}
.sj-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
}
.sj-text-link .sj-icon {
  width: 19px;
}
.sj-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.15em;
  margin-bottom: 18px;
  color: var(--sj-blue);
}
.sj-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}
.sj-hero {
  background: transparent;
  padding: 76px 0 68px;
}
.sj-hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 72px;
}
.sj-hero-copy {
  padding: 10px 0;
}
.sj-hero-copy h1 {
  font-size: clamp(38px, 4.5vw, 61px);
  line-height: 1.13;
  letter-spacing: -0.058em;
  margin-bottom: 25px;
}
.sj-hero-copy > p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 510px;
  color: var(--sj-muted);
}
.sj-hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 32px;
}
.sj-hero-notes {
  display: flex;
  gap: 22px;
  margin-top: 26px;
  font-size: 11px;
  color: var(--sj-muted);
}
.sj-hero-notes span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sj-hero-notes .sj-icon {
  width: 16px;
  height: 16px;
}
.sj-builder-wrap {
  position: relative;
  padding: 26px 15px;
}
.sj-builder-wrap:before {
  content: "";
  position: absolute;
  inset: -12px -25px;
  border-radius: 38px;
  background: var(--sj-blue-soft);
  background-image: radial-gradient(var(--sj-line) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  transform: rotate(-3deg);
}
.sj-builder {
  position: relative;

  overflow: hidden;

  background: var(--sj-surface);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-builder-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--sj-line);
}
.sj-builder-heading .sj-eyebrow {
  font-size: 8px;
  margin: 0 0 4px;
}
.sj-builder-heading h2 {
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.035em;
}
.sj-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--sj-blue);
  flex-shrink: 0;

  width: 52px;
  height: 52px;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(135deg, var(--sj-blue-soft), var(--sj-card));
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  box-shadow:
    0 4px 8px #09275309,
    0 1px 0 var(--sj-surface-edge) inset;
}
.sj-step-pill {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sj-muted);
  margin-left: auto;
}
.sj-builder-body {
  padding: 24px;
}
.sj-builder-body label,
.sj-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 9px;
  color: var(--sj-ink);
}
.sj-builder-body .form-control {
  font-size: 13px;
  margin-bottom: 23px;
}
.sj-quantity-options,
.sj-amounts {
  display: flex;
  gap: 9px;
}
.sj-quantity-options button,
.sj-amounts button {
  flex: 1;
  padding: 11px 4px;
  border: 1px solid var(--sj-line);
  background: var(--sj-card);
  color: var(--sj-text);
  font-size: 13px;
  border-radius: 7px;
  font-weight: 600;
}
.sj-quantity-options button[aria-pressed="true"],
.sj-quantity-options button:hover,
.sj-amounts button:hover {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
}
.sj-builder-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 0;
  gap: 12px;
}
.sj-builder-summary span {
  display: block;
  color: var(--sj-muted);
  font-size: 10px;
  margin-bottom: 3px;
}
.sj-builder-summary strong {
  display: block;
  color: var(--sj-ink);
  font-size: 13px;
}
.sj-builder-price {
  text-align: right;
}
.sj-builder-price strong {
  font-size: 23px;
  letter-spacing: -0.04em;
}
.sj-builder-note {
  font-size: 10px;
  color: var(--sj-muted);
  text-align: center;
  margin: 12px 0 0 !important;
  line-height: 1.5;
}
.sj-builder-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--sj-line);
  background: var(--sj-soft);
  padding: 14px 8px;
  color: var(--sj-muted);
  font-size: 9px;
}
.sj-builder-footer .sj-icon {
  width: 14px;
  height: 14px;
}
.sj-orbit {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px #0a28451a;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 17px;
  width: 61px;
  height: 61px;
}
.sj-orbit .sj-icon {
  width: 29px;
  height: 29px;
}
.sj-orbit-a {
  right: -28px;
  top: -2px;
  transform: rotate(11deg);
  color: #da5489;
}
.sj-orbit-b {
  bottom: 1px;
  left: -26px;
  transform: rotate(-10deg);
  color: var(--sj-ink);
}
.sj-trustbar {
  border-block: 1px solid var(--sj-line);
}
.sj-trustbar .sj-shell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 24px;
  gap: 25px;
}
.sj-trustbar span {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  color: var(--sj-muted);
}
.sj-trustbar .sj-icon {
  color: var(--sj-blue);
  width: 20px;
}
.sj-section {
  padding-top: 83px;
  padding-bottom: 83px;
}
.sj-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
  margin-bottom: 32px;
}
.sj-section-head h2 {
  margin: 0;
  line-height: 1.18;
}
.sj-section-head > p {
  font-size: 14px;
  color: var(--sj-muted);
  margin: 0;
  line-height: 1.7;
  max-width: 330px;
}
.sj-tabs {
  display: flex;
  gap: 9px;
  margin-bottom: 28px;
}
.sj-tabs button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--sj-line);

  color: var(--sj-muted);
  padding: 10px 19px;
  font-size: 12px;
  font-weight: 600;

  border-radius: 10px;
  background: var(--sj-surface);
}
.sj-tabs button[aria-pressed="true"] {
  background: var(--sj-blue-soft);
  border-color: var(--sj-blue);
  color: var(--sj-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sj-blue) 9%, transparent);
}
.sj-tabs .sj-icon {
  width: 18px;
  height: 18px;
}
.sj-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.sj-package {
  display: flex;
  flex-direction: column;

  background: var(--sj-surface);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);

  position: relative;
  overflow: hidden;
  padding: 30px;
}
.sj-package-featured {
  border-color: var(--sj-blue);
  background: linear-gradient(150deg, var(--sj-blue-soft), var(--sj-card) 65%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--sj-blue) 10%, transparent),
    var(--sj-card-shadow);
}
.sj-package-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.sj-heart {
  color: #cf4376;
  background: #fff0f5;
}
.sj-play {
  color: #6e5bcc;
  background: #f4f0ff;
}
.sj-tiktok {
  color: var(--sj-ink);
  background: var(--sj-soft);
}
[data-theme="dark"] .sj-heart {
  background: #3a2035;
  color: #ff90b7;
}
[data-theme="dark"] .sj-play {
  background: #292345;
  color: #b4a5ff;
}
.sj-tag {
  font-size: 9px;
  color: var(--sj-muted);
  border: 1px solid var(--sj-line);

  border-radius: 30px;
  white-space: nowrap;

  background: var(--sj-card);
  font-weight: 600;
  padding: 6px 10px;
}
.sj-package h3 {
  font-size: 18px;
  letter-spacing: -0.03em;
  margin: 0 0 7px;
}
.sj-quantity {
  color: var(--sj-muted);
  font-size: 12px;
  margin-bottom: 19px !important;
}
.sj-price {
  font-size: 46px;
  color: var(--sj-ink);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1.2;
}
.sj-price > span {
  font-size: 21px;
  letter-spacing: -0.04em;
}
.sj-price-caption {
  font-size: 10px;
  color: var(--sj-muted);
  margin: 7px 0 20px !important;
}
.sj-checks {
  padding: 20px 0 23px;
  margin: 0;
  border-top: 1px solid var(--sj-line);
  list-style: none;
}
.sj-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 9px;
  line-height: 1.6;
}
.sj-checks .sj-icon {
  width: 15px;
  height: 15px;
  color: var(--sj-blue);
  margin-top: 2px;
}
.sj-package .sj-btn {
  margin-top: auto;
}
.sj-card-detail {
  font-size: 10px;
  color: var(--sj-muted) !important;
  text-align: center;
  margin-top: 13px;
}
.sj-card-detail:hover {
  text-decoration: underline !important;
}
.sj-price-note {
  font-size: 10px;
  line-height: 1.7;
  color: var(--sj-muted);
  margin: 19px 0 0 !important;
  max-width: 840px;
}
.sj-catalog-link {
  margin-top: 32px;
  padding: 21px 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;

  background: var(--sj-surface);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-soft-section {
  background: var(--sj-soft);
}
.sj-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 45px;

  gap: 22px;
}
.sj-step-number {
  display: inline-block;
  color: var(--sj-blue);
  font:
    800 44px/1 "Manrope",
    sans-serif;
  letter-spacing: -0.06em;

  font-size: 52px;
  margin-bottom: 28px;
}
.sj-steps h3 {
  font-size: 20px;
  margin-bottom: 13px;
}
.sj-steps p {
  font-size: 13px;
  color: var(--sj-muted);
  margin: 0;
  max-width: 300px;
}
.sj-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 95px;
  align-items: center;
}
.sj-value-art {
  background: var(--sj-blue-soft);
  border-radius: 24px;
  min-height: 460px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  overflow: hidden;
}
.sj-art-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sj-muted);
  align-self: flex-start;
}
.sj-art-orbit {
  width: 280px;
  height: 280px;
  border: 1px solid #0a67ff33;
  border-radius: 50%;
  position: relative;
}
.sj-art-orbit:before {
  content: "";
  position: absolute;
  inset: 35px;
  border: 1px dashed #0a67ff44;
  border-radius: 50%;
}
.sj-art-orbit > span {
  position: absolute;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  width: 57px;
  height: 57px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sj-art-orbit > span:nth-child(1) {
  top: -10px;
  left: 25px;
  color: #df527b;
  transform: rotate(-10deg);
}
.sj-art-orbit > span:nth-child(2) {
  bottom: 5px;
  left: -9px;
  transform: rotate(10deg);
}
.sj-art-orbit > span:nth-child(3) {
  right: -18px;
  top: 120px;
  color: #ec4747;
  transform: rotate(8deg);
}
.sj-art-center {
  position: absolute;
  inset: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
  background: #0a67ff;
  color: #fff;
  font-size: 65px;
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 1;
  box-shadow: 0 24px 35px #0a67ff30;
  transform: rotate(-8deg);
}
.sj-art-center span {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 8px;
}
.sj-art-caption {
  font-size: 11px;
  color: var(--sj-muted);
}
.sj-value-copy > p {
  color: var(--sj-muted);
  font-size: 14px;
}
.sj-benefit {
  display: flex;
  gap: 15px;

  align-items: flex-start;

  padding: 20px;
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  background: var(--sj-surface);
  margin-top: 14px;
}
.sj-benefit > span {
  color: var(--sj-blue);

  background: var(--sj-blue-soft);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 42px;
  height: 42px;
  border-radius: 12px 12px 12px 4px;
}
.sj-benefit .sj-icon {
  width: 19px;
  height: 19px;
}
.sj-benefit h3 {
  font-size: 15px;
  margin: 0 0 5px;
  letter-spacing: -0.015em;
}
.sj-benefit p {
  font-size: 12px;
  color: var(--sj-muted);
  line-height: 1.7;
  margin: 0;
}
.sj-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 100px;
}
.sj-faq-grid > div > p {
  font-size: 14px;
  color: var(--sj-muted);
}
.sj-faq {
  border: 1px solid var(--sj-line);
  background: var(--sj-surface);
  padding: 0 22px;
  border-radius: 16px;
  margin-bottom: 12px;
}
.sj-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--sj-ink);
}
.sj-faq summary::-webkit-details-marker {
  display: none;
}
.sj-faq summary .sj-icon {
  color: var(--sj-blue);

  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid var(--sj-line);
  border-radius: 50%;
  background: var(--sj-blue-soft);
}
.sj-faq[open] summary .sj-icon {
  transform: rotate(45deg);
}
.sj-faq > div > p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--sj-muted);
  margin: 0 0 23px;
}
.sj-final-cta {
  margin-block: 80px;

  color: #fff;

  padding: 46px 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  background:
    radial-gradient(ellipse at 100% 0, #56a5ff70, transparent 60%),
    linear-gradient(120deg, #113879, #0b63df);
  border: 1px solid #518ee599;
  border-radius: 26px;
  box-shadow: 0 16px 35px #0a4ca925;
}
.sj-final-cta .sj-eyebrow {
  color: #bcd7ff;
  margin-bottom: 12px;
}
.sj-final-cta h2 {
  color: #fff;
  margin: 0;
  font-size: 37px;
}
.sj-login-form {
  max-width: 480px;
}
.sj-panel {
  padding: 30px;

  background: var(--sj-surface);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-site .form-control {
  display: block;
  width: 100%;
  height: auto;
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid var(--sj-line);

  color: var(--sj-text);
  font-size: 14px;
  line-height: 1.5;

  background: var(--sj-field);
  border-radius: 11px;
  box-shadow: 0 1px 2px #0b254707 inset;
}
.sj-site .form-control:focus {
  border-color: var(--sj-blue);

  outline-offset: 0;

  outline: 3px solid color-mix(in srgb, var(--sj-blue) 16%, transparent);
  background: var(--sj-card);
}
.sj-site .form-control::placeholder {
  color: var(--sj-muted);
}
.sj-site textarea.form-control {
  min-height: 100px;
}
.sj-site select.form-control {
  padding-right: 28px;
}
.sj-site label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sj-text);
}
.sj-site .form-group {
  margin-bottom: 21px;
}
.sj-site .form-group > label {
  display: block;
  margin-bottom: 8px;
}
.sj-form-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  gap: 15px;
  margin-bottom: 20px;
}
.sj-site .sj-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
}
.sj-checkbox input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--sj-blue);
  margin: 2px 0 0;
}
.sj-terms-check {
  margin-bottom: 23px !important;
}
.sj-form-end {
  font-size: 12px;
  text-align: center;
  color: var(--sj-muted);
  margin: 18px 0 0 !important;
}
.sj-google {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.sj-captcha {
  margin: 18px 0;
  max-width: 100%;
  overflow-x: auto;
}
.sj-site .alert {
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  margin: 0 0 20px;
}
.sj-site .alert-danger {
  color: #bd254a;
  background: #fff1f4;
  border-color: #f6c7d3;
}
.sj-site .alert-success {
  color: #12704c;
  background: #eaf9f2;
  border-color: #beead7;
}
.sj-site .alert h3 {
  font-size: 18px;
}
.sj-footer {
  padding: 60px 0 0;
  background: var(--sj-soft);
  border-top: 1px solid var(--sj-line);
}
.sj-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
.sj-footer .sj-logo {
  width: 125px;
}
.sj-footer p {
  font-size: 11px;
  color: var(--sj-muted);
  margin-top: 18px;
  line-height: 1.8;
}
.sj-footer h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 700;
  margin: 8px 0 20px;
}
.sj-footer-grid > div > a:not(.sj-brand) {
  display: block;
  font-size: 11px;
  color: var(--sj-muted);
  margin-bottom: 10px;
}
.sj-footer-grid > div > a:hover {
  color: var(--sj-blue);
}
.sj-footer-pix {
  font-size: 11px;
  color: var(--sj-text);
  display: flex;
  gap: 7px;
  align-items: center;
}
.sj-footer-pix .sj-icon {
  width: 17px;
  height: 17px;
  color: var(--sj-blue);
}
.sj-footer-bottom {
  border-top: 1px solid var(--sj-line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding: 22px 0;
  color: var(--sj-muted);
  font-size: 9px;
}
.sj-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  align-items: start;
  padding: 80px 0;
}
.sj-auth-intro {
  padding-top: 38px;
}
.sj-auth-intro > p {
  max-width: 410px;
  color: var(--sj-muted);
}
.sj-register h2 {
  font-size: 28px;
}
.sj-register .sj-eyebrow {
  margin-bottom: 9px;
}
.sj-selection-note {
  padding: 15px;
  border: 1px solid var(--sj-line);
  background: var(--sj-blue-soft);
  color: var(--sj-ink);
  font-size: 12px;
  border-radius: 9px;
  margin-bottom: 23px;
}
.sj-selection-note button {
  margin-left: 10px;
  border: 0;
  background: transparent;
  color: var(--sj-blue);
  font-size: 11px;
  text-decoration: underline;
}
.sj-balance {
  display: grid;
  grid-template-columns: auto 32px;

  min-height: 54px;

  border-radius: 12px;

  line-height: 1.35;
  color: var(--sj-ink) !important;

  border: 1px solid transparent;
  background: transparent;
  padding: 7px 10px;
  column-gap: 12px;
}
.sj-balance > span {
  color: var(--sj-muted);
  font-size: 10px;
}
.sj-balance strong {
  font-size: 17px;
  font-weight: 800;
  grid-row: 2;
}
.sj-balance .sj-icon {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 9px;
  background: #2169ed;
  color: #fff;
}
.sj-site .sj-topup:is(:hover, :focus-visible) {
  border-color: var(--sj-blue);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--sj-blue) 12%, transparent),
    0 6px 18px #0a67ff20;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-topup {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease;
  }
  .sj-topup > .sj-icon {
    transition: transform 220ms ease;
  }
  .sj-topup:is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }
  .sj-topup:is(:hover, :focus-visible) > .sj-icon {
    transform: rotate(90deg) scale(1.06);
  }
}
.sj-avatar {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sj-blue-soft);
  font-size: 13px;
  font-weight: 700;
}
.sj-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 32px;
}
.sj-page-heading h1 {
  font-size: 38px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.sj-page-heading p {
  font-size: 14px;
  color: var(--sj-muted);
  margin: 0;
}
.sj-page-heading .sj-eyebrow {
  margin-bottom: 10px;
}
.sj-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.sj-panel-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 26px;
}
.sj-panel-heading h2 {
  font-size: 25px;
  margin: 0;
}
.sj-panel-heading .sj-eyebrow {
  font-size: 8px;
  margin: 0 0 4px;
}
.sj-panel-heading > a {
  margin-left: auto;
  font-size: 11px;
}
.sj-order-grid aside .sj-panel + .sj-panel {
  margin-top: 23px;
}
.sj-prose {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sj-muted);
}
.sj-prose h2 {
  font-size: 28px;
}
.sj-prose h3 {
  font-size: 21px;
  margin-top: 28px;
  line-height: 1.4;
}
.sj-prose h3:first-child {
  margin-top: 0;
}
.sj-prose p:last-child {
  margin-bottom: 0;
}
.sj-prose img {
  border-radius: 10px;
}
.sj-amounts {
  margin-bottom: 23px;
}
.sj-payment-history {
  margin-top: 30px;
}
.sj-payment-history h2 {
  font-size: 25px;
}
.sj-site .table {
  width: 100%;
  color: var(--sj-text);
  font-size: 12px;
  border-collapse: collapse;
}
.sj-site .table td,
.sj-site .table th {
  border-color: var(--sj-line);
  padding: 14px 12px;
  text-align: left;
}
.sj-site .table-responsive {
  overflow-x: auto;
}
.sj-muted {
  color: var(--sj-muted);
  font-size: 12px;
}
.sj-catalog-filters {
  border: 1px solid var(--sj-line);

  box-shadow: var(--sj-card-shadow);

  display: block;
  position: relative;
  padding: 0;
  background: var(--sj-surface);
  border-radius: var(--sj-radius);
  margin-bottom: 32px;
}
.sj-catalog-filters label {
  display: block;
  margin-bottom: 6px;
}
.sj-catalog-category {
  margin-top: 35px;
}
.sj-catalog-category > h2 {
  font-size: 22px;
}
.sj-service-list {
  display: grid;
  gap: 12px;
}
.sj-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 120px;
  gap: 20px;
  align-items: center;
  padding: 23px;

  background: var(--sj-surface);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-service-name h3 {
  font:
    600 14px/1.6 "DM Sans",
    sans-serif;
  letter-spacing: 0;
  margin: 4px 0 7px;
}
.sj-service-id {
  font-size: 10px;
  color: var(--sj-blue);

  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sj-blue-soft);
  font-weight: 700;
}
.sj-service-rate strong {
  color: var(--sj-ink);
  display: block;
  font-size: 16px;
}
.sj-service-rate > span {
  display: block;
  color: var(--sj-muted);
  font-size: 10px;
}
.sj-service-details {
  grid-column: 1/-1;
  font-size: 12px;
  border-top: 1px solid var(--sj-line);
  padding-top: 12px;
}
.sj-service-details summary {
  cursor: pointer;
  color: var(--sj-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sj-service-details summary .sj-icon {
  width: 15px;
  height: 15px;
}
.sj-service-details > div {
  font-size: 12px;
  padding-top: 18px;
}
.sj-seo-hero {
  padding: 65px 0;

  background:
    radial-gradient(ellipse at 90% 15%, var(--sj-mesh), transparent 55%),
    var(--sj-surface);
  border-bottom: 1px solid var(--sj-line);
}
.sj-seo-hero h1 {
  font-size: clamp(37px, 4.6vw, 58px);
  line-height: 1.17;
  max-width: 1000px;
}
.sj-seo-hero .sj-shell > p {
  max-width: 640px;
  font-size: 16px;
  color: var(--sj-muted);
  margin-bottom: 27px;
}
.sj-breadcrumb {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--sj-muted);
  margin-bottom: 36px;
}
.sj-seo-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sj-muted);
  font-size: 11px;
  margin-left: 20px;
}
.sj-seo-note .sj-icon {
  width: 16px;
  height: 16px;
}
.sj-seo-copy {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 100px;
}

.sj-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: 32px 0;
  border-top: 1px solid var(--sj-line);
  border-bottom: 1px solid var(--sj-line);
}
.sj-directory-grid h3 {
  font-size: 16px;
  margin: 0 0 20px;
}
.sj-directory-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--sj-text);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 0;
}
.sj-directory-grid a:hover {
  color: var(--sj-blue);
}
.sj-directory-grid .sj-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sj-guide-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.sj-guide-index {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 10px;
}
.sj-guide-index a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--sj-text);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 0;
  border-bottom: 1px solid var(--sj-line);
}
.sj-guide-index a span {
  color: var(--sj-blue);
  font-size: 11px;
  font-weight: 700;
}
.sj-guide-grid .sj-prose section + section {
  margin-top: 40px;
}
.sj-guide-grid .sj-prose h2 {
  font-size: 27px;
  line-height: 1.35;
  margin: 0 0 18px;
  letter-spacing: -0.035em;
}
.sj-guide-grid .sj-prose p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--sj-text);
}
@media (max-width: 1100px) {
  .sj-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sj-guide-grid {
    gap: 40px;
    grid-template-columns: 220px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .sj-directory-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sj-directory-grid h3 {
    margin-bottom: 8px;
  }
  .sj-guide-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .sj-guide-index {
    position: static;
  }
  .sj-guide-grid .sj-prose h2 {
    font-size: 24px;
  }
}
.sj-related {
  padding: 0 0 75px;
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
}
.sj-related h2 {
  font-size: 20px;
  margin: 0 auto 0 0;
}
.sj-related a {
  font-size: 12px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.sj-related .sj-icon {
  width: 16px;
}
.sj-toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sj-ink);
  color: var(--sj-bg);
  padding: 12px 23px;
  border-radius: 8px;
  box-shadow: var(--sj-shadow);
  z-index: 1000;
  font-size: 12px;
  max-width: 90%;
}
.sj-site .hidden {
  display: none !important;
}
.sj-site .well,
.sj-site .card,
.sj-site .d-card,
.sj-site .order-card {
  background: var(--sj-card);
  color: var(--sj-text);
  border: 1px solid var(--sj-line);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
}
.sj-site .modal-content,
.sj-site .dropdown-menu {
  background: var(--sj-card);
  color: var(--sj-text);
  border-color: var(--sj-line);
}
.sj-site .dropdown-menu a {
  color: var(--sj-text);
}
.sj-site .btn-primary {
  background: #0a67ff;
  border-color: #0a67ff;
  color: white;
}
.sj-site .btn-default {
  background: var(--sj-card);
  border-color: var(--sj-line);
  color: var(--sj-text);
}
.sj-site .select2-container--default .select2-selection--single {
  min-height: 49px;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 8px;
}
.sj-site
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding: 10px 14px;
  color: var(--sj-text);
}
.sj-site .select2-dropdown {
  background: var(--sj-card);
  border-color: var(--sj-line);
  color: var(--sj-text);
}
.sj-site .select2-container {
  max-width: 100%;
  font-size: 13px;
}
.sj-site .select2-search__field {
  background: var(--sj-card);
  color: var(--sj-text);
}
.sj-site .select2-dropdown .select2-results__option {
  background: var(--sj-card);
  color: var(--sj-text);
}
.sj-site .select2-dropdown .select2-results__option > a {
  display: block;
  color: inherit;
  background: transparent;
}
.sj-site .select2-dropdown .select2-results__option .select2-selection__text {
  color: inherit;
}
.sj-site
  .select2-dropdown
  .select2-results__option:is(.active, [aria-selected="true"]) {
  background: var(--sj-option-selected);
  color: var(--sj-ink);
}
.sj-site
  .select2-dropdown
  .select2-results__option:is(
    .select2-results__option--highlighted,
    :hover,
    :focus-within
  ) {
  background: var(--sj-option-hover);
  color: var(--sj-ink);
}
.sj-site .select2-dropdown .select2-results__option[aria-disabled="true"] {
  color: var(--sj-muted);
}
@media (min-width: 761px) {
  .sj-site.sj-auth .sj-header-inner {
    gap: 25px;
  }
  .sj-auth .sj-nav {
    gap: 23px;
  }
  .sj-auth .sj-header-actions {
    gap: 15px;
  }
}
@media (max-width: 1100px) {
  .sj-shell {
    width: calc(100% - 48px);
  }
  .sj-header-inner {
    gap: 20px;
  }
  .sj-nav {
    gap: 18px;
  }
  .sj-header-actions {
    gap: 13px;
  }
  .sj-logo {
    width: 125px;
  }
  .sj-header-actions .sj-btn-small .sj-icon {
    display: none;
  }
  .sj-hero-grid {
    gap: 35px;
  }
  .sj-hero-copy h1 {
    font-size: 49px;
  }
  .sj-hero-actions {
    gap: 16px;
    flex-wrap: wrap;
  }
  .sj-hero-notes {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sj-builder-wrap {
    padding: 18px 10px;
  }
  .sj-builder-wrap:before {
    inset: -5px -9px;
  }
  .sj-orbit-a {
    right: -9px;
  }
  .sj-orbit-b {
    left: -12px;
  }
  .sj-value-grid {
    gap: 50px;
  }
  .sj-faq-grid,
  .sj-seo-copy,
  .sj-auth-grid {
    gap: 55px;
  }
  .sj-package {
    padding: 22px;
  }
  .sj-tag {
    font-size: 8px;
  }
  .sj-footer-grid {
    gap: 28px;
  }
  .sj-nav a {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .sj-shell {
    width: calc(100% - 36px);
  }
  .sj-header-inner {
    height: 76px;
    gap: 12px;
  }
  .sj-logo {
    width: 116px;
  }
  .sj-header-actions {
    margin-left: auto;
    gap: 9px;
  }
  .sj-header-actions > .sj-btn {
    display: none;
  }
  .sj-menu-toggle {
    display: inline-flex;
  }
  .sj-icon-btn {
    width: 34px;
    height: 34px;
  }
  .sj-icon-btn .sj-icon {
    width: 20px;
    height: 20px;
  }
  .sj-login-link {
    font-size: 12px;
  }
  .sj-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 17px 22px 25px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sj-bg);
    border-bottom: 1px solid var(--sj-line);
    box-shadow: 0 15px 20px #00000008;
  }
  .sj-nav.is-open {
    display: flex;
  }
  .sj-nav-secondary {
    display: block;
  }
  .sj-nav a {
    font-size: 14px;
    padding: 10px 0;
  }
  .sj-hero {
    padding: 43px 0 45px;
  }
  .sj-hero-grid {
    grid-template-columns: 1fr;
    gap: 39px;
  }
  .sj-hero-copy {
    padding: 0;
  }
  .sj-hero-copy h1 {
    font-size: clamp(38px, 7.3vw, 51px);
    line-height: 1.12;
    margin-bottom: 20px;
  }
  .sj-hero-copy .sj-eyebrow {
    font-size: 8px;
    margin-bottom: 16px;
  }
  .sj-hero-copy > p {
    font-size: 14px;
    line-height: 1.8;
    max-width: none;
  }
  .sj-hero-actions {
    gap: 20px;
    margin-top: 25px;
  }
  .sj-hero-actions > .sj-btn {
    padding: 14px 18px;
    font-size: 12px;
    min-height: 50px;
  }
  .sj-hero-actions .sj-text-link {
    font-size: 12px;
  }
  .sj-hero-notes {
    margin-top: 20px;
    font-size: 9px;
    gap: 16px;
  }
  .sj-hero-notes .sj-icon {
    width: 14px;
    height: 14px;
  }
  .sj-builder-wrap {
    padding: 13px 11px;
    max-width: 490px;
    width: 100%;
    margin: auto;
  }
  .sj-builder-wrap:before {
    inset: 0 0;
    border-radius: 22px;
  }
  .sj-builder {
    border-radius: 15px;
  }
  .sj-builder-heading {
    padding: 20px;
  }
  .sj-builder-heading h2 {
    font-size: 19px;
  }
  .sj-builder-body {
    padding: 20px;
  }
  .sj-orbit {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .sj-orbit .sj-icon {
    width: 23px;
    height: 23px;
  }
  .sj-orbit-a {
    right: 0;
    top: -7px;
  }
  .sj-orbit-b {
    left: -2px;
    bottom: 0;
  }
  .sj-trustbar .sj-shell {
    grid-template-columns: 1fr 1fr;
    gap: 19px 13px;
    padding-block: 24px;
  }
  .sj-trustbar span {
    font-size: 10px;
    justify-content: flex-start;
    gap: 8px;
  }
  .sj-trustbar .sj-icon {
    width: 18px;
    height: 18px;
  }
  .sj-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .sj-section-head {
    display: block;
    margin-bottom: 25px;
  }
  .sj-section-head h2 {
    font-size: 32px;
  }
  .sj-section-head > p {
    margin-top: 18px;
    font-size: 12px;
  }
  .sj-eyebrow {
    font-size: 8px;
    margin-bottom: 14px;
  }
  .sj-products {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sj-package {
    padding: 26px;
  }
  .sj-package-top {
    margin-bottom: 20px;
  }
  .sj-package h3 {
    font-size: 20px;
  }
  .sj-tag {
    font-size: 10px;
  }
  .sj-quantity {
    font-size: 13px;
  }
  .sj-checks li {
    font-size: 12px;
  }
  .sj-price-caption,
  .sj-card-detail {
    font-size: 11px;
  }
  .sj-price {
    font-size: 43px;
  }
  .sj-price-note {
    font-size: 10px;
  }
  .sj-catalog-link {
    display: block;
    padding: 20px;
    font-size: 12px;
    margin-top: 24px;
  }
  .sj-catalog-link .sj-text-link {
    margin-top: 13px;
    font-size: 12px;
  }
  .sj-steps {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 32px;
  }
  .sj-steps article {
    position: relative;
    padding-left: 58px;
  }
  .sj-step-number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 32px;
  }
  .sj-steps h3 {
    font-size: 19px;
    margin-bottom: 9px;
  }
  .sj-steps p {
    font-size: 12px;
    max-width: none;
  }
  .sj-value-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sj-value-art {
    min-height: 380px;
    padding: 24px;
    order: 2;
  }
  .sj-art-orbit {
    width: 235px;
    height: 235px;
  }
  .sj-art-center {
    inset: 60px;
    font-size: 57px;
    border-radius: 28px;
  }
  .sj-art-center span {
    font-size: 7px;
  }
  .sj-art-orbit > span {
    width: 48px;
    height: 48px;
  }
  .sj-value-copy h2 {
    font-size: 33px;
  }
  .sj-value-copy > p {
    font-size: 13px;
  }
  .sj-faq-grid,
  .sj-seo-copy {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sj-faq-grid h2 {
    font-size: 32px;
  }
  .sj-faq-grid > div > p {
    font-size: 12px;
  }
  .sj-faq summary {
    font-size: 13px;
    line-height: 1.6;
    padding: 18px 0;
  }
  .sj-faq > div > p {
    font-size: 12px;
  }
  .sj-final-cta {
    display: block;
    padding: 29px 25px;
    margin-block: 48px;
    border-radius: 15px;
  }
  .sj-final-cta h2 {
    font-size: 31px;
  }
  .sj-final-cta > .sj-btn {
    margin-top: 25px;
  }
  .sj-login-copy p {
    font-size: 13px;
  }
  .sj-panel {
    padding: 23px;
    border-radius: 12px;
  }
  .sj-login-form {
    max-width: none;
  }
  .sj-footer {
    padding-top: 40px;
  }
  .sj-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .sj-footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .sj-footer p {
    margin: 12px 0;
  }
  .sj-footer h2 {
    margin-bottom: 13px;
  }
  .sj-footer-bottom {
    display: block;
    font-size: 8px;
    margin-top: 30px;
    padding: 20px 0;
  }
  .sj-footer-bottom span {
    display: block;
    margin: 0 0 6px;
  }
  .sj-auth-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 40px;
  }
  .sj-auth-intro {
    padding: 0;
  }
  .sj-auth-intro h1 {
    font-size: 37px;
  }
  .sj-auth-intro > p {
    font-size: 13px;
  }
  .sj-auth-intro .sj-benefit {
    display: none;
  }
  .sj-register h2 {
    font-size: 25px;
  }
  .sj-balance {
    min-height: 46px;
    padding: 6px 8px;
    grid-template-columns: auto 27px;
    column-gap: 9px;
  }
  .sj-balance strong {
    font-size: 14px;
  }
  .sj-balance .sj-icon {
    width: 27px;
    height: 27px;
    padding: 6px;
    border-radius: 7px;
  }
  .sj-balance > span {
    font-size: 8px;
  }
  .sj-avatar {
    display: none;
  }
  .sj-page-heading {
    display: block;
    margin-bottom: 25px;
  }
  .sj-page-heading h1 {
    font-size: 29px;
  }
  .sj-page-heading p {
    font-size: 12px;
  }
  .sj-page-heading > .sj-btn {
    margin-top: 17px;
    min-height: 43px;
    font-size: 11px;
  }
  .sj-stats > div:last-child {
    display: none;
  }
  .sj-stats strong {
    font-size: 24px;
  }
  .sj-order-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sj-order-grid aside {
    order: 2;
  }
  .sj-panel-heading h2 {
    font-size: 23px;
  }
  .sj-panel-heading .sj-product-icon {
    width: 39px;
    height: 39px;
  }
  .sj-site .form-control {
    font-size: 16px;
    min-height: 49px;
  }
  .sj-builder .form-control {
    font-size: 14px;
  }
  .sj-service-row {
    grid-template-columns: 1fr auto;
    gap: 15px;
    padding: 20px;
  }
  .sj-service-name {
    grid-column: 1/-1;
  }
  .sj-service-name h3 {
    font-size: 13px;
  }
  .sj-service-row > .sj-btn {
    justify-self: end;
    font-size: 11px;
  }
  .sj-service-rate strong {
    font-size: 15px;
  }
  .sj-service-details {
    font-size: 11px;
  }
  .sj-catalog-category > h2 {
    font-size: 20px;
  }
  .sj-seo-hero {
    padding: 38px 0;
  }
  .sj-seo-hero h1 {
    font-size: 37px;
  }
  .sj-seo-hero .sj-shell > p {
    font-size: 13px;
  }
  .sj-seo-note {
    display: flex;
    margin: 16px 0 0;
    font-size: 10px;
  }
  .sj-breadcrumb {
    margin-bottom: 25px;
    font-size: 9px;
  }
  .sj-seo-copy h2 {
    font-size: 31px;
  }
  .sj-prose {
    font-size: 13px;
  }
  .sj-prose h3 {
    font-size: 20px;
  }
  .sj-related {
    padding-bottom: 48px;
    display: grid;
    gap: 16px;
  }
  .sj-related h2 {
    font-size: 23px;
  }
  .sj-related a {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sj-site * {
    scroll-behavior: auto;
    transition: none;
  }
}
.sj-order-search {
  display: flex;
  gap: 12px;
  max-width: 660px;
  margin-bottom: 23px;
}
.sj-order-search .form-control {
  flex: 1;
}
.sj-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.sj-status-tabs a {
  padding: 8px 14px;

  border: 1px solid var(--sj-line);
  font-size: 11px;
  color: var(--sj-muted);

  border-radius: 10px;
  background: var(--sj-surface);
}
.sj-status-tabs a[aria-current="page"] {
  background: #0a67ff;
  color: white;
  border-color: var(--sj-blue);
}
.sj-history-card {
  margin-bottom: 18px;
}
.sj-history-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.sj-history-top > .sj-muted {
  margin-left: auto;
  font-size: 10px;
}
.sj-order-status {
  font-size: 10px;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  padding: 5px 10px;
  border-radius: 20px;
}
.sj-status-complete {
  background: #e6f5ed;
  color: #17663f;
}
.sj-status-partial {
  background: #fff1d6;
  color: #77520b;
}
.sj-status-canceled {
  background: #fdecea;
  color: #983a36;
}
.sj-status-help {
  color: var(--sj-muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 8px 0 14px;
}
.sj-history-card h2 {
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin-bottom: 7px;
}
.sj-order-link {
  font-size: 12px;
  word-break: break-all;
}
.sj-order-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin: 20px 0 0;

  gap: 10px;
  padding: 0;
}
.sj-order-metrics dt {
  font-size: 10px;
  font-weight: 400;
  color: var(--sj-muted);
}
.sj-order-metrics dd {
  font-size: 14px;
  color: var(--sj-ink);
  font-weight: 600;
  margin: 5px 0 0;

  font-variant-numeric: tabular-nums;
}
.sj-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.sj-empty {
  text-align: center;
  padding: 60px 30px;
}
.sj-empty h2 {
  font-size: 28px;
  margin: 22px 0 15px;
}
.sj-empty p {
  font-size: 13px;
  color: var(--sj-muted);
  max-width: 470px;
  margin: 0 auto 25px;
}
.sj-pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  font-size: 12px;
  margin-top: 25px;
}
@media (max-width: 760px) {
  .sj-history-top {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sj-history-top > .sj-muted {
    margin-left: 0;
    flex-basis: 100%;
  }
  .sj-order-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .sj-history-card h2 {
    font-size: 16px;
  }
  .sj-history-actions .sj-btn {
    font-size: 10px;
  }
  .sj-empty {
    padding: 32px 21px;
  }
  .sj-empty h2 {
    font-size: 24px;
  }
}

.sj-auth-single {
  max-width: 620px;
  min-height: 65vh;
}
.sj-auth-single h1 {
  font-size: 30px;
  margin-bottom: 25px;
}
.sj-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}
.sj-account-grid h2 {
  font-size: 23px;
  margin-bottom: 25px;
}
.sj-account-grid h3 {
  font-size: 17px;
  margin: 20px 0;
}
.sj-account-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-bottom: 30px;
}
.sj-ticket-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  margin-top: 12px;
  border: 1px solid var(--sj-line);
  border-radius: 12px;
  background: var(--sj-soft);
  font-size: 11px;
  cursor: pointer;
}
.sj-ticket-row:is(:hover, :focus-visible) {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-ticket-row:focus-visible {
  outline: 2px solid var(--sj-blue);
  outline-offset: 3px;
}
.sj-ticket-row strong {
  font-size: 15px;
  color: var(--sj-ink);
}
.sj-ticket-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 40%, transparent);
  border-radius: 8px;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  font-size: 12px;
  font-weight: 700;
}
.sj-ticket-row:is(:hover, :focus-visible) .sj-ticket-open {
  color: #fff;
  background: #0a67ff;
  border-color: #0a67ff;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-ticket-row,
  .sj-ticket-open {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }
  .sj-ticket-open .sj-icon {
    transition: transform 180ms ease;
  }
  .sj-ticket-row:is(:hover, :focus-visible) .sj-ticket-open .sj-icon {
    transform: translateX(3px);
  }
}
.sj-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sj-blog-card img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}
.sj-blog-card time {
  display: block;
  font-size: 11px;
  color: var(--sj-muted);
  margin: 20px 0 13px;
}
.sj-blog-card h2 {
  font-size: 22px;
  line-height: 1.4;
}
.sj-blog-card h2 a {
  color: var(--sj-ink);
}
.sj-article {
  max-width: 850px;
}
.sj-article h1 {
  font-size: 40px;
  line-height: 1.25;
  margin: 28px 0;
}
.sj-article-cover {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 30px;
}
.sj-site pre {
  background: var(--sj-soft);
  border-color: var(--sj-line);
  color: var(--sj-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sj-site .container-dashboard {
  max-width: 1160px;
  margin-inline: auto;
}
.sj-site .top-box {
  margin-bottom: 28px;
}
.sj-site .top-box h4 {
  font-size: 29px;
}
.sj-site .account-menu .nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sj-site .tab-pane.active {
  opacity: 1;
}
.sj-site .account-content .tab-header {
  font-size: 23px;
  margin-bottom: 20px;
}
.sj-site .account-content h5 {
  font-size: 18px;
  margin-top: 25px;
}
.sj-site .tab-pane {
  line-height: 1.8;
}
.sj-site .api-page {
  overflow-wrap: anywhere;
}
.sj-site .w-100 {
  width: 100%;
}
.sj-site .tickets-uploader {
  margin: 14px 0;
}
.sj-site .btn {
  white-space: normal;
}
.sj-site .modal-title {
  font-size: 21px;
}
.sj-site .close {
  color: var(--sj-ink);
}
@media (max-width: 760px) {
  .sj-account-grid,
  .sj-blog-grid {
    grid-template-columns: 1fr;
  }
  .sj-article h1 {
    font-size: 30px;
  }
  .sj-account-grid h2 {
    font-size: 21px;
  }
}

.sj-steps > article {
  padding: 28px;
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  background: var(--sj-surface);
  box-shadow: var(--sj-card-shadow);
}
.sj-package::before {
  content: "";
  position: absolute;
  width: 78px;
  height: 4px;
  top: 0;
  left: 30px;
  border-radius: 0 0 8px 8px;
  background: var(--sj-blue);
}
.sj-faq[open] {
  border-color: color-mix(in srgb, var(--sj-blue) 45%, var(--sj-line));
}
.sj-site .table thead th {
  background: var(--sj-soft);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sj-muted);
  border-top: 0;
}
.sj-site .table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--sj-soft) 50%, transparent);
}
.sj-site .table tbody tr:hover {
  background: var(--sj-blue-soft);
}
.sj-order-metrics > div {
  padding: 14px;
  border: 1px solid var(--sj-line);
  border-radius: 12px;
  background: var(--sj-soft);
}
.sj-blog-card {
  padding: 20px;
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  background: var(--sj-surface);
  box-shadow: var(--sj-card-shadow);
}

.sj-select-control {
  position: relative;
}
.sj-select-control > select.form-control {
  appearance: none;
  padding-right: 46px;
}
.sj-select-control > .sj-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--sj-muted);
  pointer-events: none;
}
.sj-select-control:focus-within > .sj-icon {
  color: var(--sj-blue);
}
.sj-catalog-fields {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 18px;
  padding: 22px 24px;
}
.sj-catalog-category > h2 {
  display: flex;
  align-items: center;
  gap: 13px;
}
.sj-catalog-category > h2 .sj-category-icon {
  width: 40px;
  height: 40px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.sj-catalog-category > h2 svg {
  width: 23px;
  height: 23px;
}
.sj-service-rate {
  padding: 10px 14px;
  border-left: 1px solid var(--sj-line);
}
@media (prefers-reduced-motion: no-preference) {
  .sj-btn,
  .sj-site .btn-primary {
    transition:
      background-position 350ms ease,
      background-color 200ms ease,
      border-color 200ms ease,
      color 200ms ease,
      box-shadow 250ms ease;
  }
  .sj-btn .sj-icon {
    transition: transform 250ms ease;
  }
  .sj-btn-primary:is(:hover, :focus-visible) > .sj-icon {
    transform: translateX(3px);
  }
}
@media (max-width: 1100px) {
  .sj-catalog-fields {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .sj-catalog-fields {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 13px;
  }
  .sj-catalog-category > h2 {
    font-size: 17px;
  }
}

.sj-site button:focus:not(:focus-visible),
.sj-site summary:focus:not(:focus-visible) {
  outline: none;
}

.sj-dashboard {
  margin-left: 238px;
  padding: 30px 36px 55px;
  min-height: calc(100vh - 138px);
  min-width: 0;
}
.sj-dashboard > .sj-shell {
  width: 100%;
  max-width: none;
}

.sj-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 238px;
  --sj-ink: #f4f6fb;
  --sj-text: #b5bfce;
  --sj-muted: #8390a3;
  --sj-line: #ffffff12;
  --sj-soft: #ffffff09;
  color: #e0e6f0;
  background:
    radial-gradient(ellipse at 0 0, #24344e, transparent 58%), #131b27;
  border-right: 1px solid #202e44;
  padding: 24px 20px 18px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sj-sidebar > .sj-brand {
  margin: 0 12px 26px;
}
.sj-sidebar-label {
  display: block;
  color: var(--sj-muted);
  font-size: 9px;
  letter-spacing: 0.13em;
  font-weight: 700;
  margin: 0 12px 12px;
}
.sj-sidebar nav {
  display: grid;
  gap: 3px;
}
.sj-sidebar nav .sj-sidebar-label {
  margin-top: 26px;
}
.sj-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--sj-text);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
}
.sj-sidebar nav a:hover {
  background: var(--sj-soft);
}
.sj-sidebar nav a[aria-current="page"] {
  background: linear-gradient(110deg, #285ed6, #1e4eaf);
  color: #fff;
  box-shadow:
    0 6px 18px #020b2526,
    0 1px 0 #ffffff26 inset;
}
.sj-sidebar nav .sj-icon {
  width: 19px;
  height: 19px;
}
.sj-sidebar-bottom {
  border-top: 1px solid var(--sj-line);
  margin-top: auto;
  padding: 25px 10px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.sj-sidebar-bottom strong,
.sj-sidebar-bottom a {
  display: block;
  font-size: 12px;
}
.sj-sidebar-bottom a {
  color: var(--sj-muted);
  font-size: 11px;
}
.sj-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  position: sticky;

  z-index: 90;

  height: 76px;
  margin: 14px 36px 0 274px;
  padding: 0 18px;
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  background:
    radial-gradient(
      ellipse at 75% -80%,
      var(--sj-header-glow),
      transparent 75%
    ),
    var(--sj-glass);
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow:
    0 1px 0 var(--sj-surface-edge) inset,
    0 10px 24px -15px #09234565;
  top: 12px;
}
.sj-workspace-context {
  display: flex;
  align-items: center;

  font-size: 12px;
  min-width: 0;

  gap: 14px;
}
.sj-workspace-header::after {
  content: "";
  position: absolute;
  height: 1px;
  bottom: -1px;
  left: 24px;
  right: 24px;
  background: linear-gradient(90deg, transparent, var(--sj-blue), transparent);
  opacity: 0.25;
  pointer-events: none;
}
.sj-workspace-copy {
  min-width: 0;
}
.sj-workspace-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--sj-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.sj-workspace-copy .sj-brand-symbol {
  width: 11px;
  height: 11px;
}
.sj-workspace-copy strong {
  display: block;
  max-width: 430px;
  color: var(--sj-ink);
  font-family: Manrope, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sj-workspace-header .sj-header-actions {
  flex-shrink: 0;
  gap: 12px;
  margin-left: auto;
}
.sj-workspace-header .sj-icon-btn,
.sj-workspace-header .sj-account-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--sj-line);
  border-radius: 13px;
  background: var(--sj-soft);
  color: var(--sj-text);
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-workspace-header .sj-workspace-menu {
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-workspace-header .sj-icon-btn:is(:hover, :focus-visible) {
  color: var(--sj-blue);
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-wallet-controls {
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 24%, var(--sj-line));
  border-radius: 14px;
  background: linear-gradient(120deg, var(--sj-blue-soft), var(--sj-card));
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-wallet-controls .sj-currency-menu {
  margin-right: 4px;
  padding-left: 4px;
  border-left: 1px solid var(--sj-line);
}
.sj-wallet-controls .sj-currency-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  color: var(--sj-muted);
  line-height: 1;
  background: transparent;
  transition:
    color 200ms ease,
    background-color 200ms ease;
}
.sj-wallet-controls .sj-currency-menu > summary:is(:hover, :focus-visible),
.sj-wallet-controls .sj-currency-menu[open] > summary {
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .sj-currency-menu > summary .sj-icon {
    transition: transform 250ms ease;
  }
  .sj-currency-menu > summary:is(:hover, :focus-visible) .sj-icon {
    transform: translateY(2px);
  }
  .sj-currency-menu[open] > summary .sj-icon {
    transform: rotate(180deg);
  }
}
@media (min-width: 951px) {
  .sj-auth.sj-compact .sj-workspace-header {
    margin-left: 120px;
  }
}
@media (max-width: 760px) {
  .sj-workspace-copy {
    display: none;
  }
  .sj-workspace-header .sj-icon-btn,
  .sj-workspace-header .sj-account-toggle {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
  .sj-wallet-controls .sj-currency-menu > summary {
    width: 28px;
    height: 32px;
  }
}
.sj-header-menu {
  position: relative;
}
.sj-header-menu > summary {
  cursor: pointer;
  list-style: none;
}
.sj-header-menu > summary::-webkit-details-marker {
  display: none;
}
.sj-header-menu > .sj-account-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sj-line);
  overflow: hidden;
}
.sj-mobile-tabs {
  display: none;
}
@media (max-width: 950px) {
  .sj-auth {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .sj-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    z-index: 100;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    max-width: 600px;
    margin-inline: auto;
    padding: 7px 5px;
    border: 1px solid var(--sj-line);
    border-radius: 20px;
    background: var(--sj-glass);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
      0 -1px 0 var(--sj-surface-edge) inset,
      0 8px 30px #03142730;
  }
  .sj-mobile-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 0 2px;
    color: var(--sj-muted);
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    border-radius: 11px;
  }
  .sj-tab-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 28px;
    border-radius: 9px;
    transition:
      color 0.2s,
      background-color 0.2s;
  }
  .sj-tab-icon .sj-icon {
    width: 19px;
    height: 19px;
  }
  .sj-mobile-tabs a[aria-current="page"] {
    color: var(--sj-blue);
  }
  .sj-mobile-tabs a[aria-current="page"] .sj-tab-icon {
    background: var(--sj-blue-soft);
  }
  .sj-mobile-tabs a:is(:hover, :focus-visible) {
    color: var(--sj-blue);
    background: var(--sj-blue-soft);
  }
}
.sj-header-menu > .sj-account-toggle:is(:hover, :focus-visible),
.sj-header-menu[open] > .sj-account-toggle {
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
  border-color: var(--sj-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sj-blue) 10%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .sj-account-toggle {
    transition:
      background-color 200ms ease,
      border-color 200ms ease,
      color 200ms ease,
      box-shadow 200ms ease;
  }
  .sj-account-toggle > .sj-icon {
    transition: transform 550ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sj-account-toggle:is(:hover, :focus-visible) > .sj-icon,
  .sj-header-menu[open] > .sj-account-toggle > .sj-icon {
    transform: rotate(120deg);
  }
}
.sj-header-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 16px);
  min-width: 220px;
  padding: 12px;
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  background: var(--sj-surface);
  box-shadow: var(--sj-shadow);
  font-size: 12px;
  z-index: 120;
}
.sj-header-popover > strong,
.sj-header-popover > span {
  display: block;
  padding: 8px 10px;
  color: var(--sj-muted);
}
.sj-header-popover a,
.sj-header-popover button {
  display: block;
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  color: var(--sj-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.sj-header-popover a:hover,
.sj-header-popover button:hover {
  background: var(--sj-soft);
}
.sj-header-popover hr {
  border: 0;
  border-top: 1px solid var(--sj-line);
  margin: 7px 0;
}
.sj-header-popover ul {
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
}
.sj-header-popover li a {
  display: flex;
  justify-content: space-between;
}
.sj-currency-menu > summary > .sj-icon {
  width: 15px;
  height: 15px;
}
.sj-avatar-dialog {
  max-width: 530px;
}
.sj-avatar [data-user-avatar] svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sj-avatar-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.sj-avatar-options button {
  border: 1px solid var(--sj-line);
  background: var(--sj-card);
  border-radius: 12px;
  padding: 8px;
}
.sj-avatar-options button[aria-pressed="true"] {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-avatar-options svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.sj-workspace-context strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-workspace-menu {
  display: inline-flex;
}
.sj-nav-backdrop {
  display: none;
}
.sj-workspace-footer {
  margin-left: 238px;
  display: flex;
  gap: 22px;
  padding: 22px 36px;
  border-top: 1px solid var(--sj-line);
  font-size: 10px;
  color: var(--sj-muted);
}
.sj-workspace-footer span {
  margin-right: auto;
}
.sj-workspace-footer a {
  color: var(--sj-muted);
}
.sj-work-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 24px;
}
.sj-work-heading h1 {
  font-size: 30px;
  letter-spacing: -0.045em;
  margin: 0 0 8px;
}
.sj-work-heading .sj-eyebrow {
  font-size: 9px;
  margin-bottom: 9px;
}
.sj-work-heading p {
  font-size: 13px;
  color: var(--sj-muted);
  margin: 0;
}
.sj-account-overview {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff16;

  background:
    radial-gradient(ellipse at 100% 0, #42659185, transparent 58%),
    linear-gradient(115deg, #132139, #263e59);
  color: #fff;
  box-shadow: 0 12px 26px #142d4921;
  margin: 0 0 24px;

  border-radius: 24px;
  border-color: #739bc140;
}
.sj-account-overview:before {
  content: "";
  position: absolute;
  width: 320px;
  aspect-ratio: 1;
  top: -145px;
  right: -44px;
  mask: var(--sj-brand-mark) center / contain no-repeat;
  background: #97bfff;
  opacity: 0.1;
  pointer-events: none;
  transform: rotate(-14deg);
}
.sj-overview-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #ffffff13;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #a8bad0;

  padding: 8px 24px;
  background: #10243a33;
}
.sj-overview-top button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border: 1px solid #dec39035;
  border-radius: 6px;
  color: #edd8ab;
  background: #eac7870a;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.sj-overview-top .sj-icon {
  width: 14px;
  height: 14px;
}
.sj-work-metrics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 15px 0;
}
.sj-work-metrics > a,
.sj-work-metrics > button,
.sj-work-metrics > div {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-right: 1px solid #ffffff16;
  padding: 0 24px;
  background: transparent;
  color: #fff;
  text-align: left;
}
.sj-work-metrics > :last-child {
  border-right: 0;
}
.sj-metric-icon {
  display: flex;
  padding: 10px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #ffffff08;
  color: #a7c7ff;
}
.sj-level-icon {
  position: relative;
  flex-shrink: 0;
  color: #e8c98d;
  border-color: #e8c98d55;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.sj-work-metrics > button[data-dialog-open="statusModal"] {
  cursor: pointer;
}
.sj-work-metrics > button:is(:hover, :focus-visible) .sj-level-icon {
  background: #e8c98d1c;
  border-color: #e8c98dc0;
  box-shadow: 0 0 0 4px #e8c98d0d;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-level-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid currentColor;
    border-radius: inherit;
    pointer-events: none;
    animation: sj-level-pulse 3.6s ease-out infinite;
  }
  .sj-level-icon > .sj-icon {
    animation: sj-level-crown 3.6s ease-in-out infinite;
  }
}
@keyframes sj-level-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  55%,
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}
@keyframes sj-level-crown {
  0%,
  60%,
  100% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-2px) scale(1.1);
  }
}
.sj-work-metrics strong {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 22px;
  line-height: 1.35;
  color: #f6f8fc;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.sj-work-metrics div > span {
  font-size: 11px;
  color: #b5c2d2;
}
.sj-work-metrics small,
.sj-balance-metric a {
  color: #9bb7de;
  font-size: 10px;
}
.sj-work-metrics small .sj-icon,
.sj-balance-metric a .sj-icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}
.sj-balance-metric .sj-topup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid #8ab5f547;
  border-radius: 7px;
  background: #8ab5f510;
  color: #c7ddff;
  font-size: 11px;
}
.sj-balance-metric .sj-topup .sj-icon {
  margin-left: 0;
}
.sj-messages-link:is(:hover, :focus-visible) .sj-metric-icon {
  color: #e2eeff;
  border-color: #8ab5f58c;
  background: #8ab5f529;
  box-shadow: 0 0 0 4px #8ab5f50d;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-messages-link .sj-metric-icon,
  .sj-messages-link .sj-icon {
    transition:
      transform 200ms ease,
      background-color 200ms ease,
      border-color 200ms ease,
      box-shadow 200ms ease;
  }
  .sj-messages-link:is(:hover, :focus-visible) .sj-metric-icon {
    transform: translateY(-3px);
  }
  .sj-messages-link:is(:hover, :focus-visible) .sj-metric-icon .sj-icon {
    transform: rotate(-8deg) scale(1.1);
  }
  .sj-messages-link:is(:hover, :focus-visible) small .sj-icon {
    transform: translateX(3px);
  }
}
.sj-balance-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sj-balance-value button {
  border: 0;
  padding: 4px;
  background: transparent;
  color: #97a9bf;
}
.sj-balance-value button .sj-icon {
  width: 15px;
  height: 15px;
}
.sj-level-dialog {
  width: min(1050px, calc(100% - 36px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px;
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  background: var(--sj-surface);
  color: var(--sj-text);
  box-shadow: 0 35px 100px #00000050;
}
.sj-level-dialog::backdrop {
  background: #0d172c99;
  backdrop-filter: blur(5px);
}
.sj-level-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}
.sj-level-dialog h2 {
  font-size: 25px;
  margin: 0;
}
.sj-level-dialog .sj-eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.sj-level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.sj-level-card {
  border: 1px solid var(--sj-line);

  overflow: hidden;

  background: var(--sj-surface);
  border-radius: 18px;
  box-shadow: var(--sj-card-shadow);
}
.sj-level-card-head {
  padding: 22px;

  border-bottom: 1px solid var(--sj-line);

  background: var(--sj-header-surface);
}
.sj-level-card-head > .sj-icon {
  margin-bottom: 15px;
  color: #b2863e;
}
.sj-level-card-head h3 {
  font-size: 19px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.sj-level-card-head > span {
  color: var(--sj-muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  display: block;
}
.sj-level-card-head > strong {
  color: var(--sj-ink);
  font-size: 23px;
}
.sj-level-card[data-tier="black"] .sj-level-card-head {
  background: #172333;
  color: #fff;
}
.sj-level-card[data-tier="black"] .sj-level-card-head h3,
.sj-level-card[data-tier="black"] .sj-level-card-head > strong {
  color: #fff;
}
.sj-level-card ul {
  list-style: none;
  margin: 0;
  padding: 20px 16px;
  display: grid;
  gap: 13px;
}
.sj-level-card li {
  display: flex;
  gap: 9px;
  font-size: 11px;
  line-height: 1.5;
}
.sj-level-card li > .sj-icon {
  width: 14px;
  height: 14px;
  color: var(--sj-blue);
  margin-top: 2px;
}
.sj-level-card li.is-unavailable {
  color: var(--sj-muted);
  opacity: 0.65;
}
.sj-level-card.is-current {
  border-color: var(--sj-blue);
}
.sj-current-tier {
  display: block;
  text-align: center;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  padding: 9px;
  font-size: 11px;
}
.sj-order-networks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.sj-order-networks > span {
  font-size: 11px;
  color: var(--sj-muted);
  margin-right: 8px;
}
.sj-order-networks button {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--sj-line);

  color: var(--sj-text);
  font-size: 12px;

  border-radius: 11px;
  background: var(--sj-card);
  padding: 8px 13px;
}
.sj-order-networks .sj-network-label {
  line-height: 1.25;
  position: relative;
  top: 1px;
}
.sj-order-networks .sj-icon {
  width: 16px;
  height: 16px;
}
.sj-order-networks button[aria-pressed="true"] {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
}
.sj-order-networks button:is(:hover, :focus-visible) {
  background: var(--sj-blue-soft);
  color: var(--sj-ink);
  border-color: var(--sj-blue);
  box-shadow:
    0 5px 14px #0c2b4d20,
    0 0 0 2px color-mix(in srgb, var(--sj-blue) 8%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .sj-order-networks button {
    transition:
      transform 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }
  .sj-order-networks button .sj-category-icon svg {
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sj-order-networks button:is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }
  .sj-order-networks button:is(:hover, :focus-visible) .sj-category-icon svg {
    transform: rotate(-6deg) scale(1.12);
  }
}
.sj-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 20px 24px;
  align-items: start;
}
.sj-checkout-notices {
  grid-column: 1/-1;
}
.sj-checkout-notices:empty {
  display: none;
}
.sj-checkout-notices:has(> [hidden]:only-child) {
  display: none;
}
.sj-checkout-form {
  grid-column: 1;
}
.sj-checkout-context {
  grid-column: 2;
  display: grid;
  gap: 20px;
  position: sticky;
  top: 100px;
}
.sj-work-card {
  min-width: 0;
  overflow: visible;

  background: var(--sj-surface);
  border-radius: var(--sj-radius);
  border: 1px solid var(--sj-line);
  box-shadow: var(--sj-card-shadow);
}
.sj-work-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  border-bottom: 1px solid var(--sj-line);

  padding: 20px 24px;
  border-radius: 21px 21px 0 0;
  background: var(--sj-header-surface);
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-work-card-head > div {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 13px;
}
.sj-work-card-head h2 {
  letter-spacing: -0.025em;
  margin: 0;

  font-size: 17px;
}
.sj-work-card-head > div > .sj-icon {
  color: var(--sj-blue);

  width: 38px;
  height: 38px;
  padding: 9px;
  background: var(--sj-blue-soft);
  border: 1px solid color-mix(in srgb, var(--sj-blue) 18%, transparent);
  border-radius: 12px 12px 12px 4px;
}
.sj-work-card-head > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
  font-size: 11px;
  white-space: nowrap;

  padding: 7px 10px;
  border: 1px solid var(--sj-line);
  border-radius: 8px;
  background: var(--sj-card);
}
.sj-work-card-head > a:is(:hover, :focus-visible) {
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
  border-color: var(--sj-blue);
  box-shadow: 0 3px 12px #0b59c81a;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-work-card-head > a .sj-icon {
    transition: transform 220ms ease;
  }
  .sj-work-card-head > a:is(:hover, :focus-visible) .sj-icon {
    transform: translateX(3px);
  }
}
.sj-work-card-body {
  padding: 24px;
}
.sj-work-card-body > h2 {
  font-size: 20px;
  line-height: 1.35;
}
.sj-work-card-body .form-group:last-child {
  margin-bottom: 0;
}
.sj-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
  flex-shrink: 0;

  width: 32px;
  height: 32px;
  border-radius: 10px 10px 10px 3px;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 20%, transparent);
}
.sj-small-tag {
  font-size: 10px;
  line-height: 1.5;
  padding: 5px 8px;

  background: var(--sj-soft);
  color: var(--sj-muted);

  border: 1px solid var(--sj-line);
  border-radius: 7px;
}
.sj-auth .form-control {
  background: var(--sj-field);

  font-size: 13px;

  border-radius: 11px;
  min-height: 48px;
}
.sj-auth .form-group > label {
  font-size: 12px;
  color: var(--sj-text);
}
.sj-service-description {
  margin: 0 0 22px;

  background: linear-gradient(110deg, var(--sj-blue-soft), var(--sj-card));

  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 25%, var(--sj-line));
  padding: 20px;
  box-shadow: 3px 0 0 var(--sj-blue) inset;
}
.sj-description-label {
  display: block;
  color: var(--sj-ink);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 9px;
}
.sj-service-description #service_description {
  margin: 0;
}
.sj-service-description #service_description .panel-body {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.85;
  color: var(--sj-text);
  overflow-wrap: anywhere;
}
.sj-description-empty {
  display: none;
  font-size: 13px;
  color: var(--sj-muted);
  line-height: 1.8;
  margin: 0 !important;
}
#service_description.hidden + .sj-description-empty {
  display: block;
}
/* Context guides share one component across orders, funds and tickets. */
.sj-order-guide {
  overflow: hidden;
}
.sj-guide-heading {
  position: relative;
  padding: 26px 88px 23px 24px;
  border-bottom: 1px solid var(--sj-line);
  background: linear-gradient(115deg, var(--sj-accent-tint), transparent 85%);
}
.sj-guide-heading .sj-eyebrow {
  font-size: 8px;
  margin-bottom: 10px;
  color: var(--sj-accent-ink);
}
.sj-guide-heading h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.035em;
}
.sj-guide-seal {
  position: absolute;
  right: 22px;
  top: 27px;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sj-accent-ink) 24%, transparent);
  border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--sj-card) 65%, transparent);
  transform: rotate(7deg);
}
.sj-guide-seal .sj-brand-symbol {
  width: 29px;
  height: 29px;
  background: var(--sj-accent-ink);
}
.sj-order-guide ol {
  list-style: none;
  padding: 5px 24px;
  margin: 0;
}
.sj-order-guide li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  padding: 20px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--sj-line);
}
.sj-order-guide li:last-child {
  border-bottom: 0;
}
.sj-guide-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--sj-line);
  border-radius: 12px;
  color: var(--sj-accent-ink);
  background: var(--sj-accent-tint);
}
.sj-guide-icon .sj-icon {
  width: 18px;
  height: 18px;
}
.sj-order-guide li strong {
  display: block;
  padding-right: 24px;
  margin: 0 0 6px;
  color: var(--sj-ink);
}
.sj-order-guide li p {
  color: var(--sj-muted);
  font-size: 12px;
  line-height: 1.75;
  margin: 0;
}
.sj-guide-number {
  position: absolute;
  right: 0;
  top: 21px;
  font-size: 9px;
  color: var(--sj-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sj-guide-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--sj-line);
  background: var(--sj-blue-soft);
  font-size: 12px;
  font-weight: 700;
}
.sj-guide-link .sj-icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 25%, transparent);
  border-radius: 50%;
}
.sj-guide-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--sj-blue) 16%, var(--sj-card));
}
.sj-field-hint {
  font-size: 11px;
  color: var(--sj-muted);
  line-height: 1.75;
  margin: 14px 0 0 !important;
}
.sj-checkout-confirm {
  margin-top: 24px;
  padding-top: 22px;

  padding: 20px;
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  background: var(--sj-soft);
}
.sj-checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}
.sj-checkout-total .sj-eyebrow {
  font-size: 8px;
  margin-bottom: 5px;
}
.sj-checkout-total label {
  display: block;
  font-size: 13px;
  margin: 0;
  color: var(--sj-muted);
}
.sj-checkout-total #charge {
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
  font-size: 26px;
  font-weight: 800;
  color: var(--sj-ink);
  padding: 0;
  width: 50%;
  min-height: 40px;
}
.sj-checkout-actions {
  display: flex;
  gap: 12px;
}
.sj-checkout-actions > .sj-btn {
  flex: 1;
  padding: 13px 16px;
  font-size: 12px;
  white-space: normal;
}
.sj-hero-login {
  padding: 30px;
  border: 1px solid var(--sj-line);

  box-shadow: var(--sj-shadow);
  width: 100%;
  max-width: 460px;
  justify-self: end;

  background: var(--sj-surface);
  border-radius: var(--sj-radius);
  border-top: 3px solid var(--sj-blue);
}
.sj-login-heading .sj-eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.sj-login-heading h2 {
  font-size: 25px;
  margin-bottom: 8px;
}
.sj-login-heading p {
  font-size: 12px;
  color: var(--sj-muted);
  margin-bottom: 23px;
}
.sj-hero-login .form-group {
  margin-bottom: 16px;
}
.sj-hero-login .sj-login-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: none;
}
.sj-hero-login .sj-form-meta {
  margin: 3px 0 18px;
}
.sj-shopping-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  padding-block: 65px 45px;
}
.sj-shopping-start > div > p {
  max-width: 370px;
  color: var(--sj-muted);
}
.sj-shopping-start .sj-builder-wrap {
  margin: 0;
}
.sj-shopping-start .sj-orbit,
.sj-shopping-start .sj-builder-wrap:before {
  display: none;
}
.sj-wallet-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
}
.sj-wallet-overview {
  display: grid;
  gap: 20px;
}
.sj-wallet-card {
  background:
    radial-gradient(ellipse at 100% 0, #4774a9a6, transparent 65%),
    linear-gradient(135deg, #192c43, #15202f);
  color: #fff;

  padding: 30px;
  position: relative;
  overflow: hidden;

  border-radius: 24px;
  border: 1px solid #527dab70;
  box-shadow: 0 18px 32px -18px #10376b85;
}
.sj-wallet-card:after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;

  pointer-events: none;

  mask: var(--sj-brand-mark) center / contain no-repeat;
  background: #90c7ff;
  opacity: 0.12;
  right: -64px;
  top: -56px;
  transform: rotate(-18deg);
}
.sj-wallet-card .sj-eyebrow {
  color: #c7ddff;
  font-size: 10px;
}
.sj-wallet-card > strong {
  display: block;
  font:
    800 36px/1.3 Manrope,
    sans-serif;
  margin: 16px 0;
}
.sj-wallet-card p {
  font-size: 12px;
  color: #e1edff;
}
.sj-wallet-card a {
  font-size: 12px;
  color: #fff;
  display: inline-flex;
  gap: 15px;
  align-items: center;
  margin-top: 18px;
}
.sj-field-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
}
.sj-field-heading label {
  margin: 0;
}
.sj-payment-options {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sj-payment-picker.is-enhanced .sj-payment-options {
  display: grid;
}
.sj-payment-picker.is-enhanced .sj-payment-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.sj-payment-options button {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--sj-line);

  color: var(--sj-text);
  font-size: 12px;

  border-radius: 14px;
  background: var(--sj-surface);
  min-height: 70px;
}
.sj-payment-options button > .sj-icon {
  color: var(--sj-blue);

  width: 36px;
  height: 36px;
  padding: 8px;
  background: var(--sj-blue-soft);
  border-radius: 10px;
}
.sj-payment-options button > .sj-icon:last-child {
  margin-left: auto;
  width: 16px;
  opacity: 0;

  height: 16px;
  padding: 0;
  background: transparent;
}
.sj-payment-options button[aria-pressed="true"] {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-payment-options button[aria-pressed="true"] > .sj-icon:last-child {
  opacity: 1;
}
.sj-funding-amount {
  margin-top: 28px;
  padding-top: 25px;
  border-top: 1px solid var(--sj-line);
}
.sj-funding-review {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;

  margin: 22px 0;
  font-size: 12px;

  border: 1px solid var(--sj-line);
  border-radius: 14px;
  background: var(--sj-header-surface);
  padding: 20px;
}
.sj-funding-review > span:first-child {
  color: var(--sj-muted);
}
.sj-funding-review > span:last-child {
  grid-column: 1/-1;
}
.sj-method-instructions,
.sj-payment-ledger {
  margin-top: 24px;
}
.sj-work-card #instruction_instruction {
  background: var(--sj-bg);
  border: 1px solid var(--sj-line);
  border-radius: 10px;
  padding: 16px;
  margin-top: 18px;
  overflow-wrap: anywhere;
}
.sj-work-card #instruction_instruction h1,
.sj-work-card #instruction_instruction h2 {
  font-size: 19px;
  line-height: 1.5;
  margin: 8px 0;
}
.sj-work-card #instruction_instruction p:has(> br:only-child) {
  display: none;
}
.sj-mass-builder {
  margin-bottom: 24px;
}
.sj-mass-fields {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.sj-mass-fields label {
  margin: 0;
}
.sj-mass-fields .form-control {
  margin-top: 6px;
}
@media (max-width: 900px) {
  .sj-mass-fields {
    grid-template-columns: 1fr;
  }
}
.sj-payment-ledger input[type="search"] {
  max-width: 430px;
  margin-bottom: 20px;
}
.sj-payment-ledger td small {
  display: block;
  color: var(--sj-muted);
  font-size: 10px;
}
.sj-ledger-empty {
  text-align: center;
  padding: 35px 20px;
}
.sj-ledger-empty > .sj-icon {
  width: 32px;
  height: 32px;
  color: var(--sj-blue);
  margin-bottom: 15px;
}
.sj-ledger-empty h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.sj-ledger-empty p {
  font-size: 12px;
  color: var(--sj-muted);
  max-width: 320px;
  margin: 0 auto;
}
.sj-help-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.sj-help-topics > button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  border: 1px solid var(--sj-line);

  color: var(--sj-text);

  background: var(--sj-surface);
  border-radius: 18px;
  box-shadow: var(--sj-card-shadow);
  padding: 20px;
}
.sj-help-topics > button[aria-pressed="true"] {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-help-topics > button > .sj-icon:first-child {
  color: var(--sj-blue);

  width: 42px;
  height: 42px;
  padding: 11px;
  border-radius: 13px 13px 13px 4px;
  background: var(--sj-blue-soft);
}
.sj-help-topics > button > .sj-icon:last-child {
  width: 16px;
  margin-left: auto;
  color: var(--sj-muted);
}
.sj-help-topics strong,
.sj-help-topics small {
  display: block;
}
.sj-help-topics strong {
  font-size: 13px;
}
.sj-help-topics small {
  font-size: 10px;
  color: var(--sj-muted);
  margin-top: 3px;
}
.sj-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 0.95fr);
  gap: 24px;
  align-items: start;
}
.sj-support-guidance {
  padding: 14px 16px;

  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 20px;

  background: var(--sj-accent-tint);
  color: var(--sj-text);
  border-left: 3px solid var(--sj-accent-ink);
  border-radius: 0 12px 12px 0;
}
.sj-inbox-tabs {
  margin: 0 0 14px;
}
.sj-inbox-tabs button {
  font-size: 11px;
  padding: 7px 15px;
}
.sj-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: var(--sj-muted);
}
.sj-ticket-meta .sj-icon {
  width: 16px;
  height: 16px;
}
.sj-unread-dot {
  color: var(--sj-blue);
  font-size: 10px;
  font-weight: 700;
}
.sj-selection-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 15px 0;
  padding: 12px 18px;
  border: 1px solid var(--sj-line);
  border-radius: 10px;
  background: var(--sj-card);
  font-size: 12px;
}
.sj-selection-toolbar button {
  border: 0;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  border-radius: 6px;
  padding: 7px 12px;
}
.sj-service-labels {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sj-service-favorite {
  border: 0;
  background: transparent;
  color: var(--sj-blue);
  padding: 5px 8px;
}
.sj-service-rate small {
  display: block;
  max-width: 130px;
  font-size: 10px;
  color: var(--sj-muted);
}
.sj-share-article {
  display: flex;
  gap: 15px;
  align-items: center;
  border-top: 1px solid var(--sj-line);
  margin-top: 35px;
  padding-top: 22px;
}
.sj-utility-page {
  width: 100%;
}
.sj-utility-page .container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.sj-utility-page .card {
  border: 1px solid var(--sj-line);

  margin-bottom: 20px;

  background: var(--sj-surface);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-utility-page .card-body {
  padding: 24px;
}
.sj-utility-page .card-header {
  border-bottom: 1px solid var(--sj-line);
  padding: 18px 24px;
  font-weight: 700;
}
.sj-utility-page .orders-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.sj-utility-page .search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.sj-utility-page .search-box--icon {
  display: none;
}
.sj-utility-page .btn-line-icon {
  padding: 11px 15px;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  color: var(--sj-text);
  border-radius: 9px;
}
.sj-utility-page .dropdown-menu {
  padding: 10px;
  border: 1px solid var(--sj-line);
  background: var(--sj-card);
  box-shadow: var(--sj-shadow);
  border-radius: 10px;
}
.sj-utility-page .dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sj-utility-page .dropdown-link {
  display: block;
  padding: 8px 12px;
  color: var(--sj-text);
  white-space: nowrap;
}
.sj-utility-page .order-date {
  color: var(--sj-muted);
  font-size: 11px;
  margin: 20px 0 10px;
}
.sj-utility-page .order-date-icon {
  margin-right: 8px;
}
.sj-utility-page .orders-card,
.sj-utility-page .updates-card {
  padding: 22px;
}
.sj-utility-page .oc-block,
.sj-utility-page .up-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.sj-utility-page .oc-block + .oc-block,
.sj-utility-page .up-block + .up-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sj-line);
}
.sj-utility-page .oc-first,
.sj-utility-page .oc-last,
.sj-utility-page .up-first {
  display: flex;
  gap: 14px;
  align-items: center;
}
.sj-utility-page .oc-first {
  min-width: 0;
}
.sj-utility-page .oc-name,
.sj-utility-page .up-name {
  font-weight: 600;
  font-size: 14px;
}
.sj-utility-page .oc-id,
.sj-utility-page .up-id {
  color: var(--sj-blue);
  font-size: 11px;
}
.sj-utility-page .oc-status {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  font-size: 10px;
  white-space: nowrap;
}
.sj-utility-page .oc-status.completed {
  background: #10b98115;
  color: #189671;
}
.sj-utility-page .oc-status.cancelled {
  background: #dc354515;
  color: #ca6173;
}
.sj-utility-page .oc-alt-first {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 12px;
}
.sj-utility-page .oc-link {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
.sj-utility-page .oc-item .icon {
  margin-right: 8px;
  color: var(--sj-muted);
}
.sj-utility-page .oc-item .primary-color {
  color: var(--sj-muted);
}
.sj-utility-page .account-menu .nav {
  gap: 10px;
  margin: 0 0 22px;
}
.sj-utility-page .account-content {
  max-width: 980px;
}
.sj-utility-page .account-content > form,
.sj-utility-page > .table {
  background: var(--sj-card);
  padding: 24px;
  border: 1px solid var(--sj-line);
  border-radius: 12px;
}
.sj-utility-page .aff-wrapper,
.sj-utility-page .aff-box {
  display: grid;
  gap: 20px;
}
.sj-utility-page .aff-stats,
.sj-utility-page .aff-body {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.sj-utility-page .aff-value {
  color: var(--sj-ink);
  font-size: 26px;
  font-weight: 700;
}
.sj-utility-page .aff-label {
  color: var(--sj-muted);
  font-size: 12px;
}
[data-copy-feedback] {
  position: relative;
}
[data-copy-feedback]:after {
  content: attr(data-copy-feedback);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--sj-ink);
  color: var(--sj-bg);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
}
.sj-referral-card {
  padding: 30px;
  background:
    radial-gradient(ellipse at 100% 0, var(--sj-mesh), transparent 60%),
    var(--sj-card);
}
.sj-referral-card h2 {
  font-size: 23px;
}
.sj-referral-link {
  display: flex;
  gap: 15px;
  max-width: 850px;
}
.sj-referral-link input {
  min-width: 0;
}
.sj-referral-link button {
  flex-shrink: 0;
}
.sj-referral-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.sj-referral-stats > section {
  padding: 22px;
}
.sj-referral-stats span {
  font-size: 12px;
  color: var(--sj-muted);
}
.sj-referral-stats strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
  color: var(--sj-ink);
}
.sj-legal-sections {
  display: grid;
  gap: 22px;
  margin-top: 25px;
}
.sj-legal-sections h2 {
  font-size: 26px;
}
.sj-catalog-range {
  display: flex;
  align-items: flex-end;
  gap: 15px;

  padding: 18px 24px;
  margin: 0;
  border-top: 1px solid var(--sj-line);
  border-radius: 0 0 21px 21px;
  background: var(--sj-soft);
  flex-wrap: wrap;
}
.sj-catalog-range label {
  font-size: 11px;
  max-width: 170px;
  margin: 0;
}
.sj-catalog-range input {
  margin-top: 5px;
}
.sj-catalog-range .sj-btn {
  height: 45px;
}
.sj-profile-strip .sj-avatar {
  border: 1px solid var(--sj-line);
  overflow: hidden;
  flex-shrink: 0;
}
.sj-profile-strip .sj-avatar [data-user-avatar] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sj-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-right: 9px;
  border-radius: 7px;
  vertical-align: middle;
  color: var(--sj-blue);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.sj-category-icon svg {
  width: 17px;
  height: 17px;
}
.sj-category-instagram {
  color: #d23d87;
}
.sj-category-youtube {
  color: #e63e50;
}
.sj-category-facebook,
.sj-category-linkedin {
  color: #347feb;
}
.sj-category-telegram {
  color: #218fca;
}
.sj-category-spotify {
  color: #159860;
}
.sj-category-twitch {
  color: #9a6dea;
}
.sj-category-discord {
  color: #828cf9;
}
.sj-category-kwai {
  color: #e87526;
}
.sj-category-tiktok,
.sj-category-twitter {
  color: var(--sj-ink);
}
.sj-category-api {
  color: #9a6dea;
}
.sj-category-internal {
  color: #218fca;
}
.sj-category-other {
  color: var(--sj-muted);
}
@media (min-width: 921px) {
  .sj-auth.sj-compact .sj-sidebar {
    width: 84px;
    padding-inline: 15px;
  }
  .sj-auth.sj-compact .sj-dashboard,
  .sj-auth.sj-compact .sj-workspace-footer {
    margin-left: 84px;
  }
  .sj-compact .sj-sidebar nav a {
    justify-content: center;
    padding: 12px;
  }
  .sj-compact .sj-sidebar nav a span,
  .sj-compact .sj-sidebar-label,
  .sj-compact .sj-sidebar-bottom > div {
    display: none;
  }
  .sj-compact .sj-sidebar > .sj-brand {
    margin-inline: 4px;
    width: 45px;
    overflow: hidden;
  }
  .sj-compact .sj-sidebar .sj-logo {
    min-width: 145px;
  }
  .sj-compact .sj-sidebar-bottom {
    padding-inline: 9px;
  }
}
@media (min-width: 1600px) {
  .sj-workspace-header {
    margin-inline: 282px 44px;
  }
  .sj-auth.sj-compact .sj-workspace-header {
    margin-left: 128px;
  }
  .sj-checkout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  }
  .sj-dashboard {
    padding-inline: 44px;
  }
  .sj-work-metrics strong {
    font-size: 23px;
  }
}
@media (max-width: 1150px) {
  .sj-sidebar {
    width: 210px;
    padding-inline: 14px;
  }
  .sj-workspace-footer {
    margin-left: 210px;
  }
  .sj-dashboard {
    margin-left: 210px;
    padding: 28px 24px 45px;
  }
  .sj-workspace-header {
    margin-inline: 234px 24px;
    padding-inline: 16px;
  }
  .sj-work-metrics > * {
    padding-inline: 16px;
    gap: 10px;
  }
  .sj-work-metrics strong {
    font-size: 17px;
  }
  .sj-metric-icon {
    padding: 8px;
  }
  .sj-checkout {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.85fr);
  }
  .sj-support-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sj-help-topics > button {
    padding: 15px;
    gap: 9px;
  }
  .sj-small-tag {
    font-size: 9px;
  }
  .sj-work-card-head h2 {
    font-size: 15px;
  }
  .sj-hero-login {
    padding: 26px;
  }
}
@media (max-width: 950px) {
  .sj-sidebar {
    transform: translateX(-100%);
    width: 238px;
  }
  .sj-sidebar.is-open {
    transform: translateX(0);
  }
  .sj-sidebar.is-open + .sj-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: #00104855;
    border: 0;
    z-index: 105;
  }
  .sj-workspace-menu {
    display: inline-flex;
  }
  .sj-workspace-footer,
  .sj-dashboard {
    margin-left: 0;
  }
  .sj-workspace-header {
    height: 68px;
    margin: 12px 25px 0;
    top: 10px;
  }
  .sj-dashboard {
    padding: 25px;
  }
  .sj-checkout-context {
    top: 88px;
  }
  .sj-shopping-start {
    gap: 45px;
  }
  .sj-hero-login .sj-form-meta {
    gap: 8px;
  }
}
@media (max-width: 760px) {
  .sj-workspace-header {
    padding: 0 11px;
    margin-inline: 16px;
    gap: 8px;
    border-radius: 17px;
  }

  .sj-workspace-header .sj-header-actions {
    gap: 7px;
  }
  .sj-dashboard {
    padding: 24px 16px 35px;
    min-height: calc(100vh - 130px);
  }
  .sj-workspace-footer {
    padding: 18px 16px;
    gap: 15px;
  }
  .sj-work-heading {
    align-items: flex-start;
    gap: 15px;
  }
  .sj-work-heading h1 {
    font-size: 27px;
  }
  .sj-work-heading p {
    font-size: 12px;
  }
  .sj-work-heading > .sj-btn {
    display: none;
  }
  .sj-overview-top {
    padding: 12px 16px;
  }
  .sj-work-metrics {
    grid-template-columns: 1fr 1fr;
    padding: 18px 0 0;
  }
  .sj-work-metrics > * {
    padding: 0 16px 18px;
  }
  .sj-work-metrics > :nth-child(2) {
    border-right: 0;
  }
  .sj-work-metrics > :last-child {
    grid-column: 1 / -1;
    border-top: 1px solid #ffffff16;
    padding: 14px 16px;
  }
  .sj-work-metrics > :last-child > div {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .sj-work-metrics > :last-child small {
    margin-left: auto;
  }
  .sj-work-metrics .sj-metric-icon {
    display: none;
  }
  .sj-work-metrics strong {
    font-size: 18px;
  }
  .sj-level-dialog {
    padding: 20px;
  }
  .sj-level-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sj-level-card-head {
    padding: 16px;
  }
  .sj-order-networks {
    gap: 7px;
  }
  .sj-order-networks > span {
    width: 100%;
  }
  .sj-order-networks button {
    padding: 8px 11px;
    font-size: 11px;
  }
  .sj-checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
  .sj-checkout-context {
    grid-column: 1;
    position: static;
    gap: 15px;
  }
  .sj-checkout-actions {
    flex-direction: column;
  }
  .sj-checkout-total #charge {
    font-size: 25px;
  }
  .sj-hero-login {
    max-width: none;
    padding: 24px;
    margin: 0;
  }
  .sj-shopping-start {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 45px 20px;
  }
  .sj-shopping-start > div > h2 {
    font-size: 30px;
  }
  .sj-shopping-start .sj-builder-wrap {
    padding: 0;
  }
  .sj-wallet-grid,
  .sj-support-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sj-wallet-overview .sj-order-guide {
    display: none;
  }
  .sj-wallet-card {
    padding: 24px;
  }
  .sj-wallet-card > strong {
    font-size: 32px;
  }
  .sj-wallet-card a {
    margin-top: 3px;
  }
  .sj-payment-options {
    grid-template-columns: 1fr;
  }
  .sj-referral-stats {
    grid-template-columns: 1fr 1fr;
  }
  .sj-referral-link,
  .sj-catalog-range {
    flex-wrap: wrap;
  }
  .sj-catalog-range label {
    flex: 1;
    max-width: none;
  }
  .sj-utility-page .oc-block,
  .sj-utility-page .oc-first {
    flex-wrap: wrap;
  }
  .sj-utility-page .orders-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .sj-help-topics {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px;
  }
  .sj-help-topics > button {
    padding: 13px 16px;
  }
  .sj-help-topics small {
    font-size: 11px;
  }
  .sj-ticket-compose {
    order: -1;
  }
  .sj-workspace-context strong {
    font-size: 11px;
    max-width: 115px;
  }
}

@media (max-width: 760px) {
  .sj-hero-login {
    grid-row: 1;
  }
  .sj-hero-copy {
    grid-row: 2;
  }
  .sj-hero .sj-hero-grid {
    gap: 35px;
  }
}

.sj-order-record {
  padding: 20px 24px;
  margin-bottom: 14px;
}
.sj-order-record-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin: 15px 0;
}
.sj-order-record-summary h2 {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.sj-order-record-summary p {
  font-size: 12px;
  color: var(--sj-muted);
  margin: 0;
}
.sj-order-record-details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sj-blue);
  font-size: 11px;
  cursor: pointer;
  border-top: 1px solid var(--sj-line);
  padding-top: 13px;
}
.sj-order-record-details > summary::-webkit-details-marker {
  display: none;
}
.sj-order-record-details > summary .sj-icon {
  width: 14px;
  height: 14px;
}
.sj-order-record-details[open] > summary {
  margin-bottom: 20px;
}
.sj-order-record .sj-history-actions:empty {
  display: none;
}
.sj-profile-strip {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px 25px;

  border: 1px solid var(--sj-line);

  margin-bottom: 26px;

  background: var(--sj-header-surface);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-card-shadow);
}
.sj-profile-strip > .sj-avatar {
  width: 48px;
  height: 48px;
  font-size: 19px;
}
.sj-profile-strip > div {
  margin-right: auto;
  min-width: 0;
}
.sj-profile-strip strong,
.sj-profile-strip > div > span {
  display: block;
}
.sj-profile-strip > div > span {
  font-size: 12px;
  color: var(--sj-muted);
  overflow-wrap: anywhere;
}
.sj-profile-strip > .sj-text-link {
  font-size: 11px;
}
.sj-settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.sj-settings-nav {
  display: grid;
  gap: 6px;
  position: sticky;
  top: 105px;

  padding: 8px;
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  background: var(--sj-surface);
}
.sj-settings-nav a {
  color: var(--sj-text);
  padding: 12px;
  border-radius: 7px;
  font-size: 12px;
}
.sj-settings-nav a:hover {
  background: var(--sj-card);
  color: var(--sj-blue);
}
.sj-settings-content {
  display: grid;
  gap: 20px;
  max-width: 900px;
}
.sj-settings-content h3 {
  font-size: 14px;
  margin: 20px 0 14px;
}
.sj-setting-intro {
  font-size: 12px;
  color: var(--sj-muted);
  margin-bottom: 20px;
}
.sj-settings-disclosure > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  padding: 23px 24px;
  gap: 18px;
  color: var(--sj-ink);
}
.sj-settings-disclosure > summary::-webkit-details-marker {
  display: none;
}
@media (max-width: 760px) {
  .sj-order-record {
    padding: 18px;
  }
  .sj-order-record-summary {
    display: block;
  }
  .sj-order-record-summary > .sj-btn {
    margin-top: 15px;
  }
  .sj-order-record-summary h2 {
    font-size: 16px;
  }
  .sj-profile-strip {
    padding: 18px;
    flex-wrap: wrap;
  }
  .sj-profile-strip > div {
    width: calc(100% - 66px);
  }
  .sj-profile-strip > .sj-btn {
    margin-left: 64px;
  }
  .sj-settings-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sj-settings-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    white-space: normal;
    padding: 8px;
  }
  .sj-settings-nav a {
    flex: 1 1 auto;
    font-size: 11px;
    background: var(--sj-card);
    border: 1px solid var(--sj-line);
    padding: 9px 12px;
  }
  .sj-settings-content {
    min-width: 0;
  }
}

.sj-work-card-head > a .sj-icon {
  padding: 0;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.sj-work-card-head .sj-brand-symbol {
  width: 33px;
  height: 33px;
}
.sj-settings-disclosure > summary > .sj-icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid var(--sj-line);
  border-radius: 50%;
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-settings-disclosure[open] > summary > .sj-icon {
  transform: rotate(180deg);
}
.sj-settings-disclosure[open] > summary {
  border-bottom: 1px solid var(--sj-line);
}
.sj-order-networks .sj-category-icon {
  width: 26px;
  height: 26px;
  margin-right: 0;
}
.sj-order-service {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
}
.sj-order-service > .sj-category-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 14px 14px 14px 4px;
}
.sj-order-service > .sj-category-icon svg {
  width: 24px;
  height: 24px;
}
.sj-order-service > div {
  min-width: 0;
}
.sj-help-topics > button:is(:hover, :focus-visible) {
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
@media (max-width: 760px) {
  .sj-work-card-head {
    padding: 18px;
  }
  .sj-work-card-body {
    padding: 18px;
  }
  .sj-guide-heading {
    padding-left: 20px;
  }
  .sj-order-guide ol {
    padding-inline: 20px;
  }
  .sj-guide-link {
    padding-inline: 20px;
  }
  .sj-checkout-confirm {
    padding: 15px;
  }
}

.sj-catalog-range p {
  flex: 1;
  min-width: 180px;
  max-width: 340px;
  font-size: 10px;
  color: var(--sj-muted);
  line-height: 1.7;
  margin: 0 auto 4px 0;
}
@media (max-width: 760px) {
  .sj-catalog-range {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .sj-catalog-range label,
  .sj-catalog-range input {
    width: 100%;
    min-width: 0;
  }
  .sj-catalog-range p,
  .sj-catalog-range .sj-btn {
    grid-column: 1 / -1;
  }
  .sj-catalog-range p {
    max-width: none;
    margin: 0;
  }
}

.sj-thread-back {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 15px;
}
.sj-thread-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--sj-line);
  border-radius: 9px;
  background: var(--sj-card);
  color: var(--sj-muted);
  font-size: 11px;
  white-space: nowrap;
}
.sj-thread-state .sj-icon {
  width: 16px;
  height: 16px;
}
.sj-thread-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
  gap: 24px;
}
.sj-thread-aside {
  display: grid;
  gap: 20px;
}
.sj-thread-summary {
  padding: 24px;
  border: 1px solid #6685af36;
  border-radius: var(--sj-radius);
  background:
    radial-gradient(ellipse at 100% 0, #42659175, transparent 75%), #17283e;
  color: #d1dceb;
  box-shadow: var(--sj-card-shadow);
}
.sj-thread-summary .sj-eyebrow {
  color: #a3c6ff;
  font-size: 9px;
}
.sj-thread-summary h2 {
  color: #fff;
  font-size: 19px;
  letter-spacing: -0.025em;
}
.sj-thread-summary dl {
  margin: 0;
}
.sj-thread-summary dl > div {
  padding: 15px 0;
  border-top: 1px solid #ffffff19;
}
.sj-thread-summary dl > div:last-child {
  padding-bottom: 0;
}
.sj-thread-summary dt {
  font-size: 10px;
  color: #98abc3;
  font-weight: 500;
  margin-bottom: 4px;
}
.sj-thread-summary dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.sj-conversation {
  display: grid;
  gap: 24px;
  padding: 28px 24px;
}
.sj-message {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 11px;
  width: min(92%, 820px);
  min-width: 0;
  margin-left: auto;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.sj-message-support {
  flex-direction: row;
  margin-left: 0;
  margin-right: auto;
}
.sj-thread-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid var(--sj-line);
  border-radius: 10px;
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
  font-weight: 800;
  font-size: 12px;
}
.sj-thread-avatar .sj-brand-symbol {
  width: 21px;
  height: 21px;
}
.sj-message-bubble {
  min-width: 0;
  flex: 1;
  padding: 19px 21px;
  border: 1px solid var(--sj-line);
  border-radius: 14px 3px 14px 14px;
  background: var(--sj-blue-soft);
}
.sj-message-support .sj-message-bubble {
  background: var(--sj-soft);
  border-radius: 3px 14px 14px 14px;
}
.sj-message header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 12px;
  font-size: 11px;
}
.sj-message header strong {
  color: var(--sj-ink);
}
.sj-message time,
.sj-message-role {
  font-size: 10px;
  color: var(--sj-muted);
  font-weight: 400;
}
.sj-message-content p:last-child {
  margin-bottom: 0;
}
.sj-message-content hr {
  border: 0;
  border-top: 1px solid var(--sj-line);
  margin: 16px 0;
}
.sj-message-content a {
  text-decoration: underline;
}
.sj-message-content img {
  max-width: 100%;
  border-radius: 8px;
}
.sj-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.sj-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--sj-line);
  border-radius: 8px;
  background: var(--sj-card);
  font-size: 11px;
}
.sj-attachments .sj-icon {
  width: 15px;
  height: 15px;
}
.sj-ticket-reply {
  padding: 24px;
  border-top: 1px solid var(--sj-line);
}
.sj-reply-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}
.sj-reply-heading h2 {
  font-size: 18px;
  letter-spacing: -0.025em;
  margin-bottom: 5px;
}
.sj-reply-heading p {
  color: var(--sj-muted);
  font-size: 12px;
  margin: 0;
}
.sj-reply-heading > .sj-icon {
  color: var(--sj-blue);
  width: 24px;
  height: 24px;
}
.sj-ticket-reply textarea {
  min-height: 125px;
  resize: vertical;
  line-height: 1.7;
}
.sj-reply-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.sj-reply-tools .tickets-uploader {
  margin: 0;
  flex: 1;
  min-width: 180px;
}
.sj-reply-tools > .sj-btn {
  min-height: 43px;
  padding: 11px 17px;
  font-size: 12px;
}
.sj-reply-tools #uploader-button {
  min-height: 40px;
  padding: 8px 10px !important;
  border: 1px solid var(--sj-line) !important;
  border-radius: 8px;
  background: var(--sj-soft) !important;
  color: var(--sj-text);
  font-size: 12px;
}
.sj-reply-tools #uploader-button:is(:hover, :focus-visible) {
  border-color: var(--sj-blue) !important;
  color: var(--sj-blue);
}
.sj-reply-tools .paperclip svg {
  width: 18px;
  height: 18px;
}
.sj-thread-empty {
  color: var(--sj-muted);
  font-size: 13px;
  margin: 0 !important;
}
.sj-ticket-closed {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid var(--sj-line);
  font-size: 13px;
}
.sj-ticket-closed p {
  margin: 5px 0 0;
  color: var(--sj-muted);
}
.sj-ticket-closed > .sj-icon {
  color: var(--sj-blue);
}
@media (max-width: 950px) {
  .sj-thread-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-thread-aside {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .sj-thread-heading {
    flex-wrap: wrap;
  }
  .sj-thread-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-thread > .sj-work-card-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sj-conversation {
    padding: 20px 16px;
    gap: 20px;
  }
  .sj-message {
    width: 100%;
    gap: 7px;
  }
  .sj-thread-avatar {
    flex-basis: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .sj-thread-avatar .sj-brand-symbol {
    width: 18px;
    height: 18px;
  }
  .sj-message-bubble {
    padding: 14px;
  }
  .sj-message time {
    width: 100%;
    font-size: 9px;
  }
  .sj-ticket-reply,
  .sj-ticket-closed {
    padding: 20px 16px;
  }
  .sj-reply-tools > .sj-btn {
    width: 100%;
  }
}

/* Native order data, presented once after each platform update. */
.sj-service-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 5px 0 0;
  border: 1px solid var(--sj-line);
  border-radius: 13px;
  overflow: hidden;
  background: var(--sj-card);
}
.sj-service-spec {
  padding: 14px 16px;
  border-bottom: 1px solid var(--sj-line);
  border-right: 1px solid var(--sj-line);
  min-width: 0;
}
.sj-service-spec:nth-child(even) {
  border-right: 0;
}
.sj-service-spec:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}
.sj-service-spec:last-child {
  border-bottom: 0;
}
.sj-service-spec dt {
  color: var(--sj-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 5px;
}
.sj-service-spec dt::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 0 6px 2px 0;
  background: var(--sj-blue);
}
.sj-spec-refill dt::before {
  background: #36b8a6;
}
.sj-spec-drop dt::before,
.sj-spec-cancel dt::before {
  background: #d8a451;
}
.sj-service-spec dd {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--sj-ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.sj-service-notes {
  margin-top: 16px;
  font-size: 12px;
  color: var(--sj-muted);
  line-height: 1.85;
}
.sj-spec-speed {
  background: linear-gradient(115deg, var(--sj-blue-soft), transparent);
}
.sj-spec-speed .sj-speed-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
}
.sj-speed-text {
  min-width: 0;
}
.sj-speed-lead,
.sj-speed-tail {
  display: block;
  font-size: 10px;
  color: var(--sj-muted);
  font-weight: 500;
  line-height: 1.5;
}
.sj-speed-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
}
.sj-speed-rate strong {
  color: var(--sj-blue);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.4;
}
.sj-speed-period {
  font-size: 11px;
  color: var(--sj-text);
  font-weight: 600;
}
.sj-speed-unparsed {
  font-size: 16px;
  font-weight: 700;
  color: var(--sj-blue);
}
.sj-speed-rhythm {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--sj-blue);
}
.sj-speed-rhythm i {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: currentColor;
}
.sj-speed-rhythm i:nth-child(1) {
  height: 7px;
  opacity: 0.2;
}
.sj-speed-rhythm i:nth-child(2) {
  height: 11px;
  opacity: 0.3;
}
.sj-speed-rhythm i:nth-child(3) {
  height: 15px;
  opacity: 0.4;
}
.sj-speed-rhythm i:nth-child(4) {
  height: 19px;
  opacity: 0.55;
}
.sj-speed-rhythm i:nth-child(5) {
  height: 23px;
  opacity: 0.7;
}
.sj-speed-rhythm i:nth-child(6) {
  height: 27px;
  opacity: 0.85;
}
.sj-speed-rhythm i:nth-child(7) {
  height: 32px;
}
@media (max-width: 600px) {
  .sj-speed-rate strong {
    font-size: 22px;
  }
  .sj-spec-speed .sj-speed-content {
    gap: 8px;
  }
  .sj-speed-rhythm {
    gap: 2px;
  }
  .sj-speed-rhythm i {
    width: 3px;
  }
}
@media (max-width: 480px) {
  .sj-spec-speed .sj-speed-content {
    display: block;
  }
  .sj-speed-rhythm {
    height: 16px;
    margin-top: 8px;
    transform: scaleY(0.5);
    transform-origin: bottom left;
  }
}
.sj-quantity-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 7px;
}
.sj-quantity-limits button {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--sj-blue);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--sj-blue) 40%, transparent);
  text-underline-offset: 4px;
  transition:
    color 0.2s,
    text-decoration-color 0.2s;
}
.sj-quantity-limits button:is(:hover, :focus-visible) {
  color: var(--sj-ink);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
.sj-priced-service {
  white-space: normal;
  line-height: 1.7;
}
.sj-option-price {
  display: inline;
  margin-left: 7px;
  color: var(--sj-blue);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sj-option-unit {
  color: var(--sj-muted);
  font-weight: 400;
  font-size: 0.93em;
}
.sj-shortfall {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 18px;
  margin: 18px 0;
  border: 1px solid color-mix(in srgb, #c79848 45%, var(--sj-line));
  border-radius: 14px;
  background: linear-gradient(115deg, #c7984818, var(--sj-card));
}
.sj-shortfall > .sj-icon {
  color: #c79848;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.sj-shortfall > div {
  flex: 1 1 210px;
  min-width: 0;
}
.sj-shortfall strong {
  font-size: 13px;
  color: var(--sj-ink);
}
.sj-shortfall p {
  font-size: 11px;
  margin: 4px 0;
  line-height: 1.7;
  color: var(--sj-muted);
}
.sj-shortfall .sj-btn {
  font-size: 12px;
  white-space: normal;
}
.sj-saved-order {
  padding: 20px;
  border: 1px solid var(--sj-line);
  border-top: 2px solid var(--sj-blue);
  border-radius: 16px;
  background: var(--sj-surface);
  margin: 0 0 22px;
}
.sj-saved-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.sj-saved-service {
  display: block;
  color: var(--sj-ink);
  font-size: 14px;
  line-height: 1.6;
}
.sj-text-button {
  padding: 3px;
  border: 0;
  background: none;
  color: var(--sj-muted);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}
.sj-text-button:hover {
  color: var(--sj-blue);
}
.sj-draft-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 15px 0;
  margin: 0;
}
.sj-draft-facts > div {
  min-width: 0;
  max-width: 100%;
}
.sj-draft-facts dt {
  color: var(--sj-muted);
  font-size: 10px;
  font-weight: 500;
}
.sj-draft-facts dd {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sj-ink);
  overflow-wrap: anywhere;
}
@media (max-width: 500px) {
  .sj-service-spec {
    padding: 11px;
  }
  .sj-service-spec dd {
    font-size: 12px;
  }
  .sj-shortfall {
    padding: 14px;
    gap: 10px;
  }
  .sj-shortfall > .sj-btn {
    width: 100%;
  }
}

.sj-child-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.sj-child-heading h1 {
  font-size: clamp(27px, 2.5vw, 38px);
  letter-spacing: -0.045em;
  margin: 10px 0;
}
.sj-child-heading p {
  max-width: 600px;
  margin: 0;
  color: var(--sj-muted);
  font-size: 13px;
  line-height: 1.7;
}
.sj-child-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--sj-line);
  border-radius: 25px;
  background: linear-gradient(145deg, var(--sj-surface), var(--sj-blue-soft));
  color: var(--sj-blue);
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-child-emblem > .sj-icon {
  width: 36px;
  height: 36px;
}
.sj-child-emblem > span {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--sj-blue);
  color: #fff;
  border: 4px solid var(--sj-bg);
  border-radius: 11px;
}
.sj-child-emblem > span .sj-icon {
  width: 15px;
  height: 15px;
}
.sj-child-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  align-items: start;
  gap: 24px;
}
.sj-child-side {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.sj-child-notice {
  margin-bottom: 24px;
}
.sj-child-layout-info {
  display: block;
}
.sj-child-layout-info .sj-child-side {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.sj-child-form {
  min-width: 0;
}
.sj-child-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.sj-child-form fieldset + fieldset {
  margin-top: 25px;
}
.sj-child-form legend {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px solid var(--sj-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--sj-ink);
}
.sj-child-form legend > span {
  color: var(--sj-blue);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.sj-child-form .form-group {
  margin-bottom: 18px;
}
.sj-child-form fieldset > .form-group:last-child,
.sj-child-passwords .form-group {
  margin-bottom: 0;
}
.sj-child-field-help {
  display: block;
  margin-top: 7px;
  color: var(--sj-muted);
  font-size: 11px;
  line-height: 1.5;
}
.sj-child-passwords {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.sj-child-checkout {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 22%, var(--sj-line));
  border-radius: 16px;
  background: linear-gradient(130deg, var(--sj-blue-soft), var(--sj-card));
}
.sj-child-price label {
  display: block;
  margin-bottom: 5px;
  color: var(--sj-muted);
  font-size: 11px;
}
.sj-child-price input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sj-ink);
  font-family: Manrope, sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.045em;
}
.sj-child-price > span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--sj-muted);
}
.sj-child-checkout > p {
  font-size: 11px;
  line-height: 1.6;
  margin: 16px 0;
  color: var(--sj-text);
}
.sj-child-dns {
  padding: 24px;
  background:
    radial-gradient(ellipse at 100% 0, var(--sj-blue-soft), transparent 70%),
    var(--sj-surface);
}
.sj-child-dns-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}
.sj-child-dns-symbol {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--sj-blue) 24%, var(--sj-line));
  border-radius: 13px;
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-child-dns-symbol .sj-icon {
  width: 22px;
  height: 22px;
}
.sj-child-dns-heading .sj-eyebrow {
  font-size: 8px;
}
.sj-child-dns-heading h2 {
  font-size: 20px;
  letter-spacing: -0.04em;
  margin: 4px 0 0;
}
.sj-child-dns > p {
  font-size: 12px;
  line-height: 1.7;
  margin: 18px 0;
  color: var(--sj-muted);
}
.sj-child-dns > p strong {
  font-weight: 600;
  color: var(--sj-text);
}
.sj-child-dns-records {
  display: grid;
  gap: 10px;
}
.sj-child-dns-record {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--sj-line);
  border-radius: 12px;
  background: var(--sj-field);
  box-shadow: 0 1px 0 var(--sj-surface-edge) inset;
}
.sj-child-dns-index {
  grid-column: 1;
  font-size: 8px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--sj-muted);
}
.sj-child-dns-record code {
  grid-column: 1;
  padding: 0;
  color: var(--sj-ink);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.sj-child-dns-record button {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sj-blue-soft);
  color: var(--sj-blue);
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}
.sj-child-dns-record button:is(:hover, :focus-visible) {
  border-color: var(--sj-blue);
  background: var(--sj-card);
}
.sj-child-dns-record button .sj-icon {
  width: 17px;
  height: 17px;
}
.sj-child-dns-steps {
  padding-left: 19px;
  margin: 20px 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--sj-muted);
}
.sj-child-dns-steps li {
  padding-left: 5px;
  margin-top: 8px;
}
.sj-child-dns-steps li::marker {
  color: var(--sj-blue);
  font-weight: 700;
}
.sj-child-timing {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--sj-line);
  padding-top: 17px;
}
.sj-child-timing > .sj-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sj-blue);
}
.sj-child-timing p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}
.sj-child-timing strong,
.sj-child-timing span {
  display: block;
}
.sj-child-timing strong {
  color: var(--sj-text);
  font-weight: 600;
}
.sj-child-timing span {
  margin-top: 3px;
  color: var(--sj-muted);
}
.sj-child-dns > .sj-guide-link {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--sj-line);
  border-radius: 11px;
  font-size: 11px;
}
.sj-child-faq > details + details {
  border-top: 1px solid var(--sj-line);
}
.sj-child-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  color: var(--sj-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.sj-child-faq summary::-webkit-details-marker {
  display: none;
}
.sj-child-faq summary > .sj-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sj-blue);
}
.sj-child-faq summary:is(:hover, :focus-visible),
.sj-child-faq details[open] > summary {
  color: var(--sj-blue);
  background: var(--sj-soft);
}
.sj-child-faq details[open] > summary > .sj-icon {
  transform: rotate(45deg);
}
.sj-child-faq details > div {
  padding: 0 22px 18px;
}
.sj-child-faq details p {
  margin: 0;
  font-size: 12px;
  color: var(--sj-muted);
  line-height: 1.75;
}
.sj-child-panels {
  display: grid;
  gap: 18px;
}
.sj-child-panel + .sj-child-panel {
  padding-top: 24px;
  border-top: 1px solid var(--sj-line);
}
.sj-child-panel-title {
  display: flex;
  align-items: center;
  gap: 13px;
}
.sj-child-panel-title > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-child-panel-title h3 {
  margin: 4px 0 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.sj-child-panel dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.sj-child-panel dt {
  font-size: 10px;
  color: var(--sj-muted);
  font-weight: 400;
}
.sj-child-panel dd {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sj-text);
  overflow-wrap: anywhere;
}
.sj-child-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sj-child-page .alert-danger {
  color: var(--sj-ink);
  background: color-mix(in srgb, #d26d58 12%, var(--sj-card));
  border-color: color-mix(in srgb, #d26d58 30%, var(--sj-line));
}
.sj-child-page .alert-success {
  color: var(--sj-ink);
  background: color-mix(in srgb, #24a77f 12%, var(--sj-card));
  border-color: color-mix(in srgb, #24a77f 30%, var(--sj-line));
}
@media (max-width: 1120px) {
  .sj-child-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-child-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (max-width: 760px) {
  .sj-child-heading {
    gap: 16px;
  }
  .sj-child-emblem {
    display: none;
  }
  .sj-child-side,
  .sj-child-layout-info .sj-child-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-child-layout {
    gap: 20px;
  }
  .sj-child-dns {
    padding: 20px;
  }
  .sj-child-passwords {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-child-checkout {
    padding: 18px;
  }
  .sj-child-form .sj-work-card-head {
    flex-wrap: wrap;
  }
  .sj-child-panel dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 380px) {
  .sj-child-dns-record {
    padding: 12px;
    gap: 3px 6px;
  }
  .sj-child-dns-record code {
    font-size: 12px;
  }
  .sj-child-dns-record button {
    width: 30px;
  }
}

.sj-service-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 8px;
}
.sj-service-heading label {
  margin: 0;
}
.sj-quality-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  padding: 4px 0;
  color: var(--sj-blue);
  background: transparent;
  font:
    650 12px/1.5 "DM Sans",
    sans-serif;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.sj-quality-link .sj-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.sj-quality-link:hover {
  color: var(--sj-blue-hover);
}
.sj-quality-link:hover .sj-icon {
  transform: translateY(-2px);
}
.sj-quality-link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sj-service-resources {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 20px;
  align-items: start;
  border-top: 1px solid var(--sj-line);
  padding-top: 12px;
}
.sj-service-resources .sj-service-details {
  grid-column: 1 / -1;
  grid-row: 1;
  border: 0;
  padding: 0;
}
.sj-service-resources .sj-service-details summary {
  max-width: calc(100% - 140px);
  min-height: 34px;
}
.sj-service-resources > .sj-quality-link {
  grid-column: 2;
  grid-row: 1;
}
.sj-service-resources:not(:has(details)):not(
    :has(.sj-quality-link:not([hidden]))
  ) {
  display: none;
}
.sj-quality-open {
  overflow: hidden;
}
.sj-quality-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  height: min(860px, calc(100dvh - 48px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--sj-line);
  border-radius: 22px;
  background: var(--sj-card);
  color: var(--sj-text);
  box-shadow: 0 30px 100px #0006;
  overflow: hidden;
}
.sj-quality-dialog[open] {
  display: flex;
  flex-direction: column;
}
.sj-quality-dialog::backdrop {
  background: #061222b8;
  backdrop-filter: blur(7px);
}
.sj-quality-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 26px 20px;
  background: var(--sj-surface);
}
.sj-quality-header .sj-eyebrow {
  font-size: 9px;
  margin-bottom: 8px;
}
.sj-quality-header h2 {
  font-size: 23px;
  margin: 0;
}
.sj-quality-close,
.sj-quality-pagination button,
.sj-quality-pages button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--sj-line);
  border-radius: 10px;
  background: var(--sj-card);
  color: var(--sj-text);
  font:
    650 12px/1 "DM Sans",
    sans-serif;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.sj-quality-dialog button:focus-visible,
.sj-quality-link:focus-visible,
.sj-quality-viewport:focus-visible {
  outline: 2px solid var(--sj-blue);
  outline-offset: 3px;
}
.sj-quality-close:hover,
.sj-quality-pagination button:enabled:hover,
.sj-quality-pages button:hover {
  color: var(--sj-blue);
  border-color: var(--sj-blue);
  background: var(--sj-blue-soft);
}
.sj-quality-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}
.sj-quality-close .sj-icon {
  width: 18px;
  height: 18px;
}
.sj-quality-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 26px;
  border-block: 1px solid var(--sj-line);
}
.sj-quality-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sj-quality-pagination [data-quality-prev] .sj-icon {
  transform: rotate(90deg);
}
.sj-quality-pagination [data-quality-next] .sj-icon {
  transform: rotate(-90deg);
}
.sj-quality-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--sj-soft);
  scrollbar-color: var(--sj-line) transparent;
}
.sj-quality-viewport img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  background: #fff;
}
.sj-quality-viewport.is-enlarged img {
  width: max(100%, min(1100px, 200vw));
}
.sj-quality-loading,
.sj-quality-error {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--sj-muted);
}
.sj-quality-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  border-top: 1px solid var(--sj-line);
}
.sj-quality-footer p {
  margin: 0;
  font-size: 11px;
  color: var(--sj-muted);
}
.sj-quality-pages {
  display: flex;
  gap: 6px;
}
.sj-quality-pages button[aria-pressed="true"] {
  background: var(--sj-blue-soft);
  border-color: var(--sj-blue);
  color: var(--sj-blue);
}
@media (max-width: 600px) {
  .sj-quality-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 24px);
    border-radius: 16px;
  }
  .sj-quality-header {
    padding: 18px 16px;
  }
  .sj-quality-header h2 {
    font-size: 20px;
  }
  .sj-quality-header .sj-eyebrow {
    letter-spacing: 0.03em;
  }
  .sj-quality-toolbar {
    padding: 8px 16px;
  }
  .sj-quality-footer {
    padding: 14px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .sj-quality-close,
  .sj-quality-pagination button,
  .sj-quality-pages button {
    width: 40px;
    height: 40px;
  }
  .sj-service-resources {
    gap: 0 10px;
  }
  .sj-service-resources .sj-service-details summary {
    max-width: calc(100% - 120px);
  }
  .sj-service-resources .sj-quality-link {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sj-quality-link,
  .sj-quality-link .sj-icon,
  .sj-quality-dialog button {
    transition: none;
  }
}