:root {
  /* Graphite 3D bevel palette — Visual Basic / Windows 9x aesthetic */
  --radius: 4px;
  --radius-lg: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;

  /* Light theme (default) — white with gray bevel */
  --p-bg: #ffffff;
  --p-bg-2: #ececec;
  --p-surface: #f5f5f5;
  --p-surface-2: #e8e8e8;
  --p-border: #b0b0b0;
  --p-bevel-hi: #ffffff;
  --p-bevel-hi2: #f0f0f0;
  --p-bevel-lo: #9a9a9a;
  --p-bevel-lo2: #7a7a7a;
  --p-text: #1a1a1a;
  --p-text-muted: #5a5a5a;
  --p-text-dim: #767676;
  --p-accent: #2a2a2a;
  --p-accent-text: #f5f5f5;
  --p-accent-glow: rgba(42, 42, 42, 0.06);
}

/* Dark theme (graphite) */
[data-theme="dark"] {
  --p-bg: #1e1e1e;
  --p-bg-2: #2a2a2a;
  --p-surface: #2d2d30;
  --p-surface-2: #383838;
  --p-border: #1a1a1a;
  --p-bevel-hi: #5a5a5a;
  --p-bevel-hi2: #6e6e6e;
  --p-bevel-lo: #0a0a0a;
  --p-bevel-lo2: #141414;
  --p-text: #ededed;
  --p-text-muted: #a8a8a8;
  --p-text-dim: #878787;
  --p-accent: #c0c0c0;
  --p-accent-text: #1a1a1a;
  --p-accent-glow: rgba(192, 192, 192, 0.12);
}

/* ============ 3D BEVEL UTILITIES (Visual Basic style) ============ */
.az-bevel {
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  background: var(--p-surface);
}
.az-bevel-inset {
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
  background: var(--p-surface);
}
.az-bevel-thick {
  border-top: 2px solid var(--p-bevel-hi);
  border-left: 2px solid var(--p-bevel-hi);
  border-right: 2px solid var(--p-bevel-lo);
  border-bottom: 2px solid var(--p-bevel-lo);
}

/* ============ THEME TOGGLE BUTTON ============ */
.az-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  color: var(--p-text);
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  border-radius: 3px;
  transition: none;
}
.az-theme-btn:hover {
  background: var(--p-surface-2);
}
.az-theme-btn:active {
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-theme-btn svg { display: block; }
/* Show moon in dark, sun in light */
.az-theme-icon-dark { display: block; }
.az-theme-icon-light { display: none; }
[data-theme="light"] .az-theme-icon-dark { display: none; }
[data-theme="light"] .az-theme-icon-light { display: block; }

/* ============ TOP BAR (Amazon nav) ============ */
.az-bar {
  background: var(--p-bg-2);
  border-bottom: 1px solid var(--p-border);
  position: sticky; top: 0; z-index: 50;
}
.az-bar-inner {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px;
}
.az-logo {
  display: flex; align-items: baseline; gap: 0;
  text-decoration: none; color: var(--p-text);
  font-weight: 800; letter-spacing: -0.5px;
}
.az-logo-mark { font-size: 18px; color: var(--p-accent); }
.az-logo-sub { font-size: 12px; color: var(--p-text-muted); font-weight: 400; }

.az-search {
  flex: 1; max-width: 600px;
  display: flex;
}
.az-search-input {
  flex: 1;
  background: var(--p-bg-2); color: var(--p-text);
  border: 0; border-radius: 0;
  padding: 9px 12px; font-size: 13px;
  outline: none;
}
.az-search-btn {
  background: var(--p-accent); color: var(--p-accent-text);
  border: 0; padding: 0 16px;
  border-radius: 0;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.az-search-btn:hover { background: var(--p-surface-2); }

.az-bar-right { display: flex; align-items: center; gap: 14px; }
.az-bar-link {
  color: var(--p-text); text-decoration: none;
  font-size: 12.5px; font-weight: 500;
  padding: 6px 10px;
}
.az-bar-link:hover { color: var(--p-accent); }
.az-bar-cta {
  background: var(--p-accent); color: var(--p-accent-text);
  border-radius: 0;
  font-weight: 700;
}
.az-bar-cta:hover { color: var(--p-accent-text); background: var(--p-surface-2); }

/* ============ MAIN ============ */
.az-main {
  max-width: 1480px; margin: 0 auto;
  padding: 7rem 20px 40px;
}

/* ============ INTEGRATION WITH SITE HEADER ============ */
/* The site header has a profile-style logo (200x200) that extends below the
   header boundary. On desktop we shift the main content right so the hero
   and tables never sit under the logo. The logo's own left margin (1.5rem)
   is preserved. On mobile the logo collapses inline and the offset is
   removed. */
@media (min-width: 769px) {
  .az-main { padding-left: 240px; }
}

/* ============ HERO ============ */
.az-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 20px;
}
.az-hero-left { flex: 1; min-width: 0; }
.az-breadcrumb {
  font-size: 11px; color: var(--p-text-dim);
  margin-bottom: 8px;
}
.az-breadcrumb a { color: var(--p-text-muted); text-decoration: none; }
.az-breadcrumb a:hover { color: var(--p-accent); }
.az-hero h1 {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.az-accent { color: var(--p-accent); }
.az-hero-sub {
  color: var(--p-text-muted);
  font-size: 14px;
  max-width: 640px;
  margin-bottom: 10px;
}
.az-hero-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.az-chip {
  font-size: 11px; padding: 3px 9px;
  border-radius: 999px;
  background: var(--p-surface);
  color: var(--p-text-muted);
  border: 1px solid var(--p-border);
}
.az-chip-on {
  color: var(--p-accent);
  border-color: rgba(212, 245, 5, 0.3);
  background: var(--p-accent-glow);
}

.az-period-toggle {
  display: flex;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.az-period-btn {
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  color: var(--p-text-muted);
  padding: 8px 16px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: none;
}
.az-period-btn:hover { color: var(--p-text); background: var(--p-surface-2); }
.az-period-btn.az-active {
  background: var(--p-surface-2);
  color: var(--p-text);
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-period-save {
  background: var(--p-accent-glow);
  color: var(--p-text);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
}

/* ============ LAYOUT (content + sticky cart) ============ */
.az-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
.az-content, .az-cart { min-width: 0; }

/* ============ STEPS (numbered) ============ */
.az-step {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.az-step-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.az-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 18px; font-weight: 800;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.az-step-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
.az-step-sub {
  font-size: 12.5px; color: var(--p-text-muted);
}

/* ============ STEP 1: TIER CARDS ============ */
.az-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.az-card {
  position: relative;
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  border-radius: 0;
  padding: 12px 14px;
  cursor: pointer;
  transition: none;
  outline: none;
  display: flex; flex-direction: column;
  gap: 8px;
}
.az-card:hover { background: var(--p-surface-2); }
.az-card:focus { outline: 1px dotted var(--p-text); outline-offset: -4px; }
.az-card.az-active {
  background: var(--p-surface-2);
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-card-featured {
  border-top-width: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}
.az-flag {
  position: absolute; top: -8px; left: 12px;
  background: var(--p-accent); color: var(--p-accent-text);
  font-size: 9.5px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.az-card-radio {
  position: absolute; top: 12px; right: 12px;
  width: 14px; height: 14px;
  border: 1.5px solid var(--p-text-dim);
  border-radius: 50%;
  transition: all 0.18s;
}
.az-card.az-active .az-card-radio {
  border-color: var(--p-accent);
  background: var(--p-accent);
  box-shadow: inset 0 0 0 3px var(--p-bg-2);
}
.az-card-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-right: 20px;
}
.az-card-head h3 {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.2px;
}
.az-card-tag {
  font-size: 10.5px; color: var(--p-text-muted);
}
.az-card-desc {
  font-size: 11.5px; color: var(--p-text-muted);
  line-height: 1.35;
}
.az-card-feats {
  list-style: none;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px;
}
.az-card-feats li {
  display: flex; align-items: center; gap: 6px;
}
.az-card-feats li::before {
  content: "✓";
  color: var(--p-accent);
  font-weight: 700;
  font-size: 10px;
}
.az-card-price {
  display: flex; align-items: baseline; gap: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  margin-top: auto;
}
.az-card-from {
  font-size: 10px; color: var(--p-text-dim);
  margin-right: 2px;
}
.az-card-price strong {
  font-size: 22px; font-weight: 700;
  color: var(--p-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.az-card-per {
  font-size: 11px; color: var(--p-text-muted);
}

/* ============ VPS PICKER (sub-options for Enterprise) ============ */
.az-vps-picker {
  margin-top: 14px;
  padding: 14px;
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
}
.az-vps-picker h4 {
  font-size: 12px; font-weight: 600;
  color: var(--p-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.az-vps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.az-vps {
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  border-radius: 0;
  padding: 8px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: none;
  font-family: inherit;
  color: var(--p-text);
}
.az-vps strong {
  font-size: 16px; font-weight: 700;
  color: var(--p-text-muted);
  letter-spacing: 0.5px;
}
.az-vps span {
  font-size: 9.5px; color: var(--p-text-dim);
}
.az-vps em {
  font-style: normal;
  font-size: 11px; color: var(--p-accent);
  font-weight: 600;
  margin-top: 2px;
}
.az-vps:hover { background: var(--p-surface-2); }
.az-vps.az-vps-active {
  background: var(--p-surface-2);
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-vps.az-vps-active strong { color: var(--p-text); }

/* ============ STEP 2: STORAGE ============ */
.az-storage { padding: 4px 0; }
.az-storage-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  background: var(--p-bg-2);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 8px 0 12px;
}
.az-storage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--p-accent);
  border-radius: 50%;
  border: 4px solid var(--p-surface);
  box-shadow: 0 0 14px var(--p-accent-glow);
  cursor: grab;
}
.az-storage-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--p-accent);
  border-radius: 50%;
  border: 4px solid var(--p-surface);
  cursor: grab;
}
.az-storage-readout {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 10px;
}
.az-storage-readout strong {
  font-size: 32px; font-weight: 700;
  color: var(--p-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.az-storage-readout span {
  font-size: 16px; color: var(--p-text-muted);
  font-weight: 600;
}
.az-storage-readout em {
  font-style: normal;
  font-size: 13px; color: var(--p-accent);
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.az-storage-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--p-text-dim);
  margin-top: 4px;
}

/* ============ STEP 3: AI ============ */
.az-ai-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.az-ai {
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  border-radius: 0;
  padding: 10px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--p-text);
  display: flex; flex-direction: column; gap: 3px;
  text-align: center;
  transition: none;
}
.az-ai strong {
  font-size: 13px; font-weight: 600;
}
.az-ai span {
  font-size: 9.5px; color: var(--p-text-dim);
  line-height: 1.3;
}
.az-ai em {
  font-style: normal;
  font-size: 11.5px; color: var(--p-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.az-ai:hover { background: var(--p-surface-2); }
.az-ai.az-ai-active {
  background: var(--p-surface-2);
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-ai.az-ai-active strong { color: var(--p-text); }

/* ============ STEP 4: TABLE ============ */
.az-table-wrap {
  overflow-x: auto;
}
.az-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.az-table th, .az-table td {
  text-align: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.az-table th {
  font-size: 11px; font-weight: 600;
  color: var(--p-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--p-bg-2);
}
.az-table th:first-child, .az-table td:first-child {
  text-align: left;
  color: var(--p-text);
}
.az-table td:not(:first-child) {
  color: var(--p-accent);
  font-weight: 700;
  font-size: 14px;
}
.az-table .az-row-cat td {
  background: var(--p-bg-2);
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  color: var(--p-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 8px;
}

/* ============ ENTERPRISE ADD-ONS ============ */
.az-addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.az-addon {
  display: flex; align-items: stretch;
  cursor: pointer;
  position: relative;
}
.az-addon input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.az-addon-box {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  transition: none;
}
.az-addon:hover .az-addon-box { background: var(--p-surface-2); }
.az-addon input:checked ~ .az-addon-box {
  background: var(--p-surface-2);
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}
.az-addon-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.az-addon-head strong {
  font-size: 13px; font-weight: 700;
  color: var(--p-text);
}
.az-addon-head em {
  font-style: normal;
  font-size: 14px; font-weight: 700;
  color: var(--p-text);
  font-variant-numeric: tabular-nums;
}
.az-addon-head em small {
  font-size: 10px; font-weight: 500;
  color: var(--p-text-muted);
  margin-left: 2px;
}
.az-addon-desc {
  font-size: 11.5px;
  color: var(--p-text-muted);
  line-height: 1.4;
}
.az-step[hidden] { display: none; }
@media (max-width: 600px) {
  .az-addons { grid-template-columns: 1fr; }
}

/* ============ STICKY CART (right column) ============ */
.az-cart {
  position: sticky;
  top: 0;
  align-self: start;
}
.az-cart-inner {
  background: var(--p-surface);
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
  border-radius: 0;
  padding: 18px 20px;
}
.az-cart-pip {
  font-size: 10.5px; color: var(--p-text-muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  font-weight: 700;
  margin-bottom: 10px;
}
.az-cart-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
  padding: 4px 0;
}
.az-cart-row[hidden] { display: none; }
.az-cart-row em { font-style: normal; color: var(--p-text); font-weight: 600; }
.az-cart-lbl { color: var(--p-text-muted); }
.az-cart-val { color: var(--p-text); font-weight: 500; font-variant-numeric: tabular-nums; }

.az-cart-period {
  font-size: 10.5px; color: var(--p-text-dim);
  margin-top: 4px;
}
.az-cart-divider {
  height: 1px;
  background: var(--p-border);
  margin: 12px 0;
}
.az-cart-price {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 4px;
}
.az-cart-currency {
  font-size: 22px; color: var(--p-text);
  font-weight: 600;
}
.az-cart-amount {
  font-size: 56px; font-weight: 800;
  color: var(--p-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  line-height: 0.95;
}
.az-cart-per {
  font-size: 14px; color: var(--p-text-muted);
  margin-left: 4px;
}
.az-cart-saving {
  font-size: 11.5px; color: var(--p-accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.az-cart-saving[hidden] { display: none; }

.az-cart-cta {
  display: block; text-align: center;
  padding: 12px 16px;
  background: var(--p-accent);
  color: var(--p-accent-text);
  font-size: 14px; font-weight: 700;
  border-radius: 0;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: none;
  border-top: 1px solid var(--p-bevel-hi);
  border-left: 1px solid var(--p-bevel-hi);
  border-right: 1px solid var(--p-bevel-lo);
  border-bottom: 1px solid var(--p-bevel-lo);
}
.az-cart-cta:hover { background: var(--p-surface-2); }
.az-cart-cta:active {
  border-top: 1px solid var(--p-bevel-lo);
  border-left: 1px solid var(--p-bevel-lo);
  border-right: 1px solid var(--p-bevel-hi);
  border-bottom: 1px solid var(--p-bevel-hi);
}

.az-cart-trust {
  display: flex; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--p-text-muted);
  margin-top: 10px;
}
.az-cart-fineprint {
  font-size: 10px; color: var(--p-text-dim);
  text-align: center;
  margin-top: 8px;
  line-height: 1.3;
}

/* ============ FOOTER ============ */
.az-foot {
  border-top: 1px solid var(--border-soft);
  margin-top: 30px;
  padding: 16px 0;
  font-size: 11px;
  color: var(--p-text-dim);
}
.az-foot-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.az-foot nav { display: flex; gap: 14px; }
.az-foot a {
  color: var(--p-text-muted); text-decoration: none;
}
.az-foot a:hover { color: var(--p-accent); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .az-layout { grid-template-columns: 1fr; }
  .az-cart { position: static; }
}
@media (max-width: 720px) {
  .az-search { display: none; }
  .az-tiers { grid-template-columns: 1fr; }
  .az-vps-grid, .az-ai-grid { grid-template-columns: repeat(2, 1fr); }
  .az-bar-inner { gap: 12px; padding: 10px 12px; }
  .az-bar-link { font-size: 11.5px; }
  .az-hero { flex-direction: column; align-items: flex-start; }
  .az-main { padding: 0 12px 24px; }
  .az-step { padding: 14px; }
  .az-card-head h3 { font-size: 14px; }
  .az-cart { padding: 16px; border-radius: 0; }
  .az-cart-amount { font-size: 44px; }
}