:root {

  --myx-void:        #08070e;
  --myx-obsidian:    #0f0e16;
  --myx-slate:       #16141f;
  --myx-raise:       #1c1927;
  --myx-hairline:    #2a2735;
  --myx-hairline-lift:#322e44;

  --myx-chrome:      #f5f4f9;
  --myx-haze:        #9c98b0;
  --myx-mute:        #56536b;

  --myx-signal:      #643dff;
  --myx-signal-lift: #8b6bff;
  --myx-signal-deep: #4a2cc4;
  --myx-signal-wash: rgba(100,61,255,0.10);
  --myx-live:        #5fd39a;
  --myx-warn:        #e6b860;
  --myx-down:        #ef5d76;

  --myx-display: 'Space Grotesk', system-ui, sans-serif;
  --myx-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --myx-body:    'Inter', system-ui, sans-serif;

  --myx-t-eyebrow: 0.68rem;
  --myx-t-body:    0.94rem;
  --myx-t-lead:    1.05rem;
  --myx-t-title:   1.5rem;
  --myx-t-head:    2.1rem;
  --myx-t-display: 3.2rem;

  --myx-1: 4px;  --myx-2: 8px;  --myx-3: 12px; --myx-4: 16px;
  --myx-5: 22px; --myx-6: 32px; --myx-7: 48px; --myx-8: 72px;

  --myx-slash: 10px;
  --myx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.myx-text { font-family: var(--myx-body); color: var(--myx-chrome); margin: 0; }
.myx-text.is-display { font-family: var(--myx-display); font-weight: 700; font-size: var(--myx-t-display); letter-spacing: -0.03em; line-height: 1.02; }
.myx-text.is-head    { font-family: var(--myx-display); font-weight: 700; font-size: var(--myx-t-head); letter-spacing: -0.025em; line-height: 1.08; }
.myx-text.is-title   { font-family: var(--myx-display); font-weight: 700; font-size: var(--myx-t-title); letter-spacing: -0.02em; }
.myx-text.is-lead    { font-size: var(--myx-t-lead); color: var(--myx-haze); line-height: 1.55; }
.myx-text.is-body    { font-size: var(--myx-t-body); color: var(--myx-haze); line-height: 1.6; }
.myx-text.is-mono    { font-family: var(--myx-mono); font-size: var(--myx-t-body); color: var(--myx-chrome); letter-spacing: 0.01em; }
.myx-text.is-muted   { color: var(--myx-mute); }
.myx-text .myx-hl    { color: var(--myx-signal-lift); }

.myx-label {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--myx-mono); font-size: var(--myx-t-eyebrow);
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--myx-haze);
}
.myx-label::before { content: "/"; color: var(--myx-signal); font-weight: 500; }
.myx-label.is-plain::before { content: none; }

.myx-box {
  background: var(--myx-obsidian); border: 1px solid var(--myx-hairline);
  padding: var(--myx-5); position: relative;
}
.myx-box.is-raised { background: var(--myx-slate); }
.myx-box.is-flat   { background: none; border: 0; border-top: 1px solid var(--myx-hairline); padding: var(--myx-4) 0 0; }
.myx-box.is-rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--myx-signal);
}
.myx-box.is-rail.is-danger::before { background: var(--myx-down); }
.myx-box.is-hover { transition: border-color 0.18s var(--myx-ease); }
.myx-box.is-hover:hover { border-color: var(--myx-hairline-lift); }
.myx-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--myx-3); margin-bottom: var(--myx-4); }

.myx-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--myx-mono); font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1;
  padding: 12px 24px; border: 0; background: none; cursor: pointer; color: var(--myx-chrome);
  transition: color 0.18s var(--myx-ease), transform 0.12s var(--myx-ease);
}
.myx-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-13deg);
  border: 1px solid transparent; background: transparent;
  transition: background 0.18s var(--myx-ease), border-color 0.18s var(--myx-ease);
}
.myx-btn:active { transform: translateY(1px); }
.myx-btn.is-primary { color: #fff; font-weight: 500; }
.myx-btn.is-primary::before { background: var(--myx-signal); border-color: var(--myx-signal); }
.myx-btn.is-primary:hover::before { background: var(--myx-signal-lift); border-color: var(--myx-signal-lift); }
.myx-btn.is-outline::before { border-color: var(--myx-hairline-lift); }
.myx-btn.is-outline:hover { color: #fff; }
.myx-btn.is-outline:hover::before { border-color: var(--myx-signal); }
.myx-btn.is-danger { color: var(--myx-down); }
.myx-btn.is-danger::before { border-color: var(--myx-down); }
.myx-btn.is-danger:hover { color: #fff; }
.myx-btn.is-danger:hover::before { background: var(--myx-down); border-color: var(--myx-down); }
.myx-btn.is-ghost { padding: 12px 6px; color: var(--myx-haze); }
.myx-btn.is-ghost::before { display: none; }
.myx-btn.is-ghost:hover { color: var(--myx-chrome); }
.myx-btn.is-sm { padding: 8px 17px; font-size: 0.76rem; }
.myx-btn.is-block { width: 100%; }
.myx-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.myx-btn .myx-slash { color: currentColor; opacity: 0.85; }

.myx-field { display: flex; flex-direction: column; gap: 7px; }
.myx-field > .myx-label { margin-bottom: 1px; }
.myx-input {
  font-family: var(--myx-mono); font-size: 0.9rem; color: var(--myx-chrome);
  background: var(--myx-void); border: 1px solid var(--myx-hairline); padding: 11px 13px;
  transition: border-color 0.15s var(--myx-ease); width: 100%;
}
.myx-input::placeholder { color: var(--myx-mute); }
.myx-input:focus { outline: none; border-color: var(--myx-signal); }

.myx-selectwrap { position: relative; display: block; }
.myx-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  text-overflow: ellipsis; }

.myx-selectwrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.5px solid var(--myx-haze); border-bottom: 1.5px solid var(--myx-haze);
  transform: rotate(45deg); pointer-events: none; transition: border-color 0.15s var(--myx-ease);
}
.myx-selectwrap:hover::after { border-color: var(--myx-chrome); }

.myx-select option { background: var(--myx-slate); color: var(--myx-chrome); }

.myx-seg { display: inline-flex; }
.myx-chip {
  position: relative; isolation: isolate;
  font-family: var(--myx-mono); font-size: 0.78rem; color: var(--myx-haze);
  background: none; border: 0; padding: 9px 17px; cursor: pointer; transition: color 0.15s;
}
.myx-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-13deg);
  background: var(--myx-void); border: 1px solid var(--myx-hairline); transition: background 0.15s, border-color 0.15s;
}
.myx-seg .myx-chip:not(:first-child) { margin-left: -1px; }
.myx-chip:hover { color: var(--myx-chrome); }
.myx-chip:hover::before { border-color: var(--myx-hairline-lift); }
.myx-chip.is-on { color: #fff; z-index: 1; }
.myx-chip.is-on::before { background: var(--myx-signal); border-color: var(--myx-signal); }

.myx-stat { display: flex; flex-direction: column; gap: 10px; }
.myx-stat-v { font-family: var(--myx-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; color: var(--myx-chrome); line-height: 1; }
.myx-stat-v small { font-family: var(--myx-mono); font-size: 0.8rem; font-weight: 400; color: var(--myx-haze); letter-spacing: 0; margin-left: 4px; }

.myx-dot { display: inline-block; width: 7px; height: 7px; background: var(--myx-mute); flex: none; }
.myx-dot.is-live { background: var(--myx-live); box-shadow: 0 0 0 3px rgba(86,211,154,0.14); }
.myx-dot.is-warn { background: var(--myx-warn); }
.myx-dot.is-down { background: var(--myx-down); }

.myx-divider { border: 0; border-top: 1px solid var(--myx-hairline); margin: var(--myx-5) 0; }

.myx-btn:focus-visible, .myx-chip:focus-visible, .myx-input:focus-visible { outline: 2px solid var(--myx-signal-lift); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .myx-btn, .myx-box, .myx-chip, .myx-input { transition: none; } }

    .myx-wrap { max-width: 820px; margin: 0 auto; padding: 120px 24px 96px; }
    .myx-back { font-family: var(--font-data); font-size: 0.82rem; color: var(--signal-lift); display: inline-block; margin-bottom: 28px; }
    .myx-copy { color: var(--haze); font-size: 1rem; line-height: 1.65; margin: 0 0 10px; max-width: 68ch; }
    .myx-assume { font-family: var(--font-data); font-size: 0.8rem; color: var(--haze); opacity: 0.85; }
    .myx-pick .myx-spec-k a { color: var(--chrome); text-decoration: none; border-bottom: 1px solid var(--signal); }
    .myx-pick .myx-spec-k a:hover { color: var(--signal-lift); }
    .myx-pick .myx-spec-k em { font-family: var(--font-data); font-style: normal; font-size: 0.78rem; color: var(--signal-lift); margin-left: 8px; }
    .myx-pick .myx-spec-v { max-width: 46ch; text-align: right; color: var(--haze); }
    .myx-table { overflow-x: auto; }
    .myx-table table { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 0.84rem; }
    .myx-table th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline); color: var(--haze);
      font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
    .myx-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
    .myx-table td:first-child { color: var(--chrome); }
    .myx-table td:not(:first-child):not(:nth-child(2)) { color: var(--live); }
    .myx-pricesave { font-family: var(--font-data); font-size: 0.85rem; color: var(--live); margin: 10px 0 0; }
    .myx-spec-v .save { font-style: normal; color: var(--live); margin-left: 8px; }
    .myx-spec-v .per { font-style: normal; color: var(--haze); margin-left: 6px; font-size: 0.82em; }
    .myx-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; margin: 0; }
    .myx-head .myx-lead { color: var(--haze); margin: 12px 0 0; font-size: 1.02rem; }
    .myx-price { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; margin: 24px 0 0; letter-spacing: -0.02em; }
    .myx-price small { font-family: var(--font-data); font-size: 0.82rem; font-weight: 400; color: var(--haze); }
    .myx-section { margin-top: 40px; }
    .myx-section h2 { font-family: var(--font-data); font-size: 0.8rem; color: var(--haze); letter-spacing: 0.12em; margin: 0 0 16px; }
    .myx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .myx-chip-link { font-family: var(--font-data); font-size: 0.8rem; color: var(--chrome); border: 1px solid var(--hairline); padding: 6px 12px; }
    .myx-chip-link .s { color: var(--signal); }
    .myx-features { list-style: none; padding: 0; margin: 0; }
    .myx-features li { color: var(--haze); padding: 7px 0 7px 22px; position: relative; }
    .myx-features li::before { content: "/"; position: absolute; left: 0; color: var(--signal); font-family: var(--font-data); }
    .myx-estimator { background: var(--slate); border: 1px solid var(--hairline); padding: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
    .myx-estimator label { font-family: var(--font-data); font-size: 0.85rem; color: var(--haze); display: flex; align-items: center; gap: 10px; }
    .myx-estimator input { background: var(--void); border: 1px solid var(--hairline); color: var(--chrome); font-family: var(--font-data); padding: 10px 12px; width: 110px; }
    .myx-estimator .est-cost { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; margin-left: auto; }
    .myx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
    .detail-state { color: var(--haze); font-family: var(--font-data); }

    .myx-hero { background: var(--slate); border: 1px solid var(--hairline); padding: 28px; margin-top: 8px; }
    .myx-hero .myx-price { margin-top: 16px; }

    .myx-spec { border: 1px solid var(--hairline); }
    .myx-spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-family: var(--font-data); font-size: 0.88rem; }
    .myx-spec-row:last-child { border-bottom: 0; }
    .myx-spec-k { color: var(--haze); letter-spacing: 0.06em; } .myx-spec-v { color: var(--chrome); text-align: right; }

    .myx-uc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .myx-uc div { font-family: var(--font-data); font-size: 0.88rem; color: var(--haze); border: 1px solid var(--hairline); padding: 12px 14px; }
    .myx-uc div::before { content: "/ "; color: var(--signal); }

    .myx-links div { padding: 0; }
    .myx-links div::before { content: none; }
    .myx-links a { display: block; padding: 12px 14px; }
    .myx-links a::before { content: "/ "; color: var(--signal); }

    .loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .loc-grid a { color: var(--haze); border: 1px solid var(--hairline); padding: 11px 14px; font-family: var(--font-data); font-size: 0.88rem; text-decoration: none; }
    .loc-grid a:hover { color: var(--chrome); border-color: var(--signal-lift); }

    .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .steps3 .step { border: 1px solid var(--hairline); padding: 16px; }
    .steps3 .step .n { font-family: var(--font-data); font-size: 0.72rem; color: var(--signal-lift); letter-spacing: 0.1em; }
    .steps3 .step p { color: var(--haze); font-size: 0.86rem; margin: 8px 0 0; }

    .faq dt { font-family: var(--font-data); color: var(--chrome); font-size: 0.92rem; margin-top: 16px; }
    .faq dd { color: var(--haze); margin: 6px 0 0; font-size: 0.92rem; }
    .myx-note { background: rgba(100,61,255,0.08); border: 1px solid var(--signal); padding: 16px 18px; font-family: var(--font-data); font-size: 0.88rem; color: var(--chrome); margin-top: 24px; }
    .myx-note .s { color: var(--signal-lift); }

    @media (max-width: 620px) {
      .myx-uc, .steps3 { grid-template-columns: 1fr; }
      .myx-wrap { padding: 100px 18px 80px; }

      .myx-spec-row { flex-direction: column; align-items: flex-start; gap: 4px; }
      .myx-spec-v, .myx-pick .myx-spec-v { text-align: left; max-width: none; }
      .myx-spec.is-ladder .myx-spec-row { flex-direction: row; align-items: baseline; }
      .myx-spec.is-ladder .myx-spec-v { text-align: right; }

      .myx-back { padding: 10px 4px; margin: 0 0 18px -4px; }
      .myx-pick .myx-spec-k a { display: inline-block; padding: 10px 2px; margin-left: -2px; }

      .myx-table table, .myx-table tbody, .myx-table tr, .myx-table td { display: block; }
      .myx-table thead { display: none; }
      .myx-table tr { border: 1px solid var(--hairline); margin-bottom: 10px; }
      .myx-table tr:last-child { margin-bottom: 0; }
      .myx-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        border-bottom: 0; padding: 7px 12px; text-align: right; }
      .myx-table td::before { content: attr(data-k); color: var(--haze); text-align: left;
        font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

      .myx-table td:first-child { border-bottom: 1px solid var(--hairline); padding: 10px 12px; }
      .myx-table td:last-child { padding-bottom: 11px; }

      .myx-cta { flex-direction: column; align-items: stretch; gap: 10px; }
      .myx-cta .btn-outline { text-align: center; }
    }

    @media (max-width: 860px) {
      .nav-links { gap: 9px; }
      .nav-links a:not(.btn) { padding: 12px 2px; }
      .nav .btn { padding: 0.73rem 1.05rem; }
      .logo { padding: 6px 0; }
    }

.st-pick { display: flex; flex-direction: column; gap: 8px; }
.st-custom { display: flex; align-items: center; gap: 8px; }
.st-custom[hidden] { display: none; }
.st-custom-in { flex: 1 1 auto; min-width: 0; }
.st-custom-u {
  font-family: var(--myx-mono);
  font-size: var(--myx-t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--myx-haze);
}

.st-tape-pick .st-tape-sel { position: relative; display: inline-flex; align-items: center; }
.st-tape-pick select.st-tape-v {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; padding: 0 26px 0 0; margin: 0;
  color: var(--myx-chrome); cursor: pointer; line-height: 1;
}
.st-tape-pick select.st-tape-v:focus-visible { outline: 2px solid var(--myx-signal); outline-offset: 4px; }
.st-tape-pick .st-tape-sel::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--myx-haze); border-bottom: 2px solid var(--myx-haze);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.st-tape-pick select.st-tape-v option { font-family: var(--myx-body); font-size: 0.95rem; background: var(--myx-slate); color: var(--myx-chrome); }

.myx-dd { position: relative; display: inline-block; }
.myx-dd-t {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit;
}
.myx-dd-t:focus-visible { outline: 2px solid var(--myx-signal); outline-offset: 4px; }
.myx-dd-caret {
  width: 9px; height: 9px; flex: none; align-self: center;
  border-right: 2px solid var(--myx-haze); border-bottom: 2px solid var(--myx-haze);
  transform: translateY(-2px) rotate(45deg); transition: transform 0.16s var(--myx-ease);
}
.myx-dd.is-open .myx-dd-caret { transform: translateY(2px) rotate(225deg); border-color: var(--myx-signal-lift); }
.myx-dd-pop {
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; min-width: 232px;
  background: var(--myx-slate); border: 1px solid var(--myx-hairline-lift);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.myx-dd-pop[hidden] { display: none; }
.myx-dd-list { display: flex; flex-direction: column; padding: 6px; }
.myx-dd-o {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: none; border: 0; padding: 9px 12px; cursor: pointer; text-align: left;
  font-family: var(--myx-body); font-size: var(--myx-t-body); color: var(--myx-chrome);
}
.myx-dd-o:hover { background: var(--myx-raise); }
.myx-dd-o:focus-visible { outline: 2px solid var(--myx-signal); outline-offset: -2px; }
.myx-dd-o.is-on { background: var(--myx-signal-wash); color: var(--myx-chrome); }
.myx-dd-o.is-on .myx-dd-o-l { color: var(--myx-signal-lift); }
.myx-dd-o-n { font-family: var(--myx-mono); font-size: var(--myx-t-eyebrow); color: var(--myx-haze); }
.myx-dd-sep { height: 1px; background: var(--myx-hairline); margin: 0; }
.myx-dd-custom { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.myx-dd-custom.is-on { background: var(--myx-signal-wash); }
.myx-dd-custom-k {
  font-family: var(--myx-mono); font-size: var(--myx-t-eyebrow); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--myx-haze);
}
.myx-dd-custom.is-on .myx-dd-custom-k { color: var(--myx-signal-lift); }
.myx-dd-custom-r { display: flex; align-items: center; gap: 8px; }
.myx-dd-custom-in { flex: 1 1 auto; min-width: 0; }
.myx-dd-custom-u, .myx-dd-hint {
  font-family: var(--myx-mono); font-size: var(--myx-t-eyebrow); color: var(--myx-haze); margin: 0;
}

.st-tape-pick .myx-dd { display: inline-flex; align-items: baseline; }
.st-tape-pick .myx-dd-t.st-tape-v { display: inline-flex; align-items: baseline; gap: 12px; }
.st-tape-pick .myx-dd-pop { min-width: 260px; }

.st-tape-pick .myx-dd-t.st-tape-v { white-space: nowrap; }
.st-tape-pick .myx-dd-face { white-space: nowrap; }