/*!
 * Ad Armory Hosting Wizard v1.0.2 — wizard.css
 *
 * Design foundation: A² Mail Wizard (cyan/dark Ad Armory design system).
 * All Enfold-aware overrides use #top prefix to win specificity wars.
 *
 * v1.0.2 — targeted brand fixes from CMO review:
 *   - NO gradients on buttons. Solid brand colors only.
 *   - Plan name: 20px / 700 / uppercase
 *   - Plan amount: clamp(24px, 3vw, 28px)
 *   - p tag color: #c0c0c0 (was inherit/white)
 *   - Phead p color: #c0c0c0 with 24px margin-bottom for breathing room
 *   - Toolbar: left-aligned settings cluster (product seg + billing toggle close together)
 *   - Savings callout: purple accent, sits below toggle (no longer pushes toggle right)
 *   - Most Popular ribbon: solid brand purple #5745ff
 *   - .aah-loc background: #111111
 *   - Region tab filter fix: hide via class, not inline style (was losing to !important)
 *   - Stepnav active number: solid #015b6f (was gradient)
 *   - Stepnav active border: solid #00cdfb (was gradient)
 *   - Order summary top accent: solid #00cdfb (was gradient)
 *   - Site Sentinel addon: integrated inside Order Summary panel
 *   - Flag: img tag with proper sizing (was emoji that rendered "US US" on Win)
 */

/* === No outer spacing — Enfold color section owns the container === */
#top .aah-wrap, #top .aah-wizard { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; background: transparent !important; }
#top .aah-wrap, #top .aah-wrap * { box-sizing: border-box; }
#top .aah-wrap { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #fff !important; line-height: 1.5 !important; }

/* === Typography overrides — Enfold styles headings aggressively === */
#top .aah-wrap h2,
#top .aah-wrap .aah-phead h2 { font-family: inherit !important; font-size: clamp(1.5rem, 3.2vw, 2rem) !important; font-weight: 500 !important; color: #fff !important; line-height: 1.15 !important; margin: 0 0 10px !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; border: none !important; background: none !important; }
#top .aah-wrap h3 { font-family: inherit !important; font-weight: 500 !important; color: #fff !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; border: none !important; background: none !important; }
#top .aah-wrap p { font-family: inherit !important; margin: 0 !important; padding: 0 !important; color: #c0c0c0 !important; }
#top .aah-wrap .aah-phead p { font-size: 16px !important; color: #c0c0c0 !important; margin: 0 0 24px !important; padding: 0 !important; line-height: 1.5 !important; }
#top .aah-wrap a { color: #00cdfb !important; text-decoration: none !important; box-shadow: none !important; }
#top .aah-wrap strong { font-weight: 500; }

/* === Form elements — Enfold overrides input/button bg globally === */
#top .aah-wrap .aah-searchbar input {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  transition: all .2s !important;
}
#top .aah-wrap input[type=text]:not(.aah-searchbar input):not(.aah-region__search input),
#top .aah-wrap input[type=email]:not(.aah-searchbar input):not(.aah-region__search input) {
  background: #0c0c0c !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}
#top .aah-wrap input[type=text]::placeholder,
#top .aah-wrap input[type=email]::placeholder { color: #555 !important; opacity: 1 !important; }

/* === All buttons in wrap: reset Enfold defaults === */
#top .aah-wrap button { background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; min-height: 0 !important; line-height: normal !important; box-shadow: none !important; }

/* === SVG icons inside wrap === */
#top .aah-wrap svg { fill: none !important; stroke: #007e99 !important; }

/* === Step show/hide === */
#top .aah-wrap .aah-step { display: none !important; }
#top .aah-wrap .aah-step.aah-active { display: block !important; }
#top .aah-wrap .aah-step[hidden] { display: none !important; }

/* === CTA button === */
#top .aah-wrap .aah-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 28px !important; font-size: 14px !important; font-weight: 500 !important; font-family: inherit !important; border-radius: 5px !important; border: none !important; cursor: pointer !important; transition: all .2s !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; height: auto !important; min-height: 0 !important; text-transform: none !important; letter-spacing: normal !important; }
#top .aah-wrap .aah-btn--full { width: 100% !important; padding: 16px !important; }
#top .aah-wrap .aah-btn--cta { background: #007e99 !important; color: #fff !important; }
#top .aah-wrap .aah-btn--cta:hover { background: #009bbe !important; }
#top .aah-wrap .aah-btn--cta:disabled { background: #2a2a2a !important; color: #666 !important; cursor: not-allowed !important; }
#top .aah-wrap .aah-btn--cta:disabled:hover { background: #2a2a2a !important; }
#top .aah-wrap .aah-btn--cta svg { stroke: #fff !important; width: 16px !important; height: 16px !important; }

/* === Segmented toggle === */
#top .aah-wrap .aah-seg { display: inline-flex !important; background: #0c0c0c !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 6px !important; padding: 4px !important; gap: 2px !important; }
#top .aah-wrap .aah-seg__opt { padding: 10px 18px !important; font-size: 14px !important; font-weight: 500 !important; color: #888 !important; background: transparent !important; border: 0 !important; border-radius: 4px !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; min-height: 0 !important; line-height: 1 !important; cursor: pointer !important; transition: color .15s, background .15s !important; }
#top .aah-wrap .aah-seg__opt:hover { color: #c0c0c0 !important; }
#top .aah-wrap .aah-seg__opt.aah-on { background: #212121 !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(0,205,251,0.25) !important; }

/* === Step nav === */
.aah-stepnav { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 40px; flex-wrap: wrap; }
.aah-stepnav__item { padding: 16px 0; font-size: 14px; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 12px; border-bottom: none; margin-bottom: -1px; }
.aah-stepnav__sep { padding: 0 22px; color: #2a2a2a; font-size: 14px; display: flex; align-items: center; margin-bottom: -1px; }
.aah-stepnav__sep svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aah-stepnav__item.aah-on { color: #fff; border-bottom: none; }
.aah-stepnav__item.aah-done { color: #888; }
.aah-stepnav__num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background: #161616; border: 1px solid rgba(255,255,255,0.08); }
.aah-stepnav__item.aah-on .aah-stepnav__num { background: #015b6f; border: none; color: #fff; }
.aah-stepnav__item.aah-done .aah-stepnav__num { background: #1a1a1a; color: #00cdfb; }

/* === Page head === */
.aah-phead { margin-bottom: 28px; }
.aah-phead p strong { color: #c0c0c0; font-weight: 500; }

/* === Card === */
.aah-card { background: #161616; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 24px; }
#top .aah-wrap .aah-card { padding: 24px !important; }
.aah-slab { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: #888; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
#top .aah-wrap .aah-slab { font-size: 12px !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; font-weight: 500 !important; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: none !important; }

/* ═══════════════════════════════════════════════════════════
 * STEP 1 — PLAN
 * ═══════════════════════════════════════════════════════════ */

/* === Step 1 toolbar — left-aligned settings cluster === */
.aah-toolbar { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-bottom: 24px; }
.aah-toolbar__group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#top .aah-wrap .aah-toolbar__lbl { font-size: 11px !important; font-weight: 500 !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }

/* Savings note — purple-accent pill that hangs below the billing seg.
 * Sits in column-flow under the segmented control so it doesn't shift the toggle's position. */
#top .aah-wrap .aah-billcard__note { font-size: 12px !important; color: #5745ff !important; font-weight: 500 !important; background: rgba(87,69,255,0.10) !important; padding: 4px 10px !important; border-radius: 4px !important; line-height: 1.3 !important; letter-spacing: 0.02em !important; }
.aah-billcard__note[hidden] { display: none !important; }

/* v1.0.2: billing toggle was a slide-pill (.aah-stgl), now uses .aah-seg
 * for visual consistency with the Product Core/Apex segmented control above. */

/* Product tagline — small line under toolbar, above plan grid */
/* Compare toggle + panel — replaces floating tagline with on-demand differentiation context */
#top .aah-wrap .aah-compare-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #8b92b3 !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  transition: color .15s !important;
}
#top .aah-wrap .aah-compare-toggle:hover { color: #c0c0c0 !important; }
#top .aah-wrap .aah-compare-toggle__lbl { color: inherit !important; }
#top .aah-wrap .aah-compare-toggle__icon { width: 16px !important; height: 16px !important; stroke: #00cdfb !important; flex-shrink: 0 !important; transition: stroke .15s !important; }
#top .aah-wrap .aah-compare-toggle:hover .aah-compare-toggle__icon { stroke: #009bbe !important; }

.aah-compare-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: #111111;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 24px;
  margin: 0 0 24px;
  animation: aah-fadein .25s ease;
}
.aah-compare-panel[hidden] { display: none !important; }

.aah-compare-col__h { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#top .aah-wrap .aah-compare-col__chip { font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 999px !important; line-height: 1.4 !important; }
#top .aah-wrap .aah-compare-col__chip--core { background: rgba(0,205,251,0.10) !important; color: #00cdfb !important; }
#top .aah-wrap .aah-compare-col__chip--apex { background: rgba(87,69,255,0.10) !important; color: #5745ff !important; }
#top .aah-wrap .aah-compare-col__title { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 1 !important; }

#top .aah-wrap .aah-compare-col__desc { font-size: 13px !important; color: #c0c0c0 !important; margin: 0 0 16px !important; line-height: 1.5 !important; }

.aah-compare-col__list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.aah-compare-col__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #c0c0c0; line-height: 1.4; }
#top .aah-wrap .aah-compare-col__list svg { width: 14px !important; height: 14px !important; stroke: #00cdfb !important; flex-shrink: 0; margin-top: 2px; stroke-width: 2.5 !important; }
#top .aah-wrap .aah-compare-col--apex .aah-compare-col__list svg { stroke: #5745ff !important; }

@media (max-width: 700px) {
  .aah-compare-panel { grid-template-columns: 1fr; gap: 24px; }
}

/* Plan cards grid — 4 across desktop, wraps on mobile */
.aah-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.aah-plan {
  position: relative;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden; /* contains Apex shimmer ::after sweep */
  transition: border-color .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.aah-plan:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-4px); box-shadow: 0 0 15px 0 rgba(0,0,0,0.4); }
.aah-plan--popular { border-color: rgba(0,205,251,0.5); box-shadow: 0 0 15px 0 rgba(0,205,251,0.25); }
.aah-plan--selected { border-color: #00cdfb; box-shadow: 0 0 15px 0 rgba(0,205,251,0.4); transform: translateY(-3px); }
.aah-plan--selected .aah-plan__amt { text-shadow: 0 0 16px rgba(0,205,251,0.35); transition: text-shadow .3s; }

/* Apex shimmer sweep — subtle gradient band passes across on hover.
 * Premium "energy / supercharged" cue without being gaudy. */
#top .aah-wrap .aah-product-apex .aah-plan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(87,69,255,0.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
#top .aah-wrap .aah-product-apex .aah-plan:hover::after { transform: translateX(100%); }
/* Apex selected price glow shifts to purple */
#top .aah-wrap .aah-product-apex .aah-plan--selected .aah-plan__amt { text-shadow: 0 0 16px rgba(87,69,255,0.45) !important; }
/* Keep card content above the shimmer overlay */
#top .aah-wrap .aah-product-apex .aah-plan > * { position: relative; z-index: 2; }

/* Most Popular badge — slow breathing glow draws the eye without being noisy */
@keyframes aah-badge-pulse {
  0%, 90%, 100% { box-shadow: 0 0 0 0 rgba(87,69,255,0); }
  45% { box-shadow: 0 0 0 5px rgba(87,69,255,0.2); }
}

.aah-plan__badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: #5745ff;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 0 0 6px 6px;
  text-transform: uppercase;
  z-index: 3;
  animation: aah-badge-pulse 3s ease-in-out infinite;
}

.aah-plan__head { margin-bottom: 14px; }
#top .aah-wrap .aah-plan__name { font-size: 20px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 8px !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }
.aah-plan__tagline { font-size: 13px; color: #888; line-height: 1.45; }

.aah-plan__price { display: flex; align-items: baseline; gap: 2px; margin: 8px 0 4px; }
.aah-plan__amt { font-size: clamp(24px, 3vw, 28px); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.aah-plan__period { font-size: 14px; color: #888; }
.aah-plan__billnote { font-size: 12px; color: #888; margin-bottom: 14px; }

.aah-plan__specs-label { font-size: 14px; font-weight: 500; color: #c0c0c0; margin: 16px 0 8px; }
.aah-plan__specs { list-style: none !important; padding: 0 !important; margin: 0 0 18px !important; flex: 1; }
#top .aah-wrap .aah-plan__specs { list-style: none !important; padding: 0 !important; margin: 0 0 18px !important; }
.aah-plan__specs li { font-size: 13px; color: #c0c0c0; padding: 4px 0 4px 18px; position: relative; line-height: 1.45; }
.aah-plan__specs li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #00cdfb; }
.aah-plan__specs li strong { color: #fff; font-weight: 500; }

.aah-plan__cta {
  background: #007e99 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border-radius: 5px !important;
  border: none !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
.aah-plan__cta:hover { background: #009bbe !important; }
.aah-plan--selected .aah-plan__cta { background: #009bbe !important; box-shadow: 0 0 0 2px rgba(0,205,251,0.25) !important; }

@media (max-width: 1100px) {
  .aah-plans { grid-template-columns: repeat(2, 1fr); }
}
/* v1.0.2: Plans → horizontal slider on mobile (parity with A² Sites Wizard).
 * Cards become 280px fixed-width snap targets; container extends edge-to-edge. */
@media (max-width: 700px) {
  .aah-plans {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 4px 16px 16px;
    margin-left: -16px;
    margin-right: -16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) #161616;
  }
  .aah-plans::-webkit-scrollbar { height: 6px; }
  .aah-plans::-webkit-scrollbar-track { background: #161616; border-radius: 3px; }
  .aah-plans::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
  .aah-plans::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
  .aah-plan {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 600px) {
  .aah-toolbar { gap: 20px; }
  .aah-toolbar__group { width: 100%; }
  .aah-toolbar .aah-seg { width: 100%; }
  .aah-toolbar .aah-seg__opt { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
 * APEX PURPLE BRANDING
 * Scoped via .aah-product-apex (set on .aah-wizard by JS on init + toggle).
 * Core stays cyan; only Apex shifts to purple to signal "premium / different
 * firepower". Brand purple #5745ff is the primary; #6957ff is hover/lift.
 * ═══════════════════════════════════════════════════════════ */

/* Apex plan cards: diagonal purple-tinted gradient signals "premium / different firepower" */
#top .aah-wrap .aah-product-apex .aah-plan { background: linear-gradient(to bottom right, #110e20, #0d0a18, #0a0a12) !important; }

/* Spec bullet dots: purple instead of cyan */
#top .aah-wrap .aah-product-apex .aah-plan__specs li::before { background: #5745ff !important; }

/* Popular & selected card borders/glows: purple */
#top .aah-wrap .aah-product-apex .aah-plan--popular { border-color: rgba(87,69,255,0.5) !important; box-shadow: 0 0 15px 0 rgba(87,69,255,0.25) !important; }
#top .aah-wrap .aah-product-apex .aah-plan--selected { border-color: #5745ff !important; box-shadow: 0 0 15px 0 rgba(87,69,255,0.4) !important; }

/* CTA: keeps brand cyan-deep #007e99 across both products for button affordance consistency.
 * The card background tells the product story; the button stays familiar. */
#top .aah-wrap .aah-product-apex .aah-plan__cta { background: #007e99 !important; }
#top .aah-wrap .aah-product-apex .aah-plan__cta:hover { background: #009bbe !important; }
#top .aah-wrap .aah-product-apex .aah-plan--selected .aah-plan__cta { background: #009bbe !important; box-shadow: 0 0 0 2px rgba(0,205,251,0.25) !important; }

/* Apex seg-button glow when active: purple (reinforces "you're on the purple product") */
#top .aah-wrap .aah-product-apex .aah-seg__opt[data-product="apex"].aah-on { box-shadow: 0 0 0 1px rgba(87,69,255,0.4) !important; }

/* ═══════════════════════════════════════════════════════════
 * STEP 2 — SERVER LOCATION
 * ═══════════════════════════════════════════════════════════ */

.aah-regions { display: flex; align-items: center; gap: 4px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.aah-region {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #888 !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: color .15s, background .15s !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.aah-region:hover { color: #c0c0c0 !important; }
.aah-region.aah-on { background: #0c0c0c !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(0,205,251,0.25) !important; }

.aah-region__search { margin-left: auto; position: relative; min-width: 220px; }
.aah-region__search svg { position: absolute; left: 12px; top: 32%; width: 16px; height: 16px; stroke: #555; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#top .aah-wrap .aah-region__search input {
  background: #0c0c0c !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 10px 12px 10px 36px !important;
  width: 100% !important;
  outline: none !important;
  height: auto !important;
  min-height: 0 !important;
}
#top .aah-wrap .aah-region__search input:focus { border-color: rgba(0,205,251,0.4) !important; box-shadow: 0 0 0 3px rgba(0,205,251,0.08) !important; }
#top .aah-wrap .aah-region__search input::placeholder { color: #555 !important; }

.aah-loclist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aah-loc {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
}
.aah-loc:hover { border-color: rgba(255,255,255,0.18) !important; background: #1a1a1a !important; }
.aah-loc--selected { border-color: rgba(0,205,251,0.5) !important; background: rgba(0,205,251,0.04) !important; box-shadow: 0 0 0 1px rgba(0,205,251,0.25) !important; }

/* v1.0.2: filter visibility helper. JS toggles this class instead of inline
 * style — inline display:none was losing to the !important on .aah-loc above,
 * which silently broke the region tabs and search filter. */
#top .aah-wrap .aah-loc.aah-loc--hidden { display: none !important; }

.aah-loc__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); flex-shrink: 0; transition: border-color .15s, background .15s; position: relative; }
.aah-loc--selected .aah-loc__radio { border-color: #0c0c0c; background: #0c0c0c; }
.aah-loc--selected .aah-loc__radio::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #00cdfb; }

/* v1.0.2: flag is now a PNG image (was broken emoji). Fixed dimensions for layout stability. */
#top .aah-wrap .aah-loc__flag { width: 24px !important; height: 18px !important; flex-shrink: 0 !important; object-fit: cover !important; border-radius: 2px !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) !important; display: block !important; }

.aah-loc__name { flex: 1; min-width: 0; }
.aah-loc__cc { font-size: 12px; color: #888; font-family: 'Roboto Mono', monospace; flex-shrink: 0; }

.aah-loc-empty { font-size: 14px; color: #888; text-align: center; padding: 24px 0; }

.aah-step-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.aah-step-foot .aah-btn { min-width: 160px !important; }

#top .aah-wrap .aah-backlink { color: #6b6b6b !important; font-size: 14px !important; text-decoration: none !important; padding: 6px !important; }
#top .aah-wrap .aah-backlink:hover { color: #c0c0c0 !important; }

@media (max-width: 1100px) {
  .aah-loclist { grid-template-columns: repeat(2, 1fr); }
  .aah-region__search { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .aah-loclist { grid-template-columns: 1fr; }
  .aah-regions { gap: 2px; }
  .aah-region { padding: 6px 10px !important; font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════
 * STEP 3 — DOMAIN + ADD-ONS + SUMMARY
 * ═══════════════════════════════════════════════════════════ */

.aah-grid { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.aah-gcol--main { display: flex; flex-direction: column; gap: 20px; }
.aah-gcol--side { position: sticky; top: 24px; }

@media (max-width: 1100px) {
  .aah-grid { grid-template-columns: 1fr; gap: 20px; }
  .aah-gcol--side { position: static; }
}

/* Domain searchbar (A² Mail pattern) */
.aah-searchbar { display: flex; align-items: center; gap: 10px; background: #0c0c0c; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 6px 6px 16px; transition: border-color .15s, box-shadow .15s; margin-top: 8px; }
.aah-searchbar:focus-within { border-color: rgba(0,205,251,0.4); box-shadow: 0 0 0 3px rgba(0,205,251,0.08); }
.aah-searchbar__btn {
  background: #007e99 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  flex-shrink: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
.aah-searchbar__btn:hover { background: #009bbe !important; }
#top .aah-wrap .aah-searchbar__btn svg { width: 16px !important; height: 16px !important; stroke: #fff !important; }
.aah-searchbar__btn.aah-loading { opacity: 0.7 !important; cursor: wait !important; }

.aah-hint { font-size: 14px; color: #666; margin-top: 8px !important; }
#top .aah-wrap .aah-hint { font-size: 14px !important; color: #666 !important; margin-top: 8px !important; }
.aah-hint--err { color: #ff5a5a !important; }
#top .aah-wrap .aah-hint--err { color: #ff5a5a !important; }

/* Inline domain result row */
.aah-domain-results { margin-top: 14px; }
.aah-domain-results:empty { display: none; }
#top .aah-wrap .aah-domain-result { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #0c0c0c !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; padding: 14px 18px !important; gap: 12px !important; flex-wrap: wrap !important; }
#top .aah-wrap .aah-domain-result.available { border-color: rgba(0,216,122,0.45) !important; background: rgba(0,216,122,0.04) !important; }
#top .aah-wrap .aah-domain-result.taken { border-color: rgba(255,90,90,0.45) !important; background: rgba(255,90,90,0.04) !important; }
#top .aah-wrap .aah-domain-result.existing { border-color: rgba(0,205,251,0.45) !important; background: rgba(0,205,251,0.04) !important; }
#top .aah-wrap .aah-domain-result.selected { border-color: rgba(0,205,251,0.6) !important; background: rgba(0,205,251,0.06) !important; }
#top .aah-wrap .aah-domain-result-main { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; flex: 1 1 auto !important; min-width: 0 !important; }
#top .aah-wrap .aah-domain-check { color: #00d87a !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; }
#top .aah-wrap .aah-domain-x { color: #ff5a5a !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; }
#top .aah-wrap .aah-domain-name { font-size: 16px !important; font-weight: 500 !important; color: #fff !important; word-break: break-all !important; }
#top .aah-wrap .aah-domain-status-text { font-size: 14px !important; color: #c0c0c0 !important; }
#top .aah-wrap .aah-domain-result.available .aah-domain-status-text { color: #00d87a !important; }
#top .aah-wrap .aah-domain-result.existing .aah-domain-status-text { color: #8b92b3 !important; }
#top .aah-wrap .aah-domain-result-price { font-size: 14px !important; font-weight: 500 !important; color: #fff !important; margin-left: auto !important; flex-shrink: 0 !important; }
@media (max-width: 600px) {
  #top .aah-wrap .aah-domain-result { padding: 12px 14px !important; }
  #top .aah-wrap .aah-domain-result-price { margin-left: 0 !important; width: 100% !important; text-align: right !important; }
}

/* Value props inline (only shown when buying new) */
.aah-vprops-inline { display: flex !important; flex-wrap: wrap !important; gap: 24px 32px !important; margin-top: 22px !important; padding-top: 22px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.aah-vprop { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #888; line-height: 0; }
.aah-vprop strong { color: #c0c0c0; font-weight: 500; }
#top .aah-wrap .aah-vprop svg, #top .aah-wrap .aah-vprop svg * { stroke: #00cdfb !important; fill: none !important; color: #00cdfb !important; stroke-width: 2 !important; }
#top .aah-wrap .aah-vprop svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
#top .aah-wrap .aah-wizard.aah-mode-existing .aah-mode-new-only { display: none !important; }

/* TLD menu */
.aah-tldmenu { display: none; margin-top: 24px; background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; }
.aah-tldmenu.aah-on { display: block; }
.aah-tldmenu__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.aah-tldmenu__t { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: #888; }
.aah-tldmenu__ct { font-size: 12px; color: #888; font-family: 'Roboto Mono', monospace; }
.aah-tldmenu__scroll { max-height: 220px; overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.aah-tldmenu__scroll::-webkit-scrollbar { width: 6px; }
.aah-tldmenu__scroll::-webkit-scrollbar-track { background: transparent; }
.aah-tldmenu__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.aah-tldmenu__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.aah-tldmenu__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 24px; }
.aah-tldmenu__item { font-size: 14px; color: #c0c0c0; font-family: 'Roboto Mono', monospace; cursor: pointer; transition: color .15s; line-height: 1.7; }
.aah-tldmenu__item:hover { color: #00cdfb; }
@media (max-width: 700px) { .aah-tldmenu__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .aah-tldmenu__grid { grid-template-columns: repeat(2, 1fr); } }

/* === Add-on (now lives inside Order Summary panel) === */
.aah-sum__addon { padding: 16px 22px; border-top: 1px solid rgba(255,255,255,0.04); }
#top .aah-wrap .aah-sum__addon-label { font-size: 11px !important; font-weight: 500 !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 10px !important; display: block !important; }

.aah-sum__addon .aah-addon { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 14px 16px; transition: border-color .15s, background .15s; }
.aah-sum__addon .aah-addon:hover { border-color: rgba(255,255,255,0.16); }
.aah-sum__addon .aah-addon--selected { border-color: rgba(0,205,251,0.45); background: rgba(0,205,251,0.04); }

.aah-sum__addon .aah-addon__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.aah-sum__addon .aah-addon__title { display: flex; align-items: center; gap: 8px; }
.aah-sum__addon .aah-addon__title strong { font-size: 14px; color: #fff; font-weight: 500; }
#top .aah-wrap .aah-sum__addon .aah-addon__icon { width: 16px !important; height: 16px !important; stroke: #00cdfb !important; fill: none !important; stroke-width: 2 !important; flex-shrink: 0 !important; }

#top .aah-wrap .aah-sum__addon .aah-addon__desc { font-size: 12px !important; color: #888 !important; line-height: 1.45 !important; margin: 0 0 8px !important; }
.aah-sum__addon .aah-addon__meta { font-size: 12px; color: #c0c0c0; }
#top .aah-wrap .aah-sum__addon .aah-addon__price { font-size: 14px !important; font-weight: 500 !important; color: #fff !important; font-family: 'Roboto Mono', monospace !important; }
#top .aah-wrap .aah-sum__addon .aah-addon__price small { font-size: 11px !important; color: #888 !important; font-weight: 400 !important; margin-left: 1px !important; font-family: inherit !important; }

/* iOS-style toggle (shared with old standalone addon styles) */
.aah-addon__toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.aah-addon__toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.aah-toggle-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #2a2a2a;
  border-radius: 22px;
  transition: background .2s;
}
.aah-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.aah-addon__toggle input:checked + .aah-toggle-track { background: #00cdfb; }
.aah-addon__toggle input:checked + .aah-toggle-track::after { transform: translateX(18px); }

/* === Order Summary sidebar === */
.aah-sum { background: #161616; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; position: relative; }
.aah-sum::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #00cdfb, #5745ff); }
.aah-sum__top { padding: 18px 22px 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.aah-sum__label { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #888 !important; }
.aah-sum__after { font-size: 14px !important; color: #c0c0c0 !important; margin: 0 !important; }
#top .aah-wrap .aah-sum__after { color: #888 !important; }
#top .aah-wrap .aah-sum__after strong { color: #c0c0c0 !important; font-weight: 500 !important; }

.aah-sum__break { padding: 20px 22px !important; background: #111 !important; border-top: 1px solid rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
#top .aah-wrap .aah-brkrow { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; margin: 0 !important; padding: 0 !important; gap: 12px; }
#top .aah-wrap .aah-brkrow__l { color: #c0c0c0 !important; font-size: 14px !important; flex: 1 1 auto; min-width: 0; }
#top .aah-wrap .aah-brkrow__l strong { color: #fff !important; font-weight: 500 !important; }
#top .aah-wrap .aah-brkrow__r { color: #c0c0c0 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; flex-shrink: 0; }
#top .aah-wrap .aah-brkrow--save .aah-brkrow__r { color: #5745ff !important; }
#top .aah-wrap .aah-brkrow--tot { padding-top: 10px !important; margin-top: 2px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; font-size: 16px !important; font-weight: 700 !important; }
#top .aah-wrap .aah-brkrow--tot .aah-brkrow__l { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
#top .aah-wrap .aah-brkrow--tot .aah-brkrow__r { color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
.aah-brk-suffix { font-size: 12px; color: #888; font-weight: 400; margin-left: 2px; font-family: 'Roboto Mono', monospace; }
.aah-brk-sep { color: #555; margin: 0 4px; font-weight: 400; }

.aah-sum__foot { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 22px !important; }

@media (max-width: 600px) {
  .aah-sum__top { padding: 16px !important; }
  .aah-sum__break { padding: 16px !important; }
  .aah-sum__foot { padding: 16px !important; }
  #top .aah-wrap .aah-card { padding: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════
 * RESPONSIVE — wizard-wide breakpoints
 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .aah-stepnav__item { font-size: 13px; gap: 10px; }
  .aah-stepnav__sep { padding: 0 14px; }
  .aah-stepnav__num { width: 20px; height: 20px; font-size: 12px; }
}

@media (max-width: 600px) {
  .aah-stepnav { margin-bottom: 28px; }
  .aah-stepnav__item { padding: 14px 0; font-size: 12px; }
  .aah-stepnav__sep { padding: 0 10px; }
}

/* ═══════════════════════════════════════════════════════════
 * MOBILE OPTIMIZATIONS — narrow viewports (≤600px / ≤480px)
 * Aggressive space-saving for actual phone widths.
 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Phead — tighter type, less side padding eating into reading width */
  #top .aah-wrap .aah-phead p { font-size: 14px !important; line-height: 1.45 !important; }

  /* Domain searchbar Continue button → icon only on mobile.
   * "Continue" label hides; arrow icon stays. Button compresses to a square.
   * Recovers ~70px of horizontal space for the input field. */
  #top .aah-wrap .aah-searchbar__btn .aah-btn__label { display: none !important; }
  #top .aah-wrap .aah-searchbar__btn { padding: 12px 14px !important; min-width: 44px !important; }
  #top .aah-wrap .aah-searchbar { padding: 6px !important; }
  #top .aah-wrap .aah-searchbar input { padding: 10px 12px !important; font-size: 16px !important; /* 16px prevents iOS zoom-on-focus */ }

  /* Compare toggle — wrap cleanly when text is too long */
  /* Compare toggle is now compact ("Core vs. Apex" + icon) — no wrapping needed at mobile */

  /* Toolbar — stack groups vertically; PRODUCT and BILLING get full width labels */
  .aah-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .aah-toolbar__group { width: 100% !important; }
  .aah-toolbar .aah-seg { display: flex !important; }
  .aah-toolbar .aah-seg__opt { flex: 1 !important; text-align: center !important; }

  /* Order summary backlink — center-align since it's full-width */
  #top .aah-wrap .aah-sum__foot .aah-backlink { display: block !important; text-align: center !important; padding: 12px 6px 6px !important; }

  /* Site Sentinel addon — stack icon+title row tighter on mobile */
  .aah-sum__addon { padding: 14px 16px !important; }

  /* Trust strip on step 1 — wrap items 2-up instead of 4-across */
  .aah-trust { flex-wrap: wrap !important; gap: 10px 18px !important; }
  .aah-trust__item { flex: 1 1 calc(50% - 10px) !important; min-width: 0 !important; }

  /* Plan grid + addon spacing tighter */
  #top .aah-wrap .aah-card { padding: 18px !important; margin-bottom: 12px !important; }
  .aah-plans { gap: 12px !important; }

  /* Loc list tighter padding */
  .aah-loclist { padding: 12px !important; gap: 8px !important; }
  .aah-loc { padding: 12px 14px !important; }
}

@media (max-width: 480px) {
  /* Trust strip → single column at very narrow widths */
  .aah-trust__item { flex: 1 1 100% !important; }

  /* Stepnav — drop separator inner padding more aggressively */
  .aah-stepnav__sep { padding: 0 6px !important; }
  .aah-stepnav__item { gap: 8px !important; }

  /* Compare toggle font smaller still */
  #top .aah-wrap .aah-compare-toggle { font-size: 12px !important; }
}