/* ==========================================================================
   Hostking theme — NameHero-pattern layout, on Hostking's own brand
   ==========================================================================
   Loaded after main.css and hk-hero.css. Restyles the existing markup rather
   than replacing it, so every page keeps its copy, its links and its schema.

   Colour: blue + orange + white, exactly as the reference uses. Orange is the
   page's primary action and nothing else; blue is the card-level action and
   the dark bands; the four template pastels are gone.

   Type: the Averta weight axis is repaired in main.css (Light was registered
   as 400, Regular as 500, so every `font-weight:400` rendered Light). Here the
   nine ad-hoc heading sizes collapse onto a five-step fluid scale with the
   tight leading the reference uses — its headings run about 1.1, this site
   shipped 1.5.
   ========================================================================== */

:root {
  --nh-navy:      #0B1B33;   /* headings */
  --nh-body:      #47566B;   /* body copy */
  --nh-muted:     #5A6878;   /* meta, captions  5.70 white / 5.42 on tint */
  --nh-blue:      #014CCC;   /* brand — card buttons, links, dark bands */
  --nh-blue-mid:  #01357F;
  --nh-blue-deep: #012358;
  --nh-orange:    #F26522;   /* primary action only */
  --nh-line:      #E3EAF4;
  --nh-surface:   #FFFFFF;
  --nh-surface-2: #F3F7FC;
  --nh-tint:      #E4F1FA;
  --nh-green:     #90BA3F;   /* logo green — "free"/included ticks */

  --nh-r:      8px;
  --nh-r-lg:  14px;
  --nh-sh:    0 1px 2px rgba(11,27,51,.04), 0 4px 12px rgba(11,27,51,.06);
  --nh-sh-2:  0 4px 8px rgba(11,27,51,.05), 0 14px 34px rgba(11,27,51,.10);

  --fs-h1: clamp(2.1rem,  1.30rem + 3.40vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.10vw, 2.65rem);
  --fs-h3: clamp(1.25rem, 1.10rem + 0.65vw, 1.60rem);
  --fs-h4: clamp(1.06rem, 1.00rem + 0.28vw, 1.20rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-xs:   0.8125rem;

  --pad-major: clamp(3.75rem, 5.5vw, 5.75rem);
  --pad-minor: clamp(2.5rem,  3.5vw, 3.75rem);
}

/* ---------- 1. Type ------------------------------------------------------ */

body { font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--nh-body); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--nh-navy); text-wrap: balance; }

.section-heading h2,
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.35; }
h5 { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }

p { color: var(--nh-body); }

.section-heading { max-width: 780px; margin-inline: auto; text-align: center; }
.section-heading p { color: var(--nh-muted); font-size: 1.0625rem; margin-top: 14px; }

/* ---------- 2. Sections and rhythm --------------------------------------- */

.section-gap { padding: var(--pad-major) 0; }
.section-gap.homepage-domain-registration,
.section-gap.closing-cta,
.section-gap.review-summary { padding: var(--pad-minor) 0; }

.sectionbg1 { background: var(--nh-surface) !important; }
.sectionbg2 { background: var(--nh-surface-2) !important; }
.sectionbg3 { background: var(--nh-surface) !important; }
.homepage-features.bg1 { background-color: var(--nh-surface); }
.homepage-features.bg2 { background-color: var(--nh-surface-2); }
.homepage-features.bg3 { background-color: var(--nh-surface); }

/* the dark band, as the reference uses for "Migrate Your Website For Free" */
.call-back {
  background-color: var(--nh-blue);
  background-blend-mode: luminosity;
}
.call-back h2, .call-back h3, .call-back h4 { color: #fff; }
.call-back p { color: rgba(255,255,255,.86); }

.closing-cta { background: var(--nh-surface-2); }

/* ---------- 3. Plan cards ------------------------------------------------ */

.plan-style-one {
  position: relative;
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-r-lg);
  box-shadow: var(--nh-sh);
  padding: 34px 26px 28px;
  height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.plan-style-one:hover {
  transform: translateY(-3px);
  box-shadow: var(--nh-sh-2);
  border-color: rgba(1,76,204,.28);
}

/* plan name + tagline */
.plan-style-one > h4 {
  font-size: 1.5rem; font-weight: 800; line-height: 1.2;
  text-align: center; color: var(--nh-navy); margin: 0 0 8px;
}
.plan-style-one > h4 + p {
  text-align: center; color: var(--nh-muted);
  font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 20px;
}

/* price */
.plan-style-one > h3 {
  text-align: center; color: var(--nh-navy);
  font-size: 2.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
}
.plan-style-one > h3 .durection {
  font-size: .95rem; font-weight: 600; color: var(--nh-muted);
  letter-spacing: 0; margin-left: 2px;
}
/* the short rule under the price, as the reference has */
.plan-style-one > h3 + p {
  text-align: center; color: var(--nh-muted);
  font-size: var(--fs-xs); line-height: 1.5; margin: 0 0 20px;
  padding-top: 16px; position: relative;
}
.plan-style-one > h3 + p::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--nh-blue);
}

/* card action — blue, as the reference uses on plan cards */
.plan-select-btn {
  display: block; width: 100%;
  background: var(--nh-blue); color: #fff;
  border: 0; border-radius: var(--nh-r);
  padding: 14px 18px;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  text-align: center; text-decoration: none;
  transition: background-color .18s ease;
}
.plan-select-btn:hover, .plan-select-btn:focus { background: #013FA6; color: #fff; }

.plan-money-back {
  font-size: var(--fs-xs) !important;
  color: var(--nh-muted) !important;
  text-align: center !important;
  margin: 10px 0 0 !important;
}

/* feature lists */
.plan-style-one h5 {
  margin: 24px 0 10px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nh-muted);
}
.plan-style-one ul { list-style: none; padding: 0; margin: 0; }
.plan-style-one ul li {
  position: relative; padding: 7px 0 7px 26px;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--nh-body);
}
.plan-style-one ul li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--nh-green);
  border-bottom: 2px solid var(--nh-green);
  transform: rotate(-45deg);
}
.plan-style-one ul + p { margin-top: auto; padding-top: 14px; }
.plan-style-one p[style] { color: var(--nh-muted) !important; }

/* main.css sets overflow:hidden on the card to clip the old rotated ribbon.
   The badge now sits above the top edge, so that clip cuts it in half. */
.plan-style-one,
.plan-featured .plan-style-one { overflow: visible; }

/* main.css draws a rotated ribbon via `content: attr(data-popular)`. On cards
   whose discount badge was retired there is no such attribute, so it rendered
   as an empty dark diagonal bar once the card stopped clipping. Suppress it
   wherever there is nothing to announce. */
.plan-style-one:not([data-popular])::before,
.plan-featured .plan-style-one:not([data-popular])::before {
  content: none !important;
  display: none !important;
}

/* "Most Popular" badge */
.plan-style-one[data-popular]::before {
  content: attr(data-popular);
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--nh-orange); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--nh-r);
  white-space: nowrap;
  width: auto; right: auto; rotate: none;
}
.plan-featured .plan-style-one {
  border-color: rgba(1,76,204,.35);
  box-shadow: var(--nh-sh-2);
}

/* ---------- 4. Feature blocks -------------------------------------------- */

.features-4, .features-3, .feature-box {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
  padding: 8px 12px;
}
.features-4 .icon, .features-3 .icon, .feature-box .icon {
  width: 68px; height: 68px; margin: 0 auto 18px;
  display: grid; place-items: center;
}
.features-4 .icon img, .features-3 .icon img, .feature-box .icon img {
  width: auto; max-height: 52px;
}
.features-4 h4, .features-3 h4, .feature-box h4 {
  font-size: 1.2rem; font-weight: 700; line-height: 1.3;
  color: var(--nh-navy); margin: 0 0 10px;
}
.features-4 p, .features-3 p, .feature-box p {
  color: var(--nh-muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0;
}
.features-4 a, .features-3 a, .feature-box a {
  color: var(--nh-blue); font-weight: 600; text-decoration: none;
}
.features-4 a:hover, .features-3 a:hover, .feature-box a:hover { text-decoration: underline; }

/* alternating image/text rows */
.homepage-features h4 { font-size: var(--fs-h3); font-weight: 800; margin-bottom: 14px; }
.homepage-features p  { color: var(--nh-muted); }
.homepage-features .next-link,
.next-link {
  color: var(--nh-blue); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.next-link:hover { text-decoration: underline; }

/* ---------- 5. FAQ ------------------------------------------------------- */

.faq { background: var(--nh-surface); }
.faq .accordion-item {
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-r);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq .accordion-button, .faq h3 { color: var(--nh-navy); font-weight: 700; }
.faq .accordion-body, .faq .accordion-body p { color: var(--nh-body); }

/* ---------- 6. Buttons --------------------------------------------------- */

/* orange is the page's primary action */
/* White on this orange measures 3.15, which passes only at WCAG's large-text
   threshold. Every primary button is therefore set at 19px/700 — at the 14px
   some of them inherited, white would fail outright. */
.btns.one {
  background-color: var(--nh-orange);
  color: #fff;
  border-radius: var(--nh-r);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.btns.one:hover, .btns.one:focus { background-color: #D9551A; color: #fff; }

/* Secondary button. The white-outline treatment only works on a dark ground,
   so it is scoped to the dark contexts; everywhere else it is a blue outline.
   Without this it rendered white-on-white and vanished. */
.btns.two {
  background: transparent;
  color: var(--nh-blue);
  border: 2px solid rgba(1,76,204,.45);
  border-radius: var(--nh-r);
  font-size: 1rem; font-weight: 700;
}
.btns.two:hover, .btns.two:focus { background: var(--nh-tint); color: var(--nh-blue); }

.banner .btns.two, .call-back .btns.two, .theme-footer .btns.two,
.banner-centered .btns.two {
  color: #fff; border-color: rgba(255,255,255,.65);
}
.banner .btns.two:hover, .call-back .btns.two:hover,
.theme-footer .btns.two:hover, .banner-centered .btns.two:hover {
  background: rgba(255,255,255,.12); color: #fff;
}

.link-btn { color: var(--nh-blue); font-weight: 700; }

/* ---------- 7. Footer ---------------------------------------------------- */

.theme-footer { background-color: var(--nh-blue-deep); }
.theme-footer h1, .theme-footer h2, .theme-footer h3,
.theme-footer h4, .theme-footer h5, .theme-footer h6 { color: #fff; font-weight: 700; }
.theme-footer p, .theme-footer li, .theme-footer a, .theme-footer span { color: #D6E1F2; }
.theme-footer a:hover { color: #fff; }
.theme-footer .footer-social .social-icon a {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border-radius: var(--nh-r);
}
.theme-footer .footer-social .social-icon a:hover { background: #fff; color: var(--nh-blue); }

/* ---------- 8. Odds and ends -------------------------------------------- */

.domain-names-tld .one-year-free { background-color: var(--nh-green); color: var(--nh-navy); }
.homepage-domain-search, .homepage-domain-registration { background: var(--nh-surface-2); }
.hk-guarantee-badge { color: var(--nh-muted); }
.section-timeline .vertical-timeline .timeline-items::before,
.section-timeline .vertical-timeline .timeline-circle::before {
  background-image: linear-gradient(0deg, var(--nh-blue), var(--nh-blue-mid));
}

:focus-visible { outline: 3px solid var(--nh-blue); outline-offset: 2px; border-radius: 3px; }
.banner :focus-visible, .theme-footer :focus-visible, .call-back :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .plan-style-one:hover { transform: none; }
}

/* this block carried its own 34px heading, the one size left off the scale */
div.ai-overview h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -.02em; }
div
/* ---------- 9. Remaining components brought onto the system -------------- */

/* the four pastel product cards become one considered card, as the reference */
.homepage-plan,
.homepage-plan.bg-green, .homepage-plan.bg-red,
.homepage-plan.bg-yellow, .homepage-plan.bg-orange {
  background-color: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-r-lg);
  box-shadow: var(--nh-sh);
  padding: 30px 24px 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.homepage-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--nh-sh-2);
  border-color: rgba(1,76,204,.28);
}
.homepage-plan .inner .icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: var(--nh-r); background: var(--nh-tint);
  display: flex; align-items: center; justify-content: center;
}
.homepage-plan .inner .icon img { width: auto; max-height: 32px; }
.homepage-plan .inner h4 {
  color: var(--nh-navy); font-size: var(--fs-h3); font-weight: 700;
  line-height: 1.25; text-align: center; margin-bottom: 10px;
}
.homepage-plan .inner p {
  color: var(--nh-muted); font: 400 var(--fs-sm)/1.55 var(--font-primary);
  text-align: center; margin: 0 0 18px;
}
.homepage-plan .inner h3 {
  color: var(--nh-navy); font: 800 2.25rem/1.05 var(--font-primary);
  text-align: center; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin: 0 0 14px;
}
.homepage-plan .inner h3 span.start-at {
  display: block; width: 100%; margin-bottom: 4px;
  color: var(--nh-muted); font: 500 var(--fs-xs)/1.4 var(--font-primary);
  letter-spacing: .09em; text-transform: uppercase;
}
.homepage-plan .inner h3 .currency-symbol {
  color: var(--nh-navy); font-size: .5em; font-weight: 700;
  vertical-align: baseline; position: relative; top: -.55em; margin-inline-end: 3px;
}
.homepage-plan .inner h3 .durection {
  display: block; margin-top: 4px; position: static;
  color: var(--nh-muted); font: 500 var(--fs-sm)/1.3 var(--font-primary); letter-spacing: 0;
}
.homepage-plan .inner .learn-more {
  color: var(--nh-blue); font-size: var(--fs-sm); font-weight: 700;
  text-align: center; text-decoration: none; margin-bottom: 0;
}
.homepage-plan:hover .inner .learn-more { text-decoration: underline; }

/* headings that sat outside the scale */
.banner .banner-heading h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.02em; }
.banner .banner-heading h3 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.5; }
.homepage-features h4, .homepage-features .col-12 h4 { font-size: var(--fs-h3); }
.logos h4    { font-size: var(--fs-h4); }
.contents h5 { font-size: var(--fs-h4); font-weight: 700; }
h5.fw-600    { font-size: 1rem; font-weight: 600; }

/* remaining off-palette surfaces */
.hk-guarantee-badge { background: var(--nh-tint); border-radius: var(--nh-r); }
.hk-choose          { background: var(--nh-surface-2); border-radius: var(--nh-r-lg); }

/* ---------- 10. Spacing corrections ------------------------------------- */

/* The Google-reviews embed is a third-party widget. It contributed a full
   section's padding whether or not it rendered, which on a slow or blocked
   load left a tall band of empty white between the hero and the plans.
   It now gets minor spacing, and collapses entirely when it renders nothing. */
.reviews-embed { padding-block: var(--pad-minor); }
.reviews-embed:not(:has(iframe, img, [class*="eapps"], [class*="elfsight"] > *)) {
  padding-block: 0;
  min-height: 0;
}

/* Two adjacent sections on the same ground doubled their padding into one
   large void. Where that happens, the seam is tightened. */
.section-gap + .section-gap:not([class*="sectionbg"]):not(.faq):not(.closing-cta) {
  padding-top: calc(var(--pad-major) * .55);
}

/* The hero clips to keep the flank artwork inside it; the scroll cue sat
   outside that box and was being cut off. */
.banner-centered .scroll-down-block {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 18px; top: auto;
  z-index: 2;
}

/* ---------- 11. Last headings brought onto the scale --------------------- */
/* These carried component rules more specific than the element selectors
   above, so they needed matching specificity to land. */
.domain-names-tld .contents h5,
.contents h5            { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em;
                          color: var(--nh-navy); }
.domain-names-tld .logos h4,
.logos h4               { font-size: var(--fs-h4); font-weight: 700; }
h5.fw-600               { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.homepage-plan .inner h4,
.homepage-features .col-12 h4,
.section-heading h3     { font-size: var(--fs-h3); }

/* ---------- 12. Final corrections --------------------------------------- */

/* The scroll cue carried a white decorative swoosh built for the old split
   hero. Centred, it reads as a stray white blob on the blue, and the hero
   already ends in a clear call to action. Removed. */
.banner-centered .scroll-down-block { display: none; }

/* Product cards in a row were ending up unequal (416/416/401/401) because the
   card did not fill its column. */
.row > [class*="col"] > .homepage-plan,
.row > [class*="col"] > a.homepage-plan { height: 100%; }
.homepage-plan { display: flex; flex-direction: column; }
.homepage-plan .inner { display: flex; flex-direction: column; flex: 1 1 auto; }
.homepage-plan .inner .learn-more { margin-top: auto; padding-top: 14px; }

/* this rule is 0,3,1 in main.css, so it needs matching weight to land */
.domain-names-tld .inner .contents h5 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--nh-navy);
}
.domain-names-tld .inner .logos h4 { font-size: var(--fs-h4); font-weight: 700; }

/* Rows of product cards carried Bootstrap's align-items-center, which sizes
   each column to its own content and centres it — so a card with a one-line
   name sat 7px lower than one whose name wrapped. Card rows stretch instead. */
.row:has(> [class*="col"] > .homepage-plan),
.row:has(> [class*="col"] .plan-style-one) { align-items: stretch !important; }
.row:has(> [class*="col"] > .homepage-plan) > [class*="col"],
.row:has(> [class*="col"] .plan-style-one) > [class*="col"] { display: flex; }
.row:has(> [class*="col"] > .homepage-plan) > [class*="col"] > .homepage-plan,
.row:has(> [class*="col"] .plan-style-one) > [class*="col"] > .plan-style-one { width: 100%; }

/* ---------- 13. Touch targets ------------------------------------------- *
 * Standalone controls are brought to the 44px minimum. Links sitting inside
 * a sentence are deliberately excluded — WCAG exempts inline links, and
 * padding them out would break the line spacing of the copy.               */
.support-items a,
.mt-2 > a[href*="trustpilot"],
.features-3 > a,
.submit-btn a,
.link-btn,
.next-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-mobiles .navbar-button,
.navbar-button {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-footer .footer-social .social-icon a { width: 44px; height: 44px; }
/* links inside the comparison table measured 21px tall, just under the 24px
   pointer-target minimum */
td a, th a { display: inline-block; min-height: 24px; padding-block: 2px; }

/* ==========================================================================
   14. NameHero section patterns
   ========================================================================== */

/* ---- the reviews card overlapping the hero ---------------------------- */
/* Only overlap when the card is the hero's immediate next sibling. Some pages
   (about-us) put a lifted feature row in between, and pulling the card up
   there buried it. */
.reviews-embed { position: relative; z-index: 3; }
.banner + .reviews-embed,
.banner-centered + .reviews-embed { margin-top: -74px; padding-top: 0; }
.reviews-embed > .container {
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-r-lg);
  box-shadow: var(--nh-sh-2);
  padding: 30px 28px;
}
.reviews-embed:not(:has(iframe, img, [class*="eapps"], [class*="elfsight"] > *)) {
  margin-top: 0 !important;
}
.reviews-embed:not(:has(iframe, img, [class*="eapps"], [class*="elfsight"] > *)) > .container {
  background: none; border: 0; box-shadow: none; padding: 0;
}
@media (max-width: 991px) {
  .banner + .reviews-embed,
  .banner-centered + .reviews-embed { margin-top: -46px; }
}

/* ---- the dark band, as the reference uses for free migration ----------- */
.band-dark {
  background: linear-gradient(168deg, #014CCC 0%, #01357F 52%, #012358 100%) !important;
}
.band-dark h1, .band-dark h2, .band-dark h3,
.band-dark h4, .band-dark h5, .band-dark h6 { color: #fff; }
.band-dark p, .band-dark li, .band-dark span { color: rgba(255,255,255,.88); }
.band-dark strong, .band-dark b { color: #fff; font-weight: 700; }
.band-dark a:not([class*="btns"]) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.band-dark .section-heading { text-align: left; margin-inline: 0; }
.band-dark ul li::marker { color: var(--nh-orange); }
.band-dark ul li::before { border-color: #fff !important; }
.band-dark .btns.one { background: var(--nh-orange); color: #fff; }
.band-dark .btns.two { color: #fff; border-color: rgba(255,255,255,.6); }

/* ---- struck standard price + saving, as the reference shows ------------ */
.plan-was {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 0 0 2px !important; text-align: center;
}
.plan-was s { color: var(--nh-muted); font-size: 1rem; font-weight: 500; }
/* The brand orange measures 3.15 on white, which fails for a 15px label.
   This is the same hue darkened until it clears 4.5 (5.18). */
.plan-save {
  color: #C2410C; font-size: .9375rem; font-weight: 800;
  letter-spacing: .01em;
}

/* ==========================================================================
   15. Weight and colour discipline
   ==========================================================================
   Display headings carry 800, section sub-heads 700, body 400 and emphasis
   700. Nothing else is allowed to go heavier — the template had 500 as its
   body weight and 900 in places, which is what made the type read uneven. */

body, p, li, td, dd { font-weight: 400; }
strong, b { font-weight: 700; }
h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 800; }
h3, .h3 { font-weight: 700; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; }
.fw-500 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.text-white-50 { color: rgba(255,255,255,.8) !important; }

/* one link colour on light grounds, one on dark */
main a:not([class*="btns"]):not(.plan-select-btn):not(.hero-secondary):not([class*="nav"]):not(.learn-more),
.section-gap a:not([class*="btns"]):not(.plan-select-btn):not(.hero-secondary):not([class*="nav"]):not(.learn-more) {
  color: var(--nh-blue);
  font-weight: 600;
  text-decoration: none;
}
main a:not([class*="btns"]):hover,
.section-gap a:not([class*="btns"]):hover { text-decoration: underline; }
/* The broad link rule above is specificity (0,5,2) and was overriding these,
   which put brand-blue links on the dark blue band — effectively invisible.
   Dark contexts win explicitly. */
.band-dark a:not([class*="btns"]):not(.plan-select-btn),
.banner a:not([class*="btns"]):not(.hero-secondary),
.call-back a:not([class*="btns"]),
.theme-footer a:not([class*="btns"]) {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.banner .btns, .band-dark .btns { text-decoration: none; }
.theme-footer a:not([class*="btns"]) { color: #D6E1F2 !important; text-decoration: none; }
.theme-footer a:not([class*="btns"]):hover { color: #fff !important; text-decoration: underline; }

/* Standalone links — a link that is the whole list item, or a contact link in
   a box — are real touch targets. Links sitting inside a sentence are left
   alone, since padding them would break the line rhythm of the copy. */
li > a:only-child,
.feature-box a,
.feature-box p.mb-0 a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.scroll-down-block .scroll-down-inner { min-width: 44px; }

/* ---------- 16. The lifted feature strip -------------------------------- *
 * `.banner-up > .container` carried margin-top:-70px so the strip floated
 * over the old hero. Against the centred hero it lands mid-boundary, leaving
 * the icons half in blue and half in white. It now sits fully below the hero
 * as a normal feature row, which is also how the reference lays this out.
 * The row also centred its columns, so boxes with different amounts of copy
 * sat at different heights.                                                */
.banner-up { position: relative; z-index: 1; }
.banner-up > .container { margin-top: 0; }
.banner-up { padding-block: var(--pad-minor) 0; }
/* Bootstrap's .align-items-center utility is declared !important, so matching
   it is the only way to make these columns stretch to equal height. */
.banner-up .row { align-items: stretch !important; }
.banner-up .row > [class*="col"] { display: flex; }
.banner-up .feature-box {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 8px 14px;
}
.banner-up .feature-box img {
  width: auto; max-height: 56px; margin-bottom: 16px;
}
.banner-up .feature-box h4 { margin: 0 0 10px; }
.banner-up .feature-box p  { margin: 0; color: var(--nh-muted); }

/* ==========================================================================
   17. Section polish
   ========================================================================== */

/* ---- the "Not sure where to start?" band ------------------------------- *
 * main.css sets background-color:#000 plus a black photo bar, which read as
 * a near-black noisy block against an otherwise blue-and-white page. The
 * reference uses a clean blue gradient for this band, so the photo goes and
 * the brand gradient carries it.                                            */
.call-back {
  background-color: rgb(1, 76, 204) !important;
  background-image: linear-gradient(150deg, #014CCC 0%, #01357F 55%, #012358 100%) !important;
  background-blend-mode: normal !important;
  border-radius: var(--nh-r-lg);
}
.call-back .inner { padding-block: clamp(48px, 6vw, 72px); }
.call-back h2 { color: #fff; }
.call-back p  { color: rgba(255,255,255,.88); max-width: 60ch; margin-inline: auto; }

/* ---- stop two tinted sections merging into one slab -------------------- *
 * The domain block and the closing CTA both sat on the off-white, so the
 * bottom of the homepage read as one large blue-grey area. They alternate. */
.section-gap.homepage-domain-registration,
.section-gap.homepage-domain-search { background: var(--nh-surface) !important; }
.section-gap.closing-cta            { background: var(--nh-surface-2) !important; }
.section-gap.faq                    { background: var(--nh-surface) !important; }

/* a hairline wherever two same-coloured sections still meet */
.section-gap + .section-gap { border-top: 1px solid transparent; }
.section-gap.closing-cta + .section-gap.faq { border-top: 1px solid var(--nh-line); }

/* ---- feature blocks: give the line icons something to sit in ----------- *
 * Bare thin-line icons on plain white read as unfinished at this size. A
 * soft tinted well anchors each one and gives the row a rhythm, without
 * turning every block into a card.                                          */
.features-4 .icon,
.features-3 .icon,
.feature-box .icon,
.free-ad-ons .icon {
  width: 74px; height: 74px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--nh-tint);
  display: flex; align-items: center; justify-content: center;
}
.features-4 .icon img,
.features-3 .icon img,
.feature-box .icon img,
.free-ad-ons .icon img { width: auto; max-height: 38px; margin: 0; }

.features-4 h4, .features-3 h4, .free-ad-ons h4 {
  font-size: 1.25rem; font-weight: 700; line-height: 1.3;
  color: var(--nh-navy); margin: 0 0 10px;
}
.features-4 p, .features-3 p, .free-ad-ons p {
  color: var(--nh-body); font-size: 1rem; line-height: 1.7; margin: 0;
}
.features-4, .features-3 { padding: 6px 16px; }

/* the left-aligned variants keep their alignment */
.free-ad-ons { text-align: center; }
.free-ad-ons .icon { margin-inline: auto; }

/* ---- alternate the section grounds ------------------------------------- *
 * Measured: wordpress-hosting ran 5,160px of unbroken white out of 6,696px,
 * the homepage 3,760px. Long uniform stretches are what made these pages
 * read as flat and washed out. Content sections now alternate white and the
 * off-white; the FAQ, closing CTA and dark bands keep their own grounds and
 * break the rhythm further.                                                 */
section.section-gap:nth-of-type(odd):not(.band-dark):not(.faq):not(.closing-cta):not(.reviews-embed) {
  background-color: var(--nh-surface) !important;
}
section.section-gap:nth-of-type(even):not(.band-dark):not(.faq):not(.closing-cta):not(.reviews-embed) {
  background-color: var(--nh-surface-2) !important;
}
/* the dark bands paint a gradient, so they must not be given a flat colour */
section.band-dark { background-color: transparent !important; }

/* a tinted section sitting directly on another tinted one still needs a seam */
section.section-gap + section.closing-cta { border-top: 1px solid var(--nh-line); }

/* ---------- 18. Header login button -------------------------------------
 * It was solid orange with dark ink. That passes contrast (4.95) but reads
 * heavy, and puts a second orange element in the header competing with the
 * page's primary CTA. White on that orange is not an option — 3.15, below
 * the 4.5 needed at nav text size. An outline on the blue header clears
 * 7.22 and matches the reference, whose nav button is also an outline. */
.nabbar-nav .mainmenu li a.login,
.header .mainmenu li a.login {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: var(--nh-r);
  padding: 8px 20px;
  font-weight: 700;
}
.nabbar-nav .mainmenu li a.login:hover,
.header .mainmenu li a.login:hover {
  background: #fff;
  color: var(--nh-blue);
  border-color: #fff;
}

/* ---------- 19. Per-feature icons in the plan cards -------------------
 * Every line used to carry the same green tick. Each now gets a mark
 * that matches what it describes - a drive for storage, a gauge for
 * transfer, an envelope for mail. Hand-drawn 24x24 SVG, inlined, so
 * there is no extra request and they stay sharp at any size.
 * Lines that match no rule keep the tick. */
.plan-style-one ul li[class*="f-"]::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 19px; height: 19px;
  border: 0; transform: none; border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat; background-position: center;
  background-size: 19px 19px;
}
.plan-style-one ul li[class*="f-"] { padding-left: 29px; }
.plan-style-one ul li.f-storage::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%228%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M4%206v6c0%201.7%203.6%203%208%203s8-1.3%208-3V6%22%2F%3E%3Cpath%20d%3D%22M4%2012v6c0%201.7%203.6%203%208%203s8-1.3%208-3v-6%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-transfer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2017a9%209%200%201%201%2017%200%22%2F%3E%3Cpath%20d%3D%22M12%2017l4.2-4.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-email::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-ssl::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2210.5%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010.5V7a4%204%200%200%201%208%200v3.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215.5%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-security::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6l7.5%203v6c0%204.6-3.1%208.5-7.5%209.8C7.6%2020.1%204.5%2016.2%204.5%2011.6v-6z%22%2F%3E%3Cpath%20d%3D%22M9%2011.6l2.2%202.2L15.4%209.6%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-website::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2.5%209h19%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226.5%22%20r%3D%22.9%22%20fill%3D%22%23014CCC%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-domain::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203c2.6%202.6%202.6%2015.4%200%2018-2.6-2.6-2.6-15.4%200-18z%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-install::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%208h18%22%2F%3E%3Cpath%20d%3D%22M10.5%2011.5l6%206-2.3.6%201.4%202.6-1.6.9-1.4-2.6-1.6%201.6z%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-backup::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017.5a4%204%200%200%201%20.6-8%205.6%205.6%200%200%201%2010.6%201.6A3.5%203.5%200%200%201%2017.5%2017.5z%22%2F%3E%3Cpath%20d%3D%22M12%2011v6m-2.4-2.4L12%2017.2l2.4-2.6%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-builder::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.5%203.5l4%204L8%2020H4v-4z%22%2F%3E%3Cpath%20d%3D%22M14%206l4%204%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-calendar::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-migration::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h13l-3.2-3.2M20%2015H7l3.2%203.2%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-support::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2213%22%20width%3D%224.5%22%20height%3D%226%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2213%22%20width%3D%224.5%22%20height%3D%226%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M19.2%2019v.6a2.6%202.6%200%200%201-2.6%202.6H13%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-seo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M15.4%2015.4L21%2021%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-panel::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2012h16M4%2017h16%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2217%22%20r%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-cpu::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M10%203v4M14%203v4M10%2017v4M14%2017v4M3%2010h4M3%2014h4M17%2010h4M17%2014h4%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-analytics::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%22%2F%3E%3Cpath%20d%3D%22M6%2020v-5M11%2020v-9M16%2020v-6M21%2020v-11%22%2F%3E%3C%2Fsvg%3E"); }
.plan-style-one ul li.f-terminal::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23014CCC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224.5%22%20width%3D%2219%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%209.5l3%203-3%203M12.5%2015.5H17%22%2F%3E%3C%2Fsvg%3E"); }


/* ---------- 20. Homepage pricing tabs ---------------------------------
 * The homepage used to show four cards carrying only a name and a
 * from-price. These panes hold the real plan cards, copied from the
 * product pages, so the prices and cart links are the same ones the
 * product pages ship.
 *
 * Built as a real tablist: roles, aria-selected, roving tabindex and
 * arrow-key movement, so it works without a mouse. */
.hk-pricing .hk-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto var(--pad-minor);
  padding: 6px;
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.hk-pricing .hk-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--nh-navy);
  font: 600 16px/1 var(--font-primary);
  padding: 13px 22px;          /* 44px tall - comfortable touch target */
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s, color .25s;
  white-space: nowrap;
}
.hk-pricing .hk-tabs button:hover { background: var(--nh-surface-2); }
.hk-pricing .hk-tabs button[aria-selected="true"] {
  background: var(--nh-blue);
  color: #fff;               /* 8.6:1 on #014CCC */
}
.hk-pricing .hk-tabs button:focus-visible {
  outline: 3px solid var(--nh-orange);
  outline-offset: 2px;
}
.hk-pricing .hk-pane[hidden] { display: none; }
.hk-pricing .hk-pane-more {
  text-align: center;
  margin: var(--pad-minor) 0 0;
}
.hk-pricing .hk-pane-more a {
  color: var(--nh-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  /* A wrapping pill row looks broken; scroll it instead. */
  .hk-pricing .hk-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 14px;
    scrollbar-width: none;
  }
  .hk-pricing .hk-tabs::-webkit-scrollbar { display: none; }
  .hk-pricing .hk-tabs button { padding: 12px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-pricing .hk-tabs button { transition: none; }
}







/* ---------- 22. Contact page departments ------------------------------
 * .free-ad-ons is background:#fff on a white section, so these had no
 * edge at all; five centred blocks of unequal length then read as ragged
 * rather than as a grid. Give them a real card, start-aligned text and a
 * matching icon tile, three across on wide screens so five cards sit 3+2. */
.contact-depts .free-ad-ons {
  text-align: start;
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: 14px;
  padding: 26px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-depts .free-ad-ons .icon {
  margin: 0;
  width: 52px;
  height: 52px;
  background: var(--nh-tint);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.contact-depts .free-ad-ons .icon img { max-height: 30px; margin: 0; }
.contact-depts .free-ad-ons h4 { font-size: 19px; margin: 0; line-height: 1.35; }
.contact-depts .free-ad-ons p { margin: 0; font-size: 15px; }


/* ---------- 23. Portfolio showcase ------------------------------------
 * Screenshots in browser chrome, so they read as live sites rather than
 * as stock mockups.
 *
 * Two variants on purpose. Cards whose URL is known are anchors and get a
 * hover lift, a focus ring and the real domain in the address bar. The
 * rest are plain figures with an empty bar and no hover, so nothing
 * invites a click that would go nowhere.
 *
 * Four across on xl, three on md, two on mobile. At four across a card is
 * roughly 280px, so the chrome is scaled down to match - full-size dots on
 * a thumbnail read as clutter. */
.hk-work-grid { align-items: stretch; }
.hk-work {
  margin: 0;                      /* <figure> carries a default margin */
  height: 100%;
  background: var(--nh-surface);
  border: 1px solid var(--nh-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(1, 35, 88, .35);
}
a.hk-work-link {
  display: block;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
a.hk-work-link:hover, a.hk-work-link:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px -16px rgba(1, 35, 88, .34);
  border-color: var(--nh-blue);
}
a.hk-work-link:focus-visible {
  outline: 3px solid var(--nh-orange);
  outline-offset: 3px;
}
.hk-work-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  background: var(--nh-surface-2);
  border-bottom: 1px solid var(--nh-line);
}
.hk-work-bar i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C9D6E5; flex: none;
}
.hk-work-bar i:first-child  { background: #F0A8A8; }
.hk-work-bar i:nth-child(2) { background: #F3CE8E; }
.hk-work-bar i:nth-child(3) { background: #A9D08A; }
.hk-work-bar em {
  flex: 1;
  height: 12px;
  background: var(--nh-surface);
  border-radius: 999px;
  margin-inline-start: 5px;
  /* the linked cards put their real domain here */
  font-style: normal;
  font-size: 10px;
  line-height: 12px;
  color: var(--nh-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hk-work img {
  width: 100%;
  height: auto;
  display: block;
  /* Shots differ slightly in aspect; a fixed ratio keeps the grid even
     and crops from the top, which is where the design actually is. */
  aspect-ratio: 1200 / 560;
  object-fit: cover;
  object-position: top center;
}
@media (prefers-reduced-motion: reduce) {
  a.hk-work-link { transition: none; }
  a.hk-work-link:hover, a.hk-work-link:focus-visible { transform: none; }
}
@media (max-width: 575px) {
  /* two across on a phone leaves no room to read a domain; keep the pill */
  .hk-work-bar em { font-size: 0; }
}


/* ---------- 24. Plan card alignment -----------------------------------
 * The description is free text, so a three-line one dropped the price and
 * the Buy Now button below its two-line neighbours. Reserve three lines
 * from the breakpoint where cards sit side by side. This is a floor, not
 * a cap: rows of uniformly long descriptions still align naturally. */
.plan-style-one {
  display: flex;
  flex-direction: column;
}
.plan-style-one > h4 + p { margin-bottom: .75rem; }


/* ---------- 25. Plan feature list details -----------------------------
 * A link inside a feature list was rendering blue and bold beside plain
 * siblings, so one line shouted. It still works as a link - underline on
 * hover, keyboard focus visible - but it now reads as part of the list. */
.plan-style-one ul li a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(1, 76, 204, .35);
}
.plan-style-one ul li a:hover,
.plan-style-one ul li a:focus-visible {
  color: var(--nh-blue);
  border-bottom-color: var(--nh-blue);
}
.plan-style-one ul li a:focus-visible {
  outline: 2px solid var(--nh-orange);
  outline-offset: 2px;
}
/* Items that matched no keyword keep the default marker, but not the
   orange-tinted disc main.css gives it - that clashed with the drawn
   icons beside it. */
.plan-style-one ul li:not([class*="f-"])::before {
  background: transparent;
  color: var(--nh-green);
}


/* ---------- 26. Standalone domain CTA ---------------------------------
 * .submit-btn is width:200px because it was built to sit beside a 650px
 * search input. Where the button now stands alone, that squeezed a long
 * label onto four lines. Let it size to its content instead. */
.submit-btn.hk-cta-auto {
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-block: 1.75rem .5rem;
}
.submit-btn.hk-cta-auto .btns.one {
  width: auto;
  white-space: normal;
  text-align: center;
}
@media (min-width: 576px) {
  .submit-btn.hk-cta-auto .btns.one { white-space: nowrap; }
}


/* ---------- 27. Plan card row alignment -------------------------------
 * The feature link was rendering blue and bold beside plain siblings.
 * hk-theme's generic section-link rule carries five :not() clauses, so it
 * outranks a plain descendant selector; matching that shape wins it back
 * without !important. */
.plan-style-one ul li a:not([class*="btns"]):not(.plan-select-btn):not(.hero-secondary):not([class*="nav"]):not(.learn-more) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(1, 76, 204, .35);
}
.plan-style-one ul li a:not([class*="btns"]):not(.plan-select-btn):not(.hero-secondary):not([class*="nav"]):not(.learn-more):hover,
.plan-style-one ul li a:not([class*="btns"]):not(.plan-select-btn):not(.hero-secondary):not([class*="nav"]):not(.learn-more):focus-visible {
  color: var(--nh-blue);
  border-bottom-color: var(--nh-blue);
}
/* JS measures and sets these; the declarations just stop the values
   inheriting anything odd before it runs. */
.plan-style-one > h4 + p,
.plan-style-one > ul { transition: none; }


/* ---------- 28. Header height -----------------------------------------
 * 149px was 20.7% of a 1280x720 viewport before any content appeared, and
 * the logo rendered at its full natural 280x64 because three competing
 * .navbar-brand img rules in main.css cancelled out.
 *
 * The selector below deliberately mirrors main.css's own
 * `.header .main-header .navbar-brand img` - anything shorter loses on
 * specificity, which is exactly how the first attempt failed. */
.header .main-header .navbar-brand img,
.header.is-stuck .main-header .navbar-brand img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 200px;
  top: 0;
}
/* main.css sets `.nabbar-nav .mainmenu a { padding: 24px 0 }` - 48px of
 * padding around a 27px line was most of the header. Mirror that selector
 * chain so this actually wins. */
/* main.css declares this inside @media (min-width: 1200px), so the override
 * is scoped the same way rather than left unconditioned. */
@media (min-width: 1200px) {
  .header .nabbar-nav .mainmenu li a { padding-block: 13px; }
  .header .nabbar-nav .mainmenu li a.login { padding-block: 9px; }
}
@media (max-width: 1199px) {
  .header .nabbar-nav .mainmenu li a.login { padding-block: 8px; }
}
.header .main-header { padding-block: 6px; }
/* The utility bar is 44px because of the touch-target minimum set in
 * section 11. WCAG 2.5.8 requires 24x24 at AA; 44x44 is the AAA/touch
 * figure. Keep 44 for touch, relax to 30 where there is a mouse. */
@media (pointer: fine) {
  .header .top-bar .support-items a { min-height: 30px; }
}
.header > .container.top-bar { padding-block: 0; }
.header { padding: 6px 0; }
.header.is-stuck { padding: 2px 0; }
@media (max-width: 991px) {
  .header .main-header .navbar-brand img { max-height: 38px; }
}


/* ---------- 29. Mega-menu panel height (real fix) ---------------------
 * .submenu has overflow:hidden and an absolutely positioned <article>, so
 * the columns cannot grow the panel - anything past min-height is cut.
 * Measured: the Hosting column needs 370px because South Africa carries
 * ASP.NET and Windows, which the other markets do not.
 *
 * main.css sets this through
 *   .nabbar-nav .mainmenu .has-droupdown.megamenu .submenu   -> (0,4,0)
 * so a bare `.submenu` rule is powerless. Match the chain. */
.nabbar-nav .mainmenu .has-droupdown.megamenu .submenu {
  min-height: 404px;
}
.nabbar-nav .mainmenu .has-droupdown.megamenu .submenu .tabmain section article {
  padding-bottom: 18px;
}
/* the blue rail behind the tab labels has to match, or it stops short */
.nabbar-nav .mainmenu .has-droupdown.megamenu .submenu .tabmain section article::after {
  min-height: 404px;
}


/* ---------- 30. Domain TLD grid ---------------------------------------
 * The cards carried `box-shadow: 0 0 0 1px rgba(0,0,0,.2)` - a grey ring
 * that belongs to no palette on the site - and lifted 10px on hover where
 * every other card here lifts 6.
 *
 * The logo box is fixed at 50px but the marks inside vary in aspect, so
 * some read far larger than others. Constraining width as well as height
 * evens them out optically. */
.domain-names-tld {
  box-shadow: none;
  border: 1px solid var(--nh-line);
  border-radius: 14px;
  background: var(--nh-surface);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.domain-names-tld:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -16px rgba(1, 35, 88, .3);
  border-color: var(--nh-blue);
}
.domain-names-tld .inner { padding: 22px 20px; }
.domain-names-tld .inner .logos {
  height: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nh-line);
  margin-bottom: 4px;
}
.domain-names-tld .inner .logos img { max-width: 122px; max-height: 26px; }
.domain-names-tld .inner .contents h5 { color: var(--nh-blue); }
.domain-names-tld .inner .contents p { font-size: 14px; color: var(--nh-muted); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .domain-names-tld { transition: none; }
  .domain-names-tld:hover { transform: none; }
}

/* the local extension, lifted out of the grid */
.tld-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
  margin-bottom: 34px;
  border-radius: 16px;
  border: 1px solid var(--nh-line);
  background: linear-gradient(120deg, var(--nh-tint) 0%, var(--nh-surface-2) 100%);
}
.tld-featured-mark {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 132px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--nh-blue);
}
.tld-featured-mark span { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.tld-featured-body { flex: 1 1 280px; }
.tld-featured-body h3 { font-size: 20px; font-weight: 700; color: var(--nh-navy); margin: 0 0 6px; }
.tld-featured-body p { font-size: 15px; color: var(--nh-body); margin: 0; }
.tld-featured-body strong { color: var(--nh-navy); }
.tld-featured-price { flex: none; text-align: center; }
.tld-featured-amount { font-size: 32px; font-weight: 800; color: var(--nh-navy); }
.tld-featured-per { font-size: 15px; color: var(--nh-muted); }
.tld-featured-price .btns.one { display: block; margin-top: 10px; white-space: nowrap; }
@media (max-width: 575px) {
  .tld-featured { padding: 22px; gap: 18px; }
  .tld-featured-price { width: 100%; }
}


/* ---------- 31. AI overview FAQ panel ---------------------------------
 * Present on ~200 pages, but only six of the eleven sites carry rules for
 * it in main.css - the other five rendered it unstyled. Defined here so
 * every market matches, with specificity high enough to beat main.css
 * where it does exist. */
div.ai-overview {
  padding: 30px 32px;
  border: 1px solid var(--nh-line);
  border-left: 4px solid var(--nh-blue);
  border-radius: var(--nh-r-lg);
  background: var(--nh-surface-2);
  line-height: 1.65;
}
div.ai-overview h3 {
  position: relative;
  margin: 24px 0 8px;
  padding-inline-start: 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nh-navy);
}
div.ai-overview > h3:first-child { margin-top: 0; }
/* marker drawn in CSS so a missing icon font cannot blank it */
div.ai-overview h3::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--nh-orange);
  transform: rotate(45deg);
}
div.ai-overview p {
  margin: 0 0 4px;
  padding-inline-start: 26px;
  font-size: 15.5px;
  color: var(--nh-body);
}
div.ai-overview p:last-child { margin-bottom: 0; }
/* a hairline between question groups, but not above the first or below the last */
div.ai-overview h3 + p + h3 { padding-top: 22px; }
div.ai-overview h3 + p + h3::after {
  content: "";
  position: absolute;
  inset-inline: -32px 0;
  top: 0;
  border-top: 1px solid var(--nh-line);
}
@media (max-width: 575px) {
  div.ai-overview { padding: 22px 20px; }
  div.ai-overview h3 { font-size: 17px; padding-inline-start: 22px; }
  div.ai-overview p { padding-inline-start: 22px; font-size: 15px; }
  div.ai-overview h3 + p + h3::after { inset-inline: -20px 0; }
}