/* ══════════════════════════════════════════════════════════════════════════
   SpaceBar Hosting — design system.

   Light, blue and open, built to the language of the Hostim reference: white
   and a pale blue tint alternating down the page, deep navy headings, one
   electric blue carrying every call to action, coral and pink for emphasis,
   mint for confirmation, amber for ratings.

   The palette is lifted from the reference's own stylesheet rather than
   guessed at, so the family resemblance is real:
     #1c40f2 primary · #001042 navy · #0082f8 sky · #ff0766 pink
     #ff7e5d coral   · #38eeb0 mint · #ffb217 amber · #f6f9ff tint
   Type is its pairing too: Urbanist for headings, Mulish for body.

   Rules kept throughout:
     · every colour is a token; no literal hex outside :root.
     · one accent carries actions (blue). Pink, coral and mint decorate and
       confirm — they never compete for the click.
     · mobile-first: every grid collapses by 640px, nothing scrolls sideways.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #ffffff;
  --tint:        #f6f9ff;
  --tint-2:      #f9fbff;

  --navy:        #001042;
  --navy-2:      #000f57;
  --blue:        #1c40f2;
  --blue-dark:   #175cff;
  --sky:         #0082f8;
  --violet:      #3200ff;
  --pink:        #ff0766;
  --coral:       #ff7e5d;
  --mint:        #38eeb0;
  --amber:       #ffb217;

  --text:        #001042;
  --body:        #5b6480;
  --muted:       #98a0b8;

  --line:        #e8ecf5;
  --line-2:      #d8e0f0;

  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   26px;
  --pill:        999px;

  --shadow-sm:   0 4px 14px rgba(0, 16, 66, 0.05);
  --shadow:      0 14px 40px -12px rgba(0, 16, 66, 0.13);
  --shadow-lift: 0 26px 60px -18px rgba(0, 16, 66, 0.22);
  --shadow-blue: 0 14px 30px -10px rgba(28, 64, 242, 0.45);

  --grad-blue:   linear-gradient(120deg, var(--blue), var(--sky));
  --grad-warm:   linear-gradient(120deg, var(--pink), var(--coral));

  --font:        'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:   'Urbanist', 'Mulish', system-ui, sans-serif;

  --wrap:        1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(28, 64, 242, 0.16); }

/* ── Page furniture ─────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { position: relative; padding: 96px 0; }
.section-tight { padding: 72px 0; }
.on-tint { background: var(--tint); }
.on-navy { background: var(--navy); }
.on-navy h2, .on-navy h3 { color: #fff; }

.above { position: relative; z-index: 1; }

/* Soft blobs — the reference leans on these for depth on a white page.
   Two per section, low opacity, never behind body copy. */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs::before, .blobs::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
}
.blobs::before {
  width: 420px; height: 420px; top: -170px; right: -120px;
  background: radial-gradient(circle, rgba(28, 64, 242, 0.16), transparent 70%);
}
.blobs::after {
  width: 360px; height: 360px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(255, 7, 102, 0.10), transparent 70%);
}

/* Wave divider between a tinted band and white. */
.wave { display: block; width: 100%; height: 58px; }

/* ── Type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); background: rgba(28, 64, 242, 0.08);
  border-radius: var(--pill); padding: 7px 16px;
}
.eyebrow.warm { color: var(--pink); background: rgba(255, 7, 102, 0.08); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.h-display { font-size: clamp(2.3rem, 5.4vw, 3.85rem); font-weight: 700; letter-spacing: -0.03em; }
.h-section { font-size: clamp(1.8rem, 3.4vw, 2.65rem); }
.h-card    { font-size: 1.14rem; }

.lede { color: var(--body); font-size: clamp(1rem, 1.4vw, 1.1rem); max-width: 62ch; }
.muted { color: var(--muted); }

.grad { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent; }

/* The emphasis word sits on a soft amber swash rather than changing colour. */
.swash { position: relative; display: inline-block; }
.swash::after {
  content: ''; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.06em;
  height: 0.3em; background: rgba(255, 178, 23, 0.4); border-radius: var(--pill); z-index: -1;
}

.center { text-align: center; }
.section-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.section-head .lede { margin: 16px auto 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 800;
  padding: 13px 26px; border-radius: var(--pill); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px);
                     box-shadow: 0 20px 40px -12px rgba(28, 64, 242, 0.55); }

.btn-warm { background: var(--pink); color: #fff; box-shadow: 0 14px 30px -10px rgba(255, 7, 102, 0.45); }
.btn-warm:hover { transform: translateY(-2px); }

.btn-outline { background: #fff; color: var(--navy); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

.btn-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }

.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-sm { padding: 10px 18px; font-size: 0.86rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { position: relative; background: #fff; border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 30px; }
.card-hover { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }

/* ── Offer bar ──────────────────────────────────────────────────────────── */
.offerbar { background: var(--navy); color: #fff; font-size: 0.85rem; font-weight: 600;
            padding: 9px 24px; display: flex; align-items: center; justify-content: center;
            gap: 10px; flex-wrap: wrap; text-align: center; }
.offerbar b { color: var(--amber); }
.offerbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.92);
       backdrop-filter: blur(14px); border-bottom: 1px solid transparent;
       transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.hdr.stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
.hdr-in { display: flex; align-items: center; gap: 18px; height: 76px; }

/* The brand is now a supplied wordmark rather than a mark plus typeset text,
   so there is nothing here to set a font on - the artwork carries the name.
   (.brand-sub, which styled the old "HOSTING" line, went with it.) */
.brand { display: flex; align-items: center; }
/* 44px because the artwork carries a tagline under the wordmark. At the 34px
   the plain wordmark used, "Web Hosting Simplified" is about five pixels tall
   and reads as a grey smear - worse than not being there. */
.brand-logo { display: block; width: auto; height: 44px; }

/* THE FOOTER IS NAVY AND THIS LOGO IS A DARK ONE - a near-black pill and
   black "Host" lettering, both of which all but vanish on #001042. Recolouring
   someone's wordmark is not ours to do, so it sits on a white plate instead:
   a deliberate-looking choice, and legible. If a light version of the artwork
   is ever supplied, drop the plate and swap the file. */
.ftr .brand-plate { display: inline-flex; background: #fff; padding: 9px 14px;
                    border-radius: 12px; }
.ftr .brand-logo { height: 40px; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav a { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.9rem;
         font-weight: 700; color: var(--navy); white-space: nowrap;
         transition: color 0.16s ease, background 0.16s ease; }
.nav a:hover, .nav a.on { color: var(--blue); background: rgba(28, 64, 242, 0.07); }

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.burger { display: none; background: #fff; border: 1px solid var(--line-2); color: var(--navy);
          width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
          align-items: center; justify-content: center; }

/* ── The currency switch ──────────────────────────────────────────────────

   A <details> element, so it opens and closes with no script at all, and the
   options inside are ordinary links to /set-currency — which is why the whole
   control still works on a page whose JavaScript never loaded. Escape and
   click-outside are added in site.js; <details> does not do either by itself. */
.curpick { position: relative; }
.curpick > summary,
.curpick > .curpick-btn { display: flex; align-items: center; gap: 6px; height: 44px;
                     padding: 0 11px; background: #fff; border: 1px solid var(--line-2);
                     border-radius: 12px; color: var(--navy); font-size: 0.86rem;
                     font-weight: 700; cursor: pointer; list-style: none;
                     user-select: none; white-space: nowrap; }
/* Safari draws its own disclosure triangle unless both of these are said. */
.curpick > summary::-webkit-details-marker { display: none; }
.curpick > summary::marker { content: ""; }
.curpick > summary:hover,
.curpick > .curpick-btn:hover { border-color: var(--blue); color: var(--blue); }
.curpick > summary:focus-visible,
.curpick > .curpick-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.curpick[open] > summary,
.curpick[data-open="true"] > .curpick-btn { border-color: var(--blue); color: var(--blue); }
.curpick[open] > summary svg { transform: rotate(180deg); }
/* The React header has no <details>, so its button carries the state itself. */
.curpick > summary svg { transition: transform 0.18s ease; flex: 0 0 auto; }
.cur-sym { font-size: 1rem; line-height: 1; }

.cur-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
            min-width: 232px; padding: 6px; background: #fff;
            border: 1px solid var(--line); border-radius: 14px;
            box-shadow: 0 18px 44px rgba(0, 16, 66, 0.16); }
.cur-opt { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
           border-radius: 10px; text-decoration: none; color: var(--text); }
.cur-opt:hover { background: var(--tint-2); }
.cur-opt.on { background: #e9efff; }
.cur-opt-sym { display: grid; place-items: center; width: 30px; height: 30px;
               flex: 0 0 auto; background: #f5f7fc; border-radius: 9px;
               font-size: 0.98rem; font-weight: 700; color: var(--navy); }
.cur-opt.on .cur-opt-sym { background: #fff; color: var(--blue); }
.cur-opt-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cur-opt-txt b { font-size: 0.88rem; color: var(--navy); }
.cur-opt-txt span { font-size: 0.76rem; color: var(--muted); }

/* Said where the choice is made, not only at the checkout. Somebody switching
   to dollars should learn what their card will be charged there and then. */
.cur-note { margin: 4px 6px 2px; padding-top: 9px; border-top: 1px solid var(--line);
            font-size: 0.72rem; line-height: 1.55; color: var(--muted); }
.cur-note b { color: var(--body); }

.cartbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px;
           border-radius: 12px; border: 1px solid var(--line-2); background: #fff;
           color: var(--navy); cursor: pointer; transition: all 0.16s ease; }
.cartbtn:hover { border-color: var(--blue); color: var(--blue); }
.cartbtn .count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px;
                  padding: 0 5px; border-radius: var(--pill); background: var(--pink); color: #fff;
                  font-size: 0.68rem; font-weight: 800; display: grid; place-items: center;
                  box-shadow: 0 4px 10px rgba(255, 7, 102, 0.4); }

/* ── The drop-down menu ────────────────────────────────────────────────────

   Full width, and anchored to the header rather than to the page, so it
   travels with a sticky header instead of being left behind on the first
   scroll. `left/right: 0` against the header's own box gives the full bleed;
   the .wrap inside puts the CONTENT back in the page column, so the panel
   spans the screen while its text still lines up with everything else. */
.nav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px;
           border: 0; background: none; cursor: pointer; font: inherit;
           border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 700;
           color: var(--navy); white-space: nowrap;
           transition: color 0.16s ease, background 0.16s ease; }
.nav-btn:hover, .nav-btn.on { color: var(--blue); background: rgba(28, 64, 242, 0.07); }
.nav-caret { transition: transform 0.18s ease; opacity: 0.7; }
.nav-btn.on .nav-caret { transform: rotate(180deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
        border-top: 1px solid var(--line); box-shadow: var(--shadow);
        animation: megaIn 0.16s ease both; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }

/* One block now: the promo card that used to sit in a second 286px column has
   been removed, so the links have the whole width. */
.mega-in { padding-block: 22px 26px; }

/* auto-FILL with a hard maximum, not auto-fit with 1fr.

   auto-fit collapses the empty tracks and hands their width to whatever is
   left, so a group with ONE category got a single column a thousand pixels
   wide, its name and description pushed to opposite ends of the screen. A
   column is 210–280px wide whether there are six of them or one. */
.mega-cols { display: grid; gap: 4px 22px; justify-content: start;
             grid-template-columns: repeat(auto-fill, minmax(210px, 280px)); }

/* A row in the panel: icon, name, and the ONE line that says what it is.
   A bare list of names makes somebody click to find out what "Reseller Start"
   means; this answers it on the way past. */
.mega-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
             border-radius: var(--radius-sm); transition: background 0.15s ease; }
.mega-item:hover { background: var(--tint); }
.mega-item b { display: block; font-size: 0.94rem; font-weight: 800; color: var(--navy);
               line-height: 1.3; }
.mega-item:hover b { color: var(--blue); }
.mega-item small { display: block; margin-top: 3px; font-size: 0.78rem; line-height: 1.45;
                   color: var(--body); font-weight: 500; }
/* Two lines, always — clamped so a long description cannot run away, and
   reserved so a short one still leaves the rows on a common baseline. Without
   it the panel reads as several unrelated lists rather than one grid. */
.mega-item small { min-height: 2.9em; overflow: hidden; display: -webkit-box;
                   -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mega-item span { min-width: 0; }
.mega-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
           border-radius: 10px; background: rgba(28, 64, 242, 0.08); color: var(--blue); }

/* The first click outside closes the menu instead of activating whatever it
   landed on — under the header, over the page. */
.mega-scrim { position: fixed; inset: 0; z-index: 55; background: transparent; }

.drawer { display: none; flex-direction: column; gap: 3px; padding: 14px 24px 24px;
          background: #fff; border-bottom: 1px solid var(--line);
          max-height: calc(100vh - 76px); overflow-y: auto; }
.drawer.open { display: flex; }
.drawer a { padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 700; color: var(--navy); }
.drawer a:hover { background: var(--tint); color: var(--blue); }
.drawer .btn { margin-top: 10px; }

/* The same menu on a phone. A full-bleed panel is the one shape that cannot
   work at 360px, so the groups become an accordion: one open at a time. */
.dg { border-bottom: 1px solid var(--line); }
.dg:last-of-type { border-bottom: 0; }
.dg-h { display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 14px 14px; border: 0; background: none; cursor: pointer; font: inherit;
        font-size: 0.98rem; font-weight: 800; color: var(--navy); text-align: left; }
.dg-h svg { transition: transform 0.18s ease; color: var(--muted); }
.dg-h.on { color: var(--blue); }
.dg-h.on svg { transform: rotate(45deg); color: var(--blue); }
.dg-b { padding: 0 0 10px; }
.drawer .dg-cat { display: block; padding: 9px 14px 9px 22px; font-size: 0.9rem; font-weight: 800; }
.drawer .dg-link { font-size: 0.98rem; font-weight: 800; border-bottom: 1px solid var(--line);
                   border-radius: 0; }
.drawer .dg-link:last-of-type { border-bottom: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 66px 0 84px;
        background: linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 55%, var(--bg) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 52px; align-items: center; }
.hero h1 { margin: 20px 0 18px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-art { width: 100%; height: auto; display: block; overflow: visible; }

.hero-points { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-top: 28px; }
.hero-point { display: flex; align-items: center; gap: 8px; font-size: 0.87rem;
              font-weight: 700; color: var(--navy); }

/* Domain pricing lookup. Prices extensions — it asks no registrar anything,
   and the wording on the page says so. */
.dsearch { margin-top: 32px; max-width: 560px; }
.dsearch-box { display: flex; gap: 8px; padding: 7px; background: #fff;
               border: 1.5px solid var(--line-2); border-radius: var(--pill); box-shadow: var(--shadow); }
.dsearch-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28, 64, 242, 0.10), var(--shadow); }
.dsearch input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
                 color: var(--navy); font-family: var(--font); font-size: 1rem;
                 font-weight: 600; padding: 0 18px; }
.dsearch input::placeholder { color: var(--muted); font-weight: 500; }
.dsearch-note { margin-top: 10px; font-size: 0.82rem; color: var(--muted); padding-left: 6px; }
.dsearch-note b { color: var(--navy); }

.tld-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tld-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 14px;
            border-radius: var(--pill); background: #fff; border: 1px solid var(--line);
            font-size: 0.83rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.tld-chip b { color: var(--blue); font-family: var(--font-head); }
.tld-chip span { color: var(--muted); font-weight: 600; }

/* ── Promise band ───────────────────────────────────────────────────────── */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise { display: flex; align-items: center; gap: 14px; background: #fff; padding: 22px;
           border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.promise-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid;
              place-items: center; background: rgba(28, 64, 242, 0.09); color: var(--blue); }
.promise-ic.c2 { background: rgba(255, 7, 102, 0.09);  color: var(--pink); }
.promise-ic.c3 { background: rgba(56, 238, 176, 0.16); color: #0e9e73; }
.promise-ic.c4 { background: rgba(255, 178, 23, 0.14); color: #c07f00; }
.promise b { display: block; font-family: var(--font-head); font-size: 0.98rem; color: var(--navy); }
.promise span { font-size: 0.8rem; color: var(--muted); }

/* ── Plans ──────────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 44px; background: #fff;
        border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--shadow-sm);
        max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; color: var(--navy); cursor: pointer;
       font-family: var(--font); font-size: 0.89rem; font-weight: 700; white-space: nowrap;
       padding: 10px 20px; border-radius: var(--pill); transition: all 0.18s ease; }
.tab:hover { color: var(--blue); }
.tab.on { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
             gap: 20px; align-items: stretch; }

.plan { display: flex; flex-direction: column; padding: 32px 26px 26px; text-align: center; }
.plan.featured { border-color: rgba(28, 64, 242, 0.55); box-shadow: var(--shadow-lift); }
.plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
             background: var(--grad-warm); color: #fff; font-size: 0.68rem; font-weight: 800;
             letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 16px;
             border-radius: var(--pill); white-space: nowrap;
             box-shadow: 0 8px 18px -6px rgba(255, 7, 102, 0.6); }

.plan-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--navy); }
.plan-blurb { color: var(--muted); font-size: 0.86rem; margin-top: 6px; min-height: 44px; line-height: 1.55; }

.plan-price { display: flex; align-items: baseline; justify-content: center; gap: 5px;
              margin: 20px 0 3px; flex-wrap: wrap; }
.plan-amt { font-family: var(--font-head); font-size: 2.45rem; font-weight: 800;
            color: var(--navy); letter-spacing: -0.035em; }
.plan-per { color: var(--muted); font-weight: 700; font-size: 0.92rem; }
.plan-was { color: var(--muted); text-decoration: line-through; font-size: 0.88rem; font-weight: 600; }
.plan-save { font-size: 0.7rem; font-weight: 800; color: #0e9e73;
             background: rgba(56, 238, 176, 0.18); padding: 3px 9px; border-radius: var(--pill); }
.plan-tax { font-size: 0.76rem; color: var(--muted); margin-bottom: 22px; }

.plan .btn { margin-bottom: 24px; }

.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; text-align: left; }
.feat li { display: flex; gap: 10px; font-size: 0.885rem; color: var(--body); line-height: 1.55; }
.feat svg { flex: none; margin-top: 3px; }

.plan-more { margin-top: auto; padding-top: 20px; }
.plan-more a { font-size: 0.84rem; font-weight: 800; color: var(--blue);
               display: inline-flex; align-items: center; gap: 6px; }
.plan-more a span { transition: transform 0.18s ease; }
.plan-more a:hover span { transform: translateX(3px); }

/* ── Split blocks ───────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.flip .split-art { order: -1; }
.split-art svg { width: 100%; height: auto; display: block; }

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.fcard { padding: 30px; }
.fcard-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
            background: rgba(28, 64, 242, 0.09); color: var(--blue); margin-bottom: 18px; }
.fcard-ic.c2 { background: rgba(255, 7, 102, 0.09);   color: var(--pink); }
.fcard-ic.c3 { background: rgba(56, 238, 176, 0.16);  color: #0e9e73; }
.fcard-ic.c4 { background: rgba(255, 126, 93, 0.12);  color: #e2593a; }
.fcard-ic.c5 { background: rgba(0, 130, 248, 0.10);   color: var(--sky); }
.fcard-ic.c6 { background: rgba(255, 178, 23, 0.14);  color: #c07f00; }
.fcard h3 { font-size: 1.08rem; margin-bottom: 9px; }
.fcard p { color: var(--body); font-size: 0.89rem; margin: 0; line-height: 1.68; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat b { display: block; font-family: var(--font-head); font-size: 2.3rem; font-weight: 800;
          color: #fff; letter-spacing: -0.03em; }
.stat span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.7); }

/* ── TLD cards ──────────────────────────────────────────────────────────── */
.tld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 18px; }
.tld-card { padding: 28px 20px; text-align: center; display: block; }
.tld-name { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--blue); }
.tld-price { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--navy); margin-top: 8px; }
.tld-per { font-size: 0.78rem; color: var(--muted); }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.tcard { padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.stars { display: flex; gap: 3px; color: var(--amber); }
.tcard p { margin: 0; color: var(--body); font-size: 0.92rem; line-height: 1.75; }
.tperson { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tavatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid;
           place-items: center; font-family: var(--font-head); font-weight: 800;
           color: #fff; font-size: 1rem; background: var(--grad-blue); }
.tperson b { display: block; font-family: var(--font-head); color: var(--navy); font-size: 0.95rem; }
.tperson span { font-size: 0.8rem; color: var(--muted); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }  /* full page width - see .article */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
            overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item.open { border-color: rgba(28, 64, 242, 0.3); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
         background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--navy);
         font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; padding: 20px 24px; }
.faq-q svg { flex: none; color: var(--blue); transition: transform 0.22s ease; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { padding: 0 24px 20px; color: var(--body); font-size: 0.92rem; }  /* no 78ch cap: the answer spans its card */

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg);
            background: var(--navy); padding: 62px 48px; text-align: center; }
.cta-band::before { content: ''; position: absolute; width: 460px; height: 460px; top: -230px;
                    right: -140px; border-radius: 50%;
                    background: radial-gradient(circle, rgba(28, 64, 242, 0.55), transparent 70%); }
.cta-band::after { content: ''; position: absolute; width: 380px; height: 380px; bottom: -200px;
                   left: -120px; border-radius: 50%;
                   background: radial-gradient(circle, rgba(255, 7, 102, 0.35), transparent 70%); }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: rgba(255, 255, 255, 0.78); margin: 16px auto 0; }
.cta-band .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ── Contact card ───────────────────────────────────────────────────────── */
.contact-card { padding: 28px; display: grid; gap: 14px; }
.contact-row { display: flex; align-items: center; gap: 13px; }
.contact-row a { font-weight: 700; color: var(--navy); }
.contact-row a:hover { color: var(--blue); }
.contact-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid;
              place-items: center; background: rgba(28, 64, 242, 0.09); color: var(--blue); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--navy); color: rgba(255, 255, 255, 0.72); padding: 72px 0 28px; }
.ftr .brand { color: #fff; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 44px; }
.ftr h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
          margin-bottom: 18px; font-family: var(--font); font-weight: 800; }
.ftr-links { display: grid; gap: 10px; }
.ftr-links a { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; transition: color 0.16s ease; }
.ftr-links a:hover { color: #fff; }
.ftr-about { color: rgba(255, 255, 255, 0.6); font-size: 0.89rem; margin: 16px 0 0; max-width: 40ch; }
.ftr-contact { display: grid; gap: 9px; margin-top: 18px; font-size: 0.87rem; }
.ftr-contact div { display: flex; gap: 10px; align-items: flex-start; }
.ftr-contact svg { flex: none; margin-top: 4px; color: var(--sky); }
.ftr-contact a, .ftr-contact span { color: rgba(255, 255, 255, 0.85); }
.ftr-contact a:hover { color: #fff; }
/* What every plan carries, filling the column the address used to occupy.
   Quiet by design: a footer badge that shouts competes with the thing above it
   it is supposed to reassure people about. Translucent white rather than a
   solid chip, so it reads as part of the footer and not as a row of stickers. */
.ftr-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px;
              list-style: none; padding: 0; max-width: 340px; }
.ftr-badge { display: flex; align-items: center; gap: 8px; padding: 9px 11px;
             border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
             background: rgba(255, 255, 255, 0.05); font-size: 0.78rem; font-weight: 700;
             color: rgba(255, 255, 255, 0.86); line-height: 1.2; }
.ftr-badge svg { flex: none; color: var(--sky); }

.ftr-bar { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12);
           display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
           color: rgba(255, 255, 255, 0.55); font-size: 0.83rem; }


/* ── Detail page ────────────────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--muted);
          margin-bottom: 20px; flex-wrap: wrap; }
.crumbs a { font-weight: 700; color: var(--navy); }
.crumbs a:hover { color: var(--blue); }

.detail-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 36px; align-items: start; }
.spec-box { padding: 30px; }
.buy-box { position: sticky; top: 100px; padding: 30px; }

.prose { color: var(--body); font-size: 0.94rem; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose p { margin: 0 0 12px; }
.prose a { color: var(--blue); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 0.85rem; font-weight: 800; color: var(--navy); }
.field .req { color: var(--pink); }
.input, .textarea { width: 100%; font-family: var(--font); font-size: 0.95rem; color: var(--navy);
                    background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px;
                    padding: 12px 15px; outline: none;
                    transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28, 64, 242, 0.10); }
.input.bad, .textarea.bad { border-color: var(--pink); }
/* Inline, under the field it belongs to. Never a banner at the top of a form. */
.err { color: var(--pink); font-size: 0.8rem; font-weight: 700; }
.hint { color: var(--muted); font-size: 0.79rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ── Cart & checkout ────────────────────────────────────────────────────── */
.cart-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 30px; align-items: start; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; padding: 22px 0;
        border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.line-meta { font-size: 0.82rem; color: var(--muted); }
.line-right { text-align: right; display: grid; gap: 8px; justify-items: end; }
.line-amt { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.06rem; }
.line-domain { grid-column: 1 / -1; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2);
       border-radius: var(--pill); overflow: hidden; }
.qty button { width: 32px; height: 32px; border: 0; background: #fff; color: var(--navy);
              font-size: 1rem; font-weight: 800; cursor: pointer; line-height: 1; }
.qty button:hover:not(:disabled) { background: var(--tint); color: var(--blue); }
.qty button:disabled { color: var(--muted); cursor: not-allowed; }
.qty span { min-width: 30px; text-align: center; font-weight: 800; color: var(--navy); font-size: 0.9rem; }

.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
           font-family: var(--font); font-size: 0.8rem; font-weight: 700; }
.linkbtn:hover { color: var(--pink); }

.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
           font-size: 0.92rem; color: var(--body); }
.sum-row b { color: var(--navy); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px;
                 font-family: var(--font-head); font-size: 1.22rem; font-weight: 800; color: var(--navy); }

.pay-choice { display: grid; gap: 10px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
           border: 1.5px solid var(--line-2); border-radius: 12px; transition: all 0.16s ease; }
.pay-opt:hover { background: var(--tint); }
.pay-opt.on { border-color: var(--blue); background: rgba(28, 64, 242, 0.05); }
.pay-opt input { accent-color: var(--blue); width: 18px; height: 18px; }
.pay-opt b { font-family: var(--font-head); color: var(--navy); font-size: 0.95rem; display: block; }
.pay-opt span { font-size: 0.78rem; color: var(--muted); }

.notice { display: flex; gap: 12px; padding: 15px 17px; border-radius: 12px;
          background: rgba(255, 178, 23, 0.10); border: 1px solid rgba(255, 178, 23, 0.35);
          font-size: 0.86rem; color: #7a5200; line-height: 1.6; }
.notice svg { flex: none; margin-top: 2px; color: #c07f00; }
.notice.blue { background: rgba(28, 64, 242, 0.06); border-color: rgba(28, 64, 242, 0.25); color: var(--navy); }
.notice.blue svg { color: var(--blue); }
.notice.bad { background: rgba(255, 7, 102, 0.07); border-color: rgba(255, 7, 102, 0.3); color: #9c0038; }
.notice.bad svg { color: var(--pink); }

.empty { text-align: center; padding: 60px 24px; }
.empty-ic { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: grid;
            place-items: center; background: var(--tint); color: var(--blue); }

.done-ic { width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; display: grid;
           place-items: center; background: rgba(56, 238, 176, 0.18); color: #0e9e73; }
.done-box { max-width: 640px; margin: 0 auto; text-align: center; }
.done-ref { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 6px;
            padding: 12px 22px; border-radius: var(--pill); background: var(--tint);
            border: 1px solid var(--line); font-family: var(--font-head);
            font-size: 1.15rem; font-weight: 800; color: var(--navy); }

/* ── States ─────────────────────────────────────────────────────────────── */
.state { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 60px 24px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 18px;
           border: 3px solid var(--line); border-top-color: var(--blue);
           animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm { width: 18px; height: 18px; border-width: 2px; margin: 0; }

/* ── Paying ─────────────────────────────────────────────────────────────── */
.pay-box { margin-top: 26px; text-align: left; }
.pay-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
            font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; color: var(--navy); }
.pay-head svg { color: var(--blue); }
.pay-sub { margin: 0 0 18px; font-size: 0.88rem; }

.pay-methods { display: grid; gap: 12px; }

/* A row, not a radio list: choosing the gateway IS the action, so there is no
   second "continue" button to hunt for. */
/* FILLED BRAND BLUE, the site's primary-button colour. These are the most
   important buttons on the site, and as white outlined rows they read as
   options in a list rather than as "pay now". */
.pay-method { display: flex; align-items: center; gap: 14px; width: 100%;
              padding: 16px 18px; text-align: left; cursor: pointer;
              background: var(--blue); color: #fff;
              border: 1.5px solid var(--blue); border-radius: var(--radius);
              box-shadow: var(--shadow-blue);
              transition: background 0.18s, box-shadow 0.18s, transform 0.18s; }
.pay-method:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark);
                                   box-shadow: 0 20px 40px -12px rgba(28, 64, 242, 0.55);
                                   transform: translateY(-1px); }
.pay-method:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.pay-method:disabled { opacity: 0.55; cursor: default; }
.pay-method-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pay-method-main b { font-family: var(--font-head); font-size: 1rem; color: #fff; }
.pay-method-main span { font-size: 0.83rem; color: rgba(255, 255, 255, 0.82); }

/* On blue, the amber-tint badge disappears; a solid amber pill stays legible. */
.pay-test { flex: none; padding: 4px 10px; border-radius: var(--pill);
            background: var(--amber); color: #3d2600;
            font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.pay-go { flex: none; display: grid; place-items: center; width: 20px; color: #fff; }
.pay-go .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

.pay-note { margin-top: 16px; }
.pay-later { margin: 18px 0 0; font-size: 0.82rem; }

.paid-stamp { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-top: 22px;
              text-align: left; border-radius: var(--radius);
              background: rgba(56, 238, 176, 0.12); border: 1px solid rgba(56, 238, 176, 0.45); }
.paid-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
           background: var(--mint); color: #00351f; }
.paid-stamp b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--navy); }
.paid-stamp span { font-size: 0.82rem; color: var(--body); word-break: break-all; }

/* ── Signing in ─────────────────────────────────────────────────────────── */
.auth-box { text-align: left; }

/* Two tabs, not two pages. At checkout the customer has already decided to
   buy; sending them to a separate screen is where baskets go to die. */
.auth-tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 22px;
             background: var(--tint); border-radius: var(--pill); }
.auth-tab { flex: 1; padding: 10px 14px; border: 0; border-radius: var(--pill);
            background: transparent; color: var(--body); cursor: pointer;
            font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
            transition: background 0.18s, color 0.18s, box-shadow 0.18s; }
.auth-tab.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.signed-in { display: flex; align-items: center; gap: 12px; padding: 13px 15px;
             border-radius: var(--radius);
             background: rgba(56, 238, 176, 0.11); border: 1px solid rgba(56, 238, 176, 0.4); }
.signed-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid;
             place-items: center; background: var(--mint); color: #00351f; }
.signed-who { flex: 1; min-width: 0; }
.signed-who b { display: block; font-family: var(--font-head); font-size: 0.94rem; color: var(--navy); }
.signed-who span { display: block; font-size: 0.8rem; color: var(--body);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.linkish { flex: none; background: none; border: 0; padding: 0; cursor: pointer;
           color: var(--blue); font-size: 0.82rem; font-weight: 700; text-decoration: underline; }

/* The account button in the header. Capped so a long company name cannot push
   the basket and the burger off a phone screen. */
.hdr-acct { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Review and pay ─────────────────────────────────────────────────────── */
.rev { background: var(--tint); }

.rev-title { text-align: center; margin-bottom: 28px; }
.rev-title .lede { margin: 12px auto 0; }

/* Inside the summary card: no second border, just a rule to separate the
   payment step from the figures above it. */
.pay-bare { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pay-bare .pay-later { margin-bottom: 0; }

/* The trust strip. Every claim on it is one the site already makes elsewhere. */
.trustbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
            gap: 10px 26px; max-width: 940px; margin: 0 auto 34px;
            padding: 16px 24px; background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.87rem; color: var(--body); }
.trust-item svg { flex: none; color: var(--blue); }
.trust-item b { color: var(--navy); font-weight: 800; }
.trust-sep { width: 1px; height: 26px; background: var(--line); }

/* Wide left, narrow right — the summary is a companion to the choice, not the
   other way round. */
.rev-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
            gap: 26px; align-items: start; }
.rev-main { display: grid; gap: 20px; min-width: 0; }
.rev-side { min-width: 0; }
/* Sticky, so the total and the pay button stay in view while the customer
   reads down a long plan list. */
.rev-sum { position: sticky; top: 92px; }

.rev-card { text-align: left; }
.rev-plan-top { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.rev-plan-top b { font-family: var(--font-head); font-size: 1.05rem; color: var(--navy); }

.rev-plan-row { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 20px; flex-wrap: wrap; }
.rev-term { flex: 1 1 230px; min-width: 0; }
.rev-term label { display: block; margin-bottom: 8px; font-size: 0.82rem; color: var(--body); }
.rev-select { width: 100%; max-width: 280px; cursor: pointer; }
.rev-oneoff { font-family: var(--font-head); font-weight: 700; color: var(--navy); }

.rev-plan-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rev-plan-price s { color: var(--muted); font-size: 0.86rem; }
.rev-savepill { padding: 3px 10px; border-radius: var(--pill); font-size: 0.74rem; font-weight: 800;
                background: rgba(56, 238, 176, 0.2); color: #00694a; }
.rev-amt { font-family: var(--font-head); font-weight: 800; font-size: 1.75rem; color: var(--navy);
           line-height: 1.1; }
.rev-amt span { font-size: 0.9rem; font-weight: 700; color: var(--body); }

.rev-renew { margin: 16px 0 0; font-size: 0.82rem; color: var(--body); }
.rev-busy { display: flex; align-items: center; gap: 8px; margin-top: 14px;
            font-size: 0.82rem; color: var(--body); }

/* The OS and control panel, inside their server's card. No duration of their
   own: they run for as long as the server does, and the one "Plan duration"
   above sets all three. */
.rev-addons { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
              display: grid; gap: 14px; }
.rev-addon { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 20px; flex-wrap: wrap; }
.rev-addon .rev-term label .req { color: var(--pink); }
.rev-addon-price { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
                   color: var(--navy); white-space: nowrap; padding-bottom: 10px; }
.rev-addon-price span { font-size: 0.8rem; font-weight: 700; color: var(--body); }
.rev-addon-price.free { color: #00694a; font-size: 0.9rem; }
.rev-addon-note { margin: 0; font-size: 0.8rem; color: var(--body); }

/* Summary: an add-on is a sub-row of its server, not a plan of its own. */
.rev-sum-sub { padding-left: 14px; font-size: 0.88rem; }
.rev-sum-sub span { color: var(--body); }

.rev-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.rev-head svg { flex: none; color: var(--blue); margin-top: 2px; }
.rev-head b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--navy); }
.rev-head span { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--body); }
.rev-dom { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
           border-top: 1px solid var(--line); font-size: 0.9rem; }
.rev-dom b { color: var(--navy); word-break: break-all; }
.rev-note { margin: 14px 0 0; font-size: 0.8rem; }

.rev-sum-name { margin: 14px 0 2px; font-family: var(--font-head); font-weight: 800;
                font-size: 0.95rem; color: var(--navy); }
.rev-sum-name:first-of-type { margin-top: 0; }
.rev-price { display: inline-flex; align-items: baseline; gap: 8px; }
.rev-price s { color: var(--muted); font-weight: 600; font-size: 0.84rem; }
.rev-offer { color: #00694a; }
.rev-offer span { display: inline-flex; align-items: center; gap: 6px; }
.rev-offer b { color: #00694a; }
.rev-tax { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.rev-total { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--navy); }
.rev-saved { margin-top: 10px; padding: 9px 12px; border-radius: 10px; text-align: center;
             background: rgba(56, 238, 176, 0.14); color: #00694a;
             font-size: 0.83rem; font-weight: 700; }

.secure { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.secure-line { display: flex; align-items: center; justify-content: center; gap: 7px;
               font-size: 0.8rem; color: var(--body); }
.secure-line svg { color: var(--blue); }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.pay-chip { padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-2);
            background: #fff; font-size: 0.7rem; font-weight: 700; color: var(--body); }

/* ── Entrance ───────────────────────────────────────────────────────────── */
/* Transform ONLY — deliberately no opacity. An entrance that fades in from 0
   makes content invisible until the animation finishes, and anything whose
   animation clock stalls (headless renderers, crawlers, preview and screenshot
   services) then captures a blank hero. Observed here, not theorised. */
@keyframes rise { from { transform: translateY(16px); } to { transform: none; } }
.rise { animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.1s; } .d3 { animation-delay: 0.15s; }
.d4 { animation-delay: 0.2s; } .d5 { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* The triggers are gone, so the panel must be too — a window resized while
     it was open would otherwise leave it hanging over the page with nothing
     to close it. */
  .mega, .mega-scrim { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { max-width: 540px; margin: 0 auto; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .split-art { order: 0; }
  .detail-grid, .cart-grid { grid-template-columns: 1fr; }
  .buy-box { position: static; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .promise-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  .hdr-right .btn-outline { display: none; }
}

/* The switch stays on a phone — it is more useful there, not less — but it
   drops to the code alone. "₹ INR" beside a basket and a burger in 390px is
   two characters more than the row can hold, and "INR" is the half that
   actually tells a visitor which currency they are reading. */
@media (max-width: 560px) {
  .curpick > summary,
  .curpick > .curpick-btn { padding: 0 9px; gap: 4px; }
  .cur-sym { display: none; }
  .cur-menu { min-width: 208px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  /* A wordmark is WIDE - 5.7 times its height - and it shares this row with a
     burger, a basket and the currency picker. It gives up height first, and
     the row closes up, rather than any of the four being pushed off. */
  .brand-logo { height: 34px; }
  .hdr-in { gap: 12px; }
  .section { padding: 62px 0; }
  .section-tight { padding: 48px 0; }
  .hero { padding: 40px 0 60px; }
  .section-head { margin-bottom: 38px; }
  .promise-grid, .stat-grid { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-band { padding: 44px 22px; }
  .card-pad, .plan, .fcard, .spec-box, .buy-box, .contact-card, .tcard { padding: 24px 20px; }
  .dsearch-box { flex-direction: column; border-radius: var(--radius); padding: 12px; }
  .dsearch input { padding: 8px 6px; }
  .dsearch-box .btn { width: 100%; }
  .plan-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; }
  .ftr-bar { flex-direction: column; gap: 8px; }
  .grid-2 { grid-template-columns: 1fr; }
  .line { grid-template-columns: 1fr; }
  .line-right { justify-items: start; text-align: left; }
  .wave { height: 32px; }
  /* The gateway row keeps its shape on a phone; only the padding gives way,
     because the badge and the name must stay on one line to be readable. */
  .pay-method { padding: 14px 15px; gap: 10px; }
  .pay-test { padding: 3px 8px; font-size: 0.64rem; }

  /* Review and pay: one column, and the summary stops being sticky — a
     sticky card taller than the viewport can never be scrolled past. */
  .rev-grid { grid-template-columns: 1fr; }
  .rev-sum { position: static; }
  .trustbar { gap: 12px; padding: 14px 16px; }
  .trust-sep { display: none; }
  .trust-item { width: 100%; }
  .rev-plan-row { flex-direction: column; align-items: stretch; gap: 16px; }
  /* flex: 1 1 230px sets a flex-BASIS, and once the row stacks that basis is a
     HEIGHT — leaving a 230px hole between the selector and the price. */
  .rev-term { flex: none; }
  .rev-plan-price { align-items: flex-start; text-align: left; }
  .rev-select { max-width: none; }
  .rev-addon { flex-direction: column; align-items: stretch; gap: 6px; }
  .rev-addon-price { padding-bottom: 0; }
}

/* AFTER the 640px block on purpose. Both match a 360px phone and both set
   .brand-logo at the same specificity, so the one written LAST wins - put
   this first and it is silently dead code, which is exactly what happened
   the first time. Narrow breakpoints go after wide ones. */
/* The narrowest phones still in use (360px). The logo gives up height first,
   and the row closes up, so the burger, basket and currency picker all stay on
   screen. Measured at 360 rather than guessed. */
@media (max-width: 420px) {
  .brand-logo { height: 30px; }
  .hdr-in { gap: 10px; }
}


/* Orbit rotation used by the hero illustration. */
@keyframes sbSpin     { to { transform: rotate(360deg); } }
@keyframes sbSpinBack { from { transform: rotate(38deg); } to { transform: rotate(-322deg); } }

/* ── Tenure, and the price it buys ─────────────────────────────────────────

   The plan cards lead with the LOWEST price a plan can be had for, because a
   card showing only the one-term price hides the whole point of a tenure
   discount — nobody opens a dropdown to find out a plan is cheaper than it
   says. "from" and the tenure that earns it are what make that honest rather
   than merely cheap-looking. */

.plan-from {
  font-family: var(--font); font-size: 0.8rem; font-weight: 700;
  color: var(--muted); align-self: center;
}

/* What the "from" is conditional on. Printed whether or not the price moves:
   "how long am I committing to" is the question the price raises, and leaving
   it unanswered reads as a catch. */
.plan-term-note {
  font-size: 0.78rem; line-height: 1.45; color: var(--muted);
  margin-bottom: 8px;
}

/* ── The buy box's tenure chooser ───────────────────────────────────────── */
.buy-term { margin-bottom: 18px; }
.buy-term select.input { cursor: pointer; }

/* The whole commitment, beside the per-month rate. A monthly figure on its own
   is the half of the answer that flatters us. */
.buy-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 10px; font-size: 0.83rem; color: var(--muted);
}
.buy-total b { color: #0e9e73; font-weight: 800; }

/* ── The basket's tenure box ────────────────────────────────────────────── */
/* Replaces the +/− counter. That could reach 5 or 17, and the ladder is priced
   at 1 / 3 / 6 / 12 / 24 / 36 — so any number between the rungs was one the
   basket could only guess at, and it guessed high. */
.line-term {
  width: auto; min-width: 190px; max-width: 100%;
  padding: 7px 10px; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
@media (max-width: 560px) {
  .line-term { min-width: 0; width: 100%; }
}


/* ── Domain search ────────────────────────────────────────────────────────

   Three states, not two. "Couldn't check" gets its own treatment — amber,
   not green and not red — because it is genuinely a third answer and
   collapsing it into either of the others is how a customer ends up buying a
   name we cannot deliver. */
.dm { width: 100%; }  /* full page width - see .article */
.dm-page { padding-top: 34px; }

.dm-form { display: flex; gap: 8px; padding: 8px; background: #fff;
           border: 1px solid var(--line-2); border-radius: 18px;
           box-shadow: 0 10px 34px rgba(0, 16, 66, 0.10); }
.dm-form:focus-within { border-color: var(--blue);
           box-shadow: 0 0 0 4px rgba(28, 64, 242, 0.10), 0 10px 34px rgba(0, 16, 66, 0.10); }
.dm-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
            font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--navy);
            padding: 13px 16px; }
.dm-input::placeholder { color: var(--muted); font-weight: 500; }

.dm-go { flex: 0 0 auto; width: 52px; height: 48px; border: 0; border-radius: 12px;
         background: var(--blue); color: #fff; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center;
         transition: background 0.15s, transform 0.15s; }
.dm-go:hover:not(:disabled) { background: var(--violet); }
.dm-go:disabled { opacity: 0.7; cursor: default; }
.dm-spin { width: 17px; height: 17px; border-radius: 50%;
           border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
           animation: dmspin 0.7s linear infinite; }
@keyframes dmspin { to { transform: rotate(360deg); } }

.dm-err { margin: 16px 2px 0; color: var(--pink); font-size: 0.9rem; font-weight: 600; }

/* The provenance line. Above the results, never below them — a caveat under
   a list of green ticks is a caveat nobody reads. */
.dm-notice { margin: 16px 0 0; padding: 11px 15px; border-radius: var(--radius-sm);
             background: #fff8e8; border: 1px solid #ffe2a8; color: #6b4e00;
             font-size: 0.85rem; line-height: 1.55; }

/* The status dot. Paired with a word everywhere it appears — colour alone
   is not a label. */
.dm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dm-dot.free { background: #0fbf7f; }
.dm-dot.taken { background: #c8cede; }
.dm-dot.unknown { background: var(--amber); }

/* ── The exact match ── */
.dm-exact { display: flex; align-items: center; justify-content: space-between; gap: 18px;
            margin-top: 22px; padding: 20px 22px; border-radius: 16px;
            background: #eef3ff; border: 1.5px solid #c9d8ff; }
.dm-exact.taken, .dm-exact.unknown { background: #f7f9fd; border-color: var(--line-2); }
.dm-exact-main { min-width: 0; }
.dm-exact-head { display: flex; align-items: center; gap: 10px; }
.dm-exact-name { font-size: 1.16rem; font-weight: 800; color: var(--navy); word-break: break-all; }
.dm-exact-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.dm-exact-desc { font-size: 0.84rem; color: var(--body); }

.dm-pill { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
           padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.dm-pill.free { background: #d7f7ec; color: #04794f; }
.dm-pill.taken { background: #eceff7; color: #6b7280; }
.dm-pill.unknown { background: #fff3d6; color: #8a6200; }

.dm-exact-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }

/* ── More options ── */
.dm-more { margin: 30px 0 14px; font-size: 1.02rem; font-weight: 800; color: var(--navy); }

.dm-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.dm-tab { border: 1px solid var(--line-2); background: #fff; color: var(--body);
          font: inherit; font-size: 0.86rem; font-weight: 600;
          padding: 8px 17px; border-radius: var(--pill); cursor: pointer;
          transition: background 0.15s, color 0.15s, border-color 0.15s; }
.dm-tab:hover { border-color: var(--blue); color: var(--navy); }
.dm-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.dm-list { list-style: none; margin: 0; padding: 0;
           display: flex; flex-direction: column; gap: 10px; }

.dm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 17px 20px; background: #fff; border: 1px solid var(--line);
          border-radius: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.dm-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }

.dm-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dm-dn { font-weight: 700; color: var(--navy); word-break: break-all; }
.dm-row.taken .dm-dn { color: var(--body); }

.dm-tag { font-size: 0.72rem; font-weight: 700; padding: 3px 9px;
          border-radius: var(--pill); white-space: nowrap; }
.dm-tag.taken { background: #f2f4fa; color: var(--muted); }
.dm-tag.unknown { background: #fff3d6; color: #8a6200; }

/* Not a colour and not an icon — a word. Read the same in sunlight, in
   greyscale, and by a screen reader. */
.dm-sim { font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
          letter-spacing: 0.06em; color: #8a6200; background: #fff3d6;
          padding: 2px 7px; border-radius: 5px; }

.dm-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }

/* The price. Two figures only when there is genuinely an offer behind them —
   the struck-out number is drawn from the server's UnitList, never from a
   multiplier invented here to make the other number look better. */
.dm-pricebox { text-align: right; }
.dm-priceline { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.dm-was { font-size: 0.86rem; color: var(--muted); text-decoration: line-through; }
.dm-now { font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.dm-per { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.dm-sub { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }

.dm-note { font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.dm-btn { padding: 9px 22px; font-size: 0.88rem; }

.dm-foot { margin: 22px 2px 0; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }

@media (max-width: 640px) {
  .dm-form { border-radius: 16px; }
  .dm-input { font-size: 0.98rem; padding: 12px 13px; }
  .dm-go { width: 46px; height: 44px; }

  /* Rows stack rather than squeezing the price into a sliver. The name is
     the thing being read; it gets the full width. */
  .dm-exact, .dm-row { flex-direction: column; align-items: stretch; gap: 13px; }
  .dm-exact-right, .dm-right { justify-content: space-between; }
  .dm-pricebox { text-align: left; }
  .dm-priceline { justify-content: flex-start; }
  .dm-btn { flex: 0 0 auto; }
  .dm-tabs { gap: 7px; }
  .dm-tab { padding: 7px 14px; font-size: 0.82rem; }
}

/* The way back out of a result. Without it, the only way to see the price
   cards again is to search for something else. */
.dm-clear { flex: 0 0 auto; width: 34px; align-self: stretch; border: 0; background: transparent;
            color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
            border-radius: 10px; }
.dm-clear:hover { color: var(--navy); background: var(--tint); }

/* Room between the search box and whatever follows it.

   Neither grid carried a top margin — they never needed one, because until
   the search box existed they were the first thing in the section. The plan
   cards then butted straight against the input, and `.plan-flag` sits at
   top:-12px, so the "MOST POPULAR" badge climbed into the box's shadow.

   Set on the SIBLING rather than as a bottom margin on `.dm`, so the
   standalone /domains page (where the search is followed by nothing but the
   footer) does not gain a band of dead space it has no use for. */
.dm + .plan-grid,
.dm + .tld-grid { margin-top: 52px; }

@media (max-width: 640px) {
  .dm + .plan-grid,
  .dm + .tld-grid { margin-top: 36px; }
}

/* ── Promo banner ─────────────────────────────────────────────────────────
   Runs across every page except the domain search, where the customer has
   already told us what they came for. */
.pb { background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
      border-bottom: 1px solid var(--line); overflow: hidden; }
.pb-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px;
         align-items: center; padding-block: 46px; }

.pb-eyebrow { margin: 0 0 10px; font-size: 0.92rem; color: var(--body); }
.pb-eyebrow b { color: var(--blue); font-weight: 700; }

.pb-head { font-family: var(--font-head); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
           font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
           color: var(--navy); margin: 0 0 12px; }
.pb-sub { margin: 0 0 20px; color: var(--body); font-size: 1rem; }

.pb-ticks { list-style: none; margin: 0 0 24px; padding: 0;
            display: flex; flex-direction: column; gap: 10px; }
.pb-ticks li { display: flex; align-items: center; gap: 10px;
               font-size: 0.93rem; color: var(--text); font-weight: 500; }
.pb-ticks svg { color: #0fbf7f; flex: 0 0 auto; }

.pb-price { display: flex; align-items: baseline; gap: 2px; }
.pb-sym { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.pb-amt { font-family: var(--font-head); font-size: 3.1rem; font-weight: 800;
          line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.pb-per { font-size: 1.05rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.pb-terms { margin: 7px 0 0; font-size: 0.82rem; color: var(--muted); }
.pb-terms s { color: var(--muted); }

.pb-cta { margin-top: 22px; }
.pb-trust { display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
            font-size: 0.82rem; color: var(--muted); }
.pb-trust svg { color: #0fbf7f; flex: 0 0 auto; }

/* The banner's picture — the section's own artwork where one is bundled,
   the drawn panel mock below where it is not. */
.pb-art { min-width: 0; }
/* width/height are on the tag so the browser reserves the right box before
   the file arrives; without them the copy beside it jumps when the image
   lands, which is both ugly and a layout-shift penalty. `height: auto`
   restores the real aspect ratio once it has. */
/* CAPPED BY HEIGHT, not just by column width.

   The artwork is roughly square (1225x1284), so filling a 638px column made it
   638px TALL as well - taller than the words beside it, which left a banner
   that was mostly picture with a column of white under the copy. The cap ends
   the tallest of them at a sensible height and `width: auto` keeps the aspect
   ratio; `margin-inline: auto` centres what is left in the column.

   max-width still wins on a phone, where the banner is one column and the
   picture should simply be as wide as the screen allows. */
.pb-art img { display: block; width: auto; height: auto;
              max-width: 100%; max-height: 500px; margin-inline: auto; }

/* The plan page carries a price, a button and the buy box below it, so its
   picture is the supporting half of the row and is capped tighter still. */
.pb-slim .pb-art img { max-height: 400px; }
.pa-win { display: grid; grid-template-columns: 128px 1fr; background: #fff;
          border: 1px solid var(--line); border-radius: 18px;
          box-shadow: 0 24px 54px rgba(0, 16, 66, 0.10); overflow: hidden; }
.pa-side { background: #fafcff; border-right: 1px solid var(--line); padding: 14px 10px; }
.pa-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
          border-radius: 9px; font-size: 0.79rem; font-weight: 600; color: var(--body); }
.pa-nav svg { color: var(--muted); }
.pa-nav.on { background: #e9efff; color: var(--navy); }
.pa-nav.on svg { color: var(--blue); }

.pa-body { padding: 16px 18px 20px; position: relative; }
.pa-bar { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
          background: #f5f7fc; border-radius: 9px; margin-bottom: 14px; }
.pa-dot { width: 9px; height: 9px; border-radius: 50%; background: #c8cede; flex: 0 0 auto; }
.pa-rows { display: flex; flex-direction: column; gap: 11px; }
.pa-row { display: flex; align-items: center; gap: 9px; }
.pa-line { height: 8px; border-radius: 5px; background: #eef1f8; }
.pa-line.w25 { width: 25%; } .pa-line.w30 { width: 30%; } .pa-line.w35 { width: 35%; }
.pa-line.w40 { width: 40%; } .pa-line.w45 { width: 45%; } .pa-line.w50 { width: 50%; }
.pa-line.w60 { width: 60%; }
.pa-chip { width: 34px; height: 8px; border-radius: 5px; flex: 0 0 auto; }
.pa-chip.c1 { background: #cfe0ff; } .pa-chip.c2 { background: #ffd9e4; } .pa-chip.c3 { background: #cdf5e6; }

.pa-ring { display: flex; align-items: center; gap: 12px; margin-top: 18px;
           padding-top: 16px; border-top: 1px solid var(--line); }
.pa-ring-txt b { display: block; font-family: var(--font-head); font-size: 1.15rem;
                 font-weight: 800; color: var(--navy); line-height: 1.1; }
.pa-ring-txt span { font-size: 0.76rem; color: var(--muted); }

@media (max-width: 900px) {
  .pb-in { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; }
  /* The floating pill is ~40px and the banner only reserves 36px here, so a
     slide INSIDE a carousel ends a little higher. Only inside one: a single
     banner has no controls to clear. */
  .pbc .pb-in { padding-bottom: 52px; }
  /* The artwork goes under the words on a narrow screen. It illustrates the
     offer; it is not the offer. */
  .pb-art { order: 2; }
}
@media (max-width: 640px) {
  .pa-win { grid-template-columns: 96px 1fr; }
  .pa-nav span { display: none; }
  .pa-nav { justify-content: center; }
  .pb-amt { font-size: 2.5rem; }
  .pb-cta .btn { width: 100%; justify-content: center; }
}

/* Slim and bare banner variants.
   A plan page already has a buy box; a basket already has the thing being
   sold. Neither needs a price or a second button at the top of the page. */
/* Compact padding and type. Shared by both; the COLUMN COUNT is not.

   `.pb-slim` used to force `grid-template-columns: 1fr` too. That was written
   when the slim banner had no artwork - but a plan page does pass artwork
   (Plan.cshtml hands _Banner its category picture), and in a single-column
   grid `.pb-art` becomes a second full-width ROW: windows-vps.png rendered
   1352x1417 and buried the whole page under it. Slim now takes its columns
   from `.pb-in` when there is art and from `.pb-noart` when there is not.

   `.pb-bare` KEEPS the single column, and not merely because it never carries
   art: the React basket renders `pb pb-bare` WITHOUT the `pb-noart` class the
   Razor partial adds, so this rule is the only thing keeping /cart and
   /checkout from drawing their words into half the screen. Removing it put an
   empty column back on the checkout - which is the exact bug `.pb-noart` was
   introduced to fix. */
.pb-slim .pb-in,
.pb-bare .pb-in { padding-block: 30px; }
.pb-bare .pb-in { grid-template-columns: 1fr; }
.pb-slim .pb-head,
.pb-bare .pb-head { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.pb-slim .pb-sub,
.pb-bare .pb-sub { margin-bottom: 16px; }
.pb-slim .pb-ticks,
.pb-bare .pb-ticks { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 14px; }
.pb-bare { background: var(--tint-2); }

@media (max-width: 640px) {
  .pb-slim .pb-ticks,
  .pb-bare .pb-ticks { flex-direction: column; gap: 9px; }
}

/* A banner with no artwork is one column, not two with one left empty.
   /web-hosting drew its words into the left half of the screen and nothing
   into the right, because no web-hosting.png had ever been added. */
.pb-noart .pb-in { grid-template-columns: 1fr; }

/* ── The service carousel ─────────────────────────────────────────────────

   A strip of banners, one per service, across the top of the home page.

   BUILT ON SCROLL-SNAP RATHER THAN ON SCRIPT. The track is an ordinary
   horizontal scroller: it is swipeable on a phone, scrollable with a
   trackpad, and its dots are anchor links to the slides — so every slide is
   reachable with JavaScript blocked. site.js only adds smoothness, the
   arrows, and the auto-advance.

   The slides are flex children of one row, so they all take the height of the
   tallest. A carousel whose height changes as it advances shoves the whole
   page up and down, and on a home page that is everything below it. */
.pbc { position: relative; border-bottom: 1px solid var(--line); }

.pbc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
             scroll-behavior: smooth;
             /* The scrollbar is furniture here: the dots say where you are. */
             scrollbar-width: none; -ms-overflow-style: none;
             /* Keeps a swipe that starts on a slide from also scrolling the
                page up and down as it moves sideways. */
             overscroll-behavior-x: contain; }
.pbc-track::-webkit-scrollbar { display: none; }

.pbc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* The carousel owns the outer border; five stacked ones would draw a line
   between slides that are never seen together. */
.pbc-slide .pb { border-bottom: 0; height: 100%; }

/* The controls are lifted OUT of the page flow and laid over the top of the
   banner, so they cost no height at all. The banner already carries 46px of
   empty padding above its eyebrow; the pill lives in that.

   pointer-events are off on the full-width layer and back on for the pill
   itself, so the strip does not swallow clicks meant for the banner behind. */
.pbc-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
           display: flex; justify-content: center;
           pointer-events: none; }

/* "A little faded, showing the background": a translucent white pill, blurred
   so the dots stay readable whatever the banner behind happens to be. The blur
   is progressive enhancement - without support the 72% white still carries the
   contrast on its own. */
.pbc-bar-in { pointer-events: auto;
              display: flex; align-items: center; justify-content: center;
              gap: 14px; padding: 3px 14px;
              background: rgba(255, 255, 255, 0.72);
              -webkit-backdrop-filter: blur(10px);
              backdrop-filter: blur(10px);
              /* Anchored to the bottom edge, so the open side and the rounded
                 corners are the ones facing INTO the banner. */
              border: 1px solid rgba(255, 255, 255, 0.9); border-bottom: 0;
              border-radius: 16px 16px 0 0;
              box-shadow: 0 -2px 10px rgba(16, 32, 74, 0.06); }

.pbc-dots { display: flex; align-items: center; gap: 6px; }
/* The visible mark is a 4px bar; the LINK is 38x34, because a 4px-high tap
   target on a phone is a link nobody can hit. */
.pbc-dot { display: flex; align-items: center; width: 38px; height: 34px;
           text-decoration: none; }
.pbc-dot::before { content: ""; display: block; width: 100%; height: 4px;
                   border-radius: 99px; background: var(--line);
                   transition: background 0.18s ease; }
.pbc-dot:hover::before { background: #b9c2d8; }
.pbc-dot.on::before { background: var(--blue); }
.pbc-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px;
                         border-radius: 6px; }

/* 32px, down from 38: the pill has to fit inside the banner's own 46px of top
   padding, and the arrows are the tallest thing in it. The dots are untouched
   at 34px - that is the tap target, and shrinking it to save 4px would be
   trading the phone experience for nothing. */
.pbc-arrow { display: none; align-items: center; justify-content: center;
             width: 32px; height: 32px; flex: 0 0 auto; padding: 0;
             background: #fff; border: 1px solid var(--line); border-radius: 50%;
             color: var(--navy); cursor: pointer;
             transition: border-color 0.18s ease, color 0.18s ease; }
.pbc-arrow:hover { border-color: var(--blue); color: var(--blue); }
.pbc-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* The icon is a right-pointing arrow; the previous button is the same one
   turned round, so there is one shape to maintain. */
.pbc-arrow[data-pbc-prev] svg { transform: rotate(180deg); }

/* Arrows from tablet up. On a phone the strip is swiped, and two more
   buttons in a 390px-wide bar crowd out the dots that say where you are. */
@media (min-width: 720px) {
  .pbc-arrow:not([hidden]) { display: inline-flex; }
}

/* Somebody who has asked for less motion gets no sliding and no
   auto-advance — site.js checks the same query before it starts a timer. */
@media (prefers-reduced-motion: reduce) {
  .pbc-track { scroll-behavior: auto; }
  .pbc-dot::before { transition: none; }
}

/* A page whose header is the banner does not also need a full section's worth
   of padding beneath it. The old top padding was clearing a title and a
   breadcrumb that are no longer there. */
.pb + .section,
.pbc + .section { padding-top: 38px; }
.pb + .section .blobs,
.pbc + .section .blobs { top: -140px; }

@media (max-width: 640px) {
  .pb + .section,
  .pbc + .section { padding-top: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The written pages — blog, knowledge base, customer stories, about, contact
   and the deals list. Everything the header promises that the catalogue
   cannot supply.
   ══════════════════════════════════════════════════════════════════════════ */

/* An honest empty section. Not a shrug — a heading that says what is missing
   and a route to a person who can answer anyway. */
.empty-state { text-align: center; max-width: 620px; margin: 0 auto; }
.empty-ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px;
            display: grid; place-items: center;
            background: rgba(28, 64, 242, 0.08); color: var(--blue); }
.empty-ic.tone-mint { background: rgba(56, 238, 176, 0.18); color: #0e9e73; }
.empty-state p { margin: 8px 0 0; }
.empty-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ── Article cards ──────────────────────────────────────────────────────── */
.art-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.art-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.art-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); max-width: 100%; }
.art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-img-none { display: grid; place-items: center; color: var(--line-2);
                background: linear-gradient(135deg, var(--tint), #eef3ff); }
.art-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.art-body h3 { font-family: var(--font-head); font-size: 1.06rem; font-weight: 800;
               color: var(--navy); margin: 0; line-height: 1.35; }
.art-body p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--body); }
.art-tag { align-self: flex-start; padding: 3px 10px; border-radius: var(--pill);
           background: rgba(28, 64, 242, 0.08); color: var(--blue);
           font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.art-meta { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; flex-wrap: wrap;
            font-size: 0.78rem; font-weight: 700; color: var(--muted); }

/* ── Knowledge base: grouped, not dated ─────────────────────────────────── */
.kb-groups { display: grid; gap: 34px; }
.kb-group > .h-card { margin: 0 0 12px; font-family: var(--font-head); color: var(--navy); }
.kb-list { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius);
           overflow: hidden; background: #fff; }
.kb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--navy); }
.kb-row:last-child { border-bottom: 0; }
.kb-row:hover { background: var(--tint); }
.kb-row b { display: block; font-size: 0.95rem; font-weight: 800; }
.kb-row:hover b { color: var(--blue); }
.kb-row small { display: block; margin-top: 3px; font-size: 0.83rem; color: var(--body); font-weight: 500; }
.kb-row svg { flex: none; color: var(--muted); }

/* ── One article ────────────────────────────────────────────────────────── */
/* FULL PAGE WIDTH, like every other page on the site. This was a centred
   760px reading column; beside a 1400px header and footer it read as a page
   that had not finished loading. Do not put a max-width back here. */
.article { width: 100%; }
.article-back { display: inline-block; margin-bottom: 16px; font-size: 0.86rem;
                font-weight: 800; color: var(--blue); }
.article-title { margin: 10px 0 0; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 26px;
                font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.article-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.article-img img { width: 100%; height: auto; display: block; }
.article .prose { font-size: 1rem; line-height: 1.75; }
.article .prose h2 { font-family: var(--font-head); font-size: 1.35rem; color: var(--navy);
                     margin: 30px 0 12px; }
.article .prose h3 { font-family: var(--font-head); font-size: 1.12rem; color: var(--navy);
                     margin: 24px 0 10px; }
.article .prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.article .prose table { display: block; overflow-x: auto; max-width: 100%; }
.article-more { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--line); }
.article-more > .h-card { margin: 0 0 18px; font-family: var(--font-head); color: var(--navy); }

/* ── About ──────────────────────────────────────────────────────────────── */
.about-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
              margin-bottom: 26px; }
.about-grid .h-card { margin: 14px 0 6px; font-family: var(--font-head); color: var(--navy); }
.about-grid p { margin: 0; font-size: 0.9rem; line-height: 1.65; }
.fcard-ic.tone-mint { background: rgba(56, 238, 176, 0.16); color: #0e9e73; }
.fcard-ic.tone-coral { background: rgba(255, 126, 93, 0.12); color: #e2593a; }
.about-facts .h-card { margin: 0 0 4px; font-family: var(--font-head); color: var(--navy); }
.fact-rows { display: grid; }
.fact-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px;
            padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.fact-row:last-child { border-bottom: 0; }
.fact-row > span { font-size: 0.82rem; font-weight: 800; color: var(--muted);
                   text-transform: uppercase; letter-spacing: 0.04em; }
.fact-row b { font-weight: 700; color: var(--navy); word-break: break-word; }
.fact-row a { color: var(--blue); font-weight: 700; word-break: break-word; }
.about-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 26px; align-items: start; }
.contact-side { display: grid; gap: 20px; }
.sent-state { text-align: center; padding: 14px 0; }
.sent-state .h-card { margin: 0 0 6px; font-family: var(--font-head); color: var(--navy); }
.sent-state p { margin: 0 0 20px; }

/* ── Deals ──────────────────────────────────────────────────────────────── */
.deal-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.deal { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 26px 24px 24px; }
.deal-flag { position: absolute; top: 16px; right: 16px; padding: 4px 11px; border-radius: var(--pill);
             background: var(--grad-warm); color: #fff; font-size: 0.7rem; font-weight: 800; }
.deal-cat { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
            color: var(--muted); }
.deal h3 { margin: 0; font-family: var(--font-head); font-size: 1.18rem; font-weight: 800;
           color: var(--navy); padding-right: 68px; }
.deal p { margin: 0; font-size: 0.87rem; line-height: 1.55; }
.deal-price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--navy);
              margin-top: 6px; }
.deal-price span { font-family: var(--font); font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.deal-was { font-size: 0.82rem; color: var(--body); font-weight: 600; }
.deal-was s { color: var(--muted); }
.deal-tick { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--body); }
.deal-more { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
             font-size: 0.86rem; font-weight: 800; color: var(--blue); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fact-row { grid-template-columns: 1fr; gap: 4px; }
  .art-grid, .deal-grid { grid-template-columns: 1fr; }
  .empty-cta .btn, .about-cta .btn { flex: 1 1 100%; }
  .kb-row { padding: 14px 16px; }
}

/* An unpriced section: how to ask, and who to ask. The banner above has
   already said what the section is, so this adds routes rather than words. */
.quote-strip { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 22px;
               align-items: start; }
.quote-strip > .card:first-child { text-align: center; }
.quote-strip .empty-ic { margin-bottom: 14px; }
.quote-strip .h-card { margin: 0 0 8px; font-family: var(--font-head); color: var(--navy); }
.quote-strip p { margin: 0 0 20px; font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 860px) {
  .quote-strip { grid-template-columns: 1fr; }
}

/* Why a hosting sign-up is asking for a postcode. Said once, above the
   address fields, rather than leaving the customer to guess — people abandon
   forms that ask for more than they can see a reason for. */
.auth-why {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 4px 0 16px; font-size: 0.8125rem; line-height: 1.55;
}
.auth-why svg { flex-shrink: 0; margin-top: 2px; }

/* Selects have to look like the inputs beside them. Without this they keep
   the browser's own chrome and the address block reads as a different form
   bolted onto the bottom of this one. */
select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23909099' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
select.input:disabled { opacity: 0.55; cursor: not-allowed; }

/* A domain line's name in the basket: shown, not offered.

   Deliberately NOT a disabled <input>. A greyed-out box reads as "this field
   is broken" or "fill something else in first" — it invites a click and gives
   nothing back. This reads as a settled fact, which is what it is: the name
   was checked against the registry and is free to register. */
.dom-fixed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(14, 158, 115, 0.07);
  border: 1px solid rgba(14, 158, 115, 0.22);
}
.dom-fixed > svg { flex-shrink: 0; color: #0e9e73; }
.dom-fixed > b {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.95rem; word-break: break-all; min-width: 0;
}
.dom-ok {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #0e9e73;
}
@media (max-width: 480px) {
  .dom-ok { margin-left: 0; }
}

/* The same block when no name has been chosen. Amber, not green: nothing has
   been confirmed here, and it needs an action rather than a reassurance. */
.dom-fixed.dom-missing {
  background: rgba(214, 158, 46, 0.09);
  border-color: rgba(214, 158, 46, 0.28);
}
.dom-fixed.dom-missing > svg { color: #b7791f; }
.dom-fixed.dom-missing > b   { font-family: inherit; font-weight: 600; }
.dom-fixed.dom-missing .dom-ok { color: #b7791f; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

/* The charged-currency note, beside a converted total. Small, but never
   grey-on-grey: it is the only figure on the page that is not an estimate. */
.charged-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0;
                padding: 9px 11px; background: #f8fafc; border: 1px solid var(--line);
                border-radius: 10px; font-size: 0.78rem; line-height: 1.55;
                color: var(--body); }
.charged-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--muted); }
.charged-note b { color: var(--navy); }

/* The control panel sign-in on the checkout line: two boxes side by side on a
   desktop, stacked on a phone. Its own rule rather than .resp-grid-2 because
   it sits inside a summary card whose gutters are already tight. */
.ck-panel-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .ck-panel-login { grid-template-columns: 1fr; gap: 0; }
}

/* Add-on selection on a basket line: the OS and the control panel a VPS is
   built with. Two columns on a desktop, stacked on a phone. */
.line-addons {
  /* ACROSS THE WHOLE LINE, like .line-domain above.

     .line is a "1fr auto" grid - the plan on the left, the term box and
     Remove on the right - so anything without this sits in the first column
     only and leaves the width of the term box empty down the right-hand side.
     That is exactly what it did: two half-width dropdowns in two-thirds of
     the card. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line, #e5e7eb);
}
/* PACK THE ROWS AT THE TOP.

   .field is itself a grid (label / control / hint) and these two sit side by
   side, so the shorter one is stretched to the height of the taller — and its
   auto-sized rows then share the spare space out between them. The result was
   a label 7px taller than the one beside it and a dropdown 7px lower, purely
   because the right-hand hint wrapped onto a second line.

   align-content: start keeps every row at its natural height and lets the
   spare space fall to the bottom, where nobody can see it. */
.line-addons .addon-field,
.ck-panel-login .field {
  margin-bottom: 0;
  align-content: start;
}

/* What the chosen add-ons add to the line. Spans both columns so it reads as
   a subtotal for the block rather than a third field. */
.addon-costs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.addon-cost {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--ink-2, #6b7280);
}
.addon-cost b { color: var(--ink, #111827); font-weight: 600; }

@media (max-width: 640px) {
  .line-addons { grid-template-columns: 1fr; gap: 0; }
}

/* ── Coupon box ────────────────────────────────────────────────────────────

   In theme.css, not site.css, because the basket and checkout that draw it
   are REACT pages and this file is the one the SPA bundles. A rule for these
   put in site.css would never reach them.

   Remember: a change here needs `npx vite build` in SpaceBarWeb/spa AND a
   restart of SpaceBarWeb, or /cart renders against a hashed asset that no
   longer exists. */
.cpn-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cpn-box label { display: block; font-size: 0.86rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }

.cpn-row { display: flex; gap: 8px; }
.cpn-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.cpn-row .btn { flex: none; white-space: nowrap; }

/* The server's verdict, under the box. Amber rather than red: a code that is
   simply not for this basket is not an error the customer made. */
.cpn-msg { margin: 9px 0 0; font-size: 0.83rem; line-height: 1.5; color: #a4650a; }
.cpn-signin { color: var(--blue); }

.cpn-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  background: rgba(56, 238, 176, 0.12);
  border: 1px solid rgba(14, 158, 115, 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.cpn-applied b { color: #0b7d5b; letter-spacing: 0.04em; }

/* The code beside its amount in the summary. Monospace-ish tracking so a code
   reads as a code and not as a word. */
.cpn-tag { letter-spacing: 0.06em; font-size: 0.82rem; color: var(--text); }

.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font: inherit; font-size: 0.84rem; text-decoration: underline;
}
.linkish:hover { color: var(--violet); }

@media (max-width: 640px) {
  .cpn-row { flex-wrap: wrap; }
  .cpn-row .btn { width: 100%; }
}