/* ===========================================================================
   SkyCore Host - 2026 design foundation
   ===========================================================================

   Shared by every redesigned page. Contains ONLY what is genuinely reusable:
   tokens, layout, typography, buttons, the header's three scroll states, the
   dark-section treatment and the page hero.

   Anything belonging to one page - the homepage site-preview loop, its slab
   row, its bento - stays in that page's own <style> block. If a rule is only
   ever used once, it does not belong here.

   LOAD ORDER MATTERS. header.php links this AFTER css/main.css, because
   several rules below exist specifically to beat main.css and header.php's own
   selectors, some of which run to seven classes with !important. Move this
   earlier in the head and the header silently reverts.

   Everything is scoped under .sx except the header rules, which cannot be -
   the header markup lives outside the page wrapper.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Tokens live on :root, NOT on .sx.

   They were scoped to .sx originally, which was fine while everything using
   them sat inside that wrapper. The footer does not - pages close .sx before
   including footer.php - so every var(--x-*) in the footer resolved to nothing:
   the ground fell back to transparent and "Go to Live Chat" rendered as white
   text on a white pill. An undefined custom property is not an error; it just
   silently produces an invalid value and the declaration is dropped.

   On :root they are available to the footer, the header, and anything else
   added later outside .sx. The .sx block below keeps only what should stay
   scoped: the typeface and the default body colour.
   --------------------------------------------------------------------------- */
:root {
  --x-brand:  #6B4DFF;
  --x-brand-2:#8B72FF;
  --x-deep:   #4A2FE0;

  /* The atmosphere. Deep indigo base with violet, blue and magenta light
     sources - the same three-stop family Hostinger uses for its gradient text
     (#e536db / #673de6 / #3ab0ff), applied as light rather than as a fill. */
  --x-night:  #120A2E;
  /* One light source, rising from below the fold. Everything else is the
     same violet at a different lightness - no second hue to argue with it. */
  --x-glow-a: rgba(142, 104, 255, .60);
  --x-glow-b: rgba(103, 72, 226, .42);
  --x-glow-c: rgba(120, 88, 240, .30);

  --x-ink:    #14131C;
  --x-body:   #4E4D5E;
  --x-muted:  #8A8999;
  --x-line:   #E9E8F0;
  --x-ground: #FAFAFC;
  --x-white:  #FFFFFF;
  --x-good:   #12925C;

  --x-r:   14px;
  --x-r-l: 22px;
  --x-max: 1180px;
}

.sx {
  font-family: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--x-body);
  -webkit-font-smoothing: antialiased;
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }

/* The Live Chat / Help Center strip pushes the whole page down for two links
   that are also in the footer and in the nav. Hidden here so the header sits
   higher and the hero can breathe. Deleted from header.php at rollout. */
body .header .top-bar { display: none !important; }

/* The logo file is 3264x828 with no height rule anywhere, so it renders at
   whatever the container allows - about 420px wide, which dwarfs the nav next
   to it. Held to a fixed height instead; the width follows the aspect ratio. */
/* Height is set once, on the row, instead of accumulating out of three
   different paddings. main.css:310 puts 10px top and bottom on .header, which
   is where most of the extra came from. */
body .header { padding: 0 !important; }
/* main.css:327 leaves .navbar-brand as display:block wrapping an inline <img>.
   An inline image sits on the text baseline, so the line box reserves
   descender space beneath it and the whole mark gets pushed up off centre -
   which is why the logo rode high above the nav labels rather than sharing
   their line. Flex removes the line box entirely.
   The artwork needs no compensating nudge: its ink was measured at 30-799 of
   an 828px canvas, centring at 50.06%. */
body .header .main-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
}
body .header .main-header .navbar-brand img { display: block !important; }
/* Logo vertical nudge, signed off at 3px. Positive moves it DOWN.
   It needs a nudge at all because the mark is a vertical stack whose parts are
   badly unequal - roof icon 410 rows, wordmark 235, tagline 58 - so seven
   times more artwork sits above the words than below them. Centring the image
   box therefore does not centre the words, and no single value satisfies both
   a balanced lockup and a wordmark on the nav line.
   This value is tied to the 36px logo height and the 68px row. Change either
   and it has to be re-tuned by eye; a horizontal logo variant would remove the
   need for it entirely. */
body .header .main-header .navbar-brand img { transform: translateY(3px) !important; }
/* 36px, not Hostinger's ~28px. Theirs is a bare wordmark at roughly 6.6:1,
   so it keeps its presence when small. Ours is a lockup - wordmark plus the
   tagline underneath - at 3.9:1, so matching their HEIGHT makes it read half
   their WIDTH and the tagline collapses into a smudge. Matching their width
   instead lands at 36px, which still clears the 64px row comfortably. */
body .header .navbar-brand img { height: 36px !important; width: auto !important; }
@media (max-width: 991px) { body .header .navbar-brand img { height: 30px !important; } }

/* ---------------------------------------------------------------------------
   MEGA DROPDOWN
   The existing panel is the 2019 pattern: white card, tinted icon tiles, ruled
   columns and a loud gradient promo. Hostinger's reads current because of four
   things, all reachable from CSS with the markup as it stands:

     1. It matches the site instead of contrasting with it. A white card
        dropping out of a dark header always looks bolted on.
     2. No icon tiles. A coloured square behind every icon is six extra shapes
        competing with six labels.
     3. Real hierarchy - a quiet eyebrow, a strong title, a muted description.
     4. A promo that whispers. Theirs is a bordered panel with one button.

   What is NOT here is their left category rail, which swaps the middle column
   as you move down it. That needs new markup and a little JavaScript, so it
   belongs in the header.php rewrite at rollout rather than in a CSS override.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* header.php:1265 sets this panel with SEVEN classes and !important, so the
     selector below has to match it. A shorter one loses silently - which is
     what left the panel white while every rule inside it applied, making the
     white titles invisible. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop > .submenu,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu > .submenu {
    background: #191233 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(6,3,20,.55), 0 6px 18px rgba(6,3,20,.35) !important;
    padding: 28px !important;
    overflow: hidden !important;
  }
  /* The caret pointing back at the menu item is drawn with the pseudo elements,
     so it has to be recoloured or it stays a white arrow on a dark panel. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop > .submenu::before,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop > .submenu::after,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu > .submenu::before,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu > .submenu::after {
    background: #191233 !important;
    border-color: rgba(255,255,255,.09) !important;
  }

  /* THIS was the white rectangle sitting inside the dark panel. header.php:2580
     gives .sc-drop-inner its own background, padding and radius, separate from
     the .submenu that wraps it - so darkening the panel alone left a white card
     floating inside a dark one. Two backgrounds, one visible surface. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop .sc-drop-inner,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu .sc-drop-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 30px !important;
  }
  /* The column rule was a pale grey hairline meant for a white card. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop .sc-drop-col + .sc-drop-col,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu .sc-drop-col + .sc-drop-col {
    border-left: 1px solid rgba(255,255,255,.08) !important;
    padding-left: 30px !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.sc-cat-drop .sc-drop-col,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown.megamenu .sc-drop-col {
    border-right: 0 !important;
  }
  /* Per-menu accents tint the icons and promo a different hue for each menu -
     teal for Email, sky for Domains - all of them chosen against white. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown .sc-drop-label {
    border-bottom: 0 !important;
  }
  body .header .nabbar-nav .sc-cat-drop--domains .sc-mega-icon,
  body .header .nabbar-nav .sc-cat-drop--hosting .sc-mega-icon,
  body .header .nabbar-nav .sc-cat-drop--email .sc-mega-icon,
  body .header .nabbar-nav .sc-cat-drop--security .sc-mega-icon {
    background: transparent !important; color: #B9AEFF !important;
  }
  body .header .nabbar-nav .sc-cat-drop--domains .sc-mega-item:hover,
  body .header .nabbar-nav .sc-cat-drop--hosting .sc-mega-item:hover,
  body .header .nabbar-nav .sc-cat-drop--email .sc-mega-item:hover,
  body .header .nabbar-nav .sc-cat-drop--security .sc-mega-item:hover {
    background: rgba(255,255,255,.06) !important; border-color: transparent !important;
  }
  body .header .nabbar-nav .sc-cat-drop--domains .sc-mega-item:hover .sc-mega-text strong,
  body .header .nabbar-nav .sc-cat-drop--hosting .sc-mega-item:hover .sc-mega-text strong,
  body .header .nabbar-nav .sc-cat-drop--email .sc-mega-item:hover .sc-mega-text strong,
  body .header .nabbar-nav .sc-cat-drop--security .sc-mega-item:hover .sc-mega-text strong {
    color: #fff !important;
  }
  body .header .nabbar-nav .sc-cat-drop--domains .sc-drop-promo,
  body .header .nabbar-nav .sc-cat-drop--hosting .sc-drop-promo,
  body .header .nabbar-nav .sc-cat-drop--email .sc-drop-promo,
  body .header .nabbar-nav .sc-cat-drop--security .sc-drop-promo {
    background: linear-gradient(160deg, rgba(139,114,255,.18), rgba(139,114,255,.05)) !important;
    color: #fff !important;
  }

  /* One hairline between the columns, not a rule under every heading. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-col {
    border: 0 !important;
    padding: 0 !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-col + .sc-drop-col {
    border-left: 1px solid rgba(255,255,255,.07) !important;
    padding-left: 30px !important;
  }

  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-label {
    color: #8E88B8 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
  }

  /* Items become rows that light up, rather than cards sitting in a list. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-item {
    display: flex !important;
    align-items: flex-start !important;
    /* Pinned deliberately. An inherited nav rule puts space-between on menu
       links, and with exactly two children - icon and text - that parks the
       icon hard left and the text hard right. Every row then had a different
       left edge, set by how long its own description happened to be, while
       all the right edges lined up. Hence flex-start here and flex:1 on the
       text below, so the text column is the thing that forms the column. */
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 13px !important;
    padding: 10px 12px !important;
    margin: 0 -12px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 0 !important;
    transition: background .16s ease !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-item:hover {
    background: rgba(255,255,255,.06) !important;
  }

  /* The tile goes. The icon stays. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-icon {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 0 !important;
    color: #B9AEFF !important;
    font-size: 19px !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-icon i { color: inherit !important; font-size: inherit !important; }

  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-text strong {
    justify-content: flex-start !important;
    text-align: left !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-text > span {
    color: #9A93C4 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-mega-badge {
    background: rgba(139,114,255,.18) !important;
    color: #C3B4FF !important;
    border: 1px solid rgba(139,114,255,.30) !important;
    border-radius: 6px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
    line-height: 1 !important;
  }

  /* The promo stops being the loudest thing in the panel. */
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo {
    background: linear-gradient(160deg, rgba(139,114,255,.16), rgba(139,114,255,.05)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    box-shadow: none !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo-kicker {
    color: #A99BFF !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo-title {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em !important;
  }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo-icon { opacity: .10 !important; }
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo-cta,
  body .header .main-header .nabbar-nav .mainmenu > li.has-droupdown > .submenu .sc-drop-promo .sc-drop-promo-link {
    background: #fff !important;
    color: #191233 !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    border: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   STICKY HEADER, SOLID AFTER THE HERO

   main.css:310 has .header on position:absolute, so today it scrolls away and
   never comes back. Hostinger keeps theirs pinned the whole way down and it is
   white, because their page is white. Ours has to do both states: transparent
   over the dark hero, then white once the hero is behind you.

   Two notes on why it is built this way:

   1. Switching absolute -> fixed changes nothing at scroll position 0, so the
      hero's existing padding-top still reserves exactly the right space. No
      layout shift, no new spacer element.

   2. The swap is driven by an IntersectionObserver on a 1px sentinel sitting at
      the bottom of the hero, not by a scroll listener. A scroll handler fires
      on every frame and has to measure, which is the usual source of janky
      headers; the observer fires twice - once crossing in, once crossing out.

   The logo is pure white artwork (verified: 100% #FFF, no brand colour in it),
   so brightness(0) turns it into a clean black mark for the white bar without
   losing anything. If a coloured logo ever replaces it, this needs a second
   image file instead of a filter.
   --------------------------------------------------------------------------- */
body .header {
  position: fixed !important;
  z-index: 1000 !important;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  border-bottom: 1px solid transparent !important;
}
body .header .navbar-brand img { transition: filter .28s ease !important; }
body .header .main-header .nabbar-nav .mainmenu > li > a,
body .header .main-header .nabbar-nav .mainmenu > li > a > span,
body .header .main-header .nabbar-nav .mainmenu > li > a .dropdown-indicator {
  transition: color .28s ease !important;
}

/* ---- the lift state: scrolling, but still inside the hero ----
   Transparent is only right when nothing is behind the bar. The moment the
   page moves, hero content starts passing underneath it - the guarantee line,
   then the top edge of the cards - and a fully transparent header turns that
   into unreadable mush. Hostinger never has this problem because their bar is
   opaque from the start.

   So: dark and blurred rather than white. It keeps the hero's colour, so the
   header still reads as part of the hero rather than as a separate white
   strip that appeared early, and the blur means whatever slides under it is
   softened instead of colliding with the nav labels.

   :not(.x-nav-solid) so this cleanly hands over to white at the hero's end,
   rather than relying on source order between two equal-weight selectors. */
body.x-nav-lift:not(.x-nav-solid) .header {
  background: rgba(20, 10, 52, .74) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 28px rgba(8,3,26,.34) !important;
}

/* ---- the solid state ---- */
body.x-nav-solid .header {
  background: #FFFFFF !important;
  border-bottom-color: #ECEAF3 !important;
  box-shadow: 0 1px 3px rgba(18,7,48,.05), 0 6px 20px rgba(18,7,48,.05) !important;
}
body.x-nav-solid .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.x-nav-solid .header .navbar-brand img { filter: brightness(0) !important; }

/* Links go to ink. The hover rules in header.php force #fff at six classes,
   which on a white bar would make the label vanish mid-hover - so each one is
   answered here rather than only the resting colour. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li.has-droupdown:hover > a > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li:hover > a > span {
  color: #16132B !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a .dropdown-indicator {
  color: rgba(22,19,43,.55) !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover .dropdown-indicator,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li:hover > a .dropdown-indicator {
  color: rgba(22,19,43,.9) !important;
}
/* The hover underline was white for a dark bar. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a::after {
  background: #16132B !important;
}

/* Login keeps its outline shape, just inverted onto light. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login {
  background: transparent !important;
  border-color: #DCD8EA !important;
  backdrop-filter: none !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login:hover {
  background: #F4F2FC !important;
  border-color: #C4BDE2 !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login i {
  color: #16132B !important;
}

/* Language pill. Its CSS is injected by skycore-translate.js at runtime, so
   there is no stylesheet rule to sit after - specificity is the only lever. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-trans-pill,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-trans-pill .sc-trans-code,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-lang-trigger {
  color: #16132B !important;
}

/* Nothing is pinned on small screens - a fixed bar plus the mobile drawer eats
   most of a phone viewport, and the drawer has its own solid background. */
@media (max-width: 1199px) {
  body .header { position: absolute !important; }
  body.x-nav-solid .header,
  body.x-nav-lift:not(.x-nav-solid) .header { background: transparent !important; box-shadow: none !important;
    border-bottom-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.x-nav-solid .header .navbar-brand img { filter: none !important; }
}

/* ---------------------------------------------------------------------------
   Nav layout. main.css sets .main-header to justify-content:space-between with
   only two children, so the logo goes hard left and everything else hard right,
   leaving the crater in the middle. Hostinger groups the menu beside the logo
   and keeps only the account controls on the right.

   Done by letting the nav fill the row and pushing the last two items over with
   margin-left:auto, rather than by restructuring markup that all 48 pages share.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body .header .main-header { justify-content: flex-start; gap: 26px;
    padding: 0 15px !important; min-height: 68px !important; }
  body .header .main-header .nabbar-nav { flex: 1 1 auto; min-width: 0; }
  body .header .main-header .nabbar-nav .mainmenu { display: flex; align-items: center; gap: 30px; width: 100%; }
  body .header .main-header .nabbar-nav .mainmenu > li { margin: 0; }
  body .header .main-header .nabbar-nav .mainmenu > li > a { font-size: 15px; font-weight: 500; }

  /* Login is the first of the account controls, so this pushes it and the
     language pill after it to the right edge in one move. */
  body .header .nabbar-nav .mainmenu > li:has(> a.login) { margin-left: auto; }
  body .header .nabbar-nav .mainmenu > li.sc-lang-nav { margin-left: 4px; }
}

/* A solid purple slab is the loudest thing in the header, competing with the
   one button that actually matters further down the page.
   header.php:1810 sets that gradient with five classes and !important, so this
   has to match its specificity to win - the earlier four-class attempt lost
   silently, which is why the button did not change. */
body .header .main-header .nabbar-nav .mainmenu > li > a.login {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 100px !important;
  min-height: 36px !important;
  padding: 0 17px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease !important;
}
body .header .main-header .nabbar-nav .mainmenu > li > a.login:hover {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.38) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
body .header .main-header .nabbar-nav .mainmenu > li > a.login span {
  font-weight: 500 !important; letter-spacing: 0 !important;
}
/* The icon sat in its own filled circle, which made a small button look busy. */
body .header .main-header .nabbar-nav .mainmenu > li > a.login i {
  background: transparent !important; width: auto !important; height: auto !important;
  font-size: 16px !important; opacity: .85;
}
/* main.css gives body a font and an overflow rule and no background at all,
   so any section here without .x-ground fell through to the browser's own
   canvas colour - which is black for anyone browsing in dark mode. That is
   what turned "What you get" into dark-on-dark, and it is the same fault that
   showed the 1px sentinel as a hairline earlier.
   Never inherit a page ground. State it. */
.sx { background: #FFFFFF; }
/* ---------------------------------------------------------------------------
   2. LAYOUT, TYPE, BUTTONS
   --------------------------------------------------------------------------- */
.sx .x-wrap { max-width: var(--x-max); margin: 0 auto; padding: 0 24px; }
.sx .x-sec { padding: 62px 0; }

/* A SECTION THAT DELIBERATELY SITS CLOSE TO THE ONE ABOVE IT.

   Used for a closing call to action, so it reads as part of the section it
   follows rather than as a new idea.

   THIS WAS 42 COPIES OF style="padding-top:0" ACROSS 36 PAGES, and an inline
   style cannot be reasoned about or overridden from here - which is why the
   same complaint kept coming back in different places and had to be fixed one
   page at a time.

   As a class, the cascade can handle the case that actually breaks: */
.sx .x-sec.tight { padding-top: 0; }

/* AFTER A DARK SECTION, THE TOP PADDING COMES BACK.

   `tight` works by borrowing the gap from the previous section's BOTTOM
   padding. That only works while both sections share a background. An
   .x-dark section's padding is inside a coloured block, so there is nothing to
   borrow and the two land flush against each other - a card butted straight
   onto the edge of the dark band with no gap at all.

   Same reasoning for .x-ground, which is also a tinted block. */
.sx .x-dark + .x-sec.tight,
.sx .x-ground + .x-sec.tight { padding-top: 62px; }
/* Anything reachable by an in-page link has to clear the fixed header, or the
   browser scrolls the heading to y=0 and the bar sits on top of it. 68px is
   the header row; the rest is breathing space. */
.sx [id] { scroll-margin-top: 92px; }
.sx .x-ground { background: var(--x-ground); }

/* ---------- type: modest sizes, medium weights ---------- */
.sx h1, .sx h2, .sx h3, .sx h4 { margin: 0; color: var(--x-ink); font-weight: 600; letter-spacing: -.022em; }
.sx .x-h2      { font-size: clamp(24px, 2.6vw, 33px); line-height: 1.22; font-weight: 500; letter-spacing: -.022em; }
.sx .x-h3      { font-size: 17px; font-weight: 600; }
/* A heading for a block WITHIN a section, under the section's own .x-h2 - the
   comparison table on plesk-hosting.php is the first use. .x-h3 is 17px because
   it was sized for card titles, and at that size it does not read as a heading
   at all sitting under a 33px .x-h2. */
.sx .x-h3-sec  { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 16px; }
.sx p { margin: 0; }
.sx .x-lead { font-size: 16px; line-height: 1.68; margin-top: 18px; max-width: 44ch; }
.sx .x-sub  { font-size: 15.5px; line-height: 1.68; color: var(--x-muted); margin-top: 12px; max-width: 56ch; }
.sx .x-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--x-brand); margin-bottom: 14px; }
/* 620px let the subhead break to a two-word orphan line. */
.sx .x-head { text-align: center; max-width: 560px; margin: 0 auto 38px; }
.sx .x-head .x-sub { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.sx .x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; transition: all .18s ease; text-transform: none; }
.sx .x-btn-1 { background: var(--x-brand); color: #fff; }
.sx .x-btn-1:hover { background: var(--x-deep); color: #fff; text-decoration: none; }
.sx .x-btn-2 { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); }
.sx .x-btn-2:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
/* Was white on a white ground with a hairline border, which read as a
   disabled field rather than a button. Now an ink outline: unmistakably a
   control, still visibly secondary to the filled primary beside it. */
.sx .x-btn-3 { background: transparent; color: var(--x-ink); border-color: #23203A;
  border-width: 1.5px; font-weight: 600; }
.sx .x-btn-3:hover { background: var(--x-ink); border-color: var(--x-ink); color: #fff; text-decoration: none; }
.sx .x-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }


/* ---------------------------------------------------------------------------
   3. HEADER - three scroll states
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   STICKY HEADER, SOLID AFTER THE HERO

   main.css:310 has .header on position:absolute, so today it scrolls away and
   never comes back. Hostinger keeps theirs pinned the whole way down and it is
   white, because their page is white. Ours has to do both states: transparent
   over the dark hero, then white once the hero is behind you.

   Two notes on why it is built this way:

   1. Switching absolute -> fixed changes nothing at scroll position 0, so the
      hero's existing padding-top still reserves exactly the right space. No
      layout shift, no new spacer element.

   2. The swap is driven by an IntersectionObserver on a 1px sentinel sitting at
      the bottom of the hero, not by a scroll listener. A scroll handler fires
      on every frame and has to measure, which is the usual source of janky
      headers; the observer fires twice - once crossing in, once crossing out.

   The logo is pure white artwork (verified: 100% #FFF, no brand colour in it),
   so brightness(0) turns it into a clean black mark for the white bar without
   losing anything. If a coloured logo ever replaces it, this needs a second
   image file instead of a filter.
   --------------------------------------------------------------------------- */
body .header {
  position: fixed !important;
  z-index: 1000 !important;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  border-bottom: 1px solid transparent !important;
}
body .header .navbar-brand img { transition: filter .28s ease !important; }
body .header .main-header .nabbar-nav .mainmenu > li > a,
body .header .main-header .nabbar-nav .mainmenu > li > a > span,
body .header .main-header .nabbar-nav .mainmenu > li > a .dropdown-indicator {
  transition: color .28s ease !important;
}

/* ---- the lift state: scrolling, but still inside the hero ----
   Transparent is only right when nothing is behind the bar. The moment the
   page moves, hero content starts passing underneath it - the guarantee line,
   then the top edge of the cards - and a fully transparent header turns that
   into unreadable mush. Hostinger never has this problem because their bar is
   opaque from the start.

   So: dark and blurred rather than white. It keeps the hero's colour, so the
   header still reads as part of the hero rather than as a separate white
   strip that appeared early, and the blur means whatever slides under it is
   softened instead of colliding with the nav labels.

   :not(.x-nav-solid) so this cleanly hands over to white at the hero's end,
   rather than relying on source order between two equal-weight selectors. */
body.x-nav-lift:not(.x-nav-solid) .header {
  background: rgba(20, 10, 52, .74) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 28px rgba(8,3,26,.34) !important;
}

/* ---- the solid state ---- */
body.x-nav-solid .header {
  background: #FFFFFF !important;
  border-bottom-color: #ECEAF3 !important;
  box-shadow: 0 1px 3px rgba(18,7,48,.05), 0 6px 20px rgba(18,7,48,.05) !important;
}
body.x-nav-solid .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.x-nav-solid .header .navbar-brand img { filter: brightness(0) !important; }

/* Links go to ink. The hover rules in header.php force #fff at six classes,
   which on a white bar would make the label vanish mid-hover - so each one is
   answered here rather than only the resting colour. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li.has-droupdown:hover > a > span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li:hover > a > span {
  color: #16132B !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a .dropdown-indicator {
  color: rgba(22,19,43,.55) !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a:hover .dropdown-indicator,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li:hover > a .dropdown-indicator {
  color: rgba(22,19,43,.9) !important;
}
/* The hover underline was white for a dark bar. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a::after {
  background: #16132B !important;
}

/* Login keeps its outline shape, just inverted onto light. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login {
  background: transparent !important;
  border-color: #DCD8EA !important;
  backdrop-filter: none !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login:hover {
  background: #F4F2FC !important;
  border-color: #C4BDE2 !important;
}
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login span,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login i {
  color: #16132B !important;
}

/* Language pill. Its CSS is injected by skycore-translate.js at runtime, so
   there is no stylesheet rule to sit after - specificity is the only lever. */
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-trans-pill,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-trans-pill .sc-trans-code,
body.x-nav-solid .header .main-header .nabbar-nav .mainmenu .sc-lang-trigger {
  color: #16132B !important;
}

/* Nothing is pinned on small screens - a fixed bar plus the mobile drawer eats
   most of a phone viewport, and the drawer has its own solid background. */
@media (max-width: 1199px) {
  body .header { position: absolute !important; }
  body.x-nav-solid .header,
  body.x-nav-lift:not(.x-nav-solid) .header { background: transparent !important; box-shadow: none !important;
    border-bottom-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.x-nav-solid .header .navbar-brand img { filter: none !important; }
}

/* ---------------------------------------------------------------------------
   Nav layout. main.css sets .main-header to justify-content:space-between with
   only two children, so the logo goes hard left and everything else hard right,
   leaving the crater in the middle. Hostinger groups the menu beside the logo
   and keeps only the account controls on the right.

   Done by letting the nav fill the row and pushing the last two items over with
   margin-left:auto, rather than by restructuring markup that all 48 pages share.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body .header .main-header { justify-content: flex-start; gap: 26px;
    padding: 0 15px !important; min-height: 68px !important; }
  body .header .main-header .nabbar-nav { flex: 1 1 auto; min-width: 0; }
  body .header .main-header .nabbar-nav .mainmenu { display: flex; align-items: center; gap: 30px; width: 100%; }
  body .header .main-header .nabbar-nav .mainmenu > li { margin: 0; }
  body .header .main-header .nabbar-nav .mainmenu > li > a { font-size: 15px; font-weight: 500; }

  /* Login is the first of the account controls, so this pushes it and the
     language pill after it to the right edge in one move. */
  body .header .nabbar-nav .mainmenu > li:has(> a.login) { margin-left: auto; }
  body .header .nabbar-nav .mainmenu > li.sc-lang-nav { margin-left: 4px; }
}

/* A solid purple slab is the loudest thing in the header, competing with the
   one button that actually matters further down the page.
   header.php:1810 sets that gradient with five classes and !important, so this
   has to match its specificity to win - the earlier four-class attempt lost
   silently, which is why the button did not change. */
body .header .main-header .nabbar-nav .mainmenu > li > a.login {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 100px !important;
  min-height: 36px !important;
  padding: 0 17px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease !important;
}
body .header .main-header .nabbar-nav .mainmenu > li > a.login:hover {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.38) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
body .header .main-header .nabbar-nav .mainmenu > li > a.login span {
  font-weight: 500 !important; letter-spacing: 0 !important;
}
/* The icon sat in its own filled circle, which made a small button look busy. */
body .header .main-header .nabbar-nav .mainmenu > li > a.login i {
  background: transparent !important; width: auto !important; height: auto !important;
  font-size: 16px !important; opacity: .85;
}
/* main.css gives body a font and an overflow rule and no background at all,
   so any section here without .x-ground fell through to the browser's own
   canvas colour - which is black for anyone browsing in dark mode. That is
   what turned "What you get" into dark-on-dark, and it is the same fault that
   showed the 1px sentinel as a hairline earlier.
   Never inherit a page ground. State it. */
.sx { background: #FFFFFF; }

/* ---------------------------------------------------------------------------
   4. DARK SECTIONS
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   THE SECOND DARK MOMENT

   Everything after the hero was light: trust strip, plans, bento, support, FAQ,
   close. Six light bands in a row, five of them made of white cards, and the
   page went flat the moment the hero left the screen.
   Support is the right one to darken. It is the only section whose content is
   already a set of white panels, so on a dark ground they stop being cards on
   a page and start being screens in a room - the same trick the hero pulls
   with the site previews. It also lands roughly halfway down, which is where
   the flatness was setting in.
   --------------------------------------------------------------------------- */
.sx .x-sec.x-dark { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse 90% 80% at 14% 0%, #2C1770, transparent 58%),
              radial-gradient(ellipse 70% 60% at 92% 100%, #1E1050, transparent 60%),
              #130A31; }
/* Same grain as the hero, so the two dark moments read as one material. */
.sx .x-sec.x-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); }
.sx .x-sec.x-dark > .x-wrap { position: relative; z-index: 1; }
.sx .x-dark .x-eyebrow { color: #A99BFF; }
.sx .x-dark h2, .sx .x-dark .x-h2 { color: #fff; }
.sx .x-dark .x-sub { color: #B4ACD4; }
.sx .x-dark .x-point h4 { color: #fff; }
.sx .x-dark .x-point p { color: #A79DD6; }
.sx .x-dark .x-btn-3 { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); color: #fff; }
.sx .x-dark .x-btn-3:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); color: #fff; }
/* The mock panels get the hero's card shadow so they sit on the dark rather
   than float on it. */

/* ---------------------------------------------------------------------------
   5. PAGE HERO  (partials/page-hero.php)

   The homepage hero is bespoke - it carries a domain search, a price strip and
   a scrolling wall of site previews, and none of that belongs on an inner
   page. This is the inner-page version: same atmosphere and grain so the two
   read as one site, but only an eyebrow, a title, a lead, optional chips and
   optional buttons.

   It deliberately does NOT reuse .x-hero. Sharing a class between a bespoke
   hero and a generic one means every homepage tweak has to be checked against
   47 other pages.
   --------------------------------------------------------------------------- */
.sx .x-phero { position: relative; overflow: hidden; padding: 132px 0 74px; margin-top: -1px;
  background:
    radial-gradient(ellipse 130% 86% at 50% 116%, var(--x-glow-a), transparent 58%),
    radial-gradient(ellipse 72% 56% at 84% 90%,   var(--x-glow-b), transparent 56%),
    radial-gradient(ellipse 66% 46% at 12% 96%,   var(--x-glow-c), transparent 60%),
    linear-gradient(180deg, #120730 0%, #170B3A 44%, #21105A 100%); }
/* Same grain as the homepage hero and the dark band. A smooth CSS gradient
   reads as cheap; grain over it is most of the difference. */
.sx .x-phero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E"); }
.sx .x-phero > .x-wrap { position: relative; z-index: 2; }

.sx .x-phero-in { max-width: 780px; }
.sx .x-phero-in.center { margin: 0 auto; text-align: center; }
.sx .x-phero .x-eyebrow { color: #A99BFF; }
.sx .x-phero-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; font-weight: 500;
  letter-spacing: -.032em; color: #fff; margin: 0; }
.sx .x-phero-title em { font-style: normal;
  background: linear-gradient(96deg, #E536DB 4%, #8B5CF6 48%, #3AB0FF 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.sx .x-phero-lead { font-size: 16.5px; line-height: 1.68; color: #B9B2D8; margin-top: 18px; max-width: 58ch; }
.sx .x-phero-in.center .x-phero-lead { margin-left: auto; margin-right: auto; }

/* Chips. Facts, not decoration - if there is nothing true to put here, pass an
   empty array and the row does not render. */
.sx .x-phero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sx .x-phero-in.center .x-phero-chips { justify-content: center; }
/* No status dot. A green dot in front of a static fact is the visual cliche of
   generated pages - it implies live telemetry that is not there. The chip IS
   the fact; it does not need a light next to it. */
.sx .x-phero-chips span { display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; color: #DCD6F2; padding: 8px 16px; border-radius: 100px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }

.sx .x-phero .x-btns { margin-top: 28px; }
.sx .x-phero-in.center .x-btns { justify-content: center; }

/* The seam. Identical mechanism to the homepage: the next section rises over
   the hero on a negative margin with a radius and an upward shadow, rather
   than the hero fading out underneath it. A fade is not a transition. */
.sx .x-phero + * { position: relative; z-index: 2; margin-top: -46px;
  border-radius: 32px 32px 0 0; background: #FFFFFF;
  box-shadow: 0 -16px 44px rgba(9,4,26,.34); padding-top: 56px; }

@media (max-width: 991px) {
  .sx .x-phero { padding: 104px 0 58px; }
  .sx .x-phero + * { margin-top: -30px; border-radius: 22px 22px 0 0; padding-top: 40px; }
}

/* ---------------------------------------------------------------------------
   6. SECTION COMPONENTS

   The hero alone is not a system. Every inner page on this site is built from
   the same handful of shapes - an icon strip, a text-beside-image split, a
   grid of cards, a timeline, a row of numbers, a quote, a closing band - and
   they were previously re-implemented per page with slightly different markup
   each time. That is why "redesigning a page" used to mean rewriting it.

   Everything below is page-agnostic. Build an inner page by choosing from
   these; if a page needs a shape that is not here, add it HERE rather than in
   that page's <style>, so the next page inherits it.
   --------------------------------------------------------------------------- */

/* --- 6.1 Icon strip. 2-4 across, sits directly under the hero. ------------- */
.sx .x-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.sx .x-strip.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sx .x-strip-item { text-align: center; padding: 26px 20px; border-radius: var(--x-r-l);
  background: #fff; border: 1px solid var(--x-line);
  box-shadow: 0 1px 2px rgba(18,7,48,.04), 0 8px 22px rgba(18,7,48,.05); }
.sx .x-strip-item img, .sx .x-strip-item svg { width: 40px; height: 40px; margin: 0 auto 14px; display: block; }
.sx .x-strip-item h4 { font-size: 15.5px; font-weight: 600; }
.sx .x-strip-item p { font-size: 13px; line-height: 1.6; color: var(--x-muted); margin-top: 6px; }

/* --- 6.2 Split. Text one side, media the other. .rev flips it. ------------- */
.sx .x-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px; align-items: center; }
.sx .x-split.rev .x-split-media { order: 2; }
.sx .x-split-media img { width: 100%; height: auto; display: block; border-radius: var(--x-r-l); }
.sx .x-split-body h2 { margin-bottom: 14px; }
.sx .x-split-body p { font-size: 15px; line-height: 1.7; color: var(--x-muted); }
.sx .x-split-body p + p { margin-top: 14px; }

/* --- 6.3 Card grid. The workhorse: 2, 3 or 4 up. -------------------------- */
.sx .x-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sx .x-grid.two  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sx .x-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sx .x-card2 { background: #fff; border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(18,7,48,.04), 0 8px 22px rgba(18,7,48,.05); }
.sx .x-card2 h4 { font-size: 16px; font-weight: 600; margin-top: 14px; }
.sx .x-card2 p { font-size: 13.5px; line-height: 1.62; color: var(--x-muted); margin-top: 7px; }
/* Dark disc with the layered shadow - the badge used across the whole redesign. */
/* ---------------------------------------------------------------------------
   ICONS SIT HIGH INSIDE ROUND BADGES - and the CSS looks correct while they do.

   An <svg> is inline-level by default. Inside a centring container it lands on
   a text baseline, and the line box reserves descender space BELOW it. So the
   box gets centred exactly as asked - but the box is taller than the glyph,
   and the glyph ends up a couple of pixels high.

   Spotted on the homepage plan-preview tick, where a 20px badge made it
   obvious. The same pattern is used fourteen times across this file and
   index.php, so it was never a one-off.

   display:block takes the icon off the baseline and the space disappears.

   Applied to the centring badges BY NAME rather than as a blanket `svg
   { display: block }`: several icons genuinely do sit inline in a line of text
   - .x-more a svg, .x-flow-arrows svg, .x-loop-cta svg - and blockifying those
   would break the thing this rule is meant to fix.
   ------------------------------------------------------------------------- */
.sx .x-dot > svg,
.sx .x-slab-dot > svg,
.sx .x-run-ico > svg,
.sx .x-fp-tick > svg,
.sx .x-social a > svg,
.sx .x-tier-badge > svg,
.x-foot-social a > svg,
.x-foot-btc > svg { display: block; }

.sx .x-dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  flex: none; background: var(--x-night);
  box-shadow: 0 3px 6px rgba(18,7,48,.30), 0 10px 18px rgba(18,7,48,.22); }

/* --- 6.4 Timeline. One rail, milestones down it. -------------------------- */
.sx .x-time { position: relative; max-width: 760px; margin: 0 auto; padding-left: 34px; }
.sx .x-time::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, var(--x-brand), rgba(107,77,255,.12)); }
.sx .x-time-item { position: relative; padding-bottom: 30px; }
.sx .x-time-item:last-child { padding-bottom: 0; }
.sx .x-time-item::before { content: ""; position: absolute; left: -34px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 3px solid var(--x-brand); }
.sx .x-time-when { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--x-brand); }
.sx .x-time-item h4 { font-size: 17px; font-weight: 600; margin-top: 7px; }
.sx .x-time-item p { font-size: 14px; line-height: 1.65; color: var(--x-muted); margin-top: 6px; }

/* --- 6.5 Stat row. Numbers only - never invent one. ----------------------- */
.sx .x-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.sx .x-stats.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sx .x-stat { text-align: center; padding: 24px 16px; border-radius: var(--x-r);
  background: var(--x-ground); border: 1px solid var(--x-line); }
.sx .x-stat b { display: block; font-size: 30px; font-weight: 600; color: var(--x-ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sx .x-stat span { display: block; font-size: 13px; color: var(--x-muted); margin-top: 5px; }
.sx .x-dark .x-stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-stat b { color: #fff; }
.sx .x-dark .x-stat span { color: #A79DD6; }

/* --- 6.6 Quote. --------------------------------------------------------- */
.sx .x-quote { background: #fff; border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  padding: 26px 24px; }
.sx .x-quote p { font-size: 14.5px; line-height: 1.68; color: var(--x-body); }
.sx .x-quote-who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.sx .x-quote-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid;
  place-items: center; background: #EFEBFF; color: var(--x-brand);
  font-size: 13px; font-weight: 700; }
.sx .x-quote-who b { display: block; font-size: 13.5px; font-weight: 600; color: var(--x-ink); }
.sx .x-quote-who span { display: block; font-size: 12.5px; color: var(--x-muted); }

/* --- 6.7 FAQ accordion. Native <details> - no JS, keyboard and screen
       reader support for free, and it still works if a script fails. ------- */
.sx .x-faq { max-width: 720px; margin: 0 auto; }
.sx .x-qa { border-bottom: 1px solid var(--x-line); }
.sx .x-qa:first-child { border-top: 1px solid var(--x-line); }
.sx .x-qa summary { list-style: none; cursor: pointer; position: relative;
  padding: 21px 44px 21px 0; font-size: 15.5px; font-weight: 500; color: var(--x-ink);
  transition: color .16s ease; }
.sx .x-qa summary::-webkit-details-marker { display: none; }
.sx .x-qa summary:hover { color: var(--x-brand); }
.sx .x-qa summary:focus-visible { outline: 2px solid var(--x-brand); outline-offset: 3px; border-radius: 4px; }
.sx .x-qa summary::after { content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid #9C97B0; border-bottom: 2px solid #9C97B0;
  transform: rotate(45deg); transition: transform .22s ease, border-color .16s ease; }
.sx .x-qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sx .x-qa summary:hover::after { border-color: var(--x-brand); }
.sx .x-qa p { padding: 0 44px 22px 0; font-size: 14.5px; line-height: 1.7; color: var(--x-muted); }

/* --- 6.8 Closing CTA band. ------------------------------------------------ */
.sx .x-cta { position: relative; overflow: hidden; border-radius: 26px; padding: 54px 44px;
  text-align: center; color: #fff;
  background: radial-gradient(ellipse 110% 90% at 20% 0%, #2C1770, transparent 60%),
              radial-gradient(ellipse 80% 70% at 95% 100%, #1E1050, transparent 62%),
              #130A31; }
.sx .x-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); }
.sx .x-cta > * { position: relative; z-index: 1; }
.sx .x-cta h2 { color: #fff; }
.sx .x-cta p { font-size: 15.5px; line-height: 1.65; color: #B4ACD4; margin: 12px auto 0; max-width: 52ch; }
.sx .x-cta .x-btns { justify-content: center; }

/* --- 6.9 Responsive. One place, so every component collapses consistently. - */
@media (max-width: 980px) {
  .sx .x-strip, .sx .x-strip.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sx .x-grid, .sx .x-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sx .x-stats, .sx .x-stats.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sx .x-split { grid-template-columns: 1fr; gap: 32px; }
  .sx .x-split.rev .x-split-media { order: 0; }
}
@media (max-width: 620px) {
  .sx .x-strip, .sx .x-strip.three,
  .sx .x-grid, .sx .x-grid.two, .sx .x-grid.four { grid-template-columns: 1fr; }
  .sx .x-cta { padding: 40px 24px; border-radius: 20px; }
}

/* --- 6.10 EVERY component on a dark ground -------------------------------

   Components default to ink-on-white. Dropped inside .x-sec.x-dark without
   these, headings inherit --x-ink and render dark-on-dark - invisible. That
   is exactly what happened to the timeline the first time this shipped.

   This block is the contract: any component added above MUST get its dark
   counterpart here in the same commit, or it is only half a component.
   ------------------------------------------------------------------------- */

/* headings and body copy */
.sx .x-dark h1, .sx .x-dark h2, .sx .x-dark h3, .sx .x-dark h4,
.sx .x-dark .x-h2, .sx .x-dark .x-h3 { color: #fff; }
.sx .x-dark p { color: #A79DD6; }
.sx .x-dark .x-sub { color: #B4ACD4; }
.sx .x-dark .x-eyebrow { color: #A99BFF; }

/* icon strip */
.sx .x-dark .x-strip-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-strip-item h4 { color: #fff; }
.sx .x-dark .x-strip-item p { color: #A79DD6; }

/* card grid */
.sx .x-dark .x-card2 { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-card2 h4 { color: #fff; }
.sx .x-dark .x-card2 p { color: #A79DD6; }
.sx .x-dark .x-dot { background: rgba(255,255,255,.10); box-shadow: 0 3px 6px rgba(6,2,20,.34), 0 10px 18px rgba(6,2,20,.26); }

/* split */
.sx .x-dark .x-split-body p { color: #A79DD6; }

/* timeline - the one that broke */
.sx .x-dark .x-time::before { background: linear-gradient(180deg, #8B72FF, rgba(139,114,255,.14)); }
.sx .x-dark .x-time-item::before { background: #1A1140; border-color: #8B72FF; }
.sx .x-dark .x-time-when { color: #A99BFF; }
.sx .x-dark .x-time-item h4 { color: #fff; }
.sx .x-dark .x-time-item p { color: #A79DD6; }

/* quote */
.sx .x-dark .x-quote { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-quote p { color: #CFC7EE; }
.sx .x-dark .x-quote-av { background: rgba(139,114,255,.22); color: #C3B4FF; }
.sx .x-dark .x-quote-who b { color: #fff; }
.sx .x-dark .x-quote-who span { color: #A79DD6; }

/* FAQ accordion */
.sx .x-dark .x-qa { border-bottom-color: rgba(255,255,255,.12); }
.sx .x-dark .x-qa:first-child { border-top-color: rgba(255,255,255,.12); }
.sx .x-dark .x-qa summary { color: #fff; }
.sx .x-dark .x-qa summary:hover { color: #C3B4FF; }
.sx .x-dark .x-qa summary::after { border-right-color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.5); }
.sx .x-dark .x-qa summary:hover::after { border-right-color: #C3B4FF; border-bottom-color: #C3B4FF; }
.sx .x-dark .x-qa p { color: #A79DD6; }

/* buttons */
.sx .x-dark .x-btn-3 { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); color: #fff; }
.sx .x-dark .x-btn-3:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); color: #fff; }

/* --- 6.11 Asymmetric section header ---------------------------------------

   Heading on the left, the supporting line and any CTA on the right. Taken
   from the Topbox reference, where every section opens this way rather than
   centring everything.

   It earns its place for a reason beyond looks: a centred header forces the
   sub-line to be short or it wraps into a ragged triangle, so sections end up
   with headings that say nothing. Splitting the row gives the sentence a
   proper column to live in, and the heading stops competing with it.

   Use .x-head for centred, .x-head-split for this. Both are available; pick
   per section rather than per page.
   ------------------------------------------------------------------------- */
.sx .x-head-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 40px; align-items: end; margin-bottom: 40px; }
.sx .x-head-split .x-h2 { margin: 0; }
.sx .x-head-split .x-side { padding-bottom: 4px; }
.sx .x-head-split .x-sub { margin: 0; max-width: 42ch; }
.sx .x-head-split .x-btns { margin-top: 18px; }
@media (max-width: 900px) {
  .sx .x-head-split { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 30px; }
}

/* --- 6.12 Emphasis inside a heading ---------------------------------------

   The reference shifts the second line of every heading into an italic serif.
   That is their voice, not ours - dropping a serif into a Sora page would read
   as a borrowed trick. The same job is done here with the gradient already
   used by the hero, so the emphasis is recognisably SkyCore rather than
   recognisably Topbox.

       <h2 class="x-h2">The parts that <em>do not change</em></h2>
   ------------------------------------------------------------------------- */
.sx .x-h2 em, .sx h2 em { font-style: normal;
  background: linear-gradient(96deg, #E536DB 4%, #8B5CF6 48%, #3AB0FF 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
/* On a dark ground the gradient needs to start lighter or it disappears. */
.sx .x-dark .x-h2 em, .sx .x-dark h2 em {
  background: linear-gradient(96deg, #F27BEA 4%, #B9AEFF 48%, #7FCBFF 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }

/* --- 6.13 Numbered cards --------------------------------------------------

   001 / 002 / 003 in the corner. Worth using only when the cards really are a
   sequence or a set someone might refer to by number - numbering an unordered
   list of features is decoration pretending to be information.
   ------------------------------------------------------------------------- */
.sx .x-card2 { position: relative; }
.sx .x-card2-n { position: absolute; top: 22px; right: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  color: #C7C2DA; font-variant-numeric: tabular-nums; }
.sx .x-dark .x-card2-n { color: rgba(255,255,255,.34); }
/* When a card is numbered the title needs room to clear the number. */
.sx .x-card2.numbered h4 { padding-right: 44px; }

/* --- 6.14 Panel-in-card ----------------------------------------------------

   The reference puts a slice of real product UI inside each feature card
   instead of an icon. That is the single biggest reason its cards look like a
   product and ours looked like a brochure.

   This is the frame for it: an inset panel on a slightly recessed ground, so
   whatever is placed inside reads as a screen rather than as more page.
   ------------------------------------------------------------------------- */
.sx .x-panel { margin-top: 18px; border-radius: 14px; padding: 16px;
  background: var(--x-ground); border: 1px solid var(--x-line); }
.sx .x-dark .x-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.sx .x-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sx .x-panel-row + .x-panel-row { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--x-line); }
.sx .x-dark .x-panel-row + .x-panel-row { border-top-color: rgba(255,255,255,.08); }
.sx .x-panel-row b { font-size: 13px; font-weight: 600; color: var(--x-ink); }
.sx .x-dark .x-panel-row b { color: #fff; }
.sx .x-panel-row span { font-size: 12px; color: var(--x-muted); }
.sx .x-dark .x-panel-row span { color: #A79DD6; }
/* Price + renewal inside a panel row. The renewal is printed rather than
   badged because a badge word ("renews higher") hides the one number that
   actually decides the cost - see new-domain-extensions.php. */
.sx .x-panel-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; }
.sx .x-panel-row .x-panel-val { font-size: 13px; font-weight: 600; color: var(--x-ink); }
.sx .x-dark .x-panel-row .x-panel-val { color: #fff; }
.sx .x-panel-renew { font-style: normal; font-size: 11.5px; font-weight: 600;
  color: #8A550F; white-space: nowrap; }
.sx .x-dark .x-panel-renew { color: #F0B863; }

.sx .x-panel-pill { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  background: #E7F7EF; color: #12925C; white-space: nowrap; }
.sx .x-panel-pill.b { background: #EFEBFF; color: var(--x-brand); }
.sx .x-dark .x-panel-pill { background: rgba(62,224,141,.16); color: #6BE8AC; }
.sx .x-dark .x-panel-pill.b { background: rgba(139,114,255,.20); color: #C3B4FF; }
/* Bars for a simple chart inside a panel. */
.sx .x-panel-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 4px; }
.sx .x-panel-bars i { flex: 1; border-radius: 3px; background: #E4E0FA; min-height: 4px; }
.sx .x-panel-bars i.on { background: var(--x-brand); }
.sx .x-dark .x-panel-bars i { background: rgba(255,255,255,.12); }
.sx .x-dark .x-panel-bars i.on { background: #8B72FF; }

/* --- 6.15 Animated ring + search field ------------------------------------

   The travelling-light border from the homepage domain search, made reusable.
   One conic gradient rotates behind the field and the wrapper's 1.6px padding
   plus overflow:hidden clips it down to a ring.

   THE FIELD INSIDE MUST BE OPAQUE. At anything less the gradient's centre
   shows through the middle of the input and reads as a spinner sitting in the
   box - that shipped once on the homepage and had to be chased down.

       <div class="x-ring">
         <form class="x-search" ...>
           <input ...><button>Search</button>
         </form>
       </div>
   ------------------------------------------------------------------------- */
.sx .x-ring { position: relative; border-radius: 100px; padding: 1.6px;
  overflow: hidden; isolation: isolate; max-width: 640px;
  box-shadow: 0 10px 30px rgba(10,4,32,.30); }
.sx .x-ring.center { margin-left: auto; margin-right: auto; }
.sx .x-ring::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1; z-index: 0;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.14) 0deg 190deg,
    rgba(142,104,255,1) 250deg,
    rgba(214,199,255,1) 292deg,
    rgba(111,195,255,.95) 322deg,
    rgba(255,255,255,.14) 360deg);
  animation: x-orbit 5.5s linear infinite; }
@keyframes x-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.sx .x-search { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 20px; border-radius: 100px;
  background: linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.04)), #181038; }
.sx .x-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: #fff; font-size: 15.5px; font-family: inherit; padding: 12px 0; }
.sx .x-search input::placeholder { color: #A79DD6; }
.sx .x-search button { border: 0; cursor: pointer; padding: 12px 26px; border-radius: 100px;
  background: #fff; color: #14131C; font-size: 14.5px; font-weight: 600; font-family: inherit;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.sx .x-search button:hover { background: #EDEAFF; }
/* The magnifier is desktop-hidden and mobile-shown; the word does the opposite.
   Both live in the markup so nothing has to be swapped by script. */
.sx .x-search-mag { display: none; }
@media (prefers-reduced-motion: reduce) { .sx .x-ring::before { animation: none; } }

/* Mobile keeps the ROW. Stacking the input above a full-width button turns a
   search box into a form - it doubles the height, leaves the input looking
   like floating placeholder text with no field around it, and makes the button
   the largest thing on the screen.
   Instead the button collapses to a 40px circle carrying only the magnifier,
   which is what the homepage does and the only reason its search still reads
   as one control on a phone. */
@media (max-width: 991px) {
  .sx .x-search { padding: 5px 5px 5px 18px; }
  .sx .x-search input { font-size: 15px; }
  .sx .x-search button { padding: 0; width: 40px; height: 40px; border-radius: 50%;
    justify-content: center; flex: none; }
  .sx .x-search-word { display: none; }
  .sx .x-search-mag { display: block; }
}

/* --- 6.16 Document / policy pages -----------------------------------------

   The shape shared by account-deletion, privacy-policy, legal-agreement,
   refund-policy and the rest: a narrow measure, numbered sections, prose,
   lists and the occasional callout.

   Measure is capped at 68ch rather than the usual container. Legal text is the
   one thing on the site people genuinely read top to bottom, and a full-width
   line is where they lose their place.
   ------------------------------------------------------------------------- */
.sx .x-doc { max-width: 68ch; margin: 0 auto; }
.sx .x-doc-meta { display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--x-muted); padding: 9px 16px; border-radius: 100px;
  background: var(--x-ground); border: 1px solid var(--x-line); margin-bottom: 34px; }
.sx .x-doc-meta b { color: var(--x-ink); font-weight: 600; }

.sx .x-doc-sec + .x-doc-sec { margin-top: 30px; padding-top: 30px;
  border-top: 1px solid var(--x-line); }
/* The number is a marker, not a heading - it sits outside the text column so
   the headings themselves stay flush and scannable. */
.sx .x-doc-sec h2 { display: flex; align-items: baseline; gap: 13px;
  font-size: 21px; font-weight: 600; letter-spacing: -.025em; color: var(--x-ink); }
.sx .x-doc-num { flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: #EFEBFF; color: var(--x-brand);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transform: translateY(-1px); }
/* --x-body, not --x-muted.

   Muted is #8A8999, which measures 3.43:1 against white - below the 4.5:1 that
   WCAG AA requires for body text. It is a caption colour, and it was being
   used for the one kind of text on this site that people actually read end to
   end. --x-body is #4E4D5E at 8.24:1.

   Size goes to 16px for the same reason: this is long-form reading, not a card
   subtitle, and 15px with a light grey is where people give up. */
.sx .x-doc-sec p { font-size: 16px; line-height: 1.75; color: var(--x-body); margin-top: 14px; }
.sx .x-doc-sec ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.sx .x-doc-sec li { position: relative; padding-left: 22px; font-size: 16px;
  line-height: 1.7; color: var(--x-body); }
.sx .x-doc-sec li::before { content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: #C9C2F0; }
.sx .x-doc-sec a { color: var(--x-brand); text-decoration: underline; text-underline-offset: 2px; }
.sx .x-doc-sec a:hover { color: var(--x-deep); }

/* Callout - contact details, warnings, anything that must not be skimmed past. */
.sx .x-doc-box { margin-top: 18px; padding: 20px 22px; border-radius: var(--x-r);
  background: var(--x-ground); border: 1px solid var(--x-line); }
.sx .x-doc-box h4 { display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--x-ink); }
.sx .x-doc-box p { font-size: 15px; color: var(--x-body); margin-top: 10px; }
.sx .x-doc-box p:first-of-type { margin-top: 12px; }


/* --- pieces a privacy policy needs that a terms page did not ---------------

   ALL THREE OF THESE WERE RENDERING COMPLETELY UNSTYLED ON LIVE.

   privacy-policy.php used .sc-rights-grid, .sc-right-card, .legal-basis-tag
   and .cookie-badge - 23 elements between them - and NOT ONE of those class
   names is defined in any stylesheet in this project. Eight GDPR rights cards,
   eight lawful-basis tags and seven cookie category badges were all falling
   back to bare block and inline text.

   Nothing errors when a class has no rules. The page just quietly looks like an
   unstyled draft, which is a poor look on the one page whose whole job is to
   say the company is careful with your data.
   ------------------------------------------------------------------------- */

/* The eight data-subject rights, as cards rather than another bulleted list -
   people scan this section looking for one specific right. */
/* --- sitemap index list ----------------------------------------------------
   A two-column list inside a card. Sitemap links are short and there are a lot
   of them, so a single stack wastes most of the card's width and makes the page
   twice as tall as it needs to be. auto-fit rather than a fixed two, so a
   narrow card or a phone falls back to one column on its own. */
/* An odd number of cards in a two-column grid leaves the last one alone on its
   row, half the width of the page, which reads as a mistake rather than a
   layout. Spanning it across both columns closes the row properly.

   Applied by the page when the count is odd, not blanket-applied to
   :last-child - with an even count the last card is already paired and
   stretching it would break the row that was fine. */
.sx .x-grid.two > .x-card2.wide { grid-column: 1 / -1; }

.sx .x-sitemap-list { list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 2px 18px; }
.sx .x-sitemap-list a { display: block; padding: 6px 0; font-size: 14px;
  line-height: 1.5; color: var(--x-body); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s ease; }
.sx .x-sitemap-list a:hover { color: var(--x-brand); text-decoration: none; }
.sx .x-sitemap-list a:focus-visible { outline: 2px solid var(--x-brand);
  outline-offset: 2px; border-radius: 4px; }
.sx .x-sitemap-ext { margin-left: 5px; font-size: 11px; opacity: .55; }
.sx .x-dark .x-sitemap-list a { color: #C6BFE2; }
.sx .x-dark .x-sitemap-list a:hover { color: #fff; }

.sx .x-doc-grid { display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px) { .sx .x-doc-grid { grid-template-columns: 1fr; } }
.sx .x-doc-card { background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r); padding: 16px 18px; }
.sx .x-doc-card-h { display: flex; align-items: center; gap: 10px; }
.sx .x-doc-card-i { flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: #EFEBFF; color: var(--x-brand); font-size: 16px; }
.sx .x-doc-card-t { font-size: 14.5px; font-weight: 600; color: var(--x-ink); line-height: 1.35; }
.sx .x-doc-card p { font-size: 14px; line-height: 1.65; color: var(--x-body); margin-top: 10px; }

/* The lawful basis under Article 6. A tag rather than a sentence, because each
   processing purpose has exactly one and they repeat. */
.sx .x-doc-tag { display: inline-block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: #EFEBFF; color: var(--x-brand); }

/* Cookie categories. Colour carries the same meaning as the label here, so the
   label is always present too - colour is never the only signal. */
.sx .x-doc-pill { display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 100px; white-space: nowrap;
  background: var(--x-ground); color: var(--x-body); }
.sx .x-doc-pill.essential  { background: #E7F7EF; color: #0E7A4D; }
.sx .x-doc-pill.analytics  { background: #E8F0FE; color: #1A4F9C; }
.sx .x-doc-pill.marketing  { background: #FDF0E6; color: #8A4B0F; }
.sx .x-doc-pill.preference { background: #EFEBFF; color: #5335D6; }

.sx .x-dark .x-doc-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-doc-card-t { color: #fff; }
.sx .x-dark .x-doc-card p { color: #C6BFE2; }
.sx .x-dark .x-doc-card-i,
.sx .x-dark .x-doc-tag { background: rgba(139,114,255,.20); color: #C3B4FF; }
.sx .x-dark .x-doc-pill { background: rgba(255,255,255,.07); color: #C6BFE2; }
.sx .x-dark .x-doc-pill.essential  { background: rgba(62,224,141,.16); color: #6BE8AC; }
.sx .x-dark .x-doc-pill.analytics  { background: rgba(90,150,255,.18); color: #9DC0FF; }
.sx .x-dark .x-doc-pill.marketing  { background: rgba(240,184,99,.16); color: #F0B863; }
.sx .x-dark .x-doc-pill.preference { background: rgba(139,114,255,.20); color: #C3B4FF; }

.sx .x-dark .x-doc-meta { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-doc-meta b { color: #fff; }
.sx .x-dark .x-doc-sec + .x-doc-sec { border-top-color: rgba(255,255,255,.10); }
.sx .x-dark .x-doc-sec h2 { color: #fff; }
.sx .x-dark .x-doc-sec p, .sx .x-dark .x-doc-sec li { color: #A79DD6; }
.sx .x-dark .x-doc-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-doc-box h4 { color: #fff; }

/* --- 6.17 Table -----------------------------------------------------------

   For rate cards, comparisons and spec tables. Wrapped in .x-table-wrap so a
   wide table scrolls inside its own box rather than making the whole page
   scroll sideways - that is the single most common way a table breaks a
   layout on a phone.
   ------------------------------------------------------------------------- */
.sx .x-table-wrap { overflow-x: auto; border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); background: #fff; -webkit-overflow-scrolling: touch; }
.sx .x-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.sx .x-table th, .sx .x-table td { text-align: left; padding: 16px 22px;
  border-bottom: 1px solid var(--x-line); }
.sx .x-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #A19CB4; background: var(--x-ground); }
.sx .x-table tbody td { font-size: 15px; color: var(--x-body); }
.sx .x-table tbody tr:last-child td { border-bottom: 0; }
.sx .x-table tbody td:first-child { font-weight: 600; color: var(--x-ink); }
/* Figures right-aligned and tabular so the column reads as a column. */
.sx .x-table .num { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--x-ink); white-space: nowrap; }
/* Visible to screen readers, not on screen. A table column of buttons still
   needs a header - an empty <th> reads as an unlabelled column - but the word
   would be noise next to the buttons themselves.

   The clip-path/1px pattern rather than display:none or visibility:hidden:
   both of those remove the element from the accessibility tree as well, which
   defeats the point. */
.sx .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

.sx .x-table-note { font-size: 13px; line-height: 1.65; color: var(--x-muted); margin-top: 14px; }

.sx .x-dark .x-table-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-table th, .sx .x-dark .x-table td { border-bottom-color: rgba(255,255,255,.09); }
.sx .x-dark .x-table thead th { background: rgba(255,255,255,.05); color: #A79DD6; }
.sx .x-dark .x-table tbody td { color: #C6BFE2; }
.sx .x-dark .x-table tbody td:first-child,
.sx .x-dark .x-table .num { color: #fff; }
.sx .x-dark .x-table-note { color: #A79DD6; }

/* ---------------------------------------------------------------------------
   6.18  .x-tldrow - a wrapping row of filter chips
   ---------------------------------------------------------------------------
   all-dns-records.php has been asking for this class since it was converted.
   It never existed, so its record-type filters (ALL / A / AAAA / ...) rendered
   as bare inline spans with no gap between them. Defining it here fixes that
   page as a side effect of building the bulk search selector.
   ------------------------------------------------------------------------- */
.sx .x-tldrow { display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center; }
.sx .x-tldrow.left { justify-content: flex-start; }

/* ---------------------------------------------------------------------------
   6.19  BULK DOMAIN SEARCH
   ---------------------------------------------------------------------------
   One panel takes a list of names and a set of extensions; the results are
   names x extensions, checked in parallel and filled in as answers land.

   The chips are real checkboxes with a visually-hidden input rather than
   click-handled spans, so the whole selector is keyboard operable and reports
   its state to a screen reader without any ARIA bolted on afterwards.
   ------------------------------------------------------------------------- */
.sx .x-bulk-panel { background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); padding: 26px; box-shadow: 0 12px 34px rgba(20,19,28,.06); }
@media (min-width: 860px) { .sx .x-bulk-panel { padding: 32px; } }

.sx .x-bulk-label { display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--x-body); margin-bottom: 10px; }
.sx .x-bulk-hint { font-size: 13.5px; line-height: 1.6; color: var(--x-body); margin: 8px 0 0; }

.sx .x-bulk-ta { width: 100%; min-height: 148px; resize: vertical;
  border: 1px solid var(--x-line); border-radius: var(--x-r); background: var(--x-ground);
  padding: 14px 16px; font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  font-size: 14.5px; line-height: 1.75; color: var(--x-ink); outline: none; }
.sx .x-bulk-ta::placeholder { color: #9E9DAD; }
.sx .x-bulk-ta:focus { border-color: var(--x-brand); box-shadow: 0 0 0 3px rgba(107,77,255,.16); }

/* --- extension picker ---------------------------------------------------- */
.sx .x-bulk-groups { display: grid; gap: 18px; margin-top: 24px; }
.sx .x-bulk-group > span { display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 9px; }

.sx .x-tld { position: relative; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--x-line); border-radius: 100px;
  background: var(--x-white); cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 600; color: var(--x-ink);
  transition: border-color .18s ease, background .18s ease, color .18s ease; }
.sx .x-tld i { font-style: normal; font-size: 12px; font-weight: 600;
  color: var(--x-body); font-variant-numeric: tabular-nums; }
.sx .x-tld:hover { border-color: #C9C2F5; background: #FBFAFF; }
/* The input is hidden from sight but not from the accessibility tree or the
   tab order - clip it, do not display:none it. */
.sx .x-tld input { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.sx .x-tld:has(input:checked) { background: var(--x-brand); border-color: var(--x-brand); color: #fff; }
.sx .x-tld:has(input:checked) i { color: rgba(255,255,255,.82); }
.sx .x-tld:has(input:focus-visible) { outline: 2px solid var(--x-brand); outline-offset: 2px; }
/* Same pill, no interaction. bundle-deal.php lists the extensions a bundle can
   include - those are labels, not choices, so they must not carry a pointer
   cursor or a hover state that promises something will happen. */
.sx .x-tld.static { cursor: default; }
.sx .x-tld.static:hover { border-color: var(--x-line); background: var(--x-white); }
.sx .x-dark .x-tld.static:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }

.sx .x-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--x-line); }
.sx .x-bulk-count { font-size: 13.5px; color: var(--x-body); font-variant-numeric: tabular-nums; }
.sx .x-bulk-count b { color: var(--x-ink); font-weight: 700; }

/* --- results ------------------------------------------------------------- */
/* This is the answer the search was run for - how many of these names you can
   actually have. It was set at 13.5px in body grey, which read as a caption
   under the results rather than the headline above them. */
/* WHICHEVER RENDERS FIRST CARRIES THE SPACING.
   
   The margin used to sit only on .x-bulk-sum. That element also has
   `:empty { display: none }` so nothing shows before a search - which means on
   an ERROR, where the summary is cleared and the message goes into the list
   below, the summary collapsed and took the spacing with it. The error card
   then sat jammed under the form.
   
   Reported twice before I understood it properly. The rule now follows the
   content: the summary takes the margin when it has something in it, and the
   list takes it when the summary is empty. */
.sx .x-bulk-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 46px 0 20px; }
.sx .x-bulk-sum:empty + .x-bulk-list:not(:empty) { margin-top: 46px; }
@media (max-width: 719px) {
  .sx .x-bulk-sum:empty + .x-bulk-list:not(:empty) { margin-top: 32px; }
}
@media (max-width: 719px) { .sx .x-bulk-sum { margin-top: 32px; } }
/* Both are empty until a search runs. Collapsing them keeps that top margin
   and the results border from showing as a phantom gap and an empty strip -
   which is why the section can carry real padding instead of padding-top:0. */
.sx .x-bulk-sum:empty, .sx .x-bulk-list:empty { display: none; }
.sx .x-bulk-sum > span { display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--x-line); background: var(--x-white);
  font-size: 14px; font-weight: 600; color: var(--x-body);
  font-variant-numeric: tabular-nums; }
.sx .x-bulk-sum b { font-size: 20px; font-weight: 700; line-height: 1; color: var(--x-ink); }
/* Only the available count carries colour. If everything reads as important,
   nothing does - and "taken" is not the number anyone came here to find. */
.sx .x-bulk-sum > span.good { border-color: #BCE5CF; background: #EFFAF4; color: #0D5C3D; }
.sx .x-bulk-sum > span.good b { color: #0F7A4E; }
.sx .x-bulk-sum > span.warn { border-color: #F3DFBC; background: #FDF6EA; color: #7A4C0D; }
.sx .x-bulk-sum > span.warn b { color: #8A550F; }

.sx .x-bulk-list { border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  overflow: hidden; background: var(--x-white); }
.sx .x-bulk-row { display: grid; align-items: center; gap: 12px 16px;
  grid-template-columns: auto 1fr auto; padding: 14px 18px;
  border-bottom: 1px solid var(--x-line); }
.sx .x-bulk-row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .sx .x-bulk-row { grid-template-columns: auto minmax(0,1fr) 116px 92px 132px; padding: 14px 22px; }
}
/* !important is not decoration here. main.css:296 sets
       input[type="checkbox"] { accent-color: rgb(var(--color-secondary)) !important }
   which is the orange used elsewhere on the site, and without matching it the
   tick renders orange against these purple buttons. */
.sx .x-bulk-row input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer;
  accent-color: var(--x-brand) !important; }
/* Only an available domain can be selected, so the box is absent otherwise -
   and the column still has to hold its width or every row jogs sideways. */
.sx .x-bulk-nobox { width: 17px; }

.sx .x-bulk-name { font-size: 15px; font-weight: 600; color: var(--x-ink);
  word-break: break-all; min-width: 0; }
.sx .x-bulk-row.is-taken .x-bulk-name { color: var(--x-body); font-weight: 500; }

.sx .x-bulk-state { display: inline-flex; align-items: center; gap: 6px;
  justify-self: start; padding: 4px 11px; border-radius: 100px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sx .x-bulk-state.is-checking { background: #F1EFF8; color: #56546A; }
.sx .x-bulk-state.is-free     { background: #E7F7EF; color: #0F7A4E; }
.sx .x-bulk-state.is-taken    { background: #FBECEC; color: #A81F18; }
/* Neutral on purpose. The registry did not answer, so inviting a check is the
   honest response - claiming either way would be a guess. */
.sx .x-bulk-state.is-unknown  { background: #FDF4E5; color: #8A550F; }

.sx .x-bulk-price { font-size: 14.5px; font-weight: 700; color: var(--x-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx .x-bulk-price i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--x-body); }
.sx .x-bulk-price.none { font-weight: 500; color: var(--x-body); }

.sx .x-bulk-act { display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--x-brand);
  background: var(--x-brand); color: #fff; font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: background .18s ease; }
.sx .x-bulk-act:hover { background: var(--x-deep); border-color: var(--x-deep); color: #fff; text-decoration: none; }
.sx .x-bulk-act.ghost { background: transparent; color: var(--x-body); border-color: var(--x-line); }
.sx .x-bulk-act.ghost:hover { background: var(--x-ground); color: var(--x-ink); }

.sx .x-bulk-empty { padding: 30px 22px; text-align: center; font-size: 14.5px; color: var(--x-body); }

/* The sticky bar only earns its place once something is selected, so it is
   rendered hidden and revealed by the script. */
.sx .x-bulk-bar { position: sticky; bottom: 16px; z-index: 5; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 14px 18px; border-radius: var(--x-r-l);
  background: var(--x-ink); color: #fff; box-shadow: 0 14px 36px rgba(20,19,28,.28); }
.sx .x-bulk-bar[hidden] { display: none; }
.sx .x-bulk-bar span { font-size: 14px; font-variant-numeric: tabular-nums; }
.sx .x-bulk-bar b { font-weight: 700; }
.sx .x-bulk-bar button { border: 0; cursor: pointer; padding: 11px 22px; border-radius: 100px;
  background: #fff; color: var(--x-ink); font-family: inherit; font-size: 14px; font-weight: 600; }
.sx .x-bulk-bar button:hover { background: #EDEAFF; }

@media (prefers-reduced-motion: reduce) {
  .sx .x-tld, .sx .x-bulk-act, .sx .x-bulk-bar button { transition: none; }
}

/* --- 6.10 dark-ground counterparts (see the contract there) --------------- */
.sx .x-dark .x-bulk-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-bulk-label, .sx .x-dark .x-bulk-hint,
.sx .x-dark .x-bulk-count, .sx .x-dark .x-bulk-sum > span { color: #C6BFE2; }
.sx .x-dark .x-bulk-count b, .sx .x-dark .x-bulk-sum b { color: #fff; }
.sx .x-dark .x-bulk-sum > span { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
/* These sit AFTER the neutral dark rule above on purpose: it matches at the
   same specificity, so without restating them here the tints are flattened. */
.sx .x-dark .x-bulk-sum > span.good { border-color: rgba(30,190,120,.34); background: rgba(30,190,120,.13); color: #8FE7BE; }
.sx .x-dark .x-bulk-sum > span.good b { color: #B6F2D6; }
.sx .x-dark .x-bulk-sum > span.warn { border-color: rgba(226,168,72,.34); background: rgba(226,168,72,.13); color: #F0CE96; }
.sx .x-dark .x-bulk-sum > span.warn b { color: #F8E3BE; }
.sx .x-dark .x-bulk-group > span { color: #A79DD6; }
.sx .x-dark .x-bulk-ta { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.sx .x-dark .x-bulk-ta::placeholder { color: #A79DD6; }
.sx .x-dark .x-tld { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.sx .x-dark .x-tld i { color: #C6BFE2; }
.sx .x-dark .x-tld:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.sx .x-dark .x-bulk-actions { border-top-color: rgba(255,255,255,.10); }
.sx .x-dark .x-bulk-list { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-bulk-row { border-bottom-color: rgba(255,255,255,.09); }
.sx .x-dark .x-bulk-name { color: #fff; }
.sx .x-dark .x-bulk-row.is-taken .x-bulk-name { color: #A79DD6; }
.sx .x-dark .x-bulk-price { color: #fff; }
.sx .x-dark .x-bulk-price i, .sx .x-dark .x-bulk-price.none, .sx .x-dark .x-bulk-empty { color: #C6BFE2; }
.sx .x-dark .x-bulk-act.ghost { color: #C6BFE2; border-color: rgba(255,255,255,.18); }
.sx .x-dark .x-bulk-act.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.sx .x-dark .x-bulk-bar { background: #fff; color: var(--x-ink); }
.sx .x-dark .x-bulk-bar button { background: var(--x-brand); color: #fff; }
.sx .x-dark .x-bulk-bar button:hover { background: var(--x-deep); }

/* ---------------------------------------------------------------------------
   6.20  BULK TRANSFER - additions to 6.19
   ---------------------------------------------------------------------------
   The transfer page reuses 6.19 wholesale. What it adds is a second line under
   each domain (who holds it now, when it expires) and its own set of states,
   because "available" and "taken" mean the opposite thing here: a domain you
   can move is one that IS registered.

   Almost every registered domain carries clientTransferProhibited - registrars
   set it by default - so "Locked" is the COMMON answer, not an error. That is
   why it is amber rather than red, and why the row still names the registrar:
   the useful thing is telling somebody where to go and unlock it.
   ------------------------------------------------------------------------- */
/* word-break is reset because this sits INSIDE .x-bulk-name, which sets
   break-all so a long domain can wrap mid-string. Inherited by a sentence it
   breaks words at random points. */
.sx .x-bulk-meta { display: block; margin-top: 3px; word-break: normal;
  font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--x-body); }
.sx .x-bulk-meta b { font-weight: 600; color: var(--x-ink); }

.sx .x-bulk-state.is-ready  { background: #E7F7EF; color: #0F7A4E; }
.sx .x-bulk-state.is-locked { background: #FDF4E5; color: #8A550F; }
.sx .x-bulk-state.is-toonew { background: #FDF4E5; color: #8A550F; }
.sx .x-bulk-state.is-none   { background: #FBECEC; color: #A81F18; }

/* Four columns rather than five - there is no price column, because a transfer
   price is not the registration price and we do not have transfer figures to
   publish. The registrar and expiry are more use here anyway. */
.sx .x-bulk-list.cols4 .x-bulk-row { grid-template-columns: auto 1fr auto; }
@media (min-width: 720px) {
  .sx .x-bulk-list.cols4 .x-bulk-row { grid-template-columns: auto minmax(0,1fr) 150px 138px; }
}
/* A row that cannot be acted on should not look like one that can. */
.sx .x-bulk-row.is-none .x-bulk-name,
.sx .x-bulk-row.is-unknown .x-bulk-name { color: var(--x-body); font-weight: 500; }

.sx .x-dark .x-bulk-meta { color: #C6BFE2; }
.sx .x-dark .x-bulk-meta b { color: #fff; }
.sx .x-dark .x-bulk-row.is-none .x-bulk-name,
.sx .x-dark .x-bulk-row.is-unknown .x-bulk-name { color: #A79DD6; }

/* ---------------------------------------------------------------------------
   6.21  PLAN TIERS
   ---------------------------------------------------------------------------
   A priced plan card, for any page selling tiers.

   NOTE FOR LATER: index.php still carries its own bespoke pricing markup and
   CSS (.x-plans / .x-plan-n / .x-price) inside its page <style>, from before
   this library existed. It is deliberately NOT touched here - the homepage is
   the last thing that should be refactored mid-stream - but the two should be
   merged onto this component eventually, or they will drift the way the TLD
   price maps did.

   The card carries the price and the one or two specs that actually separate
   the tiers. Everything the plans share belongs in a table or a panel below,
   not repeated three times - a wall of identical bullets is how a pricing page
   stops answering the only question it is asked, which is what is different.
   ------------------------------------------------------------------------- */
.sx .x-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
  align-items: start; }
@media (max-width: 980px) { .sx .x-tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sx .x-tiers { grid-template-columns: 1fr; } }

/* Four across, for three plans plus a "tell us what you need" card. Drops to
   two at 1080px rather than 980: four 278px cards are fine, but the two-up that
   would follow at 980 puts the fourth card alone on its own row, which reads as
   an afterthought rather than an option. */
.sx .x-tiers.four { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1080px) { .sx .x-tiers.four { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } }
@media (max-width: 640px)  { .sx .x-tiers.four { grid-template-columns: 1fr; } }

/* THE PRICE SLOT WHEN THERE IS NO PRICE.

   Not .x-tier-price with words in it: that rule sets 34px with a shrunk
   ::first-letter, which exists to make a "$" sit smaller than its digits. Text
   in there gets its first letter shrunk for no reason and reads as a broken
   price rather than an invitation.

   Sized to hold the same vertical space so the row of cards still lines up. */
.sx .x-tier-ask { margin: 18px 0 2px; font-size: 23px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.3; color: var(--x-ink); }
.sx .x-dark .x-tier-ask { color: #fff; }

.sx .x-tier { position: relative; display: flex; flex-direction: column;
  background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(18,7,48,.04), 0 8px 22px rgba(18,7,48,.05); }
/* The highlighted tier is raised by a border and a stronger shadow rather than
   by scaling it, which would knock the row of cards out of alignment. */
.sx .x-tier.popular { border-color: var(--x-brand);
  box-shadow: 0 2px 4px rgba(107,77,255,.10), 0 16px 40px rgba(107,77,255,.16); }
.sx .x-tier-badge { position: absolute; top: -11px; left: 24px;
  padding: 4px 12px; border-radius: 100px; background: var(--x-brand); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.sx .x-tier h4 { font-size: 17px; font-weight: 600; }
.sx .x-tier-sub { font-size: 13.5px; line-height: 1.6; color: var(--x-body); margin-top: 6px; }

.sx .x-tier-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 2px; }
.sx .x-tier-price .n { font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  color: var(--x-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.sx .x-tier-price .n::first-letter { font-size: 21px; font-weight: 600; vertical-align: super; }
.sx .x-tier-price .p { font-size: 14px; font-weight: 600; color: var(--x-body); }
.sx .x-tier-note { font-size: 12.5px; color: var(--x-body); }

.sx .x-tier .x-btn { width: 100%; justify-content: center; margin-top: 20px; }

/* Key specs. Deliberately short - three or four lines, the ones that differ. */
.sx .x-tier-key { list-style: none; margin: 20px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--x-line); display: grid; gap: 10px; }
.sx .x-tier-key li { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 13.5px; color: var(--x-body); }
.sx .x-tier-key b { font-weight: 600; color: var(--x-ink); text-align: right;
  font-variant-numeric: tabular-nums; }

.sx .x-dark .x-tier { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-tier.popular { border-color: var(--x-brand-2); box-shadow: 0 16px 40px rgba(107,77,255,.24); }
.sx .x-dark .x-tier h4 { color: #fff; }
.sx .x-dark .x-tier-sub, .sx .x-dark .x-tier-note,
.sx .x-dark .x-tier-price .p, .sx .x-dark .x-tier-key li { color: #C6BFE2; }
.sx .x-dark .x-tier-price .n, .sx .x-dark .x-tier-key b { color: #fff; }
.sx .x-dark .x-tier-key { border-top-color: rgba(255,255,255,.10); }

/* ---------------------------------------------------------------------------
   6.22  CONTACT CHANNELS
   ---------------------------------------------------------------------------
   A contact page is a router. Its whole job is getting somebody into the right
   queue quickly, so each channel is one large target carrying the thing people
   actually decide on - how long they will wait.

   The card IS the anchor, not a div containing one. A div with a link inside
   gives you a small target and a hover state that lies about what is
   clickable; making the <a> the card means the whole tile is the hit area and
   keyboard focus lands on the same box the mouse does.
   ------------------------------------------------------------------------- */
.sx .x-chans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 640px) { .sx .x-chans { grid-template-columns: 1fr; } }

.sx .x-chan { position: relative; display: flex; align-items: flex-start; gap: 15px;
  padding: 20px; border-radius: var(--x-r-l);
  background: var(--x-white); border: 1px solid var(--x-line);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(18,7,48,.04), 0 8px 22px rgba(18,7,48,.05);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sx .x-chan:hover { border-color: #C9C2F5; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(18,7,48,.06), 0 16px 34px rgba(18,7,48,.09);
  text-decoration: none; color: inherit; }
.sx .x-chan:focus-visible { outline: 2px solid var(--x-brand); outline-offset: 3px; }

.sx .x-chan-t { flex: 1; min-width: 0; }
.sx .x-chan-t strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--x-ink); }
.sx .x-chan-t span { display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.6; color: var(--x-body); }
/* Phone numbers and addresses wrap badly mid-string; keep them intact. */
.sx .x-chan-t em { font-style: normal; white-space: nowrap; }

/* The wait time is the deciding factor, so it sits top-right where it is read
   before the description. */
.sx .x-chan-badge { flex: none; align-self: flex-start;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #F1EFF8; color: #56546A; }
.sx .x-chan-badge.now { background: #E7F7EF; color: #0F7A4E; }

/* --- contact details: label / value rows -------------------------------- */
.sx .x-deets { display: grid; gap: 0; border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); overflow: hidden; background: var(--x-white); }
.sx .x-deet { display: grid; gap: 3px 18px; padding: 16px 20px;
  border-bottom: 1px solid var(--x-line); }
@media (min-width: 620px) { .sx .x-deet { grid-template-columns: 190px minmax(0,1fr); align-items: baseline; } }
.sx .x-deet:last-child { border-bottom: 0; }
.sx .x-deet dt { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--x-body); }
.sx .x-deet dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--x-ink); }
.sx .x-deet dd a { color: var(--x-brand); font-weight: 600; }
.sx .x-deet dd a:hover { color: var(--x-deep); }
.sx .x-deet dd .sep { color: var(--x-line); margin: 0 8px; }

/* --- social row ---------------------------------------------------------- */
.sx .x-social { display: flex; flex-wrap: wrap; gap: 10px; }
.sx .x-social a { display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--x-line); background: var(--x-white);
  color: var(--x-ink); font-size: 18px; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
.sx .x-social a:hover { background: var(--x-brand); border-color: var(--x-brand); color: #fff; }
.sx .x-social a:focus-visible { outline: 2px solid var(--x-brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sx .x-chan, .sx .x-social a { transition: none; }
  .sx .x-chan:hover { transform: none; }
}

/* --- 6.10 dark-ground counterparts --------------------------------------- */
.sx .x-dark .x-chan { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-chan:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.07); box-shadow: none; }
.sx .x-dark .x-chan-t strong { color: #fff; }
.sx .x-dark .x-chan-t span { color: #C6BFE2; }
.sx .x-dark .x-chan-badge { background: rgba(255,255,255,.10); color: #C6BFE2; }
.sx .x-dark .x-chan-badge.now { background: rgba(30,190,120,.16); color: #8FE7BE; }
.sx .x-dark .x-deets { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-deet { border-bottom-color: rgba(255,255,255,.09); }
.sx .x-dark .x-deet dt { color: #A79DD6; }
.sx .x-dark .x-deet dd { color: #fff; }
.sx .x-dark .x-deet dd a { color: #C4B6FF; }
.sx .x-dark .x-social a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.sx .x-dark .x-social a:hover { background: var(--x-brand); border-color: var(--x-brand); }

/* ---------------------------------------------------------------------------
   6.23  AUTO-REFRESH CONTROL
   ---------------------------------------------------------------------------
   For tools you sit and watch - the propagation checker is the case. Kept
   deliberately quiet: it is a setting, not an action, and it should not compete
   with the search button above it.
   ------------------------------------------------------------------------- */
.sx .x-refresh { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px; margin-top: 18px;
  font-size: 13.5px; color: var(--x-body); }
.sx .x-refresh label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* main.css:296 forces accent-color with !important on every checkbox, so this
   has to match it or the tick renders in the site's orange. */
.sx .x-refresh input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--x-brand) !important; }
.sx .x-refresh input[type="number"] { width: 68px; padding: 6px 10px;
  border: 1px solid var(--x-line); border-radius: 8px; background: var(--x-white);
  color: var(--x-ink); font-family: inherit; font-size: 13.5px;
  font-variant-numeric: tabular-nums; text-align: center; }
.sx .x-refresh input[type="number"]:focus { outline: none; border-color: var(--x-brand);
  box-shadow: 0 0 0 3px rgba(107,77,255,.16); }

.sx .x-dark .x-refresh { color: #C6BFE2; }
.sx .x-dark .x-refresh input[type="number"] { background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12); color: #fff; }

/* ---------------------------------------------------------------------------
   6.24  AUCTION LISTINGS
   ---------------------------------------------------------------------------
   Each row is the anchor, as with the contact channels - the whole listing is
   the target, and keyboard focus lands on the same box the mouse does.

   .x-note is the load-bearing part of this section, oddly enough. The auction
   data is a manual CSV upload, so the normal failure is stale data rather than
   broken code, and a page that silently shows nothing is indistinguishable
   from one that is working. This states which it is.
   ------------------------------------------------------------------------- */
.sx .x-auc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px; }
.sx .x-auc-find { position: relative; flex: 1 1 240px; min-width: 0; }
.sx .x-auc-find input { width: 100%; padding: 11px 14px 11px 38px;
  border: 1px solid var(--x-line); border-radius: 100px; background: var(--x-white);
  color: var(--x-ink); font-family: inherit; font-size: 14px; outline: none; }
.sx .x-auc-find input:focus { border-color: var(--x-brand); box-shadow: 0 0 0 3px rgba(107,77,255,.16); }
.sx .x-auc-find i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--x-muted); font-size: 16px; pointer-events: none; }
.sx .x-auc-bar select { padding: 11px 14px; border: 1px solid var(--x-line);
  border-radius: 100px; background: var(--x-white); color: var(--x-ink);
  font-family: inherit; font-size: 14px; cursor: pointer; }
.sx .x-auc-bar .x-auc-count { font-size: 13.5px; color: var(--x-body);
  font-variant-numeric: tabular-nums; margin-left: auto; }

.sx .x-auc-list { border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  overflow: hidden; background: var(--x-white); }
.sx .x-auc-list:empty { display: none; }

.sx .x-auc { display: grid; align-items: center; gap: 10px 16px;
  grid-template-columns: minmax(0,1fr) auto; padding: 15px 18px;
  border-bottom: 1px solid var(--x-line); text-decoration: none; color: inherit;
  transition: background .16s ease; }
@media (min-width: 760px) {
  .sx .x-auc { grid-template-columns: minmax(0,1fr) 110px 120px 110px; padding: 15px 22px; }
}
.sx .x-auc:last-child { border-bottom: 0; }
.sx .x-auc:hover { background: #FBFAFF; text-decoration: none; color: inherit; }
.sx .x-auc:focus-visible { outline: 2px solid var(--x-brand); outline-offset: -2px; }

.sx .x-auc-name { min-width: 0; }
.sx .x-auc-name b { display: block; font-size: 15px; font-weight: 600;
  color: var(--x-ink); word-break: break-all; }
.sx .x-auc-name span { display: block; margin-top: 3px; font-size: 12.5px;
  color: var(--x-body); }
.sx .x-auc-name em { font-style: normal; font-weight: 600; color: var(--x-ink); }

.sx .x-auc-fig { font-variant-numeric: tabular-nums; }
.sx .x-auc-fig b { display: block; font-size: 15px; font-weight: 700; color: var(--x-ink); }
.sx .x-auc-fig span { display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }

.sx .x-auc-time { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; background: #F1EFF8; color: #56546A; }
.sx .x-auc-time.soon { background: #FDF4E5; color: #8A550F; }

.sx .x-auc-go { display: inline-flex; align-items: center; gap: 6px; justify-self: end;
  padding: 8px 16px; border-radius: 100px; background: var(--x-brand); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.sx .x-auc:hover .x-auc-go { background: var(--x-deep); }

/* Pagination */
.sx .x-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; }
.sx .x-pager button { min-width: 38px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--x-line); background: var(--x-white); color: var(--x-body);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.sx .x-pager button:hover:not(:disabled) { border-color: #C9C2F5; color: var(--x-ink); }
.sx .x-pager button[aria-current="true"] { background: var(--x-brand); border-color: var(--x-brand); color: #fff; }
.sx .x-pager button:disabled { opacity: .45; cursor: default; }

/* Empty / stale notice */
.sx .x-note { border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  background: var(--x-white); padding: 34px 26px; text-align: center; }
.sx .x-note.warn { border-color: #F3DFBC; background: #FDF6EA; }
.sx .x-note b { display: block; font-size: 16.5px; font-weight: 600; color: var(--x-ink); }
.sx .x-note p { margin: 8px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.65; color: var(--x-body); }
.sx .x-note.warn b, .sx .x-note.warn p { color: #7A4C0D; }
.sx .x-note .x-btns { justify-content: center; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { .sx .x-auc { transition: none; } }

.sx .x-dark .x-auc-find input, .sx .x-dark .x-auc-bar select {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.sx .x-dark .x-auc-bar .x-auc-count { color: #C6BFE2; }
.sx .x-dark .x-auc-list { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-auc { border-bottom-color: rgba(255,255,255,.09); }
.sx .x-dark .x-auc:hover { background: rgba(255,255,255,.07); }
.sx .x-dark .x-auc-name b, .sx .x-dark .x-auc-fig b, .sx .x-dark .x-auc-name em { color: #fff; }
.sx .x-dark .x-auc-name span { color: #C6BFE2; }
.sx .x-dark .x-auc-fig span { color: #A79DD6; }
.sx .x-dark .x-note { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sx .x-dark .x-note b { color: #fff; }
.sx .x-dark .x-note p { color: #C6BFE2; }
.sx .x-dark .x-pager button { background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12); color: #C6BFE2; }

/* ---------------------------------------------------------------------------
   6.25  DOMAIN PRICE TABLE
   ---------------------------------------------------------------------------
   Built on .x-table, with two additions that matter.

   THE RENEWAL COLUMN IS NOT DECORATION. Several extensions register for pocket
   money and renew for forty times that - .site is $1.29 then $44.68. Showing
   registration alone is how somebody ends up with an invoice they did not
   expect, so the renewal price sits beside it at equal weight and the gap is
   called out where it is steep.
   ------------------------------------------------------------------------- */
.sx .x-price-find { position: relative; max-width: 420px; margin: 0 auto 20px; }
.sx .x-price-find input { width: 100%; padding: 12px 16px 12px 40px;
  border: 1px solid var(--x-line); border-radius: 100px; background: var(--x-white);
  color: var(--x-ink); font-family: inherit; font-size: 14.5px; outline: none; }
.sx .x-price-find input:focus { border-color: var(--x-brand); box-shadow: 0 0 0 3px rgba(107,77,255,.16); }
.sx .x-price-find i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--x-muted); font-size: 17px; pointer-events: none; }

.sx .x-table td.tld { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx .x-table td.free { color: var(--x-good); font-weight: 700; }

/* Flags a renewal several times the first-year price. Amber, not red: this is
   normal registry pricing, not a fault - it just has to be visible. */
.sx .x-jump { display: inline-block; margin-left: 7px; padding: 2px 8px;
  border-radius: 100px; background: #FDF4E5; color: #8A550F;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }

.sx .x-price-none { padding: 28px 20px; text-align: center;
  font-size: 14.5px; color: var(--x-body); }
.sx .x-price-meta { font-size: 12.5px; color: var(--x-muted); text-align: center; margin-top: 14px; }

.sx .x-dark .x-price-find input { background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12); color: #fff; }
.sx .x-dark .x-table td.free { color: #8FE7BE; }
.sx .x-dark .x-jump { background: rgba(226,168,72,.16); color: #F0CE96; }
.sx .x-dark .x-price-none, .sx .x-dark .x-price-meta { color: #C6BFE2; }

/* ---------------------------------------------------------------------------
   6.26  DOMAIN SEARCH RESULT
   ---------------------------------------------------------------------------
   The exact match gets its own card rather than being the first row of a list.
   It is the answer to the question that was asked; the alternates underneath
   are a consolation prize and should not compete with it.
   ------------------------------------------------------------------------- */
.sx .x-hit { display: grid; gap: 16px; align-items: center;
  grid-template-columns: 1fr; padding: 24px;
  border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  background: var(--x-white); box-shadow: 0 10px 28px rgba(20,19,28,.06); }
@media (min-width: 760px) {
  .sx .x-hit { grid-template-columns: minmax(0,1fr) auto; padding: 26px 30px; }
}
.sx .x-hit.free  { border-color: #BCE5CF; background: #F6FDF9; }
.sx .x-hit.taken { border-color: var(--x-line); background: var(--x-ground); }

.sx .x-hit-name { min-width: 0; }
.sx .x-hit-name b { display: block; font-size: 24px; font-weight: 600;
  color: var(--x-ink); letter-spacing: -.02em; word-break: break-all; }
@media (min-width: 760px) { .sx .x-hit-name b { font-size: 28px; } }
.sx .x-hit-name p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--x-body); }

.sx .x-hit-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sx .x-hit-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx .x-hit-price b { display: block; font-size: 22px; font-weight: 700; color: var(--x-ink); }
.sx .x-hit-price span { display: block; margin-top: 2px; font-size: 12px; color: var(--x-body); }

/* Sits above the name so the verdict is read before the price. */
.sx .x-hit-flag { display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 5px 13px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sx .x-hit-flag.free    { background: #E7F7EF; color: #0F7A4E; }
.sx .x-hit-flag.taken   { background: #FBECEC; color: #A81F18; }
.sx .x-hit-flag.unknown { background: #FDF4E5; color: #8A550F; }
.sx .x-hit-flag.none    { background: #F1EFF8; color: #56546A; }

/* The results section carries padding-top:0 so nothing shows before a search
   runs. The spacing therefore lives on the card, which only exists once there
   is a result to separate from the search box above it. */
.sx .x-hit-wrap { margin-top: 42px; }
@media (max-width: 719px) { .sx .x-hit-wrap { margin-top: 28px; } }
.sx .x-hit-wrap:empty { display: none; }

.sx .x-searching { display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 30px; font-size: 14.5px; color: var(--x-body); }
.sx .x-spin { width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--x-line); border-top-color: var(--x-brand);
  animation: x-spin .7s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sx .x-spin { animation-duration: 2s; } }

.sx .x-dark .x-hit { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-hit.free { background: rgba(30,190,120,.10); border-color: rgba(30,190,120,.30); }
.sx .x-dark .x-hit-name b, .sx .x-dark .x-hit-price b { color: #fff; }
.sx .x-dark .x-hit-name p, .sx .x-dark .x-hit-price span, .sx .x-dark .x-searching { color: #C6BFE2; }

/* ---------------------------------------------------------------------------
   6.27  RESULT ROWS ON A NARROW SCREEN
   ---------------------------------------------------------------------------
   Below 720px the row was a three-column grid holding four or five children,
   so whatever did not fit wrapped into whichever cell came next - the price and
   the Register button ended up sharing a line, with the button stretched across
   the remainder. It looked like a mistake because it was one.

   Two explicit lines instead, with the columns placed rather than left to auto
   flow:

       [box]  domain name             STATUS
       [box]  £43.28/yr             [ Register ]

   Placing by grid-column means this works for rows with four children (the DNS
   checker and the transfer page, which have no action button) as well as five -
   the last cell is simply empty rather than pulling the layout apart.
   ------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .sx .x-bulk-row {
    grid-template-columns: auto minmax(0,1fr) auto;
    row-gap: 12px;
    column-gap: 12px;
    padding: 16px 16px;
  }

  /* The checkbox spans both lines so it reads as belonging to the whole row
     rather than only to the name. */
  .sx .x-bulk-row > .x-bulk-nobox,
  .sx .x-bulk-row > input[type="checkbox"] { grid-column: 1; grid-row: 1 / span 2; align-self: center; }

  .sx .x-bulk-row > .x-bulk-name  { grid-column: 2; grid-row: 1; }
  .sx .x-bulk-row > .x-bulk-state { grid-column: 3; grid-row: 1; justify-self: end; }
  .sx .x-bulk-row > .x-bulk-price { grid-column: 2; grid-row: 2; align-self: center; }

  /* Anything else on the row - the action link, or the empty span that stands
     in for it - takes the last cell. Sized to its text, not stretched. */
  .sx .x-bulk-row > .x-bulk-act,
  .sx .x-bulk-row > a:last-child,
  .sx .x-bulk-row > span:last-child:not(.x-bulk-name):not(.x-bulk-state):not(.x-bulk-price):not(.x-bulk-nobox) {
    grid-column: 3; grid-row: 2; justify-self: end;
  }

  /* A row with nothing in the second line should not reserve space for it. */
  .sx .x-bulk-row:not(:has(.x-bulk-price)) { row-gap: 0; }

  /* On a list where nothing is selectable - the search results and the DNS
     checker - the spacer is holding a column open for a checkbox that never
     appears. Worth reclaiming when the screen is 360px wide. It stays on the
     bulk pages, where it keeps unselectable rows aligned with selectable ones. */
  .sx .x-bulk-list:not(:has(input[type="checkbox"])) .x-bulk-nobox { display: none; }

  .sx .x-bulk-name { font-size: 15.5px; }
  .sx .x-bulk-price { font-size: 15px; }
  .sx .x-bulk-act { padding: 9px 20px; }

  /* The four-column variant follows the same two-line shape. */
  .sx .x-bulk-list.cols4 .x-bulk-row { grid-template-columns: auto minmax(0,1fr) auto; }
}

/* --- the exact-match card ------------------------------------------------ */
@media (max-width: 759px) {
  /* Price and button side by side, button on the right, neither stretched. */
  .sx .x-hit-act { justify-content: space-between; width: 100%; }
  .sx .x-hit-act .x-btn { flex: 0 0 auto; }
  .sx .x-hit-name b { font-size: 21px; }
  .sx .x-hit { padding: 20px; gap: 18px; }
}

/* Very narrow: stack the price above a full-width button rather than squeezing
   both onto one line. */
@media (max-width: 400px) {
  .sx .x-hit-act { flex-direction: column; align-items: stretch; gap: 12px; }
  .sx .x-hit-act .x-btn { width: 100%; justify-content: center; }
  .sx .x-bulk-row > .x-bulk-act { justify-self: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
   6.28  FOOTER
   ---------------------------------------------------------------------------
   Rebuilt onto the same tokens as the rest of the site. The previous footer had
   49 rules inlined in header.php on the old sc- system, which is exactly the
   pattern the shared stylesheet exists to end.

   The old .sc-footer* rules in header.php are now DEAD - nothing emits those
   classes any more. They are left in place only until this has been confirmed
   visually; delete that block from header.php once it has.

   NOT under .sx. The footer renders on every page, including ones not yet
   converted and therefore not wrapped in .sx. Scoping it to that wrapper would
   leave the footer unstyled on every page still on the old template.
   ------------------------------------------------------------------------- */

/* --- support bar ---------------------------------------------------------- */
/* Keeps the .sc-trust-bar class: js/main.js animates it on scroll by that
   selector, and renaming it would silently drop the animation. */
/* Inside .x-foot, so there is no seam to close. Slightly darker than the
   footer ground so it still reads as its own band. */
.x-foot-bar { background: var(--x-night); color: #fff; padding: 26px 0;
  position: relative; z-index: 1; }
.x-foot-bar-in { max-width: none; margin: 0; padding: 0 clamp(20px, 4vw, 72px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.x-foot-bar-t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.x-foot-bar-t i { font-size: 26px; color: #C4B6FF; flex: none; }
.x-foot-bar-t strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.x-foot-bar-t span { display: block; margin-top: 3px; font-size: 13.5px; color: #A79DD6; }
.x-foot-bar a.cta { display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 24px; border-radius: 100px; background: #fff; color: var(--x-ink);
  font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .18s ease; }
.x-foot-bar a.cta:hover { background: #EDEAFF; color: var(--x-ink); text-decoration: none; }

/* WHY THE BUTTON LOOKED STRANDED ON THE LEFT.

   .x-foot-bar-in is `flex-wrap: wrap` + `justify-content: space-between`. That
   is right while the row fits: text left, button right. The moment the button
   wraps it is the ONLY item on its line, and space-between puts a lone item at
   flex-start - so it dropped to the far left, under the headset icon rather
   than under the text, which is what made it read as stranded.

   The wrap point is not fixed, either: the bar's title is per-page ($trustBar),
   so a long one like "Cannot land on a name? We will help you choose." wraps
   much earlier than the default. Hence handling both bands rather than one
   breakpoint.

     up to 860px  - button keeps to the right of its own line (margin-left:auto
                    does on a wrapped line what space-between does on a full one)
     up to 639px  - full width and centred, the normal phone CTA. Also lifts the
                    tap target to 48px. */
@media (max-width: 860px) {
  .x-foot-bar a.cta { margin-left: auto; }
}
@media (max-width: 639px) {
  .x-foot-bar-in { flex-direction: column; align-items: stretch; gap: 16px; }
  .x-foot-bar a.cta { width: 100%; margin-left: 0; justify-content: center;
    padding: 14px 24px; }
}

/* --- the footer proper ---------------------------------------------------- */
.x-foot { background: var(--x-ink); color: #C6BFE2; position: relative;
  overflow: hidden; }

/* EDGE TO EDGE. Every other section on the site is centred in a 1180px column,
   which is right for reading. The footer is a directory, not prose - it holds
   five columns of links and looks cramped and oddly narrow squeezed into the
   same measure. Full width, with padding that grows with the viewport. */
.x-foot-wrap { max-width: none; margin: 0; padding: 0 clamp(20px, 4vw, 72px);
  position: relative; z-index: 1; }

/* Wordmark across the top. Decorative, hidden from assistive tech.
   
   EDGE TO EDGE, deliberately. It was constrained to var(--x-max) with 24px of
   padding like every other row, which made it a big word sitting inside the
   content column rather than a ground the footer sits on.
   
   The size is in vw so it fills the viewport at any width: SKYCOREHOST is 11
   characters, a bold sans advance averages about .62em, so ~6.8em of text needs
   roughly 14.5vw per em to span the width. overflow:hidden on the parent takes
   the rounding error rather than letting it push a scrollbar.
   
   Alpha is very low on purpose - it should read as texture you notice only when
   you look for it, not as a headline competing with the links below. */
/* A WATERMARK, NOT A HEADING.
   
   It sat at the top as a block in flow, which made it an oversized title above
   the footer rather than something the footer sits on. Now absolutely
   positioned and centred behind the content, at very low alpha - the columns
   read normally and the mark is only there when you look for it.
   
   pointer-events:none so it can never intercept a click meant for a link
   behind... in front of it. z-index 0 with the content at 1. */
/* --- the globe behind the footer -------------------------------------------

   Replaces the wordmark watermark. Sized off the footer rather than the
   viewport so it scales with the content, and pinned to the left so it sits
   under the brand column rather than behind the middle of the link lists,
   where it would fight the text for attention.

   pointer-events:none so it can never intercept a click on a link in front of
   it. z-index 0 with the footer content at 1. */
/* PINNED TO THE LOWER LEFT, and it needs to stay there.

   This was briefly centred and sized to span the whole footer. That was wrong
   in the way that matters: at that size only a middle band of the sphere shows
   through the footer's height, the left and right edges fall outside the
   viewport, and with no visible curve it stops reading as a globe at all and
   becomes a flat field of dots.

   A globe is recognisable because you can see it curve away. That needs the
   whole sphere on screen, which means it has to be small enough to fit - so it
   sits in one corner and lets the footer content have the rest.

   Only the bottom edge clips, and only a little. */
.x-foot-globe { position: absolute; z-index: 0; pointer-events: none;
  user-select: none; left: -3%; bottom: -16%;
  width: clamp(340px, 40vw, 660px); aspect-ratio: 1 / 1; }
.x-foot-globe canvas { display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s ease; }
@media (max-width: 860px) {
  /* The footer is one tall column on a phone, so the globe would sit directly
     behind the links. Pushed further off the left edge and shrunk. */
  .x-foot-globe { left: -26%; bottom: -6%; width: clamp(280px, 74vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  /* The script already draws one static frame and never loops; this just
     removes the fade-in as well. */
  .x-foot-globe canvas { transition: none; }
}

/* The wordmark used to sit in flow above this and provided the top spacing.
   It is a watermark now, so the grid has to make its own room - and needs
   enough of it for the mark behind to read as a ground rather than a smudge
   peeking out between rows. */
.x-foot-grid { display: grid; gap: 34px; padding: 62px 0 24px;
  grid-template-columns: 1fr; }
/* MOBILE: PAIR THE LINK COLUMNS UP.

   This used to collapse to a single stack below 640px, which put all 41 footer
   links in one run roughly 1,800px tall - Domains alone is 11 of them. The
   screenshot that prompted this showed Domains running the full width with
   Hosting starting somewhere below the fold.

   auto-fit rather than a hard `repeat(2, ...)`: it pairs the columns up as soon
   as there is room for two 150px tracks and drops back to one below that, so a
   360px phone is not forced into a cramped two-up where "Acronis Cyber Backup"
   wraps three times.

   The brand column - logo, blurb, newsletter form, social row - spans the full
   width regardless. At half of a 390px screen the email input would be about
   155px wide, which is not a form anybody can type in. */
@media (max-width: 639px) {
  .x-foot-grid { padding: 40px 0 16px; gap: 30px 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .x-foot-grid > .x-foot-col:first-child { grid-column: 1 / -1; }
}
@media (min-width: 640px)  { .x-foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .x-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; } }
@media (min-width: 1500px) { .x-foot-grid { gap: 64px; } }

.x-foot-col h5 { font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.x-foot-col h5 + ul { margin-top: 0; }
.x-foot-col ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.x-foot-col ul:last-child { margin-bottom: 0; }
.x-foot-col a { color: #A79DD6; font-size: 13.5px; text-decoration: none;
  transition: color .16s ease; }
.x-foot-col a:hover { color: #fff; text-decoration: none; }
.x-foot-col a:focus-visible { outline: 2px solid #C4B6FF; outline-offset: 3px; border-radius: 4px; }

/* Roomier link rows on a phone: ~34px instead of ~28px. Short of the 44px
   touch guidance on purpose - a 41-link directory cannot have 44px rows
   without running off the screen - but past the point where taps land on the
   neighbouring link.

   DELIBERATELY AFTER the base .x-foot-col rules above, not up in the grid
   media block where it was first written. Same specificity, so source order
   decides: from up there a `padding` added to the base rule later would have
   silently won and this would have stopped working with nothing to see. */
@media (max-width: 639px) {
  .x-foot-col a { display: inline-block; padding: 3px 0; }
  .x-foot-col ul { gap: 5px; }
}

.x-foot-brand img { max-width: 168px; height: auto; }
.x-foot-desc { font-size: 13.5px; line-height: 1.7; color: #A79DD6; margin: 16px 0 14px; max-width: 34ch; }
.x-foot-more { color: #C4B6FF; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.x-foot-more:hover { color: #fff; text-decoration: none; }

.x-foot-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 100px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }
.x-foot-tag.hot  { background: rgba(255,120,90,.18);  color: #FFB3A0; }
.x-foot-tag.new  { background: rgba(107,77,255,.28);  color: #C4B6FF; }
.x-foot-tag.free { background: rgba(30,190,120,.18);  color: #8FE7BE; }

/* --- newsletter ----------------------------------------------------------- */
.x-foot-news { display: flex; gap: 8px; margin: 18px 0 6px; max-width: 320px; }
.x-foot-news input[type="email"] { flex: 1; min-width: 0; padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 100px;
  background: rgba(255,255,255,.05); color: #fff; font-family: inherit; font-size: 13.5px; outline: none; }
.x-foot-news input::placeholder { color: #8E86B8; }
.x-foot-news input:focus { border-color: #8B72FF; box-shadow: 0 0 0 3px rgba(107,77,255,.22); }
.x-foot-news button { flex: none; padding: 11px 20px; border: 0; border-radius: 100px;
  background: var(--x-brand); color: #fff; font-family: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; transition: background .18s ease; }
.x-foot-news button:hover { background: var(--x-brand-2); }
.x-foot-msg { margin-top: 8px; font-size: 12.5px; }
.x-foot-msg.ok  { color: #8FE7BE; }
.x-foot-msg.err { color: #FFB3A0; }

.x-foot-social { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.x-foot-social a { display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.13); color: #C6BFE2;
  font-size: 16px; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.x-foot-social a:hover { background: var(--x-brand); border-color: var(--x-brand); color: #fff; }

/* --- accreditation strip -------------------------------------------------- */
.x-foot-rule { height: 1px; background: rgba(255,255,255,.09); margin: 30px 0 0; }

.x-foot-trust { display: grid; gap: 22px; padding: 26px 0;
  grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .x-foot-trust { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.x-foot-trust-item { display: flex; align-items: center; gap: 14px; }
.x-foot-trust-item img { height: 34px; width: auto; flex: none; }
.x-foot-trust-item p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #C6BFE2; }
.x-foot-trust-item p a { color: #C4B6FF; }
.x-foot-trust-item p span { color: #8E86B8; }

/* An accreditation being APPLIED FOR gets a neutral mark, never the awarding
   body's certification logo - see the note in footer.php. */
.x-foot-pending { display: inline-grid; place-items: center; width: 46px; height: 46px;
  flex: none; border-radius: 12px; border: 1px dashed rgba(255,255,255,.22);
  color: #A79DD6; font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* --- legal ---------------------------------------------------------------- */
.x-foot-legal { padding: 22px 0 4px; }
.x-foot-legal p { margin: 0 0 12px; font-size: 11.5px; line-height: 1.75; color: #8E86B8; }
.x-foot-legal p:last-child { margin-bottom: 0; }
.x-foot-legal a { color: #A79DD6; text-decoration: underline; }
.x-foot-legal a:hover { color: #fff; }

/* --- bottom bar ----------------------------------------------------------- */
.x-foot-end { border-top: 1px solid rgba(255,255,255,.09);
  position: relative; z-index: 1; background: var(--x-ink); }
.x-foot-end-in { max-width: none; margin: 0; padding: 20px clamp(20px, 4vw, 72px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.x-foot-copy { font-size: 12.5px; color: #8E86B8; }
.x-foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.x-foot-links a { font-size: 12.5px; color: #A79DD6; text-decoration: none; }
.x-foot-links a:hover { color: #fff; }
/* Real card marks. The strip is light artwork on transparency, so it needs no
   plate behind it on the dark ground - it already reads as a row of chips.
   
   align-items:center rather than the default stretch: the strip and the Bitcoin
   mark are different heights, and stretching would distort the strip's aspect
   ratio. Height is set and width left auto for the same reason. */
.x-foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-left: auto; }
.x-foot-pay img { height: 24px; width: auto; display: block; opacity: .92; }
.x-foot-btc { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.x-foot-btc svg { display: block; }

/* Below the point where the bottom row wraps, the marks would sit alone on a
   line pushed hard right by margin-left:auto. Let them start at the left with
   everything else. */
@media (max-width: 860px) {
  .x-foot-pay { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .x-foot-col a, .x-foot-social a, .x-foot-news button, .x-foot-bar a.cta { transition: none; }
}

/* ---------------------------------------------------------------------------
   6.29  SINGLE-OFFER CARD  (hosting-offer.php)
   ---------------------------------------------------------------------------
   The ad landing page sells one plan, so it gets a card rather than a tier row.
   Replaces about 90 lines of ad-* CSS that were inlined in that page.
   ------------------------------------------------------------------------- */
.sx .x-offer { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sx .x-offer { grid-template-columns: 380px minmax(0,1fr); gap: 34px; } }

.sx .x-offer-card { background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); padding: 30px;
  box-shadow: 0 14px 40px rgba(20,19,28,.08); text-align: center; }
.sx .x-offer-card h3 { font-size: 18px; font-weight: 600; }
.sx .x-offer-price { display: flex; align-items: baseline; justify-content: center;
  gap: 3px; margin: 14px 0 4px; }
.sx .x-offer-price .n { font-size: 46px; font-weight: 700; letter-spacing: -.03em;
  color: var(--x-ink); font-variant-numeric: tabular-nums; }
.sx .x-offer-price .p { font-size: 15px; color: var(--x-body); }
.sx .x-offer-year { font-size: 13.5px; color: var(--x-body); margin: 0 0 20px; }
.sx .x-offer-card .x-btn { width: 100%; justify-content: center; }
.sx .x-offer-note { display: block; margin-top: 10px; font-size: 12.5px; color: var(--x-muted); }

.sx .x-offer-spec { list-style: none; margin: 22px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--x-line); display: grid; gap: 10px; text-align: left; }
.sx .x-offer-spec li { position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.5; color: var(--x-body); }
/* Tick drawn in CSS rather than an icon font - one less dependency on a page
   where every millisecond is paid for. */
.sx .x-offer-spec li::before { content: ""; position: absolute; left: 4px; top: .42em;
  width: 11px; height: 6px; border-left: 2px solid var(--x-good);
  border-bottom: 2px solid var(--x-good); transform: rotate(-45deg); }

.sx .x-offer-inc { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sx .x-offer-inc { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sx .x-offer-inc-item { background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r); padding: 18px 20px; }
.sx .x-offer-inc-item h5 { margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--x-brand); }
.sx .x-offer-inc-item p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--x-body); }

/* Promo bar. Sits above the header, outside .sx - so it uses :root tokens,
   which is the whole reason those moved off .sx. */
.x-offer-promo { background: var(--x-brand); color: #fff; text-align: center;
  padding: 11px 18px; font-size: 14px; font-weight: 600; }
.x-offer-promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sx .x-dark .x-offer-card, .sx .x-dark .x-offer-inc-item {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-offer-price .n, .sx .x-dark .x-offer-card h3 { color: #fff; }
.sx .x-dark .x-offer-year, .sx .x-dark .x-offer-spec li,
.sx .x-dark .x-offer-inc-item p { color: #C6BFE2; }
.sx .x-dark .x-offer-spec { border-top-color: rgba(255,255,255,.10); }

/* ---------------------------------------------------------------------------
   6.33  FORM

   THE LIBRARY HAD NO FORM COMPONENT. Worth stating, because it is surprising:
   contact.php carries no form at all (it lists channels instead), and the only
   input styling anywhere was .x-bulk-ta and .x-bulk-label, written for the bulk
   search textarea and named after it.

   sunrise.php is the first page in this upgrade with a real multi-field form,
   so these are built properly rather than borrowed from the bulk pages.

   Matched to .x-bulk-ta deliberately - same border, same radius, same ground,
   same focus ring - so a text input and the bulk textarea do not look like they
   came from two different sites.
   ------------------------------------------------------------------------- */
.sx .x-form { max-width: 620px; }
.sx .x-form-row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px) { .sx .x-form-row { grid-template-columns: 1fr; } }

.sx .x-field { margin-bottom: 18px; }
.sx .x-form-row .x-field { margin-bottom: 0; }
.sx .x-form-row + .x-field { margin-top: 18px; }

.sx .x-label { display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--x-body);
  margin-bottom: 10px; }

/* "optional" belongs beside the label, not in the placeholder - a placeholder
   disappears the moment somebody types, which is exactly when they might want
   to know whether they had to. */
.sx .x-optional { margin-left: 8px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: none; color: var(--x-muted);
  background: var(--x-ground); border: 1px solid var(--x-line);
  padding: 2px 8px; border-radius: 100px; }

.sx .x-input { width: 100%; border: 1px solid var(--x-line);
  border-radius: var(--x-r); background: var(--x-ground);
  padding: 13px 16px; font-family: inherit; font-size: 15px; line-height: 1.5;
  color: var(--x-ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.sx .x-input::placeholder { color: #9E9DAD; }
.sx .x-input:focus { border-color: var(--x-brand); box-shadow: 0 0 0 3px rgba(107,77,255,.16); }
/* :user-invalid rather than :invalid - :invalid styles a required field red
   before the visitor has typed a single character in it. */
.sx .x-input:user-invalid { border-color: #C4442E; }

/* Input and button on one line, stacking on a phone. The transfer check is the
   only place so far that needs it, but every "enter a thing, press go" form
   wants the same shape. */
.sx .x-inline { display: flex; gap: 10px; align-items: stretch; }
.sx .x-inline .x-input { flex: 1 1 auto; min-width: 0; }
.sx .x-inline .x-btn { flex: none; }
@media (max-width: 560px) {
  .sx .x-inline { flex-direction: column; }
  .sx .x-inline .x-btn { width: 100%; justify-content: center; }
}
.sx .x-td-result { margin-top: 24px; }

.sx .x-hint { font-size: 13px; line-height: 1.6; color: var(--x-muted); margin: 8px 0 0; }

.sx .x-dark .x-input, .sx .x-ground .x-input { background: var(--x-white); }
.sx .x-dark .x-label, .sx .x-dark .x-hint { color: #C6BFE2; }
.sx .x-dark .x-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.sx .x-dark .x-optional { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #A79DD6; }

/* ---------------------------------------------------------------------------
   6.34  PEOPLE

   A person card that does not require a photograph. That is the point of it:
   team.php pointed twenty-two entries at images/team/*.jpg and the directory
   did not exist, so every one rendered as a broken image icon.

   Initials are the fallback, and they look deliberate rather than missing - so
   a real person can go on the page today and a headshot can follow, instead of
   the page staying fictional because nobody has taken photographs yet.
   ------------------------------------------------------------------------- */
.sx .x-people { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.sx .x-person { background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); padding: 26px 24px; text-align: center;
  box-shadow: 0 1px 2px rgba(18,7,48,.04), 0 8px 22px rgba(18,7,48,.05); }

.sx .x-person-img { display: block; width: 96px; height: 96px; margin: 0 auto 16px;
  border-radius: 50%; object-fit: cover; background: var(--x-ground); }
.sx .x-person-img.initials { display: grid; place-items: center;
  background: linear-gradient(150deg, var(--x-brand), var(--x-deep));
  color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }

.sx .x-person-name { font-size: 16px; font-weight: 600; color: var(--x-ink); }
.sx .x-person-role { display: block; margin-top: 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--x-brand); }
.sx .x-person-bio { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--x-body); }

.sx .x-dark .x-person { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-person-name { color: #fff; }
.sx .x-dark .x-person-role { color: #C3B4FF; }
.sx .x-dark .x-person-bio { color: #C6BFE2; }

/* ---------------------------------------------------------------------------
   6.30  LEGAL DOCUMENT WITH CONTENTS  (legal-agreement.php)
   ---------------------------------------------------------------------------
   .x-doc caps its measure at 68ch because legal text is the one thing people
   read end to end. A 27-section agreement also needs a way in, so the contents
   sit beside it and stick while you scroll.
   ------------------------------------------------------------------------- */
.sx .x-legal { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .sx .x-legal { grid-template-columns: 232px minmax(0,1fr); gap: 52px; align-items: start; }
}

/* Hidden below the two-column breakpoint rather than stacked: 27 links above
   the document would push the agreement itself off the first screen. */
.sx .x-legal-toc { display: none; }
@media (min-width: 1000px) { .sx .x-legal-toc { display: block; } }
.sx .x-legal-toc-in { position: sticky; top: 96px; max-height: calc(100vh - 130px);
  overflow-y: auto; padding-right: 8px; }
.sx .x-legal-toc ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.sx .x-legal-toc a { display: block; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: var(--x-body); text-decoration: none;
  border-left: 2px solid transparent; }
.sx .x-legal-toc a:hover { background: var(--x-ground); color: var(--x-ink); text-decoration: none; }
/* :target styles the section the URL points at, so arriving from a link or the
   contents marks where you are without any script. */
.sx .x-legal-toc a:focus-visible { outline: 2px solid var(--x-brand); outline-offset: 2px; }

/* The document itself is centred by .x-doc; inside this grid it should sit at
   the start of its column instead. */
.sx .x-legal .x-doc { margin: 0; }

/* Fixed header would otherwise cover a section jumped to from the contents. */
.sx .x-doc-sec[id] { scroll-margin-top: 96px; }
.sx .x-doc-sec:target h2 { color: var(--x-brand); }

/* Callouts carried over from the old markup. */
.sx .x-doc-note { display: flex; gap: 12px; margin: 18px 0; padding: 16px 18px;
  border-radius: var(--x-r); background: var(--x-ground);
  border: 1px solid var(--x-line); font-size: 14.5px; line-height: 1.65; color: var(--x-body); }
.sx .x-doc-note.warn { background: #FDF6EA; border-color: #F3DFBC; color: #7A4C0D; }
.sx .x-doc-note p:last-child { margin-bottom: 0; }
.sx .x-doc-note-i { flex: none; font-size: 18px; line-height: 1.3; }

/* Tables inside the agreement - the contracting-entity table is the main one. */
.sx .x-doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.sx .x-doc th, .sx .x-doc td { text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--x-line); color: var(--x-body); vertical-align: top; }
.sx .x-doc th { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--x-ink); }
.sx .x-doc td strong { color: var(--x-ink); }

/* ---------------------------------------------------------------------------
   6.31  LIVE CHAT STATUS CARD  (livechat.php)
   ---------------------------------------------------------------------------
   One card, three mutually exclusive states written by scChatState():
   loading, connected, and failed. The failed state is the one that matters -
   it exists because the previous version had no way to stop spinning.
   ------------------------------------------------------------------------- */
.sx .x-chat { max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--x-white); border: 1px solid var(--x-line);
  border-radius: var(--x-r-l); padding: 34px 30px;
  box-shadow: 0 14px 40px rgba(20,19,28,.07); }

.sx .x-chat-state { display: flex; align-items: center; justify-content: center;
  gap: 11px; margin: 20px 0 22px; font-size: 15px; line-height: 1.6;
  color: var(--x-body); }
.sx .x-chat-state.warn { color: #7A4C0D; background: #FDF6EA;
  border: 1px solid #F3DFBC; border-radius: var(--x-r); padding: 14px 16px; }

/* Tick drawn rather than iconed, so a blocked icon font cannot leave the
   success state looking broken on a page about things being blocked. */
.sx .x-chat-tick { position: relative; flex: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--x-good); }
.sx .x-chat-tick::after { content: ""; position: absolute; left: 6px; top: 6px;
  width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg); }

.sx .x-chat .x-btns { margin-top: 4px; }
.sx .x-chat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--x-line); }
.sx .x-chat-pills span { padding: 5px 13px; border-radius: 100px;
  background: var(--x-ground); border: 1px solid var(--x-line);
  font-size: 12.5px; font-weight: 600; color: var(--x-body); }

.sx .x-dark .x-chat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-chat-state { color: #C6BFE2; }
.sx .x-dark .x-chat-pills span { background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12); color: #C6BFE2; }

/* ---------------------------------------------------------------------------
   6.32  NAME GENERATOR  (name-suggestion.php)
   ---------------------------------------------------------------------------
   Cards rather than rows: a suggestion is something you consider, not a line
   you scan. Only available names are ever rendered, so every card has a
   working Register button - there is no disabled state to design.
   ------------------------------------------------------------------------- */
.sx .x-ns-form { max-width: 680px; margin: 0 auto; background: var(--x-white);
  border: 1px solid var(--x-line); border-radius: var(--x-r-l); padding: 26px;
  box-shadow: 0 12px 34px rgba(20,19,28,.06); }
@media (min-width: 720px) { .sx .x-ns-form { padding: 30px 32px; } }
.sx .x-ns-form .x-btns { justify-content: flex-start; }

/* SPACING LIVES ON THE WRAPPER, NOT ON THE STATUS LINE.
   
   It was on .x-bulk-sum, which carries `:empty { display: none }` so nothing
   shows before a search. On an error the status line IS empty - so it
   collapsed, took its margin with it, and the error card sat jammed under the
   form. Same symptom reported twice now; putting the spacing on the container
   that always exists is what actually fixes it. */
.sx #nsResults { margin-top: 46px; }
@media (max-width: 719px) { .sx #nsResults { margin-top: 30px; } }
.sx #nsResults > .x-bulk-sum { margin-top: 0; }

.sx .x-ns-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sx .x-ns-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .sx .x-ns-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* A message is not a suggestion. Notices rendered into the grid must span it,
   or an error ends up squeezed into one narrow column with two empty cells
   beside it - which is what a "That did not work" card looked like. */
.sx .x-ns-grid > .x-note,
.sx .x-ns-grid > .x-bulk-empty { grid-column: 1 / -1; }

.sx .x-ns-card { display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border: 1px solid var(--x-line); border-radius: var(--x-r-l);
  background: var(--x-white); }
.sx .x-ns-card b { font-size: 16.5px; font-weight: 600; color: var(--x-ink);
  word-break: break-all; line-height: 1.35; }
.sx .x-ns-why { font-size: 13px; line-height: 1.6; color: var(--x-body); }
.sx .x-ns-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--x-line); }
.sx .x-ns-price { font-size: 15px; font-weight: 700; color: var(--x-ink);
  font-variant-numeric: tabular-nums; }
.sx .x-ns-price i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--x-body); }
/* Called out only where renewal is well above the first year - the whole
   reason the pricing page exists. */
.sx .x-ns-renew { display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
  color: #8A550F; }

.sx .x-ns-think { display: inline-flex; align-items: center; gap: 10px; }
.sx .x-ns-think .x-spin { width: 15px; height: 15px; }

.sx .x-dark .x-ns-form, .sx .x-dark .x-ns-card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.sx .x-dark .x-ns-card b { color: #fff; }
.sx .x-dark .x-ns-why, .sx .x-dark .x-ns-price i { color: #C6BFE2; }
.sx .x-dark .x-ns-price { color: #fff; }
.sx .x-dark .x-ns-foot { border-top-color: rgba(255,255,255,.10); }