:root {
    --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Bump the base Tailwind font-weight scale so body copy and light
       eyebrow labels read clearly instead of thin/washed-out. Every
       .font-normal / .font-light utility site-wide reads these variables,
       so this is a single global fix rather than a per-page edit. */
    --font-weight-normal: 500;
    --font-weight-light: 400;
}

html,
body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    scroll-behavior: smooth;
}

/* Arbitrary Tailwind shadow-[...] classes baked into the legacy page content.
   None of these box-shadow values exist in the precompiled legacy.css (the
   original build never scanned this content), so cards and dropdowns using
   them have been rendering completely flat, sitewide, since the migration.
   Hand-written so they actually apply. */
.shadow-\[0_-4px_24px_rgba\(0\,0\,0\,0\.08\)\] {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}

.shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.06\)\] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.12\)\] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.04\)\] {
    box-shadow: 0 8px 30px rgb(0, 0, 0, 0.04);
}

.shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.06\)\] {
    box-shadow: 0 8px 30px rgb(0, 0, 0, 0.06);
}

.shadow-\[0_8px_30px_rgb\(1\,64\,115\,0\.1\)\] {
    box-shadow: 0 8px 30px rgb(1, 64, 115, 0.1);
}

.hover\:shadow-\[0_8px_30px_rgb\(1\,64\,115\,0\.1\)\]:hover {
    box-shadow: 0 8px 30px rgb(1, 64, 115, 0.1);
}

.cur-btn[aria-pressed="true"] {
    background: #2563EB;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
}

html[data-currency="usd"] [data-cur="inr"],
html[data-currency="inr"] [data-cur="usd"],
html:not([data-currency]) [data-cur="usd"] {
    display: none !important;
}

html[data-currency="usd"] .cur-btn[data-cur-btn="usd"],
html[data-currency="inr"] .cur-btn[data-cur-btn="inr"],
html:not([data-currency]) .cur-btn[data-cur-btn="inr"] {
    background: #2563EB;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
}

/* Currency dropdown menu (topbar): items were cramped into a box only as
   wide as its longest label ("USD ($)"), with lopsided pl-4/pr-6 padding,
   so the selected-currency indicator dot and label read as centered
   instead of left-aligned. Give the menu real breathing room and keep the
   dot visible against the blue "selected" background instead of blending
   into it. */
[data-currency-dropdown-menu] {
    min-width: 160px;
}

.cur-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.cur-btn[aria-pressed="true"] span[aria-hidden="true"] {
    background: #ffffff !important;
}

.plan-card {
    min-width: 0;
    height: 100%;
    overflow-wrap: anywhere;
    gap: 0;
    padding: 1.25rem 1.75rem !important;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.pricing-card-cta:hover {
    opacity: 0.9;
}

.pricing-card-grid {
    display: grid;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .pricing-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pricing-card-grid {
        /* Number of columns matches the actual plan count (set inline as
           --pricing-cols by the template), so a 3-plan page never gets a
           skewed phantom 4th column, and a 4-plan page always fits all 4
           in one row instead of wrapping the last card to its own line. */
        grid-template-columns: repeat(var(--pricing-cols, 4), minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .pricing-card-grid {
        gap: 1.25rem;
    }

    .plan-card {
        padding: 1.5rem 2rem !important;
    }
}

.pricing-card-title {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.pricing-card-price {
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-card-price [data-cur] > span:first-child {
    font-size: clamp(1.65rem, 2.4vw, 2.25rem) !important;
    line-height: 1.05;
    white-space: nowrap;
}

.pricing-card-price .line-through [data-cur] {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.pricing-card-features {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pricing-card-features > * + * {
    margin-top: 0 !important;
}

.pricing-card-feature-group + .pricing-card-feature-group {
    padding-top: 0.7rem;
    border-top: 1px solid #f1f5f9;
}

.pricing-card-features li span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.pricing-card-features ul {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pricing-card-features ul > * + * {
    margin-top: 0 !important;
}

.pricing-card-features li {
    align-items: flex-start;
    line-height: 1.3;
}

@media (max-width: 639px) {
    #pricing,
    #pricing_plans {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .pricing-card-grid {
        margin-top: 1.75rem;
    }

    .plan-card {
        padding: 1rem 1.25rem !important;
    }

    .pricing-card-title,
    .pricing-card-price {
        min-height: 0;
    }

    .pricing-card-price {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .pricing-card-price [data-cur] > span:first-child {
        font-size: clamp(1.85rem, 8vw, 2.15rem) !important;
    }

    .pricing-card-features {
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .pricing-card-feature-group + .pricing-card-feature-group {
        padding-top: 1rem;
    }

    .pricing-card-features ul {
        gap: 0.35rem;
    }
}

.faq-item.open .faq-heading span:last-child,
.faq-item.open > button span:last-child {
    transform: rotate(45deg);
}

.blog-content {
    color: #334155;
    font-size: 1.0625rem;
    line-height: 1.85;
}

.blog-content > * + * {
    margin-top: 1.15rem;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: #0F172A;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-top: 2rem;
}

.blog-content h2 {
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}

.blog-content h3 {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.blog-content h4 {
    font-size: 1.2rem;
}

.blog-content p {
    margin: 0;
}

.blog-content a {
    color: #2563EB;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(251, 143, 64, 0.55);
    text-underline-offset: 3px;
}

.blog-content a:hover {
    color: #fb8f40;
}

.blog-content ul,
.blog-content ol {
    padding-left: 1.35rem;
}

.blog-content ul {
    list-style: disc;
}

.blog-content ol {
    list-style: decimal;
}

.blog-content li + li {
    margin-top: 0.45rem;
}

.blog-content blockquote {
    border-left: 4px solid #fb8f40;
    background: #fff7ed;
    color: #0f172a;
    padding: 1rem 1.25rem;
    border-radius: 0 0.75rem 0.75rem 0;
    font-weight: 500;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    margin: 1.5rem 0;
}

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 0.75rem;
}

.blog-content th,
.blog-content td {
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    text-align: left;
}

.blog-content th {
    background: #f8fafc;
    color: #2563EB;
}

a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

a,
button,
[role="button"] {
    min-height: 44px;
}

header a,
header button,
footer a,
footer button {
    display: inline-flex;
    align-items: center;
}

footer a,
footer button {
    min-height: 0;
}

header [role="menu"] a {
    display: flex !important;
    width: 100%;
    min-height: 2.25rem;
    align-items: center;
}

header [role="menu"] {
    overflow: hidden;
}

@media (min-width: 1024px) {
    header nav > ul.hidden.lg\:flex {
        display: flex !important;
    }

    header nav > div.hidden.lg\:flex {
        display: flex !important;
    }

    header button[aria-label="Open menu"],
    header .lg\:hidden.fixed.inset-0 {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    header nav > ul.lg\:flex,
    header nav > div.lg\:flex {
        display: none !important;
    }

    header button[aria-label="Open menu"] {
        display: inline-flex !important;
    }
}

.text-white\/50,
.text-white\/60,
.text-white\/65 {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Headings site-wide: swap brand-blue for a premium near-black, tighten
   tracking slightly. Scoped to heading tags only (h1-h4) so buttons, links,
   prices and eyebrow labels that reuse the same brand-blue utility class
   keep their original color. */
h1.text-\[\#014073\],
h2.text-\[\#014073\],
h3.text-\[\#014073\],
h4.text-\[\#014073\] {
    color: #0F172A !important;
    letter-spacing: -0.01em;
}

.text-slate-400 {
    color: #8ea0b8 !important;
}

.text-slate-500 {
    color: #516177 !important;
}

.bg-\[\#E6EEF6\] {
    background-color: #E6EEF6;
}

.bg-\[\#fb8f40\]\/10 {
    background-color: rgba(251, 143, 64, 0.1);
}

.border-\[\#fb8f40\]\/40 {
    border-color: rgba(251, 143, 64, 0.4);
}

.text-\[\#014073\] {
    color: #014073;
}

.group\/item:hover .group-hover\/item\:bg-\[\#2563EB\] {
    background-color: #2563EB;
}

.group\/item:hover .group-hover\/item\:text-white {
    color: #fff;
}

/* Top bar and header: same fixed height, same solid color, same normal
   document-flow position on every single page, no exceptions. No
   transparency, no per-page variants, no JS-measured anything - the
   simplest thing that can't overlap or disappear against a background,
   because normal-flow elements never overlap by definition. */
.hexraa-topbar {
    height: 3rem;
}

.hexraa-header {
    height: 4rem;
}

.testimonial-track {
    animation: hexraa-testimonial-scroll 28s linear infinite;
}

.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track {
    animation-play-state: paused;
}

@keyframes hexraa-testimonial-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Legal/policy page body copy (Terms, Privacy, AUP, Refund, Cookie policy).
   The captured legacy.css only ships .prose rules for tables/images, so
   plain paragraph/heading/list content inside these pages rendered with
   zero spacing or hierarchy. Hand-written, Hetzner-style: generous line
   height, clear heading scale, numbered-section friendly spacing. */
.legal-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
}

.legal-content > * + * {
    margin-top: 1.25rem;
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 {
    color: #014073;
    font-weight: 800;
    line-height: 1.3;
}

.legal-content h1 { font-size: 1.75rem; margin-top: 2.5rem; }
.legal-content h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.legal-content h3 { font-size: 1.15rem; margin-top: 2rem; }
.legal-content h1:first-child,
.legal-content h2:first-child,
.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content strong,
.legal-content b {
    color: #0F172A;
    font-weight: 700;
}

.legal-content a {
    color: #014073;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content a:hover {
    color: #FB8F40;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5rem;
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li + li {
    margin-top: 0.5rem;
}

/* A short, bare paragraph immediately followed by another paragraph reads
   as a pseudo-heading in the source content (e.g. "Server Abuse" on its
   own line before the explanatory text) - bold it so the hierarchy that
   already exists in the copy is visible instead of blending into the
   surrounding body text. */
.legal-content p:has(+ p):not(:has(a, strong, b, em, span)) {
    font-weight: 700;
    color: #0F172A;
    font-size: 1.05rem;
    margin-top: 2rem;
}

.legal-content blockquote {
    border-left: 3px solid #FB8F40;
    background: #FFF8F1;
    padding: 1rem 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.legal-content blockquote > :first-child {
    margin-top: 0;
}

@media print {
    header, footer, nav, .hexraa-topbar { display: none !important; }
    .legal-content { color: #000; }
}

/* Reseller-hosting "Best cPanel Hosting" image blobs: soft brand-color glow
   behind the product screenshots so the white-canvas images blend into the
   section background instead of sitting as a hard-edged rectangle. */
.isolate { isolation: isolate; }
.drop-shadow-xl { filter: drop-shadow(0 12px 24px rgba(1, 64, 115, 0.18)); }
.-top-10 { top: -2.5rem; }
.-right-10 { right: -2.5rem; }
.-bottom-10 { bottom: -2.5rem; }
.-left-10 { left: -2.5rem; }
.bg-\[\#014073\]\/15 { background-color: #0140731a; }
.from-\[\#014073\]\/\[0\.04\] { --tw-gradient-from: #0140730a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,64,115,0)); }
.-top-16 { top: -4rem; }
.-right-16 { right: -4rem; }
.-bottom-16 { bottom: -4rem; }
.-left-16 { left: -4rem; }
.h-72 { height: 18rem; }
.left-1\/3 { left: 33.333333%; }

/* Sliding term-selector pill (Monthly/2yr/3yr on shared+reseller hosting
   pricing) - the thumb's exact left/width is set inline by JS per-click
   since button widths vary ("2 Years Save 15%" isn't the same width as
   "Monthly"), this just gives it a resting inset within the pill track. */
.inset-y-1 { top: 0.25rem; bottom: 0.25rem; }

/* Shared card system - replaces ~145 near-identical utility combinations.
   Padding, layout and text alignment stay as per-use utilities. */
.hx-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 1px 2px 0 rgb(0 0 0/.05);transition:transform .3s,border-color .3s,box-shadow .3s}
.hx-card:hover{transform:translateY(-.25rem);border-color:#fb8f40;box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}
.hx-tile{background:#fff;border:1px solid #f1f5f9;border-radius:.5rem;box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
.hx-tile--hover{transition:border-color .2s,box-shadow .2s}
.hx-tile--hover:hover{border-color:#fb8f40;box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)}
.hx-icon{display:flex;align-items:center;justify-content:center;background:rgb(251 143 64/.1);border:1px solid rgb(251 143 64/.2);border-radius:.75rem;color:#fb8f40}
@media (prefers-reduced-motion:reduce){.hx-card,.hx-tile--hover{transition:none}.hx-card:hover{transform:none}}

/* Feature showcase rows (illustration + copy, alternating) */
@media (min-width: 768px) {
    .mwp-art--right { order: 2; }
    .mwp-copy--left { order: 1; }
}
.mwp-flow { animation: mwp-flow 2.4s linear infinite; }
@keyframes mwp-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -140; } }
.mwp-spin { transform-origin: 240px 160px; animation: mwp-spin 8s linear infinite; }
@keyframes mwp-spin { to { transform: rotate(360deg); } }
.mwp-beat { stroke-dasharray: 100; animation: mwp-beat 3s ease-in-out infinite; }
@keyframes mwp-beat { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
.mwp-gauge { stroke-dasharray: 100; animation: mwp-gauge 3s ease-out infinite; }
@keyframes mwp-gauge { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 18; } }
.mwp-needle { transform-origin: 165px 214px; animation: mwp-needle 3s ease-out infinite; }
@keyframes mwp-needle { 0% { transform: rotate(-80deg); } 60%, 100% { transform: rotate(50deg); } }
.mwp-threat { animation: mwp-threat 2s ease-in infinite; }
@keyframes mwp-threat { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(52px); opacity: 1; } 61%, 100% { transform: translateX(52px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .mwp-flow, .mwp-spin, .mwp-beat, .mwp-gauge, .mwp-needle, .mwp-threat { animation: none; }
    .mwp-beat { stroke-dashoffset: 0; }
    .mwp-gauge { stroke-dashoffset: 18; }
    .mwp-needle { transform: rotate(50deg); }
}

/* Value panel (add-ons) */
.hx-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.14); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hx-panel:hover { transform: translateY(-3px); border-color: #014073; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 32px -16px rgba(1,64,115,.28); }
.hx-panel-icon { position: relative; width: 4rem; height: 4rem; flex-shrink: 0; border-radius: 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #014073, #022b4d); }
.hx-panel-icon-badge { position: absolute; right: -.4rem; bottom: -.4rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #fff; border: 2px solid #FB8F40; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .hx-panel { padding: 2rem; } }
@media (prefers-reduced-motion: reduce) { .hx-panel, .hx-panel:hover { transition: none; transform: none; } }

/* Add-on art: soft blob with a centred white plate */
.hx-addon-art { position: relative; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.hx-addon-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-addon-plate { position: relative; width: min(78%, 20rem); background: #fff; border-radius: 1.25rem; padding: 1.5rem 1.25rem; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 36px -16px rgba(15,23,42,.22); }
.hx-addon-label { margin: 1rem 0 .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.hx-addon-offered { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #f1f5f9; font-size: .8rem; font-weight: 600; color: #059669; }
@media (max-width: 479px) { .hx-addon-art { aspect-ratio: auto; padding: 1.5rem 0; } .hx-addon-plate { width: 88%; } }

/* Home: 3-step onboarding as a zig-zag tree. A dashed spine runs through the icon
   tiles, arrow chips point to the next step, copy branches left/right of the spine. */
.hx-steps { list-style: none; margin: 3rem 0 0; padding: 0; }
.hx-step { position: relative; display: flex; gap: 1.25rem; align-items: stretch; padding-bottom: 2.5rem; }
.hx-step:last-child { padding-bottom: 0; }
.hx-step-visual { flex-shrink: 0; width: 4.5rem; display: flex; flex-direction: column; align-items: center; }
.hx-step-icon { width: 4.5rem; height: 4.5rem; position: relative; flex-shrink: 0; box-shadow: 0 10px 24px -10px rgba(1,64,115,.5); }
.hx-step-num { position: absolute; top: -.5rem; right: -.5rem; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: #FB8F40; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.hx-step-line { flex: 1; min-height: 1rem; margin-top: .4rem; border-left: 2px dashed rgba(1,64,115,.35); }
.hx-step-arrow { flex-shrink: 0; width: 2rem; height: 2rem; margin-bottom: .4rem; border-radius: 9999px; background: #fff; border: 2px solid #FB8F40; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(251,143,64,.6); }
.hx-step-kicker { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #E86F1C; margin-bottom: .35rem; }
.hx-step-body { min-width: 0; padding-top: .35rem; }
.hx-step-body h3 { font-size: 1.2rem; font-weight: 800; color: #014073; margin: 0 0 .5rem; line-height: 1.25; }
.hx-step-body p { font-size: .95rem; line-height: 1.65; color: #64748B; margin: 0; }
.hx-step-curve { display: none; }
@media (min-width: 768px) {
    /* Zig-zag: odd steps sit in the left half, even steps in the right half; a curved
       dashed arrow leads from each step to the next one. */
    .hx-steps { max-width: 64rem; margin-left: auto; margin-right: auto; }
    .hx-step { width: 50%; padding-bottom: 5rem; padding-right: 1.5rem; }
    .hx-step:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 1.5rem; }
    .hx-step-visual > .hx-step-arrow { display: none; }
    .hx-step-visual { width: 4.5rem; }
    .hx-step-curve { display: block; position: absolute; top: calc(100% - 4.6rem); bottom: .6rem; left: 2.25rem; width: calc(100% + 1.5rem); pointer-events: none; }
    .hx-step:nth-child(even) .hx-step-curve { left: calc(2.25rem - 100%); width: calc(100% + 1.5rem); }
    .hx-step-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .hx-step-curve .hx-step-arrow { display: flex; position: absolute; bottom: -.5rem; right: 0; transform: translateX(50%); margin: 0; }
    .hx-step:nth-child(even) .hx-step-curve .hx-step-arrow { right: auto; left: 0; transform: translateX(-50%); }
}

/* Home: feature cards with illustrated header */
.hx-feature { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.14); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hx-feature:hover { transform: translateY(-3px); border-color: #014073; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 32px -16px rgba(1,64,115,.28); }
.hx-feature-art { background: linear-gradient(135deg, #EEF4FA, #E3EDF7); padding: .5rem 1rem; }
.hx-feature-art svg { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; }
.hx-feature-body { padding: 1.25rem 1.5rem 1.5rem; }
.hx-feature-body h4 { font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: #014073; margin: 0 0 .5rem; }
.hx-feature-body p { font-size: .9rem; line-height: 1.65; color: #64748B; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hx-feature, .hx-feature:hover { transition: none; transform: none; } }

/* Reseller: "How Reseller Hosting Works" - 4 steps joined by an animated track, revealed on scroll */
.hx-rs { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hx-rs-step { position: relative; padding-left: 6rem; }
.hx-rs-top { position: absolute; left: 0; top: 0; bottom: -2rem; width: 5rem; display: flex; flex-direction: column; align-items: center; }
.hx-rs-icon { width: 5rem; height: 5rem; flex-shrink: 0; position: relative; box-shadow: 0 10px 24px -10px rgba(1,64,115,.5); transition: transform .3s ease; }
.hx-rs-step:hover .hx-rs-icon { transform: translateY(-3px) rotate(-3deg); }
.hx-rs-track { position: relative; flex: 1; width: 2px; margin-top: .5rem; background: repeating-linear-gradient(180deg, rgba(1,64,115,.35) 0 6px, transparent 6px 12px); background-size: 2px 12px; animation: hx-rs-dash-v 1.2s linear infinite; }
.hx-rs-track i { position: absolute; left: 50%; top: 0; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 9999px; background: #FB8F40; box-shadow: 0 0 0 4px rgba(251,143,64,.2); animation: hx-rs-dot-v 2.4s ease-in-out infinite; }
.hx-rs-step h3 { font-size: 1.15rem; font-weight: 800; color: #014073; margin: .25rem 0 .5rem; line-height: 1.25; }
.hx-rs-step p { font-size: .92rem; line-height: 1.65; color: #64748B; margin: 0; }
.hx-rs-icon svg { animation: hx-rs-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes hx-rs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hx-rs-dash-v { to { background-position: 0 12px; } }
@keyframes hx-rs-dot-v { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - .55rem); opacity: 0; } }
@keyframes hx-rs-dash-h { to { background-position: 12px 0; } }
@keyframes hx-rs-dot-h { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - .55rem); opacity: 0; } }
/* reveal: only hidden when JS is available, so the section never stays blank */
.hx-js .hx-rs-step { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 120ms); }
.hx-js .hx-rs.is-in .hx-rs-step { opacity: 1; transform: none; }
@media (min-width: 1024px) {
    .hx-rs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
    .hx-rs-step { padding-left: 0; text-align: center; }
    .hx-rs-top { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 5rem; flex-direction: row; justify-content: center; margin-bottom: 1.25rem; }
    .hx-rs-track { position: absolute; left: calc(50% + 3.5rem); right: calc(-50% - 1.75rem + 3.5rem); top: 50%; flex: none; width: auto; height: 2px; margin: 0; background: repeating-linear-gradient(90deg, rgba(1,64,115,.35) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation-name: hx-rs-dash-h; }
    .hx-rs-track i { left: 0; top: 50%; margin: -.275rem 0 0; animation-name: hx-rs-dot-h; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-rs-track, .hx-rs-track i, .hx-rs-icon svg { animation: none; }
    .hx-rs-track i { display: none; }
    .hx-js .hx-rs-step { opacity: 1; transform: none; transition: none; }
    .hx-rs-icon, .hx-rs-step:hover .hx-rs-icon { transition: none; transform: none; }
}

/* Reseller: "With All Reseller Hosting Plans You Get" - one connected panel.
   Mobile: accordion tree (tab, then its features). Desktop: category list on the left, features on the right. */
.hx-feat { margin-top: 2.5rem; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -16px rgba(15,23,42,.18); }
.hx-feat-tab { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; background: #F8FAFC; border: 0; border-bottom: 1px solid #e2e8f0; text-align: left; cursor: pointer; color: #334155; transition: background .2s ease, color .2s ease; font-family: inherit; }
.hx-feat-tab:hover { background: #F1F5F9; }
.hx-feat-tab:focus-visible { outline: 2px solid #FB8F40; outline-offset: -2px; }
.hx-feat-tab-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: #E6EEF6; color: #014073; transition: background .2s ease, color .2s ease; }
.hx-feat-tab-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-feat-tab-text strong { font-size: .98rem; font-weight: 700; line-height: 1.25; color: #0F172A; }
.hx-feat-tab-text small { font-size: .78rem; color: #64748B; margin-top: .1rem; }
.hx-feat-chevron { flex-shrink: 0; color: #94A3B8; transition: transform .25s ease; }
.hx-feat-tab.is-active { background: #fff; border-bottom-color: transparent; }
.hx-feat-tab.is-active .hx-feat-tab-icon { background: linear-gradient(135deg, #014073, #022b4d); color: #FB8F40; }
.hx-feat-tab.is-active .hx-feat-tab-text strong { color: #014073; }
.hx-feat-tab.is-active .hx-feat-chevron { transform: rotate(180deg); color: #FB8F40; }
.hx-feat-panel { display: none; padding: .25rem 1.1rem 1.25rem 1.1rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.hx-feat-panel.is-active { display: block; }
.hx-feat-list { list-style: none; margin: 0 0 0 1.25rem; padding: .25rem 0 0 1.25rem; border-left: 2px dashed rgba(1,64,115,.3); display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.hx-feat-list li { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: .6rem; font-size: .92rem; font-weight: 500; color: #334155; transition: background .2s ease; }
.hx-feat-list li:hover { background: #F8FAFC; }
.hx-feat-panel.is-active .hx-feat-list li { animation: hx-feat-in .35s ease both; animation-delay: calc(var(--n) * 35ms); }
.hx-feat-check { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 9999px; background: rgba(251,143,64,.14); display: flex; align-items: center; justify-content: center; }
@keyframes hx-feat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) and (max-width: 899px) { .hx-feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .hx-feat { display: grid; grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr; background: linear-gradient(90deg, #F8FAFC 0 calc(19rem - 1px), #e2e8f0 calc(19rem - 1px) 19rem, #fff 19rem); }
    .hx-feat-tab { grid-column: 1; position: relative; border-bottom: 1px solid #e2e8f0; padding: 1.1rem 1.25rem; }
    .hx-feat-tab:nth-of-type(4) { border-bottom: 0; }
    .hx-feat-tab.is-active { width: calc(100% + 1px); z-index: 1; border-bottom-color: #e2e8f0; }
    .hx-feat-tab.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #FB8F40; }
    .hx-feat-chevron { transform: rotate(-90deg); }
    .hx-feat-tab.is-active .hx-feat-chevron { transform: rotate(0deg); }
    .hx-feat-panel { grid-column: 2; grid-row: 1 / -1; padding: 1.75rem 2rem; border-bottom: 0; }
    .hx-feat-list { margin: 0; padding: 0; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; }
}
@media (min-width: 1100px) { .hx-feat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .hx-feat-panel.is-active .hx-feat-list li { animation: none; } .hx-feat-chevron, .hx-feat-tab, .hx-feat-tab-icon { transition: none; } }

/* ---- Blog post page ---- */
.blog-post { background: #fff; color: #334155; }
.blog-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.blog-hero { background: #f5f6fb; border-bottom: 1px solid #e8eaf3; padding: 2rem 0; }
.blog-hero__grid { display: grid; gap: 1.5rem; align-items: center; }
.blog-hero__cover { margin: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(1, 64, 115, .15); background: #e2e8f0; }
.blog-hero__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-crumbs { font-size: .8rem; color: #64748b; display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.blog-crumbs a { color: #4f46e5; text-decoration: none; }
.blog-crumbs a:hover { text-decoration: underline; }
.blog-hero h1 { color: #0f172a; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0; }
.blog-hero__excerpt { margin: 1rem 0 0; color: #475569; font-size: 1.05rem; line-height: 1.6; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: 1.25rem; font-size: .85rem; color: #64748b; }
.blog-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: #94a3b8; }
.blog-author { display: inline-flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: .3rem .85rem .3rem .3rem; color: #0f172a; font-weight: 700; text-decoration: none; }
.blog-author__avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #014073; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.blog-share { display: flex; gap: .55rem; margin-top: 1.25rem; }
.blog-share a, .blog-share button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; color: #334155; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; cursor: pointer; text-decoration: none; transition: color .15s, border-color .15s; }
.blog-share a:hover, .blog-share button:hover { color: #fb8f40; border-color: #fb8f40; }
.blog-share button.is-copied { color: #16a34a; border-color: #16a34a; }

.blog-layout { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem; }
.blog-body { min-width: 0; }
.blog-body .blog-content { font-size: 1.08rem; line-height: 1.85; }
.blog-body .blog-content h2 { padding-top: 1.5rem; margin-top: 2.25rem; border-top: 2px solid #e2e8f0; scroll-margin-top: 90px; }
.blog-body .blog-content > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.blog-body .blog-content h3 { scroll-margin-top: 90px; }
.blog-body .blog-content table { display: block; overflow-x: auto; }
.blog-body .blog-content figure { margin: 1.5rem 0; }
.blog-body .blog-content figcaption { font-size: .85rem; color: #64748b; text-align: center; margin-top: .4rem; }

.blog-toc { border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1.1rem 1.25rem; background: #fff; }
.blog-toc__title { font-weight: 800; color: #0f172a; font-size: 1.05rem; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid #e2e8f0; display: inline-block; }
.blog-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.blog-toc a { display: block; padding: .3rem .5rem; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.4; color: #475569; text-decoration: none; }
.blog-toc a:hover { color: #014073; }
.blog-toc a.is-active { color: #fb8f40; border-left-color: #fb8f40; font-weight: 700; background: #fff7ed; }
.blog-toc__l3 a { padding-left: 1.4rem; font-size: .85rem; }

.blog-side { display: flex; flex-direction: column; gap: 1rem; }
.blog-cta { border-radius: 1rem; padding: 1.4rem; color: #fff; background: linear-gradient(135deg, #014073, #015a9e); }
.blog-cta--alt { background: #fff7ed; color: #0f172a; border: 1px solid #fed7aa; }
.blog-cta__eyebrow { margin: 0 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fdba74; }
.blog-cta__title { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.blog-cta__text { margin: .5rem 0 1rem; font-size: .9rem; opacity: .9; line-height: 1.5; }
.blog-cta__btn { display: inline-block; background: #fb8f40; color: #fff; font-weight: 700; padding: .6rem 1.1rem; border-radius: .6rem; text-decoration: none; }
.blog-cta__btn:hover { background: #ea7a26; }
.blog-cta__btn--ghost { background: #014073; }
.blog-cta__btn--ghost:hover { background: #015a9e; }

.blog-related { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 2.5rem 0 3rem; }
.blog-related h2 { color: #0f172a; font-size: 1.5rem; font-weight: 800; margin: 0 0 1.25rem; }
.blog-related__grid { display: grid; gap: 1rem; }
.blog-related__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; overflow: hidden; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.blog-related__card:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.blog-related__card img, .blog-related__ph { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, #014073, #015a9e); }
.blog-related__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.blog-related__cat { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fb8f40; }
.blog-related__title { color: #0f172a; font-weight: 700; line-height: 1.35; }

@media (min-width: 768px) {
    .blog-wrap { padding: 0 1.5rem; }
    .blog-hero { padding: 2.75rem 0; }
    .blog-related__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .blog-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; }
    .blog-layout { grid-template-columns: 15rem minmax(0, 1fr) 17.5rem; gap: 2.5rem; align-items: start; padding-top: 2.75rem; }
    .blog-layout--no-toc { grid-template-columns: minmax(0, 1fr) 17.5rem; }
    .blog-toc, .blog-side { position: sticky; top: 90px; }
    .blog-toc { max-height: calc(100vh - 120px); overflow-y: auto; }
}
@media (max-width: 1023px) {
    .blog-toc { order: -1; }
    .blog-side { order: 2; }
}

/* blog post polish */
.blog-crumbs { align-items: center; line-height: 1.2; }
.blog-crumbs span { line-height: 1; position: static; vertical-align: baseline; }
.blog-toc li { margin: 0; padding: 0; }
.blog-body .blog-content > * + * { margin-top: 1.1rem; }
.blog-body .blog-content h2 { margin-bottom: .9rem; }
.blog-body .blog-content h3 { margin-bottom: .6rem; }