/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --tw-spacing: 0.25rem;
  --tw-container-md: 28rem;
  --tw-container-xl: 36rem;
  --tw-container-2xl: 42rem;
  --tw-text-xs: 0.75rem;
  --tw-text-xs--line-height: calc(1 / 0.75);
  --tw-text-sm: 0.875rem;
  --tw-text-sm--line-height: calc(1.25 / 0.875);
  --tw-font-weight-semibold: 600;
  --tw-radius-sm: 0.25rem;
  --tw-radius-lg: 0.5rem;
  --tw-radius-xl: 0.75rem;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ch-accent: #d9dadd;
  --ch-accent-hover: #f5f5f5;
}
:root[data-accent="diamond"] {
  --ch-accent: hsl(184 78% 56%);
  --ch-accent-hover: hsl(184 78% 66%);
}
:root[data-accent="emerald"] {
  --ch-accent: hsl(150 60% 50%);
  --ch-accent-hover: hsl(150 60% 60%);
}
:root[data-accent="amethyst"] {
  --ch-accent: hsl(266 85% 74%);
  --ch-accent-hover: hsl(266 85% 82%);
}
:root[data-accent="gold"] {
  --ch-accent: hsl(42 92% 58%);
  --ch-accent-hover: hsl(42 92% 68%);
}
:root[data-accent="redstone"] {
  --ch-accent: hsl(2 80% 63%);
  --ch-accent-hover: hsl(2 80% 71%);
}
:root {
  color-scheme: dark;
  --ch-bg: #111317;
  --ch-surface: #191c21;
  --ch-surface-2: #22262c;
  --ch-surface-3: #2a2f36;
  --ch-elevated: #22262c;
  --ch-elevated-hover: #2a2f36;
  --ch-input: #111317;
  --ch-line: #343941;
  --ch-line-strong: #3f454e;
  --ch-fg: #f5f5f5;
  --ch-muted: #a0a5ae;
  --ch-faint: #7a808a;
  --ch-primary: var(--ch-accent);
  --ch-primary-text: var(--ch-accent);
  --ch-on-primary: #111317;
  --ch-primary-hover: var(--ch-accent-hover);
  --ch-ok: #38b879;
  --ch-warn: #e8b45b;
  --ch-bad: #e25f5a;
  --ch-info: #639ae3;
  --ch-overlay-hover: rgb(255 255 255 / 0.03);
  --ch-shadow: 0 12px 32px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
  --ch-primary-soft: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-primary-soft: color-mix(in srgb, var(--ch-primary) 14%, transparent);
  }
  --ch-primary-line: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-primary-line: color-mix(in srgb, var(--ch-primary) 45%, transparent);
  }
  --ch-primary-ring: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-primary-ring: color-mix(in srgb, var(--ch-primary) 30%, transparent);
  }
  --ch-ok-soft: var(--ch-ok);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-ok-soft: color-mix(in srgb, var(--ch-ok) 14%, transparent);
  }
  --ch-warn-soft: var(--ch-warn);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-warn-soft: color-mix(in srgb, var(--ch-warn) 15%, transparent);
  }
  --ch-bad-soft: var(--ch-bad);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-bad-soft: color-mix(in srgb, var(--ch-bad) 14%, transparent);
  }
  --ch-info-soft: var(--ch-info);
  @supports (color: color-mix(in lab, red, red)) {
    --ch-info-soft: color-mix(in srgb, var(--ch-info) 14%, transparent);
  }
  --ch-radius-sm: 6px;
  --ch-radius: 8px;
  --ch-radius-lg: 10px;
  --ch-radius-xl: 16px;
  --ch-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ch-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --white: var(--ch-surface);
  --neutral-50: var(--ch-surface-2);
  --neutral-100: var(--ch-surface-2);
  --neutral-200: var(--ch-line);
  --neutral-300: var(--ch-line-strong);
  --neutral-400: var(--ch-faint);
  --neutral-500: var(--ch-muted);
  --neutral-600: var(--ch-muted);
  --neutral-700: var(--ch-fg);
  --neutral-800: var(--ch-fg);
  --neutral-900: var(--ch-fg);
  --neutral-950: var(--ch-fg);
  --primary-50: var(--ch-primary-soft);
  --primary-100: var(--ch-primary-soft);
  --primary-200: var(--ch-primary-line);
  --primary-300: var(--ch-primary-line);
  --primary-400: var(--ch-primary);
  --primary-500: var(--ch-primary);
  --primary-600: var(--ch-primary);
  --primary-700: var(--ch-primary-hover);
  --primary-800: var(--ch-primary-hover);
  --primary-900: var(--ch-primary-hover);
  --primary-950: var(--ch-primary-hover);
  --primary: var(--ch-primary);
  --primary-lifted: var(--ch-primary-hover);
  --primary-accented: var(--ch-primary-hover);
  --secondary: var(--ch-muted);
  --secondary-lifted: var(--ch-fg);
  --secondary-accented: var(--ch-fg);
  --success: var(--ch-ok);
  --success-lifted: var(--ch-ok);
  --success-accented: var(--ch-ok);
  --info: var(--ch-info);
  --info-lifted: var(--ch-info);
  --info-accented: var(--ch-info);
  --notice: var(--ch-primary);
  --notice-lifted: var(--ch-primary-hover);
  --notice-accented: var(--ch-primary-hover);
  --warning: var(--ch-warn);
  --warning-lifted: var(--ch-warn);
  --warning-accented: var(--ch-warn);
  --error: var(--ch-bad);
  --error-lifted: var(--ch-bad);
  --error-accented: var(--ch-bad);
  --grayscale: var(--ch-fg);
  --grayscale-lifted: var(--ch-fg);
  --grayscale-accented: var(--ch-muted);
  --neutral: var(--ch-muted);
  --neutral-lifted: var(--ch-fg);
  --neutral-accented: var(--ch-fg);
  --text-inverted: var(--ch-on-primary);
  --text-muted: var(--ch-faint);
  --text-lifted: var(--ch-muted);
  --text-accented: var(--ch-muted);
  --text: var(--ch-fg);
  --border-muted: var(--ch-line);
  --border: var(--ch-line-strong);
  --border-lifted: var(--ch-line-strong);
  --border-accented: var(--ch-muted);
  --bg: var(--ch-surface);
  --bg-muted: var(--ch-surface-2);
  --bg-lifted: var(--ch-surface-2);
  --bg-accented: var(--ch-surface-3);
  --bg-inverted: var(--ch-fg);
  --rounding-sm: var(--ch-radius-sm);
  --rounding-md: var(--ch-radius);
  --rounding-lg: var(--ch-radius-lg);
}
html {
  font-size: 16px;
  scroll-padding-top: 84px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.crafto, body.crafto.primary-bg-color {
  background-color: var(--ch-bg);
  color: var(--ch-fg);
  font-family: var(--ch-font);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.crafto ::selection {
  background: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--ch-primary) 32%, transparent);
  }
}
.crafto :where(a) {
  color: var(--ch-primary-text);
}
.crafto :where(a):hover {
  color: var(--ch-primary-text);
}
.crafto .primary-content :where(p, li, dd, td, .card-text, .markdown-content) > a:not([class]) {
  text-decoration: underline;
  text-decoration-color: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  text-underline-offset: 3px;
}
.crafto :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--ch-fg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.crafto hr {
  border-top-color: var(--ch-line);
}
.crafto small, .crafto .small {
  font-size: 0.8125rem;
}
.crafto code {
  color: var(--ch-primary-text);
  font-family: var(--ch-mono);
}
.crafto pre {
  background: var(--ch-surface-2);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  color: var(--ch-fg);
  padding: 12px 14px;
}
.crafto kbd {
  background: var(--ch-surface-3);
  color: var(--ch-fg);
}
.ch-container, .crafto .container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (max-width: 575.98px) {
  .ch-container, .crafto .container {
    padding-inline: 16px;
  }
}
.ch-scope :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
}
.ch-scope :where(ul, ol) {
  list-style: none;
  padding: 0;
}
.ch-scope :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  line-height: 1.3;
  letter-spacing: normal;
}
.ch-scope :where(img, svg) {
  max-width: 100%;
}
.ch-adminbar {
  background: var(--ch-warn-soft);
  border-bottom: 1px solid var(--ch-warn);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--ch-warn) 30%, transparent);
  }
  color: var(--ch-fg);
  font-size: 13px;
  padding: 7px 0;
}
.ch-adminbar a {
  color: var(--ch-warn);
  font-weight: 600;
}
.ch-promo {
  background: var(--ch-primary);
  color: var(--ch-on-primary);
  font-size: 14px;
  font-weight: 500;
}
.crafto .ch-promo a {
  color: inherit;
}
.ch-code {
  background: rgb(0 0 0 / 0.14);
  border-radius: 4px;
  color: inherit;
  font-family: var(--ch-mono);
  font-size: 0.92em;
  font-weight: 700;
  padding: 1px 6px;
}
.ch-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-line);
}
.ch-header.is-scrolled {
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}
.ch-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--ch-fg);
  text-decoration: none;
}
.crafto .ch-logo, .crafto .ch-logo:hover {
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-logo-img {
  display: block;
  height: 32px;
  width: auto;
}
.ch-mark {
  display: block;
  width: 26px;
  height: 30px;
  background: url("../img/logo-mark-dark.png") center / contain no-repeat;
}
.ch-wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.ch-wordmark-dim {
  color: var(--ch-muted);
  font-weight: 600;
}
.ch-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ch-radius-sm);
  background: transparent;
  color: var(--ch-muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.crafto .ch-nav-link {
  color: var(--ch-muted);
}
.crafto .ch-nav-link:hover, .crafto .ch-nav-link:focus-visible, .crafto .show > .ch-nav-link {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-nav-link.dropdown-toggle::after {
  margin-left: 0;
  border-top-width: 4px;
  border-right-width: 4px;
  border-left-width: 4px;
  opacity: 0.7;
}
.ch-icon-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  background: transparent;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.crafto .ch-icon-btn {
  color: var(--ch-muted);
}
.crafto .ch-icon-btn:hover, .crafto .show > .ch-icon-btn {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-locale {
  width: auto;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.ch-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ch-primary);
  color: var(--ch-on-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ch-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--ch-surface-3);
  color: var(--ch-fg);
  font-size: 11px;
  font-weight: 600;
}
.ch-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ch-primary-soft);
  color: var(--ch-primary-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ch-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.crafto .ch-menu {
  min-width: 210px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-elevated);
  box-shadow: var(--ch-shadow);
  font-size: 14px;
}
.crafto .ch-menu-wide {
  min-width: 290px;
}
.crafto .ch-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--ch-radius-sm);
  color: var(--ch-fg);
  white-space: normal;
}
.crafto .ch-menu .dropdown-item:hover, .crafto .ch-menu .dropdown-item:focus {
  background: var(--ch-elevated-hover);
  color: var(--ch-fg);
}
.crafto .ch-menu .ch-menu-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ch-menu-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.ch-menu-hint {
  color: var(--ch-muted);
  font-size: 12.5px;
}
.ch-menu-empty {
  display: block;
  padding: 12px 10px;
  color: var(--ch-muted);
}
.ch-mobile-nav {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 16px;
  border-top: 1px solid var(--ch-line);
}
.crafto .ch-mobile-nav > a {
  padding: 11px 0;
  border-bottom: 1px solid var(--ch-line);
  color: var(--ch-fg);
  font-weight: 500;
  text-decoration: none;
}
.crafto .ch-mobile-nav > a.ch-mobile-sub {
  padding-left: 12px;
  color: var(--ch-muted);
  font-weight: 400;
}
.ch-mobile-heading {
  padding: 16px 0 6px;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ch-breadcrumb {
  border-bottom: 1px solid var(--ch-line);
  padding: 11px 0;
  font-size: 13.5px;
}
.crafto .ch-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.crafto .breadcrumb-item a {
  color: var(--ch-muted);
}
.crafto .breadcrumb-item a:hover {
  color: var(--ch-fg);
}
.crafto .breadcrumb-item.active {
  color: var(--ch-fg);
}
.crafto .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ch-faint);
  content: "/";
}
.crafto #main-body.ch-main {
  min-height: 60vh;
  padding: 32px 0 64px;
}
.crafto #main-body.ch-home {
  min-height: 0;
  padding: 0;
}
.ch-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--ch-line);
  background: var(--ch-bg);
  color: var(--ch-fg);
}
.ch-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  left: max(-60px, calc((100% - 1320px) / 2 - 60px));
  width: 460px;
  height: 534px;
  background: var(--ch-fg);
  opacity: 0.045;
  pointer-events: none;
  -webkit-mask: url("../img/footer-mark.png") center / contain no-repeat;
  mask: url("../img/footer-mark.png") center / contain no-repeat;
}
@media (max-width: 767.98px) {
  .ch-footer::before {
    top: -40px;
    left: -70px;
    width: 300px;
    height: 348px;
  }
}
.ch-footer-brand {
  padding-top: 56px;
}
.ch-footer-tagline {
  max-width: 24rem;
  margin: 14px 0 0;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1.55;
}
.ch-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 12px 0 0 -6px !important;
}
.ch-footer-social:empty {
  display: none;
}
.ch-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
  padding-block: 40px 56px;
}
@media (min-width: 640px) {
  .ch-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ch-footer-cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.ch-footer-title, .crafto .ch-footer .ch-footer-title {
  margin: 0 0 14px;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-footer-links li + li {
  margin-top: 10px;
}
.crafto .ch-footer-links a {
  color: var(--ch-fg);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--ch-fg) 88%, var(--ch-muted));
  }
  font-size: 14px;
  text-decoration: none;
}
.crafto .ch-footer-links a:hover {
  color: var(--ch-fg);
  text-decoration: underline;
  text-decoration-color: var(--ch-faint);
  text-underline-offset: 3px;
}
.ch-footer-ext {
  margin-left: 6px;
  color: var(--ch-faint);
  font-size: 10px;
  vertical-align: 1px;
}
.ch-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--ch-line);
  color: var(--ch-muted);
  font-size: 14px;
}
.ch-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.crafto .ch-footer .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: var(--ch-radius);
  background: transparent;
  color: var(--ch-muted);
  font-size: 17px;
}
.crafto .ch-footer .btn-icon:hover {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
}
.ch-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ch-muted);
  font: inherit;
  cursor: pointer;
}
.ch-link-btn:hover {
  color: var(--ch-fg);
}
.ch-h1 {
  color: var(--ch-fg);
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.125rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.ch-h2 {
  color: var(--ch-fg);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.crafto .ch-scope .ch-h1, .crafto .ch-scope .ch-h2 {
  margin: 0;
}
.ch-lead {
  max-width: 36rem;
  color: var(--ch-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.ch-sub {
  color: var(--ch-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.ch-label {
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.crafto .ch-scope .ch-label {
  font-size: 12px;
}
.ch-link, .crafto .ch-link {
  color: var(--ch-primary-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  }
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ch-link:hover, .crafto .ch-link:hover {
  color: var(--ch-primary-text);
  text-decoration-color: currentColor;
}
.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--ch-radius);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ch-btn:hover {
  text-decoration: none;
}
.ch-btn:focus-visible, .ch-nav-link:focus-visible, .ch-icon-btn:focus-visible, .ch-period:focus-visible, .ch-chip-link:focus-visible, .ch-app-link:focus-visible, .ch-app-sub a:focus-visible, .ch-app-panel:focus-visible, .ch-topbar-user:focus-visible, .ch-card-link:focus-visible, .ch-faq summary:focus-visible {
  outline: 2px solid var(--ch-primary);
  outline-offset: 2px;
}
.ch-btn-primary, .crafto .ch-btn-primary, .crafto .ch-btn-primary:hover, .crafto .ch-btn-primary:focus {
  background: var(--ch-primary);
  border-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.ch-btn-primary:hover, .crafto .ch-btn-primary:hover {
  background: var(--ch-primary-hover);
  border-color: var(--ch-primary-hover);
}
.ch-btn-secondary, .crafto .ch-btn-secondary, .crafto .ch-btn-secondary:focus {
  background: transparent;
  border-color: var(--ch-line);
  color: var(--ch-fg);
}
.ch-btn-secondary:hover, .crafto .ch-btn-secondary:hover {
  background: var(--ch-surface-2);
  border-color: var(--ch-line-strong);
  color: var(--ch-fg);
}
.ch-btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
}
.ch-btn-lg {
  height: 46px;
  padding: 0 22px;
  font-size: 15.5px;
}
.ch-btn-block {
  display: flex;
  width: 100%;
}
.ch-btn.is-disabled, .ch-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.ch-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  color: var(--ch-fg);
}
a.ch-card, .crafto a.ch-card {
  display: block;
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-card-link {
  transition: border-color 0.15s, background-color 0.15s;
}
.ch-card-link:hover, .crafto .ch-card-link:hover {
  border-color: var(--ch-line-strong);
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ch-radius);
  background: var(--ch-primary-soft);
  color: var(--ch-primary-text);
  font-size: 16px;
}
.ch-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ch-radius-sm);
  background: var(--ch-primary);
  color: var(--ch-on-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ch-badge.is-muted {
  background: var(--ch-surface-3);
  color: var(--ch-muted);
}
.ch-chip-link, .crafto .ch-chip-link {
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-chip-link:hover, .crafto .ch-chip-link:hover {
  border-color: var(--ch-line-strong);
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-chip-link.is-active, .crafto .ch-chip-link.is-active {
  border-color: var(--ch-primary);
  background: var(--ch-primary);
  color: var(--ch-on-primary);
}
.ch-select {
  height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--ch-line-strong);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 12px;
  color: var(--ch-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ch-select:focus {
  border-color: var(--ch-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.ch-plans-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}
.ch-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}
.ch-period {
  position: relative;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  color: var(--ch-muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.ch-period:hover {
  border-color: var(--ch-line-strong);
  color: var(--ch-fg);
}
.ch-period.is-active {
  border-color: var(--ch-primary);
  background: var(--ch-primary);
  color: var(--ch-on-primary);
}
.ch-period-badge {
  position: absolute;
  top: -12px;
  right: -8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #f5d33f;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.35);
  color: #15171a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-4deg);
  pointer-events: none;
}
@media (max-width: 639.98px) {
  .ch-periods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 10px;
    width: 100%;
  }
  .ch-period {
    width: 100%;
    padding: 0 10px;
  }
}
.ch-plan-sections {
  display: grid;
  gap: 24px;
  margin-top: 36px;
}
.ch-tier {
  --tier: var(--ch-surface);
  --tier-tint: rgb(0 0 0 / 0.5);
  --tier-tint-strong: rgb(0 0 0 / 0.8);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 32px 32px;
  border-radius: var(--ch-radius-xl);
  background-color: var(--tier);
}
.ch-tier::before, .ch-tier::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ch-tier::before {
  z-index: -2;
  background: var(--tier-art, none) center / cover no-repeat;
}
.ch-tier::after {
  z-index: -1;
  background: linear-gradient(90deg, var(--tier-tint-strong) 0%, var(--tier-tint) 55%, transparent 100%), linear-gradient(180deg, transparent 0%, var(--tier-tint) 70%, var(--tier-tint-strong) 100%);
}
.ch-tier.is-grass {
  --tier: #2d5a22;
  --tier-art: url("../img/home/tier-grass.webp");
  --tier-tint: rgb(30 72 24 / 0.5);
  --tier-tint-strong: rgb(24 58 19 / 0.88);
}
.ch-tier.is-nether {
  --tier: #6e2412;
  --tier-art: url("../img/home/tier-nether.webp");
  --tier-tint: rgb(120 38 14 / 0.42);
  --tier-tint-strong: rgb(92 26 10 / 0.88);
}
.ch-tier-head {
  max-width: 560px;
  margin-bottom: 32px;
}
.ch-tier-title, .crafto .ch-scope .ch-tier-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}
.ch-tier-text {
  margin-top: 6px;
  color: rgb(255 255 255 / 0.9);
  font-size: 15px;
  line-height: 1.55;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}
.ch-tier .ch-pc {
  border-color: rgb(0 0 0 / 0.28);
  box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.75);
}
.ch-tier .ch-pc.is-popular {
  border-color: var(--pc);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--pc) 60%, transparent);
  }
}
@media (max-width: 639.98px) {
  .ch-tier {
    padding: 22px 14px 14px;
    border-radius: 14px;
  }
  .ch-tier::before {
    bottom: auto;
    height: 360px;
  }
  .ch-tier::after {
    background: linear-gradient(180deg, var(--tier-tint) 0%, var(--tier-tint) 120px, var(--tier) 360px);
  }
  .ch-tier-head {
    margin-bottom: 18px;
    padding-inline: 4px;
  }
}
.ch-pc-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .ch-pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ch-pc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ch-pc {
  --pc: var(--ch-fg);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-xl);
  background: radial-gradient(120% 70% at 0% 0%, var(--pc) 0%, transparent 60%), linear-gradient(180deg, var(--ch-surface-2) 0%, var(--ch-surface) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--pc) 7%, transparent) 0%, transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--ch-surface-2) 55%, var(--ch-surface)) 0%, var(--ch-surface) 100%);
  }
  color: var(--ch-fg);
  transition: border-color 0.15s;
}
.ch-pc:hover {
  border-color: var(--ch-line-strong);
}
.ch-pc.is-popular {
  border-color: var(--pc);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--pc) 55%, var(--ch-line));
  }
}
.ch-pc.is-grass {
  --pc: #7cc95f;
}
.ch-pc.is-stone {
  --pc: #b9bdc4;
}
.ch-pc.is-coal {
  --pc: #a3a8b0;
}
.ch-pc.is-iron {
  --pc: #e4e6ea;
}
.ch-pc.is-copper {
  --pc: #ec9a6c;
}
.ch-pc.is-gold {
  --pc: #f4ca4c;
}
.ch-pc.is-redstone {
  --pc: #f2685a;
}
.ch-pc.is-lapis {
  --pc: #7895f2;
}
.ch-pc.is-emerald {
  --pc: #42d983;
}
.ch-pc.is-diamond {
  --pc: #5fe0d8;
}
.ch-pc.is-amethyst {
  --pc: #bd93f5;
}
.ch-pc.is-obsidian {
  --pc: #a88ef0;
}
.ch-pc.is-netherite {
  --pc: #c9b6c2;
}
.ch-pc.is-beacon {
  --pc: #8ef4ee;
}
.ch-pc-flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 14px;
  border-bottom-left-radius: 12px;
  background: var(--pc);
  color: #111317;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ch-pc-flag.is-muted {
  background: var(--ch-surface-3);
  color: var(--ch-muted);
}
.ch-pc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ch-line);
}
.ch-pc-pic {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.45));
}
.ch-pc.is-out .ch-pc-pic {
  opacity: 0.6;
}
.ch-pc-name, .crafto .ch-scope .ch-pc-name {
  margin: 0;
  color: var(--pc);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ch-pc-ram {
  margin-top: 2px;
  line-height: 1.15;
}
.ch-pc-ram-value {
  color: var(--ch-fg);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ch-pc-ram-label {
  color: var(--ch-muted);
  font-size: 14px;
  font-weight: 600;
}
.ch-pc-summary {
  margin-top: 16px;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1.55;
}
.ch-pc-features {
  display: grid;
  gap: 11px;
  margin: 18px 0 22px;
}
.ch-pc-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1.4;
}
.ch-pc-features i {
  flex-shrink: 0;
  width: 18px;
  color: var(--ch-ok);
  font-size: 14px;
  text-align: center;
}
.ch-pc-features strong {
  color: var(--ch-fg);
  font-weight: 600;
}
.ch-pc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ch-line);
}
.ch-pc-price {
  min-width: 0;
}
.ch-pc-from {
  display: block;
  margin-bottom: 2px;
  color: var(--ch-muted);
  font-size: 12.5px;
}
.ch-pc-amount[hidden] {
  display: none;
}
.ch-pc-value {
  color: var(--ch-fg);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ch-pc-per {
  margin-left: 3px;
  color: var(--ch-muted);
  font-size: 14px;
  font-weight: 500;
}
.ch-pc-billed {
  margin-top: 4px;
  color: var(--ch-muted);
  font-size: 12px;
}
.ch-pc-buy {
  flex-shrink: 0;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
}
.ch-pc-buy i {
  font-size: 12px;
  transition: transform 0.15s;
}
.ch-pc-buy:hover i {
  transform: translateX(2px);
}
@media (max-width: 479.98px) {
  .ch-pc {
    padding: 20px;
  }
}
.ch-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  color: var(--ch-fg);
}
.ch-plan.is-popular {
  border-color: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-primary) 60%, var(--ch-line));
  }
}
.ch-plan-name, .crafto .ch-plan-name {
  margin: 0;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ch-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin: 14px 0 0;
}
.ch-plan-amount {
  color: var(--ch-fg);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.ch-plan-per {
  color: var(--ch-muted);
  font-size: 14px;
}
.ch-plan-from, .ch-plan-setup {
  width: 100%;
  color: var(--ch-muted);
  font-size: 12.5px;
}
.ch-plan-setup {
  margin-top: 4px;
}
.ch-specs, .crafto .ch-specs {
  margin: 18px 0 0;
  border-top: 1px solid var(--ch-line);
}
.ch-spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ch-line);
  font-size: 14px;
}
.ch-spec:last-child {
  border-bottom: 0;
}
.crafto .ch-spec dt {
  margin: 0;
  color: var(--ch-muted);
  font-weight: 400;
}
.crafto .ch-spec dd {
  margin: 0;
  color: var(--ch-fg);
  font-weight: 600;
  text-align: right;
}
.crafto .ch-spec.is-plain dd {
  font-weight: 500;
  text-align: left;
}
.ch-plan-summary {
  margin-top: 12px;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1.55;
}
.ch-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: var(--ch-surface-3);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
  object-fit: cover;
}
.ch-country {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: var(--ch-surface-3);
  color: var(--ch-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ch-faq-list {
  border-top: 1px solid var(--ch-line);
}
.ch-faq {
  border-bottom: 1px solid var(--ch-line);
}
.ch-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ch-fg);
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.ch-faq summary::-webkit-details-marker {
  display: none;
}
.ch-faq-icon {
  flex-shrink: 0;
  color: var(--ch-muted);
  font-size: 13px;
  transition: transform 0.15s;
}
.ch-faq[open] .ch-faq-icon {
  transform: rotate(45deg);
}
.ch-faq p, .crafto .ch-faq p {
  max-width: 46rem;
  margin: 0;
  padding: 0 0 18px;
  color: var(--ch-muted);
  line-height: 1.65;
}
.ch-section {
  border-top: 1px solid var(--ch-line);
}
.ch-home-section {
  padding-block: 72px;
}
.ch-home-section + .ch-home-section, .ch-section + .ch-home-section {
  border-top: 1px solid var(--ch-line);
}
.ch-home-section.is-first {
  padding-top: 24px;
}
.ch-nowrap {
  white-space: nowrap;
}
.ch-home-section.is-last {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 768px) {
  .ch-home-section {
    padding-block: 96px;
  }
  .ch-home-section.is-first {
    padding-top: 32px;
  }
}
.ch-tone {
  --tone: var(--ch-fg);
  color: var(--tone);
}
.ch-tone.is-green {
  --tone: var(--ch-ok);
}
.ch-tone.is-blue {
  --tone: var(--ch-info);
}
.ch-tone.is-gold {
  --tone: var(--ch-warn);
}
.ch-tone.is-red {
  --tone: var(--ch-bad);
}
.ch-tone.is-purple {
  --tone: #a58cf0;
}
.ch-tone.is-cyan {
  --tone: #4fcfc4;
}
.ch-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ch-bg);
}
.ch-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}
.ch-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.ch-hero-art.is-blurred img {
  filter: blur(var(--ch-hero-blur, 3px));
  transform: scale(1.06);
}
.ch-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ch-bg) 0%, var(--ch-bg) 30%, var(--ch-bg) 60%, transparent 82%), linear-gradient(180deg, var(--ch-bg) 0%, transparent 20%, transparent 55%, var(--ch-bg) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ch-bg) 94%, transparent) 0%, color-mix(in srgb, var(--ch-bg) 80%, transparent) 30%, color-mix(in srgb, var(--ch-bg) 22%, transparent) 60%, transparent 82%), linear-gradient(180deg, color-mix(in srgb, var(--ch-bg) 45%, transparent) 0%, transparent 20%, transparent 55%, var(--ch-bg) 100%);
  }
}
.ch-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-block: 64px 32px;
}
.ch-hero.has-art .ch-hero-inner {
  justify-content: center;
  min-height: clamp(500px, 64vh, 580px);
  padding-block: 96px 40px;
}
.ch-hero-copy {
  max-width: 580px;
}
.ch-hero-title, .crafto .ch-scope .ch-hero-title {
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ch-hero.has-art .ch-hero-title {
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.ch-hero-lead {
  margin-top: 20px;
}
.ch-hero.has-art .ch-hero-lead {
  color: #c6c9cf;
}
.ch-hero-lead strong {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .ch-hero-copy {
    max-width: 660px;
  }
  .ch-hero-lead {
    max-width: none;
  }
}
@media (max-width: 639.98px) {
  .ch-hero-lead strong {
    display: block;
    margin-top: 6px;
  }
}
.ch-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.ch-hero-from {
  margin-top: 20px;
  color: var(--ch-muted);
  font-size: 14px;
}
.ch-hero-from strong {
  color: var(--ch-fg);
}
.ch-btn-glass, .crafto .ch-btn-glass, .crafto .ch-btn-glass:focus {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.07);
  color: var(--ch-fg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ch-btn-glass:hover, .crafto .ch-btn-glass:hover {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.13);
  color: var(--ch-fg);
}
@media (max-width: 767.98px) {
  .ch-hero-art {
    bottom: auto;
    height: 400px;
  }
  .ch-hero-art img {
    object-position: 64% 50%;
  }
  .ch-hero-art::after {
    background: linear-gradient(180deg, var(--ch-bg) 0%, transparent 28%, var(--ch-bg) 68%, var(--ch-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in srgb, var(--ch-bg) 20%, transparent) 0%, transparent 28%, color-mix(in srgb, var(--ch-bg) 72%, transparent) 68%, var(--ch-bg) 100%);
    }
  }
  .ch-hero.has-art .ch-hero-inner {
    gap: 36px;
    min-height: 0;
    padding-block: 250px 8px;
  }
}
.ch-plan-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ch-plan-head .ch-plan-name {
  flex: 1;
  min-width: 0;
}
.ch-plan-pic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
}
.ch-perks-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.ch-perks-head .ch-tag {
  justify-content: center;
}
.ch-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.ch-perk {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  align-items: center;
  max-width: 260px;
  text-align: center;
}
.ch-perk-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--ch-line);
  border-radius: 18px;
  background: var(--ch-surface);
  color: var(--ch-ok);
  font-size: 24px;
}
.ch-perk-title, .crafto .ch-scope .ch-perk-title {
  margin: 20px 0 0;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ch-perk-text {
  margin-top: 8px;
  color: var(--ch-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
@media (max-width: 639.98px) {
  .ch-perks {
    gap: 36px;
    margin-top: 40px;
  }
  .ch-perk-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 22px;
  }
  .ch-perk-title, .crafto .ch-scope .ch-perk-title {
    margin-top: 16px;
  }
}
.ch-split {
  display: grid;
  align-items: center;
  gap: 48px;
}
.ch-split-copy {
  min-width: 0;
}
@media (min-width: 1024px) {
  .ch-split.has-media {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
  }
  .ch-split.is-reversed.has-media {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}
.ch-ticks {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .ch-ticks {
    grid-template-columns: 1fr 1fr;
  }
}
.ch-ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ch-fg);
  font-size: 15px;
  font-weight: 500;
}
.ch-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ch-line);
  border-radius: 14px;
  background: var(--ch-surface);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.65);
}
.ch-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.ch-float {
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
@media (min-width: 1024px) {
  .ch-float {
    max-width: 520px;
  }
}
.ch-float img {
  display: block;
  width: 100%;
  height: auto;
  animation: ch-float 7s ease-in-out infinite;
}
@keyframes ch-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ch-float img {
    animation: none;
  }
}
.ch-tiles {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 640px) {
  .ch-tiles {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .ch-tiles.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.ch-tile, .crafto a.ch-tile {
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 24px 24px 26px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-xl);
  background: radial-gradient(120% 90% at 100% 100%, var(--tone) 0%, transparent 55%), linear-gradient(180deg, var(--ch-surface-2) 0%, var(--ch-surface) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--tone) 9%, transparent) 0%, transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--ch-surface-2) 55%, var(--ch-surface)) 0%, var(--ch-surface) 100%);
  }
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-tile-mark {
  position: absolute;
  right: -14px;
  bottom: -20px;
  z-index: -1;
  color: var(--tone);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--tone) 9%, transparent);
  }
  font-size: 112px;
  line-height: 1;
  transform: rotate(-10deg);
  transition: color 0.2s, transform 0.2s;
  pointer-events: none;
}
.ch-tile h3, .crafto .ch-scope .ch-tile h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-right: 24px;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.ch-tile p, .crafto .ch-scope .ch-tile p {
  max-width: 36ch;
  margin: 8px 0 0;
  color: var(--ch-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ch-tile-go {
  color: var(--ch-muted);
  font-size: 12px;
  transition: color 0.15s, transform 0.15s;
}
.ch-tile.is-link {
  transition: border-color 0.15s;
}
.ch-tile.is-link:hover, .crafto a.ch-tile.is-link:hover {
  border-color: var(--ch-line-strong);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-tile.is-link:hover .ch-tile-mark {
  color: var(--tone);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--tone) 15%, transparent);
  }
  transform: rotate(-6deg) scale(1.04);
}
.ch-tile.is-link:hover .ch-tile-go {
  color: var(--tone);
  transform: translateX(3px);
}
.ch-tile.is-link:focus-visible {
  outline: 2px solid var(--ch-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ch-tile-mark, .ch-tile-go {
    transition: none;
  }
}
.ch-net {
  display: grid;
  align-items: center;
  gap: 40px;
}
.ch-net-copy {
  min-width: 0;
}
@media (min-width: 1024px) {
  .ch-net {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 56px;
  }
}
.ch-tag, .crafto .ch-scope .ch-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--tone);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-tag i {
  font-size: 14px;
}
.ch-regions {
  margin-top: 36px;
}
@media (min-width: 640px) {
  .ch-regions.is-split {
    column-count: 2;
    column-gap: 28px;
  }
}
.ch-region {
  padding-bottom: 28px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ch-region-title, .crafto .ch-scope .ch-region-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ch-region-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ch-line);
}
.ch-region-places {
  display: grid;
  gap: 8px;
}
.ch-place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  min-height: 60px;
  padding: 11px 16px 11px 14px;
  border-radius: var(--ch-radius-lg);
  background: rgb(255 255 255 / 0.03);
  transition: background-color 0.15s;
}
.ch-place:hover {
  background: rgb(255 255 255 / 0.055);
}
.ch-place .ch-flag {
  width: 28px;
  height: 21px;
}
.ch-place-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ch-place-name {
  color: var(--ch-fg);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ch-place-sub {
  color: var(--ch-muted);
  font-size: 13px;
  line-height: 1.35;
}
.ch-place-side {
  text-align: right;
}
.ch-place-ping {
  color: var(--ch-muted);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ch-place-ping.is-fast {
  color: var(--ch-ok);
}
.ch-place-ping.is-fair {
  color: var(--ch-warn);
}
.ch-place-ping.is-slow {
  color: var(--ch-bad);
}
.ch-place-ping.is-checking {
  font-size: 12.5px;
  font-weight: 500;
  animation: ch-checking 1.4s ease-in-out infinite;
}
@keyframes ch-checking {
  50% {
    opacity: 0.45;
  }
}
.ch-places-note {
  margin-top: 0;
  color: var(--ch-muted);
  font-size: 12.5px;
}
.ch-places-note[hidden] {
  display: none;
}
.ch-globe {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
}
.ch-globe::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #1a2621 0%, #13171a 48%, #0d0f12 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 40px 90px -40px var(--ch-ok);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 40px 90px -40px color-mix(in srgb, var(--ch-ok) 35%, transparent);
  }
}
.ch-globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 1023.98px) {
  .ch-globe {
    order: -1;
    max-width: 340px;
    margin-block: -24px -8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ch-place-ping.is-checking {
    animation: none;
  }
}
.ch-discord {
  --ch-discord: #5865f2;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 40px 24px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--ch-radius-xl);
  background: linear-gradient(120deg, #4049c4 0%, var(--ch-discord) 48%, #4a54d6 100%);
  color: #fff;
  text-align: center;
}
.ch-discord-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ch-discord-pattern i {
  position: absolute;
  color: rgb(255 255 255 / 0.07);
  line-height: 1;
}
.ch-discord-pattern i:nth-child(1) {
  top: 12%;
  left: 6%;
  font-size: 64px;
  transform: rotate(-12deg);
}
.ch-discord-pattern i:nth-child(2) {
  top: 58%;
  left: 18%;
  font-size: 40px;
  transform: rotate(10deg);
}
.ch-discord-pattern i:nth-child(3) {
  top: 8%;
  left: 40%;
  font-size: 52px;
  transform: rotate(8deg);
}
.ch-discord-pattern i:nth-child(4) {
  top: 66%;
  left: 52%;
  font-size: 34px;
  transform: rotate(-8deg);
}
.ch-discord-pattern i:nth-child(5) {
  top: 6%;
  left: 62%;
  font-size: 44px;
  transform: rotate(-6deg);
}
.ch-discord-pattern i:nth-child(6) {
  top: 74%;
  left: 93%;
  font-size: 58px;
  transform: rotate(12deg);
}
.ch-discord-copy {
  max-width: 560px;
}
.ch-discord .ch-h2, .crafto .ch-scope .ch-discord .ch-h2 {
  color: #fff;
}
.ch-discord .ch-h2 span {
  color: #c3c8ff;
}
.ch-discord-copy p {
  margin-top: 12px;
  color: rgb(255 255 255 / 0.88);
  font-size: 16px;
  line-height: 1.6;
}
.ch-btn-discord, .crafto .ch-btn-discord, .crafto .ch-btn-discord:focus {
  margin-top: 24px;
  border-color: #fff;
  background: #fff;
  color: #3c45c2;
}
.ch-btn-discord:hover, .crafto .ch-btn-discord:hover {
  border-color: #eceeff;
  background: #eceeff;
  color: #3c45c2;
}
.ch-discord .ch-btn:focus-visible {
  outline-color: #fff;
}
.ch-discord-art, .crafto .ch-discord-art {
  display: block;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}
.ch-discord-art img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--ch-radius-lg);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5);
}
.ch-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgb(255 255 255 / 0.4);
  transition: color 0.15s;
}
.ch-discord-art:hover .ch-discord-badge {
  color: rgb(255 255 255 / 0.6);
}
.ch-discord-badge i {
  font-size: 64px;
  line-height: 1;
}
.ch-discord-badge span {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .ch-discord {
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    min-height: 236px;
    padding: 40px 48px;
    text-align: left;
  }
  .ch-discord-art img {
    max-width: 380px;
  }
}
@media (min-width: 1024px) {
  .ch-discord-badge i {
    font-size: 80px;
  }
  .ch-discord-badge span {
    font-size: 38px;
  }
}
.crafto .ch-domains .home-domain-search, .crafto .ch-domains .home-domain-search.bg-white {
  background: transparent !important;
}
.crafto .ch-domains .home-domain-search .p-5 {
  padding: 64px 0 !important;
}
.crafto .ch-domains .home-domain-search h2 {
  margin-bottom: 24px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ch-auth {
  max-width: 440px;
  margin: 8px auto 24px;
}
.ch-auth-card {
  padding: 28px;
}
@media (max-width: 575.98px) {
  .ch-auth-card {
    padding: 22px 18px;
  }
}
.ch-auth .form-group {
  margin-bottom: 16px;
}
.ch-auth .ch-h2 {
  font-size: 1.625rem;
}
.ch-auth form {
  margin-top: 24px;
}
.ch-auth .alert {
  margin: 20px 0 0;
}
.ch-social {
  margin-top: 24px;
}
.ch-social .social-signin-btns {
  display: grid;
  gap: 8px;
}
.crafto .ch-social .btn {
  width: 100%;
  margin: 0 !important;
}
.ch-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ch-divider::before, .ch-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ch-line);
}
.ch-divider + form {
  margin-top: 20px;
}
.crafto .ch-password .form-control {
  border-right: 0;
}
.crafto .ch-password .btn-reveal-pw {
  width: 44px;
  border: 1px solid var(--ch-line-strong);
  border-left: 0;
  border-radius: 0 var(--ch-radius) var(--ch-radius) 0;
  background: var(--ch-input);
  color: var(--ch-muted);
}
.crafto .ch-password .btn-reveal-pw:hover {
  color: var(--ch-fg);
}
.crafto .ch-password .form-control:focus + .input-group-append .btn-reveal-pw {
  border-color: var(--ch-primary);
}
.ch-check, .crafto .ch-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 0;
  color: var(--ch-muted);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.crafto .ch-check .form-check-input, .ch-check input {
  position: static;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ch-primary);
}
.crafto .login-form .form-group label {
  font-weight: 500;
}
.ch-register-head {
  margin-bottom: 20px;
}
.ch-app {
  --ch-sidebar-w: 256px;
}
.ch-app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: var(--ch-sidebar-w);
  padding: 16px 14px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--ch-line);
  background: var(--ch-bg);
  scrollbar-width: thin;
}
.ch-app-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px;
}
.ch-app-close {
  display: none;
}
.ch-app-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ch-app-link, .crafto .ch-app-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--ch-radius);
  color: var(--ch-muted);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.ch-app-link > i:first-child {
  flex-shrink: 0;
  width: 18px;
  color: var(--ch-faint);
  font-size: 15px;
  text-align: center;
}
.ch-app-link:hover, .crafto .ch-app-link:hover {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-app-link:hover > i:first-child {
  color: var(--ch-muted);
}
.ch-app-link.is-active, .crafto .ch-app-link.is-active {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  font-weight: 600;
}
.ch-app-link.is-active > i:first-child {
  color: var(--ch-primary-text);
}
.ch-app-link.is-active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ch-primary);
}
.ch-app-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--ch-surface-3);
  color: var(--ch-fg);
  font-size: 12px;
  font-weight: 600;
}
.ch-app-count.is-warn {
  background: var(--ch-warn-soft);
  color: var(--ch-warn);
}
.ch-app-ext {
  margin-left: auto;
  color: var(--ch-faint);
  font-size: 11px;
}
.ch-app-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 19px;
  padding-left: 12px;
  border-left: 1px solid var(--ch-line);
}
.ch-app-sub a, .crafto .ch-app-sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ch-radius-sm);
  color: var(--ch-muted);
  font-size: 13.5px;
  text-decoration: none;
}
.ch-app-sub a:hover, .crafto .ch-app-sub a:hover {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
}
.ch-app-label {
  margin: 0 0 6px;
  padding: 0 10px;
  color: var(--ch-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.crafto .ch-app-sidebar .ch-app-label {
  font-size: 11.5px;
}
.ch-app-group > summary {
  list-style: none;
}
.ch-app-group > summary::-webkit-details-marker {
  display: none;
}
.ch-app-caret {
  margin-left: auto;
  color: var(--ch-faint);
  font-size: 11px;
  transition: transform 0.15s;
}
.ch-app-group[open] .ch-app-caret {
  transform: rotate(180deg);
}
.ch-app-panel, .crafto .ch-app-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  color: var(--ch-fg);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.ch-app-panel:hover, .crafto .ch-app-panel:hover {
  border-color: var(--ch-line-strong);
  background: var(--ch-surface-2);
  color: var(--ch-fg);
  text-decoration: none;
}
.ch-app-panel .ch-icon-tile {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.ch-app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--ch-sidebar-w);
}
.ch-app-pad {
  padding-inline: 32px;
}
.ch-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 32px;
  border-bottom: 1px solid var(--ch-line);
  background: var(--ch-bg);
}
.ch-topbar-menu {
  display: none;
}
.ch-topbar-title {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ch-muted);
  font-size: 14px;
}
.crafto .ch-topbar-title h1 {
  margin: 0;
  overflow: hidden;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crafto .ch-topbar-crumb {
  flex-shrink: 0;
  color: var(--ch-muted);
  text-decoration: none;
  white-space: nowrap;
}
.crafto .ch-topbar-crumb:hover {
  color: var(--ch-fg);
}
.ch-topbar-sep {
  color: var(--ch-faint);
}
.ch-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ch-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ch-topbar-user:hover, .show > .ch-topbar-user {
  background: var(--ch-surface-2);
}
.ch-topbar-user .ch-avatar {
  width: 30px;
  height: 30px;
}
.ch-topbar-user-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-topbar-user.dropdown-toggle::after {
  border-top-width: 4px;
  border-right-width: 4px;
  border-left-width: 4px;
  opacity: 0.6;
}
.ch-menu-head {
  margin: -2px 0 4px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--ch-line);
}
.crafto .ch-app-content {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}
.ch-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ch-page > .primary-content {
  min-width: 0;
}
.ch-page.has-rail > .ch-page-rail {
  order: -1;
}
.ch-page.has-rail.is-dash > .ch-page-rail {
  order: 0;
}
.ch-page-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
  gap: 16px;
}
.crafto .ch-page-rail .card, .crafto .ch-page-rail .mb-3 {
  margin: 0 !important;
}
@media (min-width: 1280px) {
  .ch-page.has-rail:not(.is-dash) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    align-items: start;
    gap: 28px;
  }
  .ch-page.has-rail:not(.is-dash) > .ch-page-rail {
    order: 0;
    grid-template-columns: 1fr;
  }
}
.ch-footer.is-app .ch-container {
  max-width: 1320px;
  padding-inline: 32px;
}
.ch-app-backdrop {
  display: none;
}
@media (max-width: 1023.98px) {
  .ch-app-sidebar {
    width: min(300px, 86vw);
    box-shadow: var(--ch-shadow);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }
  :root.ch-nav-open .ch-app-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s;
  }
  .ch-app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: block;
    background: rgb(0 0 0 / 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  :root.ch-nav-open .ch-app-backdrop {
    opacity: 1;
    visibility: visible;
  }
  :root.ch-nav-open body {
    overflow: hidden;
  }
  .ch-app-close, .ch-topbar-menu {
    display: inline-flex;
  }
  .ch-app-main {
    margin-left: 0;
  }
  .ch-topbar {
    gap: 10px;
    padding: 0 16px;
  }
  .ch-app-pad {
    padding-inline: 16px;
  }
  .crafto .ch-app-content {
    padding: 20px 16px 40px;
  }
  .ch-footer.is-app .ch-container {
    padding-inline: 16px;
  }
}
@media (max-width: 639.98px) {
  .crafto .ch-topbar-crumb, .ch-topbar-sep, .ch-topbar-user-name {
    display: none;
  }
  .ch-topbar-user {
    padding: 0 4px;
  }
  .ch-topbar-user.dropdown-toggle::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ch-app-sidebar, .ch-app-backdrop, .ch-app-caret {
    transition: none;
  }
}
.ch-dash {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ch-dash-hello, .crafto .ch-dash .ch-dash-hello {
  margin: 0;
  color: var(--ch-fg);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.ch-dash-hello + .ch-callout {
  margin-top: -4px;
}
.ch-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
}
.ch-callout + .ch-callout {
  margin-top: -12px;
}
.ch-callout-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface-3);
  color: var(--ch-muted);
  font-size: 15px;
}
.ch-callout-text {
  flex: 1 1 260px;
  min-width: 0;
}
.ch-banner {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
}
.ch-dash .ch-callout, .ch-dash .ch-card, .crafto .ch-dash .client-home-cards .card {
  border-radius: var(--ch-radius-xl);
}
.crafto .ch-dash .client-home-cards .card > :first-child {
  border-top-left-radius: calc(var(--ch-radius-xl) - 1px);
  border-top-right-radius: calc(var(--ch-radius-xl) - 1px);
}
.crafto .ch-dash .client-home-cards .card > :last-child, .crafto .ch-dash .client-home-cards .card > .list-group:last-child > .list-group-item:last-child {
  border-bottom-left-radius: calc(var(--ch-radius-xl) - 1px);
  border-bottom-right-radius: calc(var(--ch-radius-xl) - 1px);
}
.crafto .client-home-cards .card-header .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.crafto div[menuitemname="Active Products/Services"] .list-group-item {
  border-bottom-color: var(--ch-line) !important;
  transition: background-color 0.15s;
}
.crafto div[menuitemname="Active Products/Services"] .list-group:last-child .list-group-item:last-child {
  border-bottom: 0 !important;
}
.crafto div[menuitemname="Active Products/Services"] .list-group-item:hover {
  background-color: var(--ch-surface-2);
}
.crafto .div-service-status .label:not(.label-placeholder) {
  justify-content: center;
  width: auto;
}
.crafto .div-service-name .font-weight-bold {
  color: var(--ch-fg);
  font-weight: 600 !important;
}
.crafto div[menuitemname="Active Products/Services"] .card-footer {
  padding: 8px 18px;
}
.crafto .btn-view-more {
  color: var(--ch-muted);
  font-weight: 500;
}
.crafto .btn-view-more:hover {
  color: var(--ch-fg);
}
.crafto .btn-view-more.disabled {
  color: var(--ch-faint);
}
.crafto .client-home-cards .text-domain {
  color: var(--ch-muted);
  font-size: 13px;
}
.ch-dash-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ch-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.crafto .ch-dash-grid > .card > .card-footer {
  margin-top: auto;
}
@media (min-width: 640px) {
  .ch-dash-grid.is-short {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ch-dash-grid.is-short > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1280px) {
  .ch-dash-grid.is-short {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ch-dash-grid.is-short > * {
    grid-column: span 2;
  }
  .ch-dash-grid.is-short > :last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .ch-dash-grid.is-short > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  .ch-dash-grid.is-short > :nth-last-child(2):nth-child(3n + 1), .ch-dash-grid.is-short > :last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }
  .ch-dash-grid.is-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ch-dash-grid.is-lists > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.ch-page.is-dash {
  display: flex;
  flex-direction: column;
}
.ch-page.has-rail.is-dash > .ch-page-rail {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
.crafto .ch-page.is-dash .ch-page-rail .card > .card-footer {
  margin-top: auto;
}
.crafto .ch-page.is-dash .ch-page-rail .card {
  border-radius: var(--ch-radius-xl);
}
.crafto .ch-page.is-dash .ch-page-rail .card > :first-child {
  border-top-left-radius: calc(var(--ch-radius-xl) - 1px);
  border-top-right-radius: calc(var(--ch-radius-xl) - 1px);
}
.crafto .ch-page.is-dash .ch-page-rail .card > :last-child {
  border-bottom-left-radius: calc(var(--ch-radius-xl) - 1px);
  border-bottom-right-radius: calc(var(--ch-radius-xl) - 1px);
}
.crafto .ch-dash .client-home-cards .card {
  margin: 0;
}
.crafto .ch-dash .ch-panel-empty {
  padding: 14px 18px 18px;
}
.crafto .ch-dash .client-home-cards .ch-panel-empty p {
  margin: 0 0 14px;
  padding: 0;
  color: var(--ch-muted);
}
.crafto div[menuitemname="Recent Support Tickets"] .truncate {
  overflow: visible;
  white-space: normal;
}
.crafto div[menuitemname="Recent Support Tickets"] .list-group {
  max-height: none;
  overflow: visible;
}
.crafto div[menuitemname="Recent Support Tickets"] .label {
  margin-left: 4px;
  vertical-align: 1px;
}
.crafto .ch-store .ch-select {
  height: 36px;
}
.crafto .text-muted, .crafto .text-secondary, .crafto .text-black-50 {
  color: var(--ch-muted) !important;
}
.crafto .text-dark, .crafto .text-body {
  color: var(--ch-fg) !important;
}
.crafto .text-primary {
  color: var(--ch-primary-text) !important;
}
.crafto .text-success {
  color: var(--ch-ok) !important;
}
.crafto .text-warning {
  color: var(--ch-warn) !important;
}
.crafto .text-danger {
  color: var(--ch-bad) !important;
}
.crafto .text-info {
  color: var(--ch-info) !important;
}
.crafto .bg-white, .crafto .bg-light, .crafto .bg-default {
  background-color: var(--ch-surface) !important;
}
.crafto .bg-dark {
  background-color: var(--ch-surface-3) !important;
}
.crafto .bg-primary {
  background-color: var(--ch-primary) !important;
  color: var(--ch-on-primary);
}
.crafto .border, .crafto .border-top, .crafto .border-right, .crafto .border-bottom, .crafto .border-left {
  border-color: var(--ch-line) !important;
}
.crafto .card, .crafto .mc-promo-manage, .crafto .mc-promo-login {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .card-header, .crafto .client-home-cards .card-header {
  border-bottom: 1px solid var(--ch-line);
  background-color: transparent;
  padding: 12px 18px;
  color: var(--ch-fg);
}
.crafto .card-footer {
  border-top: 1px solid var(--ch-line);
  background-color: transparent;
}
.crafto .card > .card-header:first-child {
  border-radius: calc(var(--ch-radius-lg) - 1px) calc(var(--ch-radius-lg) - 1px) 0 0;
}
.crafto .card > .card-footer:last-child {
  border-radius: 0 0 calc(var(--ch-radius-lg) - 1px) calc(var(--ch-radius-lg) - 1px);
}
.crafto .card > .list-group:last-child > .list-group-item:last-child, .crafto .card > .list-group:last-child {
  border-bottom-left-radius: calc(var(--ch-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--ch-radius-lg) - 1px);
}
.crafto .card-title {
  color: var(--ch-fg);
  font-weight: 600;
}
.crafto .primary-content .card-title {
  font-size: 20px;
}
.crafto .card-header .card-title {
  font-size: 16px;
}
.crafto .list-group-item {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .list-group-item-action {
  color: var(--ch-fg);
}
.crafto .list-group-item-action:hover, .crafto .list-group-item-action:focus {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .list-group-item.active, .crafto .list-group-item.active:hover, .crafto .list-group-item.active:focus {
  border-color: var(--ch-line);
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .list-group-item.disabled, .crafto .list-group-item:disabled {
  background-color: var(--ch-surface);
  color: var(--ch-faint);
}
.crafto .sidebar .card {
  margin-bottom: 16px;
}
.crafto .sidebar .card-header {
  padding: 12px 16px;
}
.crafto .sidebar .card-title {
  font-size: 14.5px;
  font-weight: 600;
}
.crafto .sidebar .card-body {
  font-size: 14px;
}
.crafto .sidebar .list-group-item {
  border-color: var(--ch-line);
  padding: 9px 16px;
  font-size: 14px;
}
.crafto .sidebar .list-group-item.active, .crafto .sidebar .list-group-item.active:hover, .crafto .sidebar .list-group-item.active:focus {
  border-color: var(--ch-line);
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .sidebar .list-group-item .badge {
  background-color: var(--ch-surface-3);
  color: var(--ch-fg);
}
.crafto .sidebar .list-group-item > i.far.fa-circle {
  color: var(--ch-faint);
}
.crafto .fa-comments::before {
  content: "\f590";
}
.crafto .far.fa-comments {
  font-weight: 900;
}
.crafto .card-header > .card-title {
  margin: 0;
}
.crafto .client-home-cards .card-header .btn {
  border: 1px solid var(--ch-line);
  background-color: transparent;
  color: var(--ch-fg);
}
.crafto .client-home-cards .card-header .btn:hover {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .client-home-cards .list-group {
  border-top: 1px solid var(--ch-line) !important;
  border-bottom: 0 !important;
}
.crafto .client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid var(--ch-line);
  padding: 10px 18px;
}
.crafto .client-home-cards .list-group .list-group-item:last-child {
  border-bottom: 0;
}
.crafto .client-home-cards .card-body p {
  padding: 12px 18px;
}
.crafto .client-home-cards small {
  color: var(--ch-muted);
}
.crafto .tiles .tile {
  border-right-color: var(--ch-line);
  background-color: var(--ch-surface);
}
.crafto .tiles .tile:hover {
  background-color: var(--ch-surface-2);
}
.crafto .tiles .tile .title, .crafto .tiles .tile i {
  color: var(--ch-muted);
}
.crafto .tiles div:nth-child(1) > .tile {
  border-bottom-color: var(--ch-line);
}
.crafto .table {
  color: var(--ch-fg);
}
.crafto .table th, .crafto .table td {
  border-top-color: var(--ch-line);
}
.crafto .table thead th {
  border-bottom-color: var(--ch-line);
  color: var(--ch-muted);
  font-size: 13px;
  font-weight: 600;
}
.crafto .table tbody + tbody {
  border-top-color: var(--ch-line);
}
.crafto .table-bordered, .crafto .table-bordered th, .crafto .table-bordered td {
  border-color: var(--ch-line);
}
.crafto .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ch-overlay-hover);
}
.crafto .table-hover tbody tr:hover {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .table .thead-light th, .crafto .table-active, .crafto .table-active > th, .crafto .table-active > td {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .table-container {
  overflow-x: auto;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
}
.crafto .dataTables_wrapper table.table-list, .crafto table.table-list {
  margin: 0 !important;
  border: 0;
  border-top: 1px solid var(--ch-line);
  background: transparent;
}
.crafto .table-container .dataTables_wrapper .dataTables_filter {
  padding: 12px 12px 0;
}
.crafto .table-container .dataTables_wrapper .dataTables_filter label {
  margin: 0;
}
.crafto .table-container .dataTables_wrapper .dataTables_info {
  padding: 20px 16px 12px;
  color: var(--ch-muted);
  font-size: 13.5px;
}
.crafto .table-container .dataTables_wrapper .dataTables_paginate, .crafto .table-container .dataTables_wrapper .dataTables_length {
  padding: 12px 16px;
}
.crafto .table-container .dataTables_wrapper .dataTables_length {
  color: var(--ch-muted);
  font-size: 13.5px;
}
.crafto .table-container .dataTables_wrapper .dataTables_paginate ul.pagination {
  margin: 0;
}
.crafto .table-container .dataTables_wrapper .dataTables_filter label .form-control {
  height: 36px;
  font-size: 14px;
}
@media (max-width: 600px) {
  .crafto .table-container .dataTables_wrapper .dataTables_filter {
    margin-top: 0;
    padding: 12px 12px 0;
  }
  .crafto .table-container .dataTables_wrapper .dataTables_info {
    padding: 10px 16px 12px;
  }
  .crafto .table-container .dataTables_wrapper .dataTables_paginate {
    float: none;
  }
}
.crafto .table-container > #tableLoading {
  padding: 16px;
  color: var(--ch-muted);
}
.crafto table.table-list thead th, .crafto .dataTables_wrapper table.table-list thead th {
  border-bottom: 1px solid var(--ch-line);
  background-color: var(--ch-surface);
  color: var(--ch-muted);
}
.crafto .dataTables_wrapper table.table-list thead th.sorting_asc, .crafto .dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .table-list > tbody > tr > td {
  border-top-color: var(--ch-line);
  background-color: var(--ch-surface);
}
.crafto .table-list > tbody > tr:hover > td {
  background-color: var(--ch-surface-2);
}
.crafto .table-list > tbody > tr > td a.border-left {
  border-left-color: var(--ch-line);
}
.crafto .dataTables_wrapper .dataTables_info, .crafto .dataTables_wrapper .dataTables_length, .crafto .dataTables_wrapper .dataTables_filter {
  color: var(--ch-muted);
}
.crafto .dataTables_wrapper .dataTables_filter label .form-control, .crafto .dataTables_wrapper .dataTables_filter input {
  background: var(--ch-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 14px;
  padding-left: 32px;
}
.crafto table.dataTable.table-striped > tbody > tr.odd > * {
  box-shadow: inset 0 0 0 9999px var(--ch-overlay-hover);
}
.crafto table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--ch-overlay-hover);
}
.crafto table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--ch-line);
}
.crafto div.dtr-modal div.dtr-modal-display {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
}
.crafto div.dtr-modal div.dtr-modal-close {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
}
.crafto .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--ch-surface-3);
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.crafto .label.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.crafto .label-success, .crafto .status-active, .crafto .status-paid, .crafto .status-accepted, .crafto .status-completed, .crafto .status-answered, .crafto .status-delivered {
  background-color: var(--ch-ok-soft);
  color: var(--ch-ok);
}
.crafto .label-warning, .crafto .status-pending, .crafto .status-pending-transfer, .crafto .status-pending-registration, .crafto .status-unpaid, .crafto .status-customer-reply, .crafto .status-onhold, .crafto .status-inprogress, .crafto .status-payment-pending, .crafto .status-draft, .crafto .status-grace {
  background-color: var(--ch-warn-soft);
  color: var(--ch-warn);
}
.crafto .label-danger, .crafto .status-suspended, .crafto .status-overdue, .crafto .status-fraud, .crafto .status-collections, .crafto .status-expired, .crafto .status-lost, .crafto .status-redemption {
  background-color: var(--ch-bad-soft);
  color: var(--ch-bad);
}
.crafto .label-info, .crafto .status-open, .crafto .status-refunded {
  background-color: var(--ch-info-soft);
  color: var(--ch-info);
}
.crafto .label-default, .crafto .status-terminated, .crafto .status-cancelled, .crafto .status-closed, .crafto .status-transferred-away, .crafto .status-transferredaway {
  background-color: var(--ch-surface-3);
  color: var(--ch-muted);
}
.crafto .status-custom {
  color: #fff;
}
.crafto .badge {
  border-radius: var(--ch-radius-sm);
  font-weight: 600;
}
.crafto .badge-primary {
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.crafto .badge-secondary, .crafto .badge-light, .crafto .badge-dark {
  background-color: var(--ch-surface-3);
  color: var(--ch-fg);
}
.crafto .badge-success {
  background-color: var(--ch-ok-soft);
  color: var(--ch-ok);
}
.crafto .badge-info {
  background-color: var(--ch-info-soft);
  color: var(--ch-info);
}
.crafto .badge-warning {
  background-color: var(--ch-warn-soft);
  color: var(--ch-warn);
}
.crafto .badge-danger {
  background-color: var(--ch-bad-soft);
  color: var(--ch-bad);
}
.crafto :where(label) {
  color: var(--ch-fg);
  font-weight: 500;
}
.crafto .form-control, .crafto .custom-select, .crafto .custom-file-label {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background-color: var(--ch-input);
  color: var(--ch-fg);
}
.crafto .form-control {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}
.crafto .form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  border-radius: var(--ch-radius-sm);
  font-size: 0.8125rem;
}
.crafto .form-control-lg {
  height: calc(1.5em + 1.25rem + 2px);
  padding: 0.625rem 1rem;
  font-size: 1.0625rem;
}
.crafto textarea.form-control, .crafto select.form-control[multiple], .crafto select.form-control[size] {
  height: auto;
}
.crafto .form-control::placeholder {
  color: var(--ch-faint);
}
.crafto .form-control:focus, .crafto .custom-select:focus, .crafto .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--ch-primary);
  background-color: var(--ch-input);
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
  color: var(--ch-fg);
}
.crafto .form-control:disabled, .crafto .form-control[readonly], .crafto .custom-select:disabled {
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
}
.crafto select.form-control, .crafto .custom-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.crafto select.form-control[multiple], .crafto select.form-control[size] {
  padding-right: 0.75rem;
  background-image: none;
}
.crafto .custom-select {
  height: calc(1.5em + 1rem + 2px);
  font-size: 0.9375rem;
}
.crafto .custom-file-label::after {
  border-left-color: var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .input-group-text {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
}
.crafto .form-text, .crafto .help-block {
  color: var(--ch-muted);
}
.crafto .custom-control-label::before {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-input);
}
.crafto .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary);
}
.crafto .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.crafto .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--ch-primary);
}
.crafto .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23111317' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
}
.crafto .custom-switch .custom-control-label::after {
  background-color: var(--ch-muted);
}
.crafto .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--ch-on-primary);
}
.crafto .form-check-input, .crafto input[type="checkbox"], .crafto input[type="radio"] {
  accent-color: var(--ch-primary);
}
.crafto .was-validated .form-control:invalid, .crafto .form-control.is-invalid {
  border-color: var(--ch-bad);
}
.crafto .invalid-feedback {
  color: var(--ch-bad);
}
.crafto #registration label {
  color: var(--ch-muted);
  font-weight: 500;
}
.crafto #registration .field, .crafto #registration .form-control {
  height: 40px;
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background: var(--ch-input);
  color: var(--ch-fg);
  font-size: 14.5px;
}
.crafto #registration textarea.field, .crafto #registration textarea.form-control {
  height: auto;
}
.crafto #registration .form-control:focus, .crafto #registration .field:focus {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.crafto #registration .prepend-icon .field-icon {
  height: 40px;
  line-height: 40px;
}
.crafto #registration .field-icon i {
  color: var(--ch-faint);
}
.crafto #registration .field[disabled], .crafto #registration .field[readonly], .crafto #registration .form-control[disabled], .crafto #registration .form-control[readonly] {
  background-color: var(--ch-surface-2);
}
.crafto #registration .field-help-text {
  color: var(--ch-muted);
}
.crafto #registration .sub-heading {
  border-top-color: var(--ch-line);
}
.crafto #registration .sub-heading span {
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .intl-tel-input .country-list {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-elevated);
  box-shadow: var(--ch-shadow);
  color: var(--ch-fg);
}
.crafto .intl-tel-input .country-list .divider {
  border-bottom-color: var(--ch-line);
}
.crafto .intl-tel-input .country-list .country.highlight {
  background-color: var(--ch-elevated-hover);
}
.crafto .intl-tel-input .country-list .country .dial-code {
  color: var(--ch-muted);
}
.crafto .intl-tel-input .selected-flag .iti-arrow {
  border-top-color: var(--ch-muted);
}
.crafto .intl-tel-input .selected-flag .iti-arrow.up {
  border-bottom-color: var(--ch-muted);
}
.crafto .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag, .crafto .intl-tel-input.separate-dial-code .selected-flag {
  background-color: var(--ch-overlay-hover);
}
.crafto .bootstrap-switch {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background: var(--ch-input);
}
.crafto .bootstrap-switch .bootstrap-switch-label, .crafto .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, .crafto .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .crafto .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .crafto .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .crafto .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.crafto .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary, .crafto .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  border-color: var(--ch-line-strong);
  background: var(--ch-surface-3);
  color: var(--ch-fg);
}
.crafto .bootstrap-switch.bootstrap-switch-focused {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.crafto .btn {
  padding: 0.5rem 1rem;
  border-radius: var(--ch-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.crafto .btn-sm, .crafto .btn-group-sm > .btn {
  padding: 0.25rem 0.625rem;
  border-radius: var(--ch-radius-sm);
  font-size: 0.8125rem;
}
.crafto .btn-lg, .crafto .btn-group-lg > .btn {
  padding: 0.625rem 1.25rem;
  border-radius: var(--ch-radius-lg);
  font-size: 1.0625rem;
}
.crafto .btn:focus, .crafto .btn.focus {
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.crafto .btn-primary, .crafto .btn-success, .crafto .btn-primary:not(:disabled):not(.disabled):active, .crafto .btn-success:not(:disabled):not(.disabled):active, .crafto .btn-primary.disabled, .crafto .btn-primary:disabled, .crafto .btn-success.disabled, .crafto .btn-success:disabled {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.crafto .btn-primary:hover, .crafto .btn-primary:focus, .crafto .btn-success:hover, .crafto .btn-success:focus {
  border-color: var(--ch-primary-hover);
  background-color: var(--ch-primary-hover);
  color: var(--ch-on-primary);
}
.crafto .btn-default, .crafto .btn-secondary, .crafto .btn-light, .crafto .btn-info, .crafto .btn-dark, .crafto .btn-default:not(:disabled):not(.disabled):active, .crafto .btn-secondary:not(:disabled):not(.disabled):active, .crafto .btn-light:not(:disabled):not(.disabled):active, .crafto .btn-info:not(:disabled):not(.disabled):active {
  border-color: var(--ch-line);
  background-color: transparent;
  color: var(--ch-fg);
}
.crafto .btn-default:hover, .crafto .btn-default:focus, .crafto .btn-secondary:hover, .crafto .btn-secondary:focus, .crafto .btn-light:hover, .crafto .btn-light:focus, .crafto .btn-info:hover, .crafto .btn-info:focus, .crafto .btn-dark:hover {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .btn-danger, .crafto .btn-danger:hover, .crafto .btn-danger:focus, .crafto .btn-danger:not(:disabled):not(.disabled):active {
  border-color: var(--ch-bad);
  background-color: var(--ch-bad);
  color: #fff;
}
.crafto .btn-danger:hover {
  filter: brightness(1.08);
}
.crafto .btn-warning, .crafto .btn-warning:hover, .crafto .btn-warning:focus, .crafto .btn-warning:not(:disabled):not(.disabled):active {
  border-color: var(--ch-warn);
  background-color: var(--ch-warn);
  color: #111;
}
.crafto .btn-link {
  color: var(--ch-primary-text);
  font-weight: 500;
}
.crafto .btn-link:hover {
  color: var(--ch-primary-text);
}
.crafto .btn-outline-primary, .crafto .btn-outline-success {
  border-color: var(--ch-primary-line);
  color: var(--ch-primary-text);
}
.crafto .btn-outline-primary:hover, .crafto .btn-outline-success:hover, .crafto .btn-outline-primary:not(:disabled):not(.disabled).active {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .btn-outline-secondary, .crafto .btn-outline-light, .crafto .btn-outline-dark, .crafto .btn-outline-info {
  border-color: var(--ch-line-strong);
  color: var(--ch-fg);
}
.crafto .btn-outline-secondary:hover, .crafto .btn-outline-light:hover, .crafto .btn-outline-dark:hover, .crafto .btn-outline-info:hover {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .btn-outline-danger {
  border-color: var(--ch-bad);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-bad) 50%, transparent);
  }
  color: var(--ch-bad);
}
.crafto .btn-outline-danger:hover {
  border-color: var(--ch-bad);
  background-color: var(--ch-bad-soft);
  color: var(--ch-bad);
}
.crafto .btn-outline-warning {
  border-color: var(--ch-warn);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-warn) 50%, transparent);
  }
  color: var(--ch-warn);
}
.crafto .alert {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
  font-size: 14.5px;
}
.crafto .alert-success {
  border-color: var(--ch-ok);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-ok) 32%, transparent);
  }
  background-color: var(--ch-ok-soft);
}
.crafto .alert-info {
  border-color: var(--ch-info);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-info) 32%, transparent);
  }
  background-color: var(--ch-info-soft);
}
.crafto .alert-warning {
  border-color: var(--ch-warn);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-warn) 34%, transparent);
  }
  background-color: var(--ch-warn-soft);
}
.crafto .alert-danger, .crafto .alert-error {
  border-color: var(--ch-bad);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-bad) 34%, transparent);
  }
  background-color: var(--ch-bad-soft);
}
.crafto .alert .alert-link, .crafto .alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.crafto .alert .btn {
  text-decoration: none;
}
.crafto .alert hr {
  border-top-color: var(--ch-line);
}
.crafto .nav-tabs {
  border-bottom: 1px solid var(--ch-line);
}
.crafto .nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ch-muted);
  font-weight: 500;
}
.crafto .nav-tabs .nav-link:hover, .crafto .nav-tabs .nav-link:focus {
  border-bottom-color: var(--ch-line-strong);
  color: var(--ch-fg);
}
.crafto .nav-tabs .nav-link.active, .crafto .nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--ch-primary);
  background-color: transparent;
  color: var(--ch-fg);
}
.crafto .card-header-tabs {
  margin-bottom: -13px;
}
.crafto .nav-pills .nav-link {
  border-radius: var(--ch-radius-sm);
  color: var(--ch-muted);
}
.crafto .nav-pills .nav-link.active, .crafto .nav-pills .show > .nav-link {
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .responsive-tabs-sm {
  border-color: var(--ch-line);
  background: var(--ch-surface);
}
.crafto .responsive-tabs-sm .nav-item {
  border-bottom: 1px solid var(--ch-line) !important;
}
.crafto .responsive-tabs-sm .nav-item a:hover {
  background-color: var(--ch-surface-2);
}
.crafto .responsive-tabs-sm .nav-item a.active {
  background-color: var(--ch-surface) !important;
}
.crafto .responsive-tabs-sm-connector .channel {
  border-right-color: var(--ch-line);
  background: var(--ch-surface);
}
.crafto .responsive-tabs-sm-connector .bottom-border {
  border-bottom-color: var(--ch-line);
}
.crafto .responsive-tabs-sm-connector.store .channel {
  border-left-color: var(--ch-line);
}
.crafto .pagination .page-link, .crafto .pagination > li > a {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .pagination .page-link:hover {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .pagination .page-item.active .page-link, .crafto .pagination > .active > a {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.crafto .pagination .page-item.disabled .page-link {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
  color: var(--ch-faint);
}
.crafto .pagination .page-item:first-child .page-link {
  border-top-left-radius: var(--ch-radius);
  border-bottom-left-radius: var(--ch-radius);
}
.crafto .pagination .page-item:last-child .page-link {
  border-top-right-radius: var(--ch-radius);
  border-bottom-right-radius: var(--ch-radius);
}
.crafto .dropdown-menu {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-elevated);
  box-shadow: var(--ch-shadow);
  color: var(--ch-fg);
  font-size: 14px;
}
.crafto .dropdown-item {
  color: var(--ch-fg);
}
.crafto .dropdown-item:hover, .crafto .dropdown-item:focus {
  background-color: var(--ch-elevated-hover);
  color: var(--ch-fg);
}
.crafto .dropdown-item.active, .crafto .dropdown-item:active {
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .dropdown-item.disabled, .crafto .dropdown-item:disabled {
  color: var(--ch-faint);
}
.crafto .dropdown-divider {
  border-top-color: var(--ch-line);
}
.crafto .dropdown-header {
  color: var(--ch-muted);
}
.crafto .modal-content {
  border: 1px solid var(--ch-line);
  border-radius: 12px;
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .modal-header, .crafto .modal-footer {
  border-color: var(--ch-line);
}
.crafto .modal-backdrop.show {
  opacity: 0.7;
}
.crafto .close {
  color: var(--ch-fg);
  text-shadow: none;
}
.crafto .close:hover {
  color: var(--ch-fg);
}
.crafto .modal-localisation .modal-content {
  background-color: var(--ch-surface);
}
.crafto .modal-localisation .h5 {
  color: var(--ch-fg);
  font-size: 15px;
  font-weight: 600;
}
.crafto .modal-localisation .item-selector .item {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  color: var(--ch-fg);
}
.crafto .modal-localisation .item-selector .item:hover {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .modal-localisation .item-selector .item.active {
  border-color: var(--ch-primary);
  background-color: var(--ch-primary-soft);
  color: var(--ch-primary-text);
}
.crafto .popover {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-elevated);
  box-shadow: var(--ch-shadow);
}
.crafto .popover-header {
  border-bottom-color: var(--ch-line);
  background-color: var(--ch-elevated-hover);
  color: var(--ch-fg);
}
.crafto .popover-body {
  color: var(--ch-fg);
}
.crafto .bs-popover-top > .arrow::before, .crafto .bs-popover-auto[x-placement^="top"] > .arrow::before {
  border-top-color: var(--ch-line);
}
.crafto .bs-popover-top > .arrow::after, .crafto .bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: var(--ch-elevated);
}
.crafto .bs-popover-bottom > .arrow::before, .crafto .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
  border-bottom-color: var(--ch-line);
}
.crafto .bs-popover-bottom > .arrow::after, .crafto .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  border-bottom-color: var(--ch-elevated);
}
.crafto .bs-popover-left > .arrow::before, .crafto .bs-popover-auto[x-placement^="left"] > .arrow::before {
  border-left-color: var(--ch-line);
}
.crafto .bs-popover-left > .arrow::after, .crafto .bs-popover-auto[x-placement^="left"] > .arrow::after {
  border-left-color: var(--ch-elevated);
}
.crafto .bs-popover-right > .arrow::before, .crafto .bs-popover-auto[x-placement^="right"] > .arrow::before {
  border-right-color: var(--ch-line);
}
.crafto .bs-popover-right > .arrow::after, .crafto .bs-popover-auto[x-placement^="right"] > .arrow::after {
  border-right-color: var(--ch-elevated);
}
.crafto .progress {
  border-radius: 999px;
  background-color: var(--ch-surface-3);
}
.crafto .progress-bar {
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
.crafto .verification-banner {
  border-bottom-color: var(--ch-line);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
.crafto .verification-banner .fas {
  color: var(--ch-muted);
}
.crafto .verification-banner .btn.close {
  color: var(--ch-muted);
}
.crafto .verification-banner.email-verification .btn.btn-action {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .home-domain-search .input-group-wrapper {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-input);
}
.crafto .home-domain-search .input-group-wrapper .form-control {
  border-color: transparent;
  background-color: transparent;
}
.crafto .home-domain-search .input-group-wrapper .advanced-input label {
  color: var(--ch-fg);
}
.crafto .home-domain-search .tld-logos {
  color: var(--ch-muted);
}
.crafto .action-icon-btns a {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
  color: var(--ch-muted);
}
.crafto .action-icon-btns a:hover {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .action-icon-btns a .ico-container i {
  color: var(--ch-primary-text);
}
.crafto div.product-details div.product-icon {
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface-2);
}
.crafto div.product-details-tab-container {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
}
.crafto .product-status {
  background-color: var(--ch-surface-3);
}
.crafto .product-status-text {
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ch-muted);
}
.crafto .product-status-active {
  background-color: var(--ch-ok-soft);
}
.crafto .product-status-active .product-status-text {
  color: var(--ch-ok);
}
.crafto .product-status-pending {
  background-color: var(--ch-warn-soft);
}
.crafto .product-status-pending .product-status-text {
  color: var(--ch-warn);
}
.crafto .product-status-suspended, .crafto .product-status-fraud {
  background-color: var(--ch-bad-soft);
}
.crafto .product-status-suspended .product-status-text, .crafto .product-status-fraud .product-status-text {
  color: var(--ch-bad);
}
.crafto div.product-details .col-md-6.text-center h4 {
  margin: 1.25rem 0 0.25rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-muted);
}
.crafto div.product-details .col-md-6.text-center h4:first-child {
  margin-top: 0.5rem;
}
.crafto .ch-open-panel {
  margin: 0 0 1rem;
}
.crafto .ch-open-panel .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.crafto .view-ticket .card-body {
  border-bottom-color: var(--ch-line);
}
.crafto .view-ticket .posted-by {
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
}
.crafto .view-ticket .attachments {
  border-top-color: var(--ch-line);
}
.crafto .view-ticket .attachment-list li span {
  border-color: var(--ch-line);
}
.crafto .view-ticket .attachment-list li figure {
  background-color: var(--ch-surface-2);
}
.crafto .ticketfeedbackstaffcont {
  background-color: var(--ch-surface-2);
}
.crafto .md-editor {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
}
.crafto .md-editor.active, .crafto div.md-editor.active {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
.crafto .md-editor > .btn-toolbar {
  background-color: var(--ch-surface-2) !important;
}
.crafto .md-editor > textarea, .crafto .md-editor > textarea.markdown-editor, .crafto .md-editor > textarea:focus {
  border-color: var(--ch-line) !important;
  background-color: var(--ch-input) !important;
  color: var(--ch-fg);
}
.crafto .md-editor .md-footer {
  background: var(--ch-surface-2);
  color: var(--ch-muted);
}
.crafto .md-editor > .md-preview {
  border-color: var(--ch-line);
  background: var(--ch-surface);
}
.crafto .md-editor .md-controls .md-control {
  color: var(--ch-muted);
}
.crafto .md-editor .md-controls .md-control:hover {
  color: var(--ch-fg);
}
.crafto .md-editor.md-fullscreen-mode, .crafto .md-editor.md-fullscreen-mode .md-input, .crafto .md-editor.md-fullscreen-mode .md-input:focus {
  background: var(--ch-surface) !important;
  color: var(--ch-fg);
}
.crafto .md-preview h1, .crafto .md-preview h2, .crafto .md-preview h3, .crafto .md-preview h4 {
  color: var(--ch-fg);
}
.crafto .md-preview pre {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .md-preview blockquote {
  border-left-color: var(--ch-line-strong);
}
.crafto .md-preview table {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
}
.crafto .md-preview table > thead > tr > th {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
}
.crafto .md-preview table > tbody > tr > td {
  border-color: var(--ch-line);
}
.crafto .twofa-setup .backup-code {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
.crafto .twofa-setup .activation-msg {
  border-color: var(--ch-line-strong);
}
.crafto .twofa-module {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
}
.crafto .twofa-module.active {
  border-color: var(--ch-primary);
}
.crafto div.credit-card {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
}
.crafto div.credit-card div.card-number {
  background-color: var(--ch-surface-3);
}
.crafto .select-account {
  border-top-color: var(--ch-line);
}
.crafto .select-account a {
  border-bottom-color: var(--ch-line);
  color: var(--ch-fg);
}
.crafto .select-account a:hover {
  background-color: var(--ch-surface-2);
}
.crafto .popover-user-notifications, .crafto .popover-user-notifications ul li {
  border-color: var(--ch-line);
}
.crafto .popover-user-notifications ul li a {
  color: var(--ch-fg);
}
.crafto .popover-user-notifications ul li a:hover {
  background-color: var(--ch-surface-2);
}
.crafto .domain-pricing .tld-row {
  border-bottom-color: var(--ch-line);
}
.crafto .domain-pricing .tld-row.highlighted {
  background: var(--ch-primary-soft);
}
.crafto .domain-pricing .tld-pricing-header .col-xs-2, .crafto .domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
}
.crafto .domain-pricing .two-row-center {
  border-right-color: var(--ch-line);
}
.crafto .store-order-container .store-domain-tabs li a {
  border-bottom-color: var(--ch-line);
  background-color: var(--ch-surface-2);
}
.crafto .store-order-container .store-domain-tabs li.active a {
  background-color: var(--ch-surface);
}
.crafto .store-order-container .store-domain-tab-content {
  border-color: var(--ch-line);
}
.crafto .store-order-container .domain-validation {
  color: var(--ch-muted);
}
.crafto .store-order-container .domain-validation.ok {
  color: var(--ch-ok);
}
.crafto .captcha-overlay-popup {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
}
.crafto form[data-role=json-form] .has-error input.form-control {
  background-color: var(--ch-bad-soft);
}
:root #order-standard_cart label {
  color: var(--ch-fg);
}
:root #order-standard_cart .header-lined h1, :root #order-standard_cart h1 {
  color: var(--ch-fg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
:root #order-standard_cart .sub-heading, :root #order-standard_cart .sub-heading-borderless {
  border-top-color: var(--ch-line);
}
:root #order-standard_cart .sub-heading span, :root #order-standard_cart .sub-heading-borderless span {
  background-color: var(--ch-bg);
  color: var(--ch-fg);
  font-weight: 600;
}
:root #order-standard_cart .products .product {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  color: var(--ch-fg);
}
:root #order-standard_cart .products .product header {
  border-radius: calc(var(--ch-radius-lg) - 1px) calc(var(--ch-radius-lg) - 1px) 0 0;
  background: var(--ch-surface-2);
}
:root #order-standard_cart .products .product header span {
  color: var(--ch-fg);
}
:root #order-standard_cart .products .product header .qty, :root #order-standard_cart .products .product div.product-desc {
  color: var(--ch-muted);
}
:root #order-standard_cart .products .product div.product-pricing span.price {
  color: var(--ch-fg);
}
:root #order-standard_cart .panel-addon {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .panel-addon .panel-body label {
  color: var(--ch-fg);
}
:root #order-standard_cart .panel-addon .panel-price {
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
:root #order-standard_cart .panel-addon .panel-add, :root #order-standard_cart .panel-addon-selected .panel-add {
  background-color: var(--ch-primary);
  color: var(--ch-on-primary);
}
:root #order-standard_cart .panel-addon-selected {
  border-color: var(--ch-primary);
}
:root #order-standard_cart .domain-selection-options .option {
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface);
  border: 1px solid var(--ch-line);
}
:root #order-standard_cart .domain-selection-options .option-selected {
  border-color: var(--ch-primary-line);
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .domain-checker-available, :root .domain-checker-available {
  color: var(--ch-ok);
}
:root #order-standard_cart .domain-checker-unavailable, :root .domain-checker-unavailable {
  color: var(--ch-bad);
}
:root #order-standard_cart .transfer-eligible {
  border-color: var(--ch-ok);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-ok) 32%, transparent);
  }
  background-color: var(--ch-ok-soft);
  color: var(--ch-ok);
}
:root #order-standard_cart .transfer-not-eligible {
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
}
:root #order-standard_cart .product-info {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .order-summary {
  overflow: hidden;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .order-summary h2 {
  border-bottom: 1px solid var(--ch-line);
  color: var(--ch-fg);
  font-weight: 600;
}
:root #order-standard_cart .summary-container {
  background-color: var(--ch-surface);
}
:root #order-standard_cart .order-summary .summary-totals, :root #order-standard_cart .order-summary .subtotal, :root #order-standard_cart .order-summary .bordered-totals {
  border-color: var(--ch-line);
}
:root #order-standard_cart .order-summary .loader {
  color: var(--ch-muted);
}
:root #order-standard_cart .order-summary .recurring-charges, :root #order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--ch-muted);
}
:root #order-standard_cart .order-summary .total-due-today .amt {
  color: var(--ch-fg);
}
:root #order-standard_cart .apply-credit-container {
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .cc-input-container {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .cc-input-container .existing-cc-grid {
  color: var(--ch-muted);
}
:root #order-standard_cart .field, :root #order-standard_cart .form-control {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background-color: var(--ch-input);
  color: var(--ch-fg);
}
:root #order-standard_cart .form-control:focus, :root #order-standard_cart .field:focus {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px var(--ch-primary-ring);
}
:root #order-standard_cart .field-icon i {
  color: var(--ch-faint);
}
:root #order-standard_cart .field[disabled] {
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .field-help-text {
  color: var(--ch-muted);
}
:root #order-standard_cart .view-cart-items-header {
  border-radius: var(--ch-radius-lg) var(--ch-radius-lg) 0 0;
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
  font-weight: 600;
}
:root #order-standard_cart .view-cart-items {
  border-bottom: 1px solid var(--ch-line);
}
:root #order-standard_cart .view-cart-items .item, :root #order-standard_cart .view-cart-items .item:nth-child(even) {
  border-bottom: 1px solid var(--ch-line);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .view-cart-items .item-title {
  color: var(--ch-fg);
}
:root #order-standard_cart .view-cart-items .item-group, :root #order-standard_cart .view-cart-items .item-domain {
  color: var(--ch-muted);
}
:root #order-standard_cart .btn-remove-from-cart {
  color: var(--ch-muted);
}
:root #order-standard_cart .btn-remove-from-cart:hover {
  color: var(--ch-bad);
}
:root #order-standard_cart .empty-cart .btn {
  border: 1px solid var(--ch-line-strong);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
:root #order-standard_cart .view-cart-tabs .nav-tabs a, :root #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"], :root #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"], :root #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
  border-color: transparent;
  background-color: transparent;
}
:root #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active, :root #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"], :root #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
  border-bottom-color: var(--ch-primary);
  color: var(--ch-fg);
}
:root #order-standard_cart .view-cart-tabs .tab-content {
  margin-top: 12px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .view-cart-promotion-code {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
  color: var(--ch-fg);
}
:root #order-standard_cart .view-cart-gateway-checkout {
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .account-select-container {
  border-right-color: var(--ch-line);
}
:root #order-standard_cart .account-select-container div.account {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background: var(--ch-surface-2);
}
:root #order-standard_cart .account-select-container div.account.active {
  border-color: var(--ch-primary);
  background: var(--ch-surface);
}
:root #order-standard_cart .default-captcha {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
  box-shadow: none;
  color: var(--ch-muted);
}
:root #order-standard_cart .addon-promo-container {
  border-color: var(--ch-line);
}
:root #order-standard_cart .mc-promo {
  border-color: var(--ch-line-strong);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
}
:root #order-standard_cart .mc-promo .body {
  border-top-color: var(--ch-surface-3);
  background-color: var(--ch-surface-2);
}
:root #order-standard_cart .domain-checker-advanced label {
  color: var(--ch-fg);
}
:root #order-standard_cart .domain-checker-advanced .multiselect {
  color: var(--ch-fg);
}
:root .domain-checker-container {
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
}
:root .domain-checker-container .input-group-box {
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface-2);
}
:root .domain-searching {
  color: var(--ch-muted);
}
:root div.domainresults div:not(.btn-group) {
  background-color: var(--ch-surface-2);
  color: var(--ch-muted);
}
:root div.domainresults div:not(.btn-group) span {
  color: var(--ch-faint);
}
:root .spotlight-tlds {
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface-2);
}
:root .spotlight-tld {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
:root .spotlight-tld .btn:not(.domain-contact-support), :root .suggested-domains .btn:not(.domain-contact-support) {
  border-color: var(--ch-line-strong);
  background-color: var(--ch-surface-3);
  color: var(--ch-fg);
}
:root .spotlight-tld .unavailable {
  border-color: var(--ch-line);
  background-color: var(--ch-surface-2);
  color: var(--ch-faint);
}
:root .suggested-domains .panel-heading, :root #DomainSearchResults .primary-domain-header {
  border-bottom-color: var(--ch-primary);
}
:root .suggested-domains .domain-lookup-suggestions-message {
  background-color: var(--ch-surface-2);
}
:root .domain-promo-box {
  border-color: var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background-color: var(--ch-surface);
  color: var(--ch-fg);
}
:root .domain-promo-box .small {
  color: var(--ch-muted);
}
:root .domain-renewals, :root .domain-renewals .domain-renewal {
  border-color: var(--ch-line);
  background-color: var(--ch-surface);
}
:root .domain-renewals .domain-renewal:nth-child(even) {
  background-color: var(--ch-surface-2);
}
:root .form-control.domain-renewals-filter {
  background-color: var(--ch-input) !important;
}
:root .service-renewals .div-renewal-ineligible {
  color: var(--ch-muted);
}
:root .addon-renewals > div {
  border-color: var(--ch-line);
}
.ch-configure {
  padding-bottom: 56px;
}
.ch-cfg-head {
  margin-bottom: 28px;
}
.ch-cfg-head .ch-sub {
  margin: 6px 0 0;
}
.ch-cfg-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ch-cfg-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
  }
  .ch-cfg-side {
    position: sticky;
    top: 96px;
  }
}
.ch-cfg-main, .ch-cfg-options {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.ch-cfg-section {
  min-width: 0;
}
.ch-cfg-section + .ch-cfg-section.is-check {
  margin-top: -16px;
}
.ch-cfg-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
}
.ch-cfg-plan-pic {
  width: 48px;
  height: 48px;
  border-radius: var(--ch-radius);
  object-fit: cover;
}
.ch-cfg-plan-text {
  flex: 1;
  min-width: 0;
}
.crafto .ch-cfg-plan-name {
  margin: 0;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.crafto .ch-cfg-plan-group {
  margin: 2px 0 0;
  color: var(--ch-muted);
  font-size: 13px;
}
.crafto .ch-cfg-specs {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ch-line);
}
.ch-cfg-specs > div {
  min-width: 0;
}
@media (max-width: 479px) {
  .crafto .ch-cfg-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.crafto .ch-cfg-specs dt {
  margin: 0;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 400;
}
.crafto .ch-cfg-specs dd {
  margin: 1px 0 0;
  color: var(--ch-fg);
  font-size: 14px;
  font-weight: 500;
}
.ch-cfg-plan-desc {
  flex-basis: 100%;
  color: var(--ch-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
:root #order-standard_cart .ch-cfg-title, .ch-cfg-title {
  margin: 0 0 12px;
  color: var(--ch-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
:root #order-standard_cart .ch-cfg-title label {
  margin: 0;
  color: inherit;
  font: inherit;
}
.ch-cfg-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.crafto .ch-cfg-hint {
  margin: -6px 0 12px;
  color: var(--ch-muted);
  font-size: 13px;
}
.crafto .ch-cfg-refresh {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ch-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.crafto .ch-cfg-refresh:hover {
  color: var(--ch-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ch-cfg-refresh[hidden] {
  display: none;
}
.ch-cfg-refresh:disabled {
  cursor: default;
  opacity: 0.6;
  text-decoration: none;
}
.ch-cfg-refresh:focus-visible, .ch-cfg-choice:has(input:focus-visible) {
  outline: 2px solid var(--ch-primary);
  outline-offset: 2px;
}
.ch-select.ch-cfg-select {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 14px;
  border-radius: var(--ch-radius);
  background-position: right 14px center;
  font-size: 14.5px;
}
.ch-cfg-cycle-select[hidden] {
  display: none;
}
.ch-cfg-choices {
  display: grid;
  gap: 8px;
}
.ch-cfg-section:not(.is-locations) > .ch-cfg-choices:has(> .ch-cfg-choice:not(.ch-cfg-check)) {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 640px) {
  .ch-cfg-section:not(.is-locations) > .ch-cfg-choices:has(> .ch-cfg-choice:not(.ch-cfg-check)) {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
:root #order-standard_cart .ch-cfg-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  background: transparent;
  color: var(--ch-fg);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
:root #order-standard_cart .ch-cfg-choice:hover {
  background: var(--ch-surface);
}
:root #order-standard_cart .ch-cfg-choice.is-selected {
  border-color: var(--ch-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--ch-primary) 70%, var(--ch-line));
  }
  background: var(--ch-surface);
}
:root #order-standard_cart .ch-cfg-choice.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
:root #order-standard_cart .ch-cfg-choice.is-disabled:hover {
  background: transparent;
}
.ch-cfg-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ch-cfg-dot, .ch-cfg-box {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ch-line-strong);
}
.ch-cfg-dot {
  border-radius: 50%;
}
.ch-cfg-box {
  border-radius: 4px;
}
.ch-cfg-choice.is-selected .ch-cfg-dot {
  border-color: var(--ch-primary);
  background: var(--ch-primary);
  box-shadow: inset 0 0 0 3px var(--ch-bg);
}
.ch-cfg-choice.is-selected .ch-cfg-box {
  border-color: var(--ch-primary);
  background: var(--ch-primary);
}
.ch-cfg-choice.is-selected .ch-cfg-box::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4.5px;
  height: 8px;
  border: solid var(--ch-on-primary);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.ch-cfg-choice-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ch-cfg-choice-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ch-cfg-choice-desc {
  color: var(--ch-muted);
  font-size: 13px;
  font-weight: 400;
}
.ch-cfg-choice-end {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.ch-cfg-choice-end:empty {
  display: none;
}
.ch-cfg-choice-price {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ch-muted);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.ch-cfg-choice-end .ch-cfg-choice-price, .ch-cfg-choice-text + .ch-cfg-choice-price {
  margin-left: 0;
}
.ch-cfg-choice .ch-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}
.ch-cfg-choice .ch-country {
  width: 26px;
  height: 18px;
  font-size: 10px;
}
.ch-cfg-choice.is-disabled .ch-flag {
  filter: grayscale(1);
}
.ch-cfg-choice-name small {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 400;
}
.ch-cfg-choice-name small.is-low {
  color: var(--ch-warn);
}
.ch-cfg-choice-name small.is-out {
  color: var(--ch-bad);
}
.ch-cfg-ping {
  min-width: 52px;
  color: var(--ch-faint);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ch-cfg-ping.is-fast {
  color: var(--ch-ok);
}
.ch-cfg-ping.is-fair {
  color: var(--ch-warn);
}
.ch-cfg-ping.is-slow {
  color: var(--ch-bad);
}
@media (max-width: 479px) {
  .ch-cfg-choice-end {
    gap: 10px;
  }
}
.ch-cfg-cycles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
:root #order-standard_cart .ch-cfg-choice.ch-cfg-cycle {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 14px 16px;
}
.ch-cfg-cycle-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-cfg-cycle-price {
  margin-top: 10px;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.ch-cfg-cycle-price small {
  margin-left: 2px;
  color: var(--ch-muted);
  font-size: 13px;
  font-weight: 400;
}
.ch-cfg-cycle-note {
  margin-top: 2px;
  color: var(--ch-muted);
  font-size: 12.5px;
  font-weight: 400;
}
.ch-cfg-save {
  color: var(--ch-ok);
}
@media (max-width: 479px) {
  .ch-cfg-cycles {
    grid-template-columns: 1fr;
  }
  :root #order-standard_cart .ch-cfg-choice.ch-cfg-cycle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
  }
  .ch-cfg-cycle .ch-cfg-cycle-price {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
  }
  .ch-cfg-cycle .ch-cfg-cycle-note {
    padding-left: 26px;
  }
}
.ch-cfg-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ch-muted);
}
.ch-cfg-qty .form-control {
  max-width: 110px;
}
.ch-cfg-inputs {
  display: grid;
  gap: 0 16px;
}
@media (min-width: 640px) {
  .ch-cfg-inputs:not(.is-stacked) {
    grid-template-columns: 1fr 1fr;
  }
}
.ch-cfg-metrics {
  margin: 0;
  padding-left: 18px;
  color: var(--ch-fg);
  font-size: 14px;
}
.crafto .ch-cfg-help {
  margin: 0;
  color: var(--ch-muted);
  font-size: 13.5px;
}
.crafto .ch-cfg-help a {
  color: var(--ch-fg);
  text-decoration: underline;
  text-decoration-color: var(--ch-line-strong);
  text-underline-offset: 3px;
}
.crafto .ch-cfg-help a:hover {
  text-decoration-color: currentColor;
}
:root #order-standard_cart .ch-cfg-summary .order-summary {
  position: relative;
  margin: 0 0 12px;
  border-bottom-width: 1px;
}
:root #order-standard_cart .ch-cfg-summary .order-summary .loader {
  position: absolute;
  top: 17px;
  right: 18px;
  height: auto;
  padding: 0;
  color: var(--ch-faint);
  font-size: 12px;
}
:root #order-standard_cart .order-summary h2.ch-cfg-summary-title {
  margin: 0;
  padding: 16px 20px 0;
  border-bottom: 0;
  color: var(--ch-fg);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
:root #order-standard_cart .ch-cfg-summary .summary-container {
  min-height: 120px;
  padding: 14px 20px 20px;
  border-radius: 0;
  background: var(--ch-surface);
  font-size: 14px;
}
.ch-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--ch-fg);
}
.ch-sum-row > span:last-child {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.ch-sum-row.is-plan {
  font-weight: 500;
}
.crafto .ch-sum-group {
  margin: 1px 0 0;
  color: var(--ch-muted);
  font-size: 12.5px;
}
.ch-sum-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
}
.ch-sum-row.is-sub {
  color: var(--ch-muted);
  font-size: 13px;
}
.ch-sum-row.is-sub strong {
  color: var(--ch-fg);
  font-weight: 400;
}
.ch-sum-totals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ch-line);
}
.ch-sum-due {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ch-line);
}
.ch-sum-due-label {
  color: var(--ch-muted);
  font-size: 13px;
}
.ch-sum-due-amount {
  color: var(--ch-fg);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
:root #order-standard_cart #btnCompleteProductConfig {
  gap: 10px;
}
#btnCompleteProductConfig .fa-arrow-circle-right {
  display: none;
}
.ch-cfg-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ch-line);
  background: var(--ch-surface);
}
.ch-cfg-bar[hidden] {
  display: none;
}
.ch-cfg-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ch-cfg-bar-text span {
  color: var(--ch-muted);
  font-size: 12px;
}
.ch-cfg-bar-text strong {
  overflow: hidden;
  color: var(--ch-fg);
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-configure.has-bar {
  padding-bottom: 96px;
}
@media (min-width: 1024px) {
  .ch-cfg-bar {
    display: none !important;
  }
  .ch-configure.has-bar {
    padding-bottom: 56px;
  }
}
.tw\:relative {
  position: relative;
}
.tw\:m-0 {
  margin: 0px;
}
.tw\:mt-2 {
  margin-top: calc(var(--tw-spacing) * 2);
}
.tw\:mt-3 {
  margin-top: calc(var(--tw-spacing) * 3);
}
.tw\:mt-5 {
  margin-top: calc(var(--tw-spacing) * 5);
}
.tw\:mt-6 {
  margin-top: calc(var(--tw-spacing) * 6);
}
.tw\:mt-7 {
  margin-top: calc(var(--tw-spacing) * 7);
}
.tw\:mt-8 {
  margin-top: calc(var(--tw-spacing) * 8);
}
.tw\:mt-auto {
  margin-top: auto;
}
.tw\:mr-2 {
  margin-right: calc(var(--tw-spacing) * 2);
}
.tw\:mb-0 {
  margin-bottom: 0px;
}
.tw\:mb-2 {
  margin-bottom: calc(var(--tw-spacing) * 2);
}
.tw\:ml-auto {
  margin-left: auto;
}
.tw\:block {
  display: block;
}
.tw\:flex {
  display: flex;
}
.tw\:grid {
  display: grid;
}
.tw\:hidden {
  display: none;
}
.tw\:h-16 {
  height: calc(var(--tw-spacing) * 16);
}
.tw\:w-full {
  width: 100%;
}
.tw\:max-w-2xl {
  max-width: var(--tw-container-2xl);
}
.tw\:max-w-md {
  max-width: var(--tw-container-md);
}
.tw\:max-w-xl {
  max-width: var(--tw-container-xl);
}
.tw\:min-w-0 {
  min-width: 0px;
}
.tw\:flex-1 {
  flex: 1;
}
.tw\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tw\:flex-wrap {
  flex-wrap: wrap;
}
.tw\:items-center {
  align-items: center;
}
.tw\:items-end {
  align-items: flex-end;
}
.tw\:justify-between {
  justify-content: space-between;
}
.tw\:justify-center {
  justify-content: center;
}
.tw\:gap-1 {
  gap: var(--tw-spacing);
}
.tw\:gap-1\.5 {
  gap: calc(var(--tw-spacing) * 1.5);
}
.tw\:gap-2 {
  gap: calc(var(--tw-spacing) * 2);
}
.tw\:gap-3 {
  gap: calc(var(--tw-spacing) * 3);
}
.tw\:gap-4 {
  gap: calc(var(--tw-spacing) * 4);
}
.tw\:gap-6 {
  gap: calc(var(--tw-spacing) * 6);
}
.tw\:gap-10 {
  gap: calc(var(--tw-spacing) * 10);
}
.tw\:gap-x-3 {
  column-gap: calc(var(--tw-spacing) * 3);
}
.tw\:gap-y-1 {
  row-gap: var(--tw-spacing);
}
.tw\:truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw\:border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.tw\:border-line {
  border-color: var(--ch-line);
}
.tw\:py-2 {
  padding-block: calc(var(--tw-spacing) * 2);
}
.tw\:pt-5 {
  padding-top: calc(var(--tw-spacing) * 5);
}
.tw\:text-center {
  text-align: center;
}
.tw\:text-sm {
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading, var(--tw-text-sm--line-height));
}
.tw\:text-xs {
  font-size: var(--tw-text-xs);
  line-height: var(--tw-leading, var(--tw-text-xs--line-height));
}
.tw\:font-semibold {
  --tw-font-weight: var(--tw-font-weight-semibold);
  font-weight: var(--tw-font-weight-semibold);
}
.tw\:text-bad {
  color: var(--ch-bad);
}
.tw\:text-info {
  color: var(--ch-info);
}
.tw\:text-muted {
  color: var(--ch-muted);
}
.tw\:text-ok {
  color: var(--ch-ok);
}
.tw\:text-warn {
  color: var(--ch-warn);
}
.tw\:underline {
  text-decoration-line: underline;
}
.tw\:underline-offset-2 {
  text-underline-offset: 2px;
}
@media (width >= 40rem) {
  .tw\:sm\:inline-flex {
    display: inline-flex;
  }
  .tw\:sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .tw\:lg\:flex {
    display: flex;
  }
  .tw\:lg\:hidden {
    display: none;
  }
  .tw\:lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tw\:lg\:grid-cols-\[1fr_1\.4fr\] {
    grid-template-columns: 1fr 1.4fr;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
    }
  }
}
/* Hero picture ('hero_figure'): beside the text on wide screens, under it on phones and
   tablets. A soft glow behind it, and its bottom fades into the page. The photo behind the
   hero is dimmed further so the picture stands out. */
.ch-hero.has-figure .ch-hero-art img {
    opacity: 0.5;
}
.ch-hero-figure {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.ch-hero-figure::before {
    content: "";
    position: absolute;
    inset: 10% 6% 22%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(56 184 121 / 0.2), rgb(56 184 121 / 0.06) 62%, transparent 100%);
    filter: blur(28px);
}
.ch-hero-figure img {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    filter: saturate(0.9) brightness(0.92);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgb(0 0 0 / 0.45) 76%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgb(0 0 0 / 0.45) 76%, transparent 97%);
    animation: ch-hero-float 8s ease-in-out infinite;
}
@keyframes ch-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .ch-hero-figure img {
        animation: none;
    }
}
@media (min-width: 1024px) {
    .ch-hero.has-figure .ch-hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding-block: 72px 24px;
    }
    .ch-hero.has-figure .ch-hero-copy {
        flex: 1 1 0;
        max-width: 620px;
    }
    .ch-hero.has-figure .ch-hero-figure {
        flex: 0 1 540px;
        margin-block: -24px -56px;
        margin-right: -16px;
    }
}
@media (max-width: 1023.98px) {
    .ch-hero.has-figure .ch-hero-inner {
        gap: 8px;
    }
    .ch-hero.has-figure .ch-hero-figure {
        margin-bottom: -24px;
    }
    .ch-hero.has-figure .ch-hero-figure img {
        max-width: 440px;
    }
}
/* Phones: the photo fills the whole hero, faded, and the text starts near the top */
@media (max-width: 767.98px) {
    .ch-hero.has-figure .ch-hero-art {
        bottom: 0;
        height: auto;
    }
    .ch-hero.has-figure .ch-hero-art img {
        opacity: 0.35;
    }
    .ch-hero.has-figure .ch-hero-art::after {
        background: linear-gradient(180deg, rgb(17 19 23 / 0.35) 0%, rgb(17 19 23 / 0.55) 45%, rgb(17 19 23 / 0.8) 80%, #111317 100%);
    }
    .ch-hero.has-art.has-figure .ch-hero-inner {
        padding-block: 48px 8px;
    }
}
/* ── Configure step: numbered steps, billing cycles and locations ──────
   Labels are plain coloured text rather than badges: the saving under the price, and
   "Recommended" or the stock under the location's name. */

/* Numbered steps: each titled section gets the next number (.ch-cfg-step) in a circle */
.ch-cfg-main {
    counter-reset: ch-step;
}
:root #order-standard_cart .ch-cfg-title:has(.ch-cfg-step),
.ch-cfg-title:has(.ch-cfg-step) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 17px;
}
.ch-cfg-step {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ch-surface-3, #2b3038);
    color: var(--ch-fg);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@supports (color: color-mix(in srgb, red, red)) {
    .ch-cfg-step {
        background: color-mix(in srgb, var(--ch-primary) 30%, var(--ch-bg));
    }
}
.ch-cfg-step::before {
    counter-increment: ch-step;
    content: counter(ch-step);
}
.ch-cfg-title-row .ch-cfg-title {
    margin-bottom: 14px;
}
.ch-cfg-section + .ch-cfg-section.is-check.has-title {
    margin-top: 0; /* the first yes/no option starts the Extras step */
}

/* The picked card: a filled circle with a tick */
.ch-cfg-dot {
    width: 18px;
    height: 18px;
}
.ch-cfg-choice.is-selected .ch-cfg-dot {
    border-color: var(--ch-primary);
    background: var(--ch-primary);
    box-shadow: none;
}
.ch-cfg-choice.is-selected .ch-cfg-dot::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--ch-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Billing cycles, two to a row: the name and what is billed on the left, the price per month
   and the saving on the right */
.ch-cfg-cycles {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 560px) {
    .ch-cfg-cycles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
:root #order-standard_cart .ch-cfg-choice.ch-cfg-cycle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top price" "note save";
    align-content: center;
    align-items: baseline;
    gap: 4px 14px;
    min-height: 72px;
    padding: 14px 18px 14px 16px;
}
.ch-cfg-cycle-top {
    display: flex;
    grid-area: top;
    align-items: center;
    min-width: 0;
}
.ch-cfg-cycle-name {
    font-size: 14.5px;
    font-weight: 600;
}
.ch-cfg-cycle .ch-cfg-cycle-price {
    grid-area: price;
    justify-self: end;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.ch-cfg-cycle .ch-cfg-cycle-price small {
    margin-left: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}
.ch-cfg-cycle .ch-cfg-cycle-note {
    grid-area: note;
    margin: 0;
    padding-left: 28px;
    font-size: 12.5px;
}
.crafto .ch-cfg-cycle .ch-cfg-save {
    grid-area: save;
    justify-self: end;
    color: var(--ch-ok);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 479px) {
    .ch-cfg-cycle .ch-cfg-cycle-price {
        font-size: 18px;
    }
}

/* Locations: the original rows (a small flag, the name, the ping on the right), under the
   home page's region headings */
.ch-loc-grid {
    display: grid;
    gap: 8px;
}
.ch-cfg-section.is-locations > .ch-cfg-choices.is-grouped {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
:root #order-standard_cart .ch-loc-region .ch-region-title {
    margin: 0 0 10px;
    color: var(--ch-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}
.ch-cfg-choice-name small.is-best {
    color: var(--ch-ok);
}
/* ── Configure step: the plan card and the order summary ──────────────── */

/* The plan: its specs beside its name where there's room, each after a thin divider */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) {
    .ch-cfg-plan-text {
        flex: 1 1 auto;
    }
    .crafto .ch-cfg-specs {
        flex-basis: auto;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0 0 0 auto;
        padding-top: 0;
        border-top: 0;
    }
    .ch-cfg-specs > div {
        padding: 2px 20px;
        border-left: 1px solid var(--ch-line);
    }
    .ch-cfg-specs > div:last-child {
        padding-right: 4px;
    }
}

/* The order summary as one card: the summary, then Continue with a note under it. The help
   line sits under the card. */
:root #order-standard_cart #orderSummary.ch-cfg-summary {
    overflow: hidden;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius-lg);
    background: var(--ch-surface);
}
:root #order-standard_cart .ch-cfg-summary .order-summary {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
:root #order-standard_cart .ch-cfg-summary .summary-container {
    min-height: 0;
    padding: 14px 20px 18px;
    background: transparent;
}
.ch-cfg-summary-foot {
    padding: 0 20px 18px;
}
.crafto .ch-cfg-note {
    margin: 10px 0 0;
    color: var(--ch-faint);
    font-size: 12.5px;
    text-align: center;
}
.crafto .ch-cfg-side .ch-cfg-help {
    margin: 16px 4px 0;
    font-size: 13px;
    line-height: 1.55;
}

/* What's in it: the plan, then each choice as a row (its name, then what was picked) */
.ch-sum-row.is-plan {
    font-size: 15px;
    font-weight: 600;
}
.crafto .ch-sum-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
}
.ch-sum-row.is-sub {
    color: var(--ch-fg);
    font-size: 13.5px;
}
.crafto .ch-sum-row.is-sub dt {
    flex-shrink: 0;
    margin: 0;
    color: var(--ch-muted);
    font-weight: 400;
}
.crafto .ch-sum-row.is-sub dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    margin: 0;
    text-align: right;
}
.ch-sum-row.is-sub dd small {
    color: var(--ch-muted);
    font-size: 12px;
}
.ch-sum-totals .ch-sum-row {
    font-size: 13.5px;
}
.ch-sum-totals .ch-sum-row > span:first-child {
    color: var(--ch-muted);
}
/* Option and add-on prices: easy to see, with the billing period after them ("+$1.99/mo") */
:root #order-standard_cart .ch-cfg-choice .ch-cfg-choice-price {
    color: var(--ch-fg);
    font-size: 14px;
    font-weight: 600;
}
.ch-cfg-choice-price small {
    margin-left: 1px;
    color: var(--ch-muted);
    font-size: 12.5px;
    font-weight: 500;
}
/* In the order summary: the price of a choice that costs extra, under what was picked */
.ch-sum-price {
    color: var(--ch-fg);
    font-size: 12.5px;
    font-weight: 600;
}
/* Extras on phones: the name and price on one line, the description the full width under them */
@media (max-width: 639.98px) {
    :root #order-standard_cart .ch-cfg-choice.ch-cfg-check {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 12px;
    }
    .ch-cfg-check .ch-cfg-choice-text {
        display: contents;
    }
    .ch-cfg-check .ch-cfg-box {
        grid-row: 1;
        grid-column: 1;
    }
    .ch-cfg-check .ch-cfg-choice-name {
        grid-row: 1;
        grid-column: 2;
    }
    .ch-cfg-check .ch-cfg-choice-price {
        grid-row: 1;
        grid-column: 3;
    }
    .ch-cfg-check .ch-cfg-choice-desc {
        grid-row: 2;
        grid-column: 2 / 4;
    }
}
/* Home page tiers above the plans (Premium, Extreme…): a card each, the picked one outlined
   with a tick. On each card: the tier's name and its lowest price for the billing period on
   the first line, then its hardware, a line each, the full width of the card. */
.ch-lineup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 28px;
}
/* Side by side where each card is wide enough for its hardware lines to stay on one line,
   so the cards match */
@media (min-width: 1280px) {
    .ch-lineup {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}
.ch-lineup-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-content: start;
    align-items: baseline;
    gap: 8px 14px;
    width: 100%;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius-lg);
    background: var(--ch-surface);
    color: var(--ch-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ch-lineup-option:hover {
    border-color: var(--ch-line-strong);
}
.ch-lineup-option.is-active {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 1px var(--ch-primary);
}
.ch-lineup-option:focus-visible {
    outline: 2px solid var(--ch-primary);
    outline-offset: 3px;
}
.ch-lineup-check {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ch-line-strong);
    border-radius: 50%;
}
.ch-lineup-option.is-active .ch-lineup-check {
    border-color: var(--ch-primary);
    background: var(--ch-primary);
}
.ch-lineup-option.is-active .ch-lineup-check::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5.5px;
    width: 5.5px;
    height: 10px;
    border: solid var(--ch-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* The name, the price and the hardware sit in the card's own grid */
.ch-lineup-body {
    display: contents;
}
.ch-lineup-name {
    grid-row: 1;
    grid-column: 2;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.ch-lineup-from {
    display: flex;
    grid-row: 1;
    grid-column: 3;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.ch-lineup-from-label {
    color: var(--ch-muted);
    font-size: 12.5px;
}
.ch-lineup-price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.ch-lineup-price small {
    margin-left: 1px;
    color: var(--ch-muted);
    font-size: 13px;
    font-weight: 500;
}
.ch-lineup-points {
    display: flex;
    grid-row: 2;
    grid-column: 2 / 4;
    flex-direction: column;
    gap: 5px;
}
.ch-lineup-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ch-muted);
    font-size: 14px;
    line-height: 1.45;
}
.ch-lineup-text i {
    flex-shrink: 0;
    width: 14px;
    color: var(--ch-faint);
    font-size: 12.5px;
    text-align: center;
}
.ch-lineup-price[hidden],
.ch-lineup-panel[hidden] {
    display: none;
}
@media (max-width: 479px) {
    .ch-lineup-option {
        gap: 6px 12px;
        padding: 16px;
    }
    .ch-lineup-name {
        font-size: 17px;
    }
    .ch-lineup-price {
        font-size: 16px;
    }
}