/* ═══════════════════════════════════════════════════════════════════════════
   SiteBoma — the public site's own look (2026)

   What sets SiteBoma apart from the old Hostiko pages: a floating glass header,
   a dark hero with the product in it, bento feature tiles, rounded cards, pill
   buttons, and a new footer. Loaded after style.css on the public pages only
   (includes/header.php); the client area and admin keep their own styles.

   Colours are the palette roles from style.css (--sb-*), nothing else. The
   hero, the stats band, the M-Pesa band, the closing call to action and the
   footer are dark in both themes; everything else follows the theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Plus Jakarta Sans for headings (OFL, self-hosted: assets/fonts/plus-jakarta-sans-OFL.txt).
   Body text stays Inter. Same character ranges as Inter; the latin file is preloaded. ── */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sb-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sb-r-xl: 28px;
    --sb-r-lg: 20px;
    --sb-r-md: 14px;
    --sb-r-sm: 10px;
    --sb-lift: 0 1px 2px rgba(var(--sb-ink-rgb), .05), 0 14px 34px -18px rgba(var(--sb-ink-rgb), .28);
    --sb-lift-hover: 0 1px 2px rgba(var(--sb-ink-rgb), .06), 0 26px 52px -22px rgba(var(--sb-ink-rgb), .38);
    --sb-hairline: rgba(248, 250, 252, .12);          /* lines on the dark bands */
    /* Text on the dark bands, raised on 2026-10-26 (were .76 and .60): the colour review measured the
       small labels at APCA Lc 49, and they are the first thing to fade on a phone in daylight. */
    --sb-on-band-2: rgba(248, 250, 252, .86);         /* body text on the dark bands */
    --sb-on-band-3: rgba(248, 250, 252, .76);
    --sb-header-h: 81px;                              /* the floating header: the hero slides under it */
    /* Indigo with a visible job: links, numbers and marks. The brand indigo on light surfaces; on dark
       ones indigo mixed with off-white (#969CC1, 6.4:1 on slate), because #1E2A78 itself is 1.4:1. */
    --sb-indigo-tint: var(--sb-indigo);
    --sb-indigo-tint-dark: #969CC1;
    /* Focus rings: indigo on light surfaces (amber there is 2:1, under the 3:1 WCAG asks), amber on dark */
    --sb-focus: var(--sb-indigo);
}
@media (max-width: 575.98px) { :root { --sb-header-h: 71px; } }
.hp-hero, .hero, .hk-bc, .hp-close, .sb-footer, .sb-post-cta, .hk-auth-wrap { --sb-focus: var(--sb-amber); }
[data-theme="dark"] {
    --sb-lift: 0 1px 0 rgba(248, 250, 252, .04) inset, 0 18px 40px -24px rgba(var(--sb-ink-rgb), .9);
    --sb-lift-hover: 0 1px 0 rgba(248, 250, 252, .06) inset, 0 28px 60px -26px rgba(var(--sb-ink-rgb), 1);
    /* Public pages only (this file): the colour review of 2026-10-26.
       - secondary text was .68 / .50: APCA Lc 59 / 38, too faint for small type and for daylight;
       - borders were .12 (1.4:1): cards and fields flattened into the page;
       - panels were off-white tints over slate, which came out grey: now indigo-derived, so dark
         surfaces carry the brand (indigo at 45% and 60% over slate);
       - links were amber, which also meant buttons, badges, numbers and warnings: amber is now kept
         for the main action, the "most popular" badge and the logo, and links are the indigo tint,
         underlined in running text. */
    --sb-muted: rgba(248, 250, 252, .80);
    --sb-faint: rgba(248, 250, 252, .68);
    --sb-border: rgba(248, 250, 252, .18);
    --sb-surface-2: #16204D;
    --sb-surface-3: #182259;
    --sb-link: var(--sb-indigo-tint-dark);
    --sb-indigo-tint: var(--sb-indigo-tint-dark);
    --sb-focus: var(--sb-amber);
}
/* Links inside running text only: menus, breadcrumbs and link rows keep their own look */
[data-theme="dark"] :is(p, .hp-faq__a, .accordion-body, .hp-after) > a:not(.btn):not(.sb-btn) { text-decoration: underline; text-underline-offset: 3px; }
/* Fields: a 3:1 edge in both themes (WCAG 1.4.11); it was 1.4:1 in the dark theme */
.form-control, .form-select { border-color: rgba(var(--sb-fg-rgb, 15, 23, 42), .38); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: rgba(248, 250, 252, .38); }
/* Selected states in the dark theme: an off-white fill, not indigo on navy */
[data-theme="dark"] .nav-pills .nav-link.active { background: var(--sb-paper) !important; color: var(--sb-ink) !important; }
[data-theme="dark"] .form-switch .form-check-input:checked { background-color: #5F68A0; border-color: var(--sb-indigo-tint-dark); }
/* Secondary buttons in the dark theme: indigo fills and outlines get an edge you can see */
[data-theme="dark"] :is(.btn-primary, .btn-outline-primary) { --bs-btn-border-color: rgba(248, 250, 252, .42); }
/* Phones: the back-to-top arrow covered prices and text, and a phone scrolls to the top by itself */
@media (max-width: 575.98px) { .hk-top { display: none !important; } }

/* ── Type ───────────────────────────────────────────────────────────────── */
/* Headings and big numbers in Plus Jakarta Sans. style.css puts Inter on every element; this
   file loads after it, so the same selectors win. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .section-heading,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.price-val {
    font-family: var(--sb-font-display);
}
/* Jakarta is wider than Inter: a title holding an address such as info@yourbusiness.co.ke no
   longer fits a phone, so a word too long for the line may break (only then). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .section-heading { overflow-wrap: break-word; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.sb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .78rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
    font-weight: 700; font-size: .96rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sb-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sb-btn:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
.sb-btn--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.sb-btn--sm { padding: .5rem 1rem; font-size: .88rem; }
/* Flat: the amber glow under every main button was part of the look the owner rejected */
.sb-btn--accent { background: var(--sb-amber); color: var(--sb-ink); }
.sb-btn--accent:hover { color: var(--sb-ink); background: var(--sb-amber); }
.sb-btn--primary { background: var(--sb-indigo); color: var(--sb-paper); }
.sb-btn--primary:hover { background: var(--sb-ink); color: var(--sb-paper); }
[data-theme="dark"] .sb-btn--primary { border-color: rgba(248, 250, 252, .22); }
[data-theme="dark"] .sb-btn--primary:hover { background: var(--sb-paper); color: var(--sb-ink); }
.sb-btn--ghost { background: transparent; color: var(--sb-text); border-color: var(--sb-border-strong); }
.sb-btn--ghost:hover { color: var(--sb-text); border-color: var(--sb-text); }
/* on the dark bands */
.sb-on-band .sb-btn--ghost, .sb-btn--ghost.sb-btn--band { color: var(--sb-paper); border-color: rgba(248, 250, 252, .3); }
.sb-on-band .sb-btn--ghost:hover, .sb-btn--ghost.sb-btn--band:hover { color: var(--sb-paper); border-color: var(--sb-paper); background: rgba(248, 250, 252, .06); }

/* ── Header: a solid indigo bar, the same in both themes (2026-10-26) ──────────
   The colour review found the brand indigo all but gone on the dark default (1.4:1 against the
   slate), so the site read as black and orange, and the see-through glass let page text show through
   it on phones. The bar is now the brand colour, solid, with the logo's on-dark colours (header.php),
   which also ends the two oranges side by side in the light theme (logo #B45309 next to the button). */
.sb-header { position: sticky; top: 0; z-index: 1030; padding-top: 10px; pointer-events: none; --sb-focus: var(--sb-amber); }
.sb-header .sb-nav {
    pointer-events: auto; position: relative;
    padding: .45rem .5rem .45rem 1rem;
    background: var(--sb-indigo);
    border: 1px solid rgba(248, 250, 252, .14); border-radius: 18px; box-shadow: var(--sb-lift);
}
.sb-header .navbar-brand { padding: 0; margin-right: 1rem; }   /* the logo keeps its 54px (44px on phones) from style.css */
.sb-header .navbar-brand .sb-lg { filter: drop-shadow(0 0 16px rgba(245, 158, 11, .30)); }   /* the owner's "make it pop", now in both themes */
.sb-header .sb-nav .nav-link {
    color: rgba(248, 250, 252, .88) !important; font-weight: 600; font-size: .93rem;
    padding: .5rem .75rem !important; border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.sb-header .sb-nav .nav-link:hover, .sb-header .sb-nav .nav-link:focus-visible,
.sb-header .sb-nav .nav-link.show { color: var(--sb-paper) !important; background: rgba(248, 250, 252, .10); }
.sb-header .sb-nav .nav-link.active { color: var(--sb-paper) !important; background: rgba(248, 250, 252, .14); }
.sb-header .sb-nav .nav-link .hk-new { color: var(--sb-amber); }   /* amber on indigo, 5.9:1 */
.sb-header .sb-nav .dropdown-toggle::after { border: 0; content: "\F282"; font-family: "bootstrap-icons"; font-size: .65rem; vertical-align: .05em; margin-left: .35rem; opacity: .7; }
.sb-header .sb-nav .dropdown-menu {
    border-radius: 16px; padding: .5rem; margin-top: .55rem !important;
    background: var(--sb-surface); border: 1px solid var(--sb-border); box-shadow: var(--sb-lift-hover);
}
.sb-header .sb-nav .dropdown-item { border-radius: 10px; padding: .5rem .75rem; font-weight: 500; font-size: .92rem; color: var(--sb-text-2); }
.sb-header .sb-nav .dropdown-item:hover, .sb-header .sb-nav .dropdown-item:focus { background: var(--sb-surface-3); color: var(--sb-text); }
.sb-header .sb-nav .dropdown-item i { color: var(--sb-link) !important; }
.sb-header .sb-nav .dropdown-header { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-faint); padding: .6rem .75rem .3rem; }
.sb-header .sb-nav .dropdown-divider { border-color: var(--sb-border); margin: .35rem .25rem; }
/* The full menu needs the width of a large screen next to the 54px logo: below 1200px it folds
   into the menu button (navbar-expand-xl in includes/header.php) */
@media (min-width: 1200px) {
    .sb-header .sb-nav .sb-menu-2col { column-count: 2; column-gap: .25rem; min-width: 540px; }
    .sb-header .sb-nav .sb-menu-2col > li { break-inside: avoid; }
    .sb-header .sb-nav .sb-menu-2col .dropdown-divider { display: none; }
}
.sb-nav__actions { display: flex; align-items: center; gap: .5rem; }
/* The currency switch on the indigo bar: the chosen one is an off-white fill (a selected state at
   1.3:1, indigo on navy, failed WCAG 1.4.11) */
.sb-header .hk-cur-switch { font-size: .74rem; background: rgba(15, 23, 42, .28) !important; border-color: rgba(248, 250, 252, .22) !important; }
.sb-header .hk-cur-switch button { padding: .3rem .55rem; color: rgba(248, 250, 252, .88) !important; }
.sb-header .hk-cur-switch button:not(.active):hover { background: rgba(248, 250, 252, .10) !important; color: var(--sb-paper) !important; }
.sb-header .hk-cur-switch button.active { background: var(--sb-paper) !important; color: var(--sb-ink) !important; }
.sb-header .sb-nav .hk-theme-toggle {
    width: 38px; height: 38px; border-radius: 999px; display: inline-grid; place-items: center;
    border: 1px solid rgba(248, 250, 252, .28); background: transparent; color: rgba(248, 250, 252, .9); padding: 0;
}
.sb-header .sb-nav .hk-theme-toggle:hover { color: var(--sb-paper); background: rgba(248, 250, 252, .10); }
.sb-header .sb-nav .hk-theme-toggle .hk-theme-icon-dark { color: var(--sb-amber); }
/* On phones the light/dark switch sits next to the menu button, not inside the menu */
.sb-header .sb-nav .sb-nav__theme-m { margin-left: auto; margin-right: .5rem; }
.sb-nav__login { color: rgba(248, 250, 252, .88); font-weight: 600; font-size: .93rem; text-decoration: none; padding: .5rem .7rem; border-radius: 999px; }
.sb-nav__login:hover { color: var(--sb-paper); background: rgba(248, 250, 252, .10); }
.sb-header .navbar-toggler { border: 1px solid rgba(248, 250, 252, .28); border-radius: 12px; padding: .45rem .6rem; color: var(--sb-paper); }
.sb-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, .55); }
.sb-burger { display: block; width: 20px; height: 14px; position: relative; }
.sb-burger::before, .sb-burger::after, .sb-burger span { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; }
.sb-burger::before { top: 0; } .sb-burger span { top: 6px; } .sb-burger::after { bottom: 0; }
@media (max-width: 1199.98px) {
    .sb-header .navbar-collapse { padding: .75rem 0 .35rem; max-height: calc(100vh - 110px); overflow-y: auto; }
    .sb-header .sb-nav .navbar-nav { gap: .1rem; }
    /* The open menu sits on the indigo bar in both themes, and so do its sub-menus */
    .sb-header .sb-nav .dropdown-menu { box-shadow: none; margin: .25rem 0 .5rem !important; background: rgba(15, 23, 42, .28); border-color: rgba(248, 250, 252, .12); }
    .sb-header .sb-nav .dropdown-item, .sb-header .sb-nav .dropdown-item.text-primary { color: rgba(248, 250, 252, .88) !important; }
    .sb-header .sb-nav .dropdown-item:hover, .sb-header .sb-nav .dropdown-item:focus { background: rgba(248, 250, 252, .10); color: var(--sb-paper) !important; }
    .sb-header .sb-nav .dropdown-item i, .sb-header .sb-nav .dropdown-item i.text-primary { color: rgba(248, 250, 252, .7) !important; }
    .sb-header .sb-nav .dropdown-header { color: rgba(248, 250, 252, .66); }
    .sb-header .sb-nav .dropdown-divider { border-color: rgba(248, 250, 252, .14); }
    .sb-header .sb-nav .dropdown-item .hk-new { color: var(--sb-amber); }
    .sb-nav__actions { flex-wrap: wrap; padding: .75rem .25rem .25rem; border-top: 1px solid rgba(248, 250, 252, .14); margin-top: .5rem; }
    .sb-nav__actions .sb-btn { flex: 1 1 auto; }
    .sb-nav__actions .hk-theme-toggle { display: none !important; }   /* it sits next to the menu button */
}

/* ── Homepage (rebuilt 2026-09-28) ──────────────────────────────────────────
   Engineered rather than decorated. The owner found the first version looked
   machine-made (glows, a mock dashboard, icon grids, every section the same
   eyebrow-title-cards pattern). This one shows real prices, specs and uptime
   from the database and the status monitor, puts tabular content in tables,
   keeps a strict left-aligned grid with hairline rules and numbered sections,
   sets technical facts in monospace, and uses amber only on the main actions. */
.hp-mono, .hp-kicker, .hp-search__label, .hp-tldrow, .hp-facts, .hp-sechead__n, .hp-steps__n,
.hp-sheet__specs dd, .hp-sheet__alt, .hp-table td, .hp-plans__price small, .hp-plans__note,
.hp-tld thead th, .hp-index__title, .hp-search input {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Masthead: dark in both themes, a flat slate with no glow; it slides under the floating header */
.hp-hero {
    margin-top: calc(-1 * var(--sb-header-h));
    padding: calc(var(--sb-header-h) + clamp(2.6rem, 6vw, 4.6rem)) 0 0;
    background: var(--sb-ink); color: var(--sb-paper);
}
.hp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 991.98px) { .hp-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hp-kicker { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: 0 0 1.3rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-on-band-3); }
.hp-kicker span + span::before { content: "/"; margin-right: .8rem; color: rgba(248, 250, 252, .3); }
.hp-hero__title {
    font-size: clamp(2.3rem, 1.3rem + 3.6vw, 3.9rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04;
    color: var(--sb-paper); margin: 0 0 1.1rem; max-width: 18ch; text-wrap: balance;
}
.hp-hero__lede { font-size: clamp(1.02rem, .95rem + .4vw, 1.15rem); line-height: 1.6; color: var(--sb-on-band-2); max-width: 36rem; margin: 0 0 2.1rem; }

/* The domain search: a plain field and a button, not a glowing pill */
.hp-search { max-width: 38rem; margin: 0; }
.hp-search__label { display: block; margin-bottom: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-on-band-3); }
.hp-search__row {
    display: flex; overflow: hidden; border-radius: 12px;
    border: 1px solid rgba(248, 250, 252, .38); background: #141D41;   /* a 3:1 edge (it was 2.1:1) */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hp-search__row:focus-within { border-color: var(--sb-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.hp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sb-paper); padding: 1rem 1.1rem; font-size: 1.05rem; }
.hp-search input::placeholder { color: rgba(248, 250, 252, .6); }
.hp-search__btn { border: 0; background: var(--sb-amber); color: var(--sb-ink); font-weight: 800; font-size: .95rem; padding: 0 1.35rem; white-space: nowrap; transition: background-color .15s ease; }
.hp-search__btn:hover { background: var(--sb-paper); }
.hp-search__btn:focus-visible { outline: 3px solid var(--sb-paper); outline-offset: -4px; }
@media (max-width: 459.98px) {
    .hp-search__row { flex-direction: column; }
    .hp-search__btn { padding: .85rem 1rem; }
}
.hp-tldrow { list-style: none; display: flex; flex-wrap: wrap; row-gap: .45rem; margin: 1rem 0 0; padding: 0; font-size: .85rem; }
.hp-tldrow li + li { border-left: 1px solid rgba(248, 250, 252, .16); }
.hp-tldrow a { display: inline-flex; gap: .5rem; padding: .1rem .85rem; color: var(--sb-on-band-2); text-decoration: none; }
.hp-tldrow li:first-child a { padding-left: 0; }
.hp-tldrow a:hover { color: var(--sb-paper); }
.hp-tldrow .hp-mono { color: var(--sb-paper); font-weight: 700; }
.hp-tldrow a.hp-tldrow__all { color: var(--sb-indigo-tint-dark); text-decoration: underline; text-underline-offset: 3px; }

/* A plan's spec sheet, switched with tabs; the numbers come from the plans table. Indigo card
   colours (it was an off-white tint over slate, which read as a grey box). */
.hp-sheet { border: 1px solid rgba(248, 250, 252, .16); border-radius: 14px; background: #141D41; padding: 1rem 1.2rem 1.25rem; }
.hp-sheet__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; padding: .25rem; margin-bottom: 1.2rem; border-radius: 10px; background: #182259; }
.hp-sheet__tabs button { border: 0; border-radius: 8px; background: transparent; color: var(--sb-on-band-2); font-weight: 700; font-size: .86rem; padding: .5rem .35rem; }
.hp-sheet__tabs button:hover { color: var(--sb-paper); }
.hp-sheet__tabs button[aria-selected="true"] { background: var(--sb-paper); color: var(--sb-ink); }
.hp-sheet__tabs button:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
.hp-sheet__price { display: flex; align-items: baseline; gap: .45rem; }
.hp-sheet__amount { font-family: var(--sb-font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--sb-paper); }
.hp-sheet__per { font-size: .9rem; color: var(--sb-on-band-3); }
.hp-sheet__alt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0 1rem; font-size: .8rem; color: var(--sb-on-band-3); }
.hp-sheet__tag, .hp-plans__tag {
    font-family: var(--sb-font-display); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sb-ink); background: var(--sb-amber); border-radius: 4px; padding: .12rem .4rem;
}
.hp-sheet__specs { margin: 0 0 1.25rem; }
.hp-sheet__specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(248, 250, 252, .10); font-size: .88rem; }
.hp-sheet__specs dt { font-weight: 500; color: var(--sb-on-band-2); }
.hp-sheet__specs dd { margin: 0; color: var(--sb-paper); text-align: right; }
.hp-sheet__cta { width: 100%; }
.hp-sheet__more { display: block; margin-top: .8rem; text-align: center; font-size: .86rem; color: var(--sb-on-band-2); }
.hp-sheet__more:hover { color: var(--sb-paper); }

/* Measured facts under the masthead, not a stats band */
.hp-facts { list-style: none; display: flex; flex-wrap: wrap; row-gap: .5rem; margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; padding: 1.1rem 0 1.3rem; border-top: 1px solid rgba(248, 250, 252, .10); font-size: .8rem; color: var(--sb-on-band-3); }
.hp-facts li { padding: 0 1.1rem; border-left: 1px solid rgba(248, 250, 252, .14); }
.hp-facts li:first-child { padding-left: 0; border-left: 0; }
.hp-facts a { color: inherit; text-decoration: none; }
.hp-facts a:hover { color: var(--sb-paper); text-decoration: underline; text-underline-offset: 3px; }
.hp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; background: var(--sb-paper); vertical-align: 1px; }
.hp-dot.is-warn { background: var(--sb-amber); }

/* Sections: a hairline, a number, a heading on the left edge */
.hp-sec { padding: clamp(3.4rem, 7vw, 5.4rem) 0; border-top: 1px solid var(--sb-border); }
.hp-sechead { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .5rem 1.2rem; align-items: start; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.hp-sechead__n { padding-top: .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--sb-indigo-tint); }
.hp-sechead h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 .5rem; color: var(--sb-text); }
.hp-sechead p { margin: 0; max-width: 44rem; color: var(--sb-muted); line-height: 1.6; }
.hp-sechead p a { color: var(--sb-link); font-weight: 600; }
.hp-sechead > :nth-child(3) { align-self: end; }
.hp-sechead__link { font-weight: 700; font-size: .9rem; color: var(--sb-link); text-decoration: none; white-space: nowrap; }
.hp-sechead__link::after { content: " \2192"; }
.hp-sechead__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
    .hp-sechead { grid-template-columns: 2rem minmax(0, 1fr); }
    .hp-sechead > :nth-child(3) { grid-column: 2; justify-self: start; }
}

/* Billing period: a segmented control */
.hp-billing { display: inline-flex; padding: .2rem; border: 1px solid var(--sb-border); border-radius: 10px; background: var(--sb-surface); }
.hp-billing button { border: 0; border-radius: 7px; background: transparent; color: var(--sb-muted); font-weight: 700; font-size: .85rem; padding: .45rem .95rem; }
.hp-billing button[aria-pressed="true"] { background: var(--sb-text); color: var(--sb-bg); }
.hp-billing button:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }

/* Tables: the plan comparison and the domain prices */
.hp-tablewrap { overflow-x: auto; border: 1px solid var(--sb-border); border-radius: 14px; background: var(--sb-surface); }
.hp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hp-table th, .hp-table td { padding: .8rem 1rem; border-top: 1px solid var(--sb-border); text-align: left; vertical-align: middle; }
.hp-table thead th { border-top: 0; vertical-align: bottom; }
.hp-table tbody th { font-weight: 600; color: var(--sb-text-2); white-space: nowrap; }
.hp-table td { color: var(--sb-text); }
.hp-table .is-pop { background: rgba(245, 158, 11, .07); }
/* On dark, amber thinned over slate turned a muddy grey-brown: the popular column is indigo there */
[data-theme="dark"] .hp-table .is-pop { background: var(--sb-surface-3); }
.hp-table thead .is-pop { box-shadow: inset 0 3px 0 var(--sb-amber); }
/* Phones: the plan table scrolls sideways, and nothing said so (the third plan was cut off) */
.hp-swipe { display: none; margin: 0 0 .6rem; font-size: .82rem; color: var(--sb-muted); }
@media (max-width: 767.98px) { .hp-swipe { display: block; } }
.hp-plans { min-width: 660px; }
.hp-plans thead th { padding-top: 1.25rem; padding-bottom: 1.05rem; }
.hp-plans__name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--sb-font-display); font-size: 1.1rem; font-weight: 800; color: var(--sb-text); }
.hp-plans__price { display: block; margin-top: .55rem; font-family: var(--sb-font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--sb-text); }
.hp-plans__price small { margin-left: .2rem; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--sb-muted); }
.hp-plans__note { display: block; margin-top: .1rem; font-size: .76rem; font-weight: 500; color: var(--sb-muted); }
.hp-plans tfoot td { padding-top: 1rem; padding-bottom: 1.2rem; }
/* The feature column stays in view while the table scrolls sideways on a phone */
.hp-plans tbody th, .hp-plans tfoot th, .hp-plans thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sb-surface); }
.hp-after { margin: 1.1rem 0 0; color: var(--sb-muted); font-size: .92rem; }
.hp-after a { color: var(--sb-link); font-weight: 600; }

.hp-domains { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 991.98px) { .hp-domains { grid-template-columns: minmax(0, 1fr); } }
.hp-tld { min-width: 480px; }
.hp-tld thead th { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted); }
.hp-tld tbody th a { color: var(--sb-text); font-weight: 700; text-decoration: none; }
.hp-tld tbody th a:hover { color: var(--sb-link); text-decoration: underline; text-underline-offset: 3px; }
.hp-tld__promo { margin-left: .5rem; font-size: .72rem; color: var(--sb-warning-text); }
.hp-list { list-style: none; margin: 0; padding: 0; }
.hp-list li { padding: .85rem 0; border-top: 1px solid var(--sb-border); color: var(--sb-muted); line-height: 1.55; }
.hp-list li:first-child { border-top: 0; padding-top: .2rem; }
.hp-list strong { color: var(--sb-text); }

/* Paying with M-Pesa: numbered steps between hairlines */
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sb-border); }
.hp-steps li { padding: 1.4rem 1.4rem 0 0; }
.hp-steps li + li { padding-left: 1.4rem; border-left: 1px solid var(--sb-border); }
.hp-steps__n { display: block; margin-bottom: .8rem; font-size: .8rem; font-weight: 700; color: var(--sb-indigo-tint); }
.hp-steps h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .45rem; color: var(--sb-text); }
.hp-steps p { margin: 0; color: var(--sb-muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 991.98px) {
    .hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-steps li { padding-bottom: 1.4rem; }
    .hp-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
    .hp-steps li:nth-child(n+3) { border-top: 1px solid var(--sb-border); }
}
@media (max-width: 575.98px) {
    .hp-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .hp-steps li, .hp-steps li + li { padding: 1.2rem 0; border-left: 0; border-top: 1px solid var(--sb-border); }
}

/* On every plan: a spec list in a four-column grid */
.hp-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--sb-border); }
.hp-specs div { padding: 1.3rem 1.3rem 1.3rem 0; border-bottom: 1px solid var(--sb-border); }
.hp-specs div:not(:nth-child(4n+1)) { padding-left: 1.3rem; border-left: 1px solid var(--sb-border); }
.hp-specs dt { margin-bottom: .35rem; font-family: var(--sb-font-display); font-weight: 800; letter-spacing: -.01em; color: var(--sb-text); }
.hp-specs dd { margin: 0; color: var(--sb-muted); font-size: .92rem; line-height: 1.55; }
@media (max-width: 991.98px) {
    .hp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-specs div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
    .hp-specs div:nth-child(2n) { padding-left: 1.3rem; border-left: 1px solid var(--sb-border); }
}
@media (max-width: 575.98px) {
    .hp-specs { grid-template-columns: minmax(0, 1fr); }
    .hp-specs div:nth-child(n) { padding-left: 0; border-left: 0; }
}

/* An index of pages, as text links */
.hp-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 5vw, 4rem); }
@media (max-width: 767.98px) { .hp-index { grid-template-columns: minmax(0, 1fr); } }
.hp-index__title { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); }
.hp-index ul { list-style: none; margin: 0; padding: 0; }
.hp-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--sb-border); text-decoration: none; }
.hp-index a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--sb-muted); transition: transform .15s ease, color .15s ease; }
.hp-index a:hover::after { transform: translateX(3px); color: var(--sb-link); }
.hp-index__name { color: var(--sb-text); font-weight: 700; }
.hp-index a:hover .hp-index__name { color: var(--sb-link); }
.hp-index__desc { color: var(--sb-muted); font-size: .88rem; }

/* Questions */
.hp-faq { max-width: 58rem; border-top: 1px solid var(--sb-border); }
.hp-faq details { border-bottom: 1px solid var(--sb-border); }
.hp-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; color: var(--sb-text); }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; flex: none; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 400; font-size: 1.25rem; line-height: 1.1; color: var(--sb-muted); }
.hp-faq details[open] summary::after { content: "\2212"; }
.hp-faq summary:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 4px; border-radius: 4px; }
.hp-faq__a { max-width: 48rem; padding: 0 0 1.2rem; color: var(--sb-muted); line-height: 1.65; }
.hp-faq__a a { color: var(--sb-link); font-weight: 600; }

/* The close: one line and two actions on the slate, before the footer */
.hp-close { background: var(--sb-ink); color: var(--sb-paper); padding: clamp(3rem, 6vw, 4.4rem) 0; border-bottom: 1px solid rgba(248, 250, 252, .08); }
.hp-close__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.hp-close h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5rem; color: var(--sb-paper); }
.hp-close p { margin: 0; color: var(--sb-on-band-2); }
.hp-close__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .hp-index a::after { transition: none; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sb-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--sb-ink); color: var(--sb-on-band-2); padding: clamp(3.5rem, 6vw, 5rem) 0 1.6rem; }
.sb-footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-bottom: 2.6rem; border-bottom: 1px solid var(--sb-hairline); }
.sb-footer__logo { height: 48px; width: auto; filter: drop-shadow(0 0 16px rgba(245, 158, 11, .3)); }
.sb-footer__pitch { margin: 1rem 0 1.2rem; max-width: 30rem; font-size: 1rem; line-height: 1.6; }
.sb-footer__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .92rem; }
.sb-footer__contact a, .sb-footer__contact span { color: var(--sb-on-band-2); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.sb-footer__contact a:hover { color: var(--sb-paper); }
.sb-footer__contact i { color: var(--sb-indigo-tint-dark); }
.sb-news { padding: 1.4rem 1.5rem; border-radius: var(--sb-r-lg); background: rgba(248, 250, 252, .05); border: 1px solid var(--sb-hairline); }
.sb-news__title { font-weight: 800; color: var(--sb-paper); margin: 0 0 .25rem; font-size: 1.02rem; }
.sb-news__text { margin: 0 0 1rem; font-size: .88rem; color: var(--sb-on-band-3); }
.sb-news__row { display: flex; gap: .5rem; }
.sb-news__row input {
    flex: 1; min-width: 0; padding: .72rem 1rem; border-radius: 999px; font-size: .95rem;
    background: rgba(15, 23, 42, .6) !important; color: var(--sb-paper) !important; border: 1px solid rgba(248, 250, 252, .38) !important; outline: 0;
}
.sb-news__row input::placeholder { color: rgba(248, 250, 252, .5); }
.sb-news__row input:focus { border-color: rgba(245, 158, 11, .8) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2) !important; }
#hkNewsletterMsg { min-height: 1.2em; }
.sb-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; padding: 2.6rem 0; border-bottom: 1px solid var(--sb-hairline); }
.sb-footer__title { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-paper); margin: 0 0 1rem; }
.sb-footer__list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; }
.sb-footer__list:last-child { margin-bottom: 0; }
.sb-flink { color: var(--sb-on-band-2); text-decoration: none; font-size: .92rem; }
.sb-flink:hover { color: var(--sb-paper); text-decoration: underline; text-underline-offset: 3px; }
.sb-flink--strong { color: var(--sb-paper); font-weight: 700; }
.sb-flink--strong:hover { color: var(--sb-paper); }
.sb-footer__places { padding: 1.6rem 0; border-bottom: 1px solid var(--sb-hairline); font-size: .86rem; line-height: 2; }
.sb-footer__places .sb-footer__title { margin-bottom: .5rem; }
.sb-footer__places .sb-sep { color: var(--sb-on-band-3); margin: 0 .35rem; }
.sb-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; font-size: .84rem; color: var(--sb-on-band-3); }
.sb-footer__pays { display: flex; flex-wrap: wrap; gap: .5rem; }
.sb-pay { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem; border-radius: 999px; border: 1px solid var(--sb-hairline); color: var(--sb-on-band-2); font-weight: 600; font-size: .8rem; }
.sb-pay i { color: var(--sb-indigo-tint-dark); }
@media (max-width: 991.98px) {
    .sb-footer__top { grid-template-columns: minmax(0, 1fr); }
    .sb-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .sb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
    .sb-news__row { flex-direction: column; }
    .sb-footer__bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-btn { transition: none; }
    .sb-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES — the same look for every page built on the older components:
   the page hero, section headings and their pill labels, feature icons, table
   cards, plan cards, FAQ accordions, buttons and forms. One layer here instead
   of edits in 90 templates; the markup stays as it is.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The breadcrumb opens a dark band under the floating header; the page hero continues it */
.hk-bc {
    position: relative; margin-top: calc(-1 * var(--sb-header-h)); padding-top: var(--sb-header-h);
    background: var(--sb-ink); border: 0;
}
.hk-bc .breadcrumb { margin: 0; padding: .95rem 0 .15rem; font-size: .82rem; }
.hk-bc .breadcrumb-item, .hk-bc .breadcrumb-item a { color: var(--sb-on-band-3); text-decoration: none; }
.hk-bc .breadcrumb-item a:hover { color: var(--sb-paper); text-decoration: underline; text-underline-offset: 3px; }
.hk-bc .breadcrumb-item.active { color: var(--sb-on-band-2); font-weight: 600; }
.hk-bc .breadcrumb-item + .breadcrumb-item::before { color: rgba(248, 250, 252, .32); }
.hk-bc .breadcrumb { padding-bottom: .9rem; }
.hk-bc + .hero, .hk-bc + .container.mt-3 + .hero { margin-top: 0; }
.hk-bc:has(+ .hero) .breadcrumb { padding-bottom: .15rem; }

/* Page hero: dark in both themes, a flat slate like the homepage masthead. The indigo glow, the
   masked dot grid and the amber smudge at the right edge (the look the owner rejected as machine-made,
   still on every inner page) went in the 2026-10-26 colour review. */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--sb-ink) !important;
    color: var(--sb-paper);
    padding-top: clamp(2.2rem, 5vw, 3.6rem) !important; padding-bottom: clamp(3rem, 6vw, 4.6rem) !important;
}
.hero::before, .hero::after { display: none !important; }
.hero > .container { position: relative; z-index: 1; }
.hero h1, .hero .h1 {
    font-size: clamp(2.05rem, 4.6vw, 3.35rem) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.08 !important;
    color: var(--sb-paper); text-wrap: balance;
}
.hero h1 span, .hero h1 em { color: var(--sb-indigo-tint-dark); font-style: normal; }
.hero p, .hero .lead { color: var(--sb-on-band-2); opacity: 1; text-wrap: pretty; }
.hero.text-center p, .hero .text-center p { margin-left: auto; margin-right: auto; max-width: 44rem; }
.hero .text-muted, .hero .small.text-muted { color: var(--sb-on-band-3) !important; }
.hero .badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem !important; border-radius: 999px !important;
    background: rgba(248, 250, 252, .07) !important; border: 1px solid rgba(248, 250, 252, .16);
    color: rgba(248, 250, 252, .9) !important; font-size: .82rem; font-weight: 600;
}
.hero .badge i { color: var(--sb-indigo-tint-dark); }
.hero .btn-light, .hero .btn-white, .hero .btn-warning {
    background: var(--sb-amber) !important; color: var(--sb-ink) !important; border-color: var(--sb-amber) !important;
    box-shadow: none;
}
.hero .btn-light:hover, .hero .btn-white:hover, .hero .btn-warning:hover { background: var(--sb-paper) !important; border-color: var(--sb-paper) !important; color: var(--sb-ink) !important; }
.hero .btn-outline-light { border-color: rgba(248, 250, 252, .3); }
.hero .btn-outline-light:hover { background: rgba(248, 250, 252, .08); color: var(--sb-paper); border-color: var(--sb-paper); }
.hero .form-control, .hero .form-select { background: #141D41; border-color: rgba(248, 250, 252, .38); color: var(--sb-paper); }
.hero .form-control::placeholder { color: rgba(248, 250, 252, .55); }
.hero .form-control:focus { background: rgba(248, 250, 252, .1); border-color: rgba(245, 158, 11, .8); box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); color: var(--sb-paper); }
.hero .domain-search-card, .hero .card, .hero .table-card { color: var(--sb-text); }

/* Section headings, and the pill labels above them become the amber-dot eyebrow */
.section-heading { font-size: clamp(1.75rem, 3.3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--sb-text); text-wrap: balance; }
.section-sub { font-size: 1.05rem; line-height: 1.6; color: var(--sb-muted); text-wrap: pretty; }
.badge.bg-primary-soft.rounded-pill {
    display: inline-flex !important; align-items: center; gap: .55rem;
    background: transparent !important; color: var(--sb-indigo-tint) !important;
    padding: 0 !important; border-radius: 0 !important;
    font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.badge.bg-primary-soft.rounded-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
section.bg-light, section[style*="background:var(--bg-light)"] { background: var(--sb-surface-2) !important; }

/* Icons, cards, tables */
.feature-icon { width: 52px; height: 52px; border-radius: 15px; background: var(--sb-primary-soft); color: var(--sb-primary-text); font-size: 1.35rem; }
.hero .feature-icon { background: rgba(248, 250, 252, .08); color: var(--sb-indigo-tint-dark); }
.table-card, .card { border-radius: var(--sb-r-lg); border: 1px solid var(--sb-border); background: var(--sb-surface); box-shadow: var(--sb-lift); }
.table-card { overflow: hidden; }
.card .card-header { background: var(--sb-surface-2); border-bottom-color: var(--sb-border); }
.card > .card-header:first-child { border-radius: calc(var(--sb-r-lg) - 1px) calc(var(--sb-r-lg) - 1px) 0 0; }
.hover-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--sb-lift-hover); border-color: var(--sb-primary-line); }
.table-card .table th { background: var(--sb-surface-2); color: var(--sb-muted); font-size: .76rem; letter-spacing: .06em; }
.alert { border-radius: var(--sb-r-md); }

/* Plan cards on the hosting, pricing and town pages: the homepage plan look */
.pricing-card-new { border-radius: var(--sb-r-lg); border: 1px solid var(--sb-border); background: var(--sb-surface); box-shadow: var(--sb-lift); overflow: visible; }
.pricing-card-new:hover, .pricing-card-new:not(.featured-plan):hover { transform: translateY(-4px); box-shadow: var(--sb-lift-hover); border-color: var(--sb-border); }
.pricing-card-new .plan-header { background: transparent !important; border-bottom: 1px solid var(--sb-border); padding: 1.9rem 1.7rem 1.4rem; border-radius: var(--sb-r-lg) var(--sb-r-lg) 0 0; }
.pricing-card-new.featured-plan, .pricing-card-new.featured-plan:hover { transform: none; border: 1.5px solid var(--sb-amber); box-shadow: var(--sb-lift-hover); }   /* the 5px amber halo went */
.pricing-card-new.featured-plan:hover { transform: translateY(-4px); }
.pricing-card-new .popular-badge, .popular-badge {
    top: -13px; border-radius: 999px; padding: .3rem .85rem; background: var(--sb-amber); color: var(--sb-ink); box-shadow: none !important;
    font-size: .7rem; font-weight: 900; letter-spacing: .08em;
}
.plan-name-new, .pricing-card-new.featured-plan .plan-name-new {
    font-family: var(--sb-font-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; text-transform: none;
    color: var(--sb-text) !important; margin-bottom: .7rem;
}
.price-currency, .pricing-card-new.featured-plan .price-currency { color: var(--sb-muted) !important; font-size: 1rem; }
.price-val, .pricing-card-new.featured-plan .price-val { color: var(--sb-text) !important; letter-spacing: -.04em; }
.price-per, .price-sub, .pricing-card-new.featured-plan .price-per, .pricing-card-new.featured-plan .price-sub { color: var(--sb-muted) !important; }
/* text that was written for the old indigo header of the featured plan */
.pricing-card-new .plan-header .text-white-50 { color: var(--sb-muted) !important; }
.pricing-card-new .plan-header .text-white { color: var(--sb-text) !important; }
.plan-features { padding: 1.2rem 1.7rem .6rem; }
.plan-features li { border-bottom-color: var(--sb-border); color: var(--sb-text-2); }
.plan-features li i { color: var(--sb-link); }
.pricing-card-new .btn { border-radius: 999px; margin: .4rem 1.7rem 1.7rem; width: calc(100% - 3.4rem) !important; font-weight: 700; }
.pricing-card-new .btn-white, .pricing-card-new.featured-plan .btn-white { background: var(--sb-amber); color: var(--sb-ink); border: 0; box-shadow: none; }
.pricing-card-new .btn-white:hover, .pricing-card-new.featured-plan .btn-white:hover { background: var(--sb-ink); color: var(--sb-paper); }
[data-theme="dark"] .pricing-card-new .btn-white:hover { background: var(--sb-paper); color: var(--sb-ink); }

/* FAQ accordions: separate rounded cards */
.accordion { --bs-accordion-border-width: 0; --bs-accordion-bg: var(--sb-surface); --bs-accordion-active-bg: var(--sb-surface); --bs-accordion-active-color: var(--sb-text); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--sb-focus); display: grid; gap: .7rem; }
.accordion .accordion-item { border: 1px solid var(--sb-border) !important; border-radius: var(--sb-r-md) !important; overflow: hidden; background: var(--sb-surface); }
.accordion .accordion-button { font-weight: 700; color: var(--sb-text); background: var(--sb-surface); padding: 1.05rem 1.25rem; box-shadow: none; }
.accordion .accordion-button:not(.collapsed), [data-theme="dark"] .accordion .accordion-button:not(.collapsed) { background: var(--sb-surface); color: var(--sb-text); box-shadow: none; }
.accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--sb-primary-line) !important; box-shadow: var(--sb-lift); }
.accordion .accordion-body { color: var(--sb-muted); line-height: 1.65; padding: 0 1.25rem 1.2rem; }

/* Buttons and fields: pill buttons, softer fields (buttons joined to a field keep square inner corners) */
.btn { --bs-btn-border-radius: 999px; --bs-btn-font-weight: 700; }
.btn-sm { --bs-btn-border-radius: 999px; }
.input-group > .btn, .btn-group > .btn { --bs-btn-border-radius: .7rem; }
.form-control, .form-select { border-radius: .7rem; }
.btn-white { background: var(--sb-amber); color: var(--sb-ink); border-color: var(--sb-amber); }
.btn-white:hover { background: var(--sb-paper); color: var(--sb-ink); border-color: var(--sb-paper); }

/* Closing call-to-action bands written with an inline gradient: the new dark band */
section[style*="linear-gradient(135deg,var(--primary-dark),var(--primary))"],
section[style*="linear-gradient(135deg,var(--sb-primary, #1E2A78),var(--sb-primary, #1E2A78))"],
section[style*="linear-gradient(135deg,#0f172a,var(--sb-primary, #1E2A78))"] {
    background: var(--sb-ink) !important;   /* flat: the amber and indigo glows went (2026-10-26) */
    color: var(--sb-paper);
}

@media (prefers-reduced-motion: reduce) {
    .hover-lift, .pricing-card-new { transition: none; }
    .hover-lift:hover, .pricing-card-new:hover, .pricing-card-new.featured-plan:hover { transform: none; }
}

/* Bootstrap's widest gutter (g-5, 3rem) is wider than a phone's page margin, so those rows scrolled
   sideways by 12px on phones: use the standard gutter there */
@media (max-width: 575.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } }

/* A long last crumb (a blog post title) shortens with an ellipsis instead of wrapping */
.hk-bc .breadcrumb { flex-wrap: nowrap; }
.hk-bc .breadcrumb-item { flex-shrink: 0; white-space: nowrap; }
.hk-bc .breadcrumb-item.active { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Blog post: category, title and date open on the page band ─────────────── */
.sb-post-hero h1 { font-size: clamp(1.85rem, 3.8vw, 2.7rem) !important; max-width: 48rem; }
.sb-post-hero .badge { text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.sb-post-hero .badge:hover { border-color: rgba(150, 156, 193, .7); background: rgba(150, 156, 193, .12) !important; }
.sb-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.3rem; font-size: .9rem; color: var(--sb-on-band-2); }
.sb-post-meta i { color: var(--sb-indigo-tint-dark); margin-right: .4rem; }
.sb-post-hero + .container .col-lg-8 > img:first-child { border-radius: var(--sb-r-lg) !important; }
.sb-post-cta { border-radius: var(--sb-r-lg); color: var(--sb-paper); background: var(--sb-ink); border: 1px solid var(--sb-hairline); }
.sb-post-cta h2 { color: var(--sb-paper); }
.sb-post-cta p { color: var(--sb-on-band-2); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.sb-404-num {
    font-family: var(--sb-font-display); font-weight: 800; font-size: clamp(5rem, 16vw, 8rem);
    line-height: 1; letter-spacing: -.05em; color: var(--sb-indigo-tint); margin-bottom: .6rem;
}

/* ── Sign-in pages (login, register, password reset, admin code) ───────────
   The card sits on the dark band the breadcrumb opens. The band runs edge to edge through a
   border image, which paints outside the box without making the page scroll sideways. */
.hk-auth-wrap {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
    border-image: linear-gradient(var(--sb-ink), var(--sb-ink)) fill 0 / / 0 100vmax;
    padding-top: clamp(1.8rem, 5vw, 3.4rem) !important; padding-bottom: clamp(3rem, 8vw, 5.5rem) !important;
}
/* Flat, like the page heroes: the glow and dot grid behind the card went (2026-10-26) */
.hk-auth-wrap::before, .hk-auth-wrap::after { content: none; }
.hk-bc:has(+ .hk-auth-wrap) .breadcrumb { padding-bottom: .15rem; }
/* One card width from tablets up (the grid columns made it 300px on a tablet, 440px on a wide screen) */
@media (min-width: 768px) {
    .hk-auth-wrap .col-md-5.col-lg-4 { width: 27rem; }
    .hk-auth-wrap .col-md-6.col-lg-5 { width: 34rem; }
}
.hk-auth-wrap .hk-auth-card {
    border-radius: var(--sb-r-xl); border: 1px solid var(--sb-border); background: var(--sb-surface);
    padding: clamp(1.6rem, 4.5vw, 2.4rem) clamp(1.25rem, 4.5vw, 2.2rem);
    box-shadow: 0 1px 0 rgba(248, 250, 252, .06) inset, 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.hk-auth-wrap .hk-auth-title { font-size: clamp(1.55rem, 3.2vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--sb-text); }
.hk-auth-wrap .hk-auth-sub { font-size: .9rem; color: var(--sb-muted); }
.hk-auth-wrap .hk-auth-btn {
    background: var(--sb-amber); color: var(--sb-ink); border: 1px solid var(--sb-amber); border-radius: 999px;
    font-size: .95rem; font-weight: 800; padding: .85rem 1.25rem;
    transition: transform .2s ease;
}
.hk-auth-wrap .hk-auth-btn:hover { background: var(--sb-amber); color: var(--sb-ink); transform: translateY(-1px); }
.hk-auth-wrap .hk-auth-btn:focus-visible { outline: 3px solid var(--sb-link); outline-offset: 3px; }
/* 16px fields: phones zoom the page into anything smaller */
.hk-auth-wrap .hk-auth-card .form-control { border-radius: .75rem; padding: .7rem .9rem; font-size: 1rem; }
.hk-auth-wrap .hk-auth-card .form-control:focus { border-color: var(--sb-link); box-shadow: 0 0 0 4px rgba(30, 42, 120, .14); }
[data-theme="dark"] .hk-auth-wrap .hk-auth-card .form-control:focus { box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
@media (prefers-reduced-motion: reduce) { .hk-auth-wrap .hk-auth-btn, .hk-auth-wrap .hk-auth-btn:hover { transition: none; transform: none; } }

/* Desktop main menu: a thin divider between items, "Hosting | Domains | Email Hosting | ..." (Hostiko
   patch 36, the owner's request). Only between VISIBLE items: the list also holds phone-only links,
   hidden below 992px (d-lg-none) or below 1200px (d-xl-none: Home, Pricing), and a hidden item must not
   leave a stray divider before the first visible one. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hk-main-nav > .nav-item:not(.d-lg-none) ~ .nav-item:not(.d-lg-none) { display: flex; align-items: center; }
    .hk-main-nav > .nav-item:not(.d-lg-none) ~ .nav-item:not(.d-lg-none)::before {
        content: ""; display: block; width: 1px; height: 1.1em; margin: 0 .2rem;
        background: rgba(248, 250, 252, .25);   /* on the indigo bar in both themes */
    }
}
@media (min-width: 1200px) {
    .hk-main-nav > .nav-item:not(.d-lg-none):not(.d-xl-none) ~ .nav-item:not(.d-lg-none):not(.d-xl-none) { display: flex; align-items: center; }
    .hk-main-nav > .nav-item:not(.d-lg-none):not(.d-xl-none) ~ .nav-item:not(.d-lg-none):not(.d-xl-none)::before {
        content: ""; display: block; width: 1px; height: 1.1em; margin: 0 .2rem;
        background: rgba(248, 250, 252, .25);   /* on the indigo bar in both themes */
    }
}