/* ===========================================================
   BPHost — front-end design system (v2)
   Brand: ink #0E0E12 · crimson #a80400/#850300
=========================================================== */
@font-face{font-family:'Banana';src:url('../fonts/banana.woff2?v=2') format('woff2'),url('../fonts/banana_web.ttf?v=2') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{
  --ink:#0E0E12; --ink-soft:#2A2F3A; --muted:#5A6472;
  --crimson:#a80400; --crimson-deep:#850300; --teal:#a80400; --teal-soft:#d11a12;
  --green:#1FB57A;
  --bg:#fff; --bg-cool:#F3F7FA; --bg-band:#E2E9F1; --line:#E7EDF2; --card:#fff;
  --shadow:0 18px 50px -18px rgba(16,24,40,.22); --shadow-sm:0 8px 24px -12px rgba(16,24,40,.16);
  --radius:18px; --maxw:1680px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.display{font-family:'Banana',var(--sans);font-weight:400;letter-spacing:.5px;line-height:1.02}
/* ===== Unified typography: the clean system sans (the hero font) site-wide.
   Targets text containers only — icon fonts (FontAwesome/et-line/glyphicons) keep
   their own explicit font-family, so they're unaffected by this. ===== */
html,body{font-family:var(--sans)!important}
/* headings + body all use the one clean system sans (the font the user was drawn to on the banner) */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display,.db-heading{font-family:var(--sans)!important}
p,li,dt,dd,td,th,blockquote,label,figcaption,
input,select,textarea,button,.button,.btn,
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a,.site_wrapper ul.nav>li>a{font-family:var(--sans)!important}
/* inline SVG icon base */
.ic{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- legacy ArkaHost home header: widen to the page width so the logo lines up with the hero, and enlarge the logo ---------- */
.container{width:auto;max-width:var(--maxw);padding-left:48px;padding-right:48px}
.header #logo img{max-height:76px;width:auto;display:block}
.header .logo{margin-top:0}
/* nav: strip the stray underline (parked modern .nav border leaking onto the ArkaHost menu) + bigger links */
.navbar-nav.nav{border-bottom:0;background:transparent;position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a{font-size:16px}
/* partner logos: spread full width + vertically centered (fixes the clustered/misaligned last logo) */
.client_logos p{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 14px;margin:0}
.client_logos p img{margin:0;flex:0 0 auto;max-width:160px;height:auto}
.client_logos p img[src*="DEEP"]{max-width:118px}
/* Band height comes out of the WHITESPACE, not the logos (Will, 2026-09-20): logos stay
   at their full 160px and the padding drops 40px -> 14px, taking the strip 161px -> ~109px.
   The column gap is 14px so all eight still sit on ONE row down to ~1400px; wider gaps
   made them wrap there, which is what used to make the band 246px on a laptop. */
.client_logos{padding-top:14px;padding-bottom:14px}
/* uniform narrow faint line under the nav header (replaces the dark page-title banners) */
.header{border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:14px}
/* header: flex row so logo + nav share one vertical center */
.header .container{display:flex;align-items:center;justify-content:space-between;gap:30px}

/* uniform centered page header (title + subtitle) on inner pages */
.page-head{position:relative;overflow:hidden;text-align:center;padding:60px 0 28px}
.page-head .container{position:relative;z-index:1}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0,#dfe4ea 14%,#dfe4ea 86%,transparent 100%);z-index:1;pointer-events:none}
.ph-d{position:absolute;top:50%;z-index:0;pointer-events:none;display:block}
.ph-ring{border:2px solid #e4e8ed;border-radius:50%}
.ph-circle{background:#eef1f4;border-radius:50%}
.ph-sq{border:2px solid #e4e8ed;border-radius:13px}
.ph-dots{background-image:radial-gradient(#e3e7ec 2px,transparent 2.6px);background-size:18px 18px}
.ph-l1{left:52px;width:88px;height:88px;transform:translateY(calc(-50% - 6px))}
.ph-l2{left:206px;width:42px;height:42px;transform:translateY(calc(-50% - 48px))}
.ph-l3{left:44px;width:72px;height:54px;transform:translateY(calc(-50% + 42px))}
.ph-l4{left:214px;width:38px;height:38px;transform:translateY(calc(-50% + 42px)) rotate(12deg)}
.ph-r1{right:52px;width:94px;height:94px;background:#f0f2f5;transform:translateY(calc(-50% - 2px))}
.ph-r2{right:220px;width:48px;height:48px;transform:translateY(calc(-50% - 46px))}
.ph-r3{right:46px;width:72px;height:54px;transform:translateY(calc(-50% + 42px))}
.ph-r4{right:226px;width:34px;height:34px;transform:translateY(calc(-50% + 44px)) rotate(-12deg)}
@media(max-width:980px){.ph-l2,.ph-l4,.ph-r2,.ph-r4{display:none}}
@media(max-width:760px){.page-head{padding:42px 0 20px}.ph-d{opacity:.5}.ph-l3,.ph-r3{display:none}}
.page-head h1{font-size:35px;font-weight:500;color:var(--ink);margin:0;line-height:1.2;letter-spacing:.5px;text-transform:uppercase}
.page-head .page-sub{font-size:17px;color:var(--muted);max-width:720px;margin:14px auto 0;line-height:1.6}
/* domain band sits IN FRONT of the hero so the superhero floats behind it (illusion of a full body continuing behind the panel) */
.domain_search{position:relative;z-index:3}
/* branded search results rendered into the dark band (results below the slide) */
.domain_search .db-heading{display:flex;align-items:center;justify-content:center;gap:11px;color:#fff;font-size:25px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:0;padding-top:16px;padding-bottom:6px}
.domain_search .offers ul li,.domain_search .offers ul li strong{font-size:16px}
.domain_search .offers ul{float:none;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.domain_search .offers ul li{float:none;padding:10px 18px}
.domain_search .db-heading .ic{color:#ffffff;width:27px;height:27px;stroke-width:2.4;flex:none}
.domain_search .db-results{margin:18px 0 22px;padding-top:0}
.domain_search .db-results-title{color:#fff;font-size:20px;font-weight:800;letter-spacing:.2px;margin:0 0 16px}
.domain_search .db-results-title strong{color:#ffffff}
.domain_search .dr-msg{color:#cfd6df}
.domain .go{padding:11px 22px;font-size:13.5px;white-space:nowrap}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink);color:#cfd6df;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar a{color:#cfd6df;opacity:.85}.topbar a:hover{opacity:1;color:#fff}
.topbar .geo{display:inline-flex;align-items:center;gap:8px}
.topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(168,4,0,.25)}
.topbar .links{display:flex;gap:22px}

/* ---------- nav (glassy / translucent) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(231,237,242,.8)}
.nav .wrap{display:flex;align-items:center;height:86px;gap:30px}
.nav .logo{height:auto;width:auto}
.nav .menu{list-style:none;display:flex;align-items:center;gap:28px;margin-left:14px}
.nav .menu a.current{color:var(--crimson)}.nav .menu a.current::after{width:100%}
.nav .menu a{font-weight:600;font-size:15.5px;color:var(--ink-soft);position:relative;padding:6px 0}
.nav .menu a:hover{color:var(--crimson)}
.nav .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--crimson);transition:width .2s}
.nav .menu a:hover::after{width:100%}
.nav .spacer{flex:1}
.nav .actions{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:12px;padding:11px 20px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--crimson);color:var(--crimson)}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:var(--crimson-deep)}
.btn:focus,.btn:active,.btn:focus:active,.btn.active:focus,a.btn:focus,a.btn:active,button.btn:focus,input.btn:focus{outline:none!important;box-shadow:none!important}
.btn:focus-visible{outline:2px solid var(--crimson-deep)!important;outline-offset:2px}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}

/* ---------- hero (compact, wide) ---------- */
.hero{position:relative;overflow:visible;z-index:2;background:linear-gradient(180deg,#a80400 0%,#7e0200 55%,#560100 100%)}
/* With the overlay header (site-header.css .shdr-overlay) the hero starts at
   the top of the page, behind the bar: pulled up by the bar's measured height
   and padded the same amount, so the gradient and the mesh run behind the menu
   while the copy stays exactly where it was. 84px is the desktop bar before
   the script has measured it. */
.hero-under-nav{margin-top:calc(-1 * var(--shdr-h,84px));padding-top:var(--shdr-h,84px)}
#mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;min-height:clamp(400px,49vh,540px);padding:22px 48px 40px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.eyebrow .ic{width:16px;height:16px;color:var(--crimson)}
h1.hero-title{font-size:clamp(40px,5vw,66px);margin:18px 0 14px;color:#fff}
h1.hero-title .pop{color:#0d0d0d}
.hero-sub{font-size:19px;color:rgba(255,255,255,.92);max-width:620px;margin-bottom:24px}
.domain{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:9px;display:flex;gap:7px;max-width:648px}
.domain .pfx{display:flex;align-items:center;color:#9aa4b1;font-weight:600;padding-left:11px}
.domain .pfx .ic{width:22px;height:22px}
.domain input{flex:1;border:none;outline:none;font-size:14px;padding:11px 7px;min-width:60px;background:transparent;color:var(--ink)}
.domain select{border:none;outline:none;background:var(--bg-cool);border-radius:9px;font-weight:700;font-size:14px;color:var(--ink-soft);padding:0 11px;cursor:pointer}
.domain .go .ic{width:18px;height:18px}
.tlds{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:14px}.tlds b{color:var(--ink)}
.hero-cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.trust{display:flex;gap:24px;margin-top:26px;flex-wrap:wrap;color:rgba(255,255,255,.9);font-size:14px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust .ic{width:17px;height:17px;color:#fff}
/* hero art — capped so the banner stays compact */
.hero-art{position:relative;display:flex;justify-content:center;align-items:flex-end;height:100%}
.hero-art .glow{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:74%;height:52%;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);filter:blur(10px);z-index:0}
.hero-art .hero-img{position:relative;z-index:2;max-height:clamp(360px,50vh,500px);width:auto;margin-bottom:-80px;filter:drop-shadow(0 16px 22px rgba(16,24,40,.20));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.chip{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow);font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.chip small{display:block;font-weight:600;color:var(--muted);font-size:11.5px}
.chip .ict{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}
.chip .ict .ic{width:18px;height:18px;stroke:#fff}
.chip.c1{top:8%;left:-4%}.chip.c1 .ict{background:var(--teal)}
.chip.c2{top:44%;right:-8%}.chip.c2 .ict{background:var(--crimson);font-size:15px}
.chip.c3{bottom:8%;left:2%}.chip.c3 .ict{background:var(--ink)}

/* ---------- domain results band (BELOW hero) ---------- */
.results-band{background:var(--bg-cool);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.results-band .wrap{padding:26px 48px}
.results-head{font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.results-head .ic{color:var(--teal)}
.domain-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1100px){.domain-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.domain-results{grid-template-columns:1fr}}
.dr-msg{color:var(--muted);font-size:14.5px;display:flex;align-items:center;gap:9px;grid-column:1/-1}
.dr-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-sm)}
.dr-dot{width:9px;height:9px;border-radius:50%;background:#c7ced6;flex:none}
.dr-row.ok .dr-dot{background:var(--green)}.dr-row.taken .dr-dot{background:#c9485b}.dr-row.unknown .dr-dot{background:#e0a32a}
.dr-name{font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-status{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex:none}
.dr-row.ok .dr-status{color:var(--green)}.dr-row.taken .dr-status{color:#c9485b}
.dr-price{margin-left:auto;font-weight:800;color:var(--ink);white-space:nowrap;flex:none}
.dr-act{padding:8px 16px;font-size:13px;border-radius:10px;flex:none;white-space:nowrap}
.dr-act.muted{background:transparent;color:#aab2bd;box-shadow:none;font-weight:700;border:none}
.dr-act.dr-check{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:700;box-shadow:none}
.dr-act.dr-check:hover{border-color:var(--crimson);color:var(--crimson)}
.dr-note{color:#9aa4b1;font-size:12px;margin-top:10px;grid-column:1/-1}
.dr-spin{width:15px;height:15px;border:2px solid var(--teal-soft);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- section heads ---------- */
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
.sec-head .kick{color:var(--teal);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:13px}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);margin:10px 0 8px}
.sec-head p{color:var(--muted);font-size:17px}

/* ---------- plan tiers ---------- */
.plans{padding:78px 0 90px}
.tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;transition:.2s;overflow:hidden}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.tier.pop{border-color:var(--crimson);box-shadow:var(--shadow)}
.tier.pop .ribbon{position:absolute;top:15px;right:-34px;background:var(--crimson);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;padding:5px 40px;transform:rotate(45deg)}
.tier .badge{height:80px;margin:0 auto 14px;object-fit:contain}
.tier h3{font-size:19px;letter-spacing:.5px}
.tier .gb{color:var(--muted);font-size:13px;margin-bottom:16px}
.tier .price{font-size:36px;font-weight:800;color:var(--ink)}
.tier .price .cur{font-size:18px;vertical-align:top;color:var(--muted)}
.tier .price .per{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.tier .pick{margin-top:18px;width:100%;justify-content:center}

/* ---------- why / features ---------- */
.why{padding:78px 0;background:linear-gradient(180deg,var(--bg-cool),#fff)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;transition:.2s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.fic{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;margin-bottom:18px}
.fic .ic{width:26px;height:26px}
.fic.teal{background:rgba(168,4,0,.12);color:var(--teal)}.fic.crimson{background:rgba(168,4,0,.10);color:var(--crimson)}
.feat h3{font-size:18.5px;margin-bottom:8px}.feat p{color:var(--muted);font-size:14.5px}

/* ---------- services ---------- */
.services{padding:84px 0}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.2s;position:relative}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.svc .sic{width:50px;height:50px;border-radius:13px;background:rgba(168,4,0,.10);color:var(--teal);display:grid;place-items:center;margin-bottom:14px}
.svc .sic .ic{width:25px;height:25px}
.svc:nth-child(even) .sic{background:rgba(168,4,0,.09);color:var(--crimson)}
.svc h3{font-size:17.5px;margin-bottom:6px}
.svc p{color:var(--muted);font-size:14px;margin-bottom:14px;min-height:40px}
.svc .more{color:var(--crimson);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.svc .more .ic{width:15px;height:15px}
.svc.soon{opacity:.74}
.svc.soon::after{content:"SOON";position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--teal);background:rgba(168,4,0,.12);padding:3px 8px;border-radius:6px}

/* ---------- domain CTA band ---------- */
.cta-band{background:linear-gradient(110deg,var(--crimson-deep),var(--crimson));color:#fff}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:50px 48px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,3vw,36px);color:#fff}
.cta-band p{opacity:.9;margin-top:6px;color:#fff}
.cta-white{background:#fff;color:var(--crimson-deep);font-weight:800}.cta-white:hover{background:#f3f3f3}

/* ---------- "why choose BPHOST" red band — background graphics ---------- */
/* scoped to the red (#a80400) feature_section1 rows on home + about only */
.feature_section1.bg-crimson{position:relative;overflow:hidden;background-repeat:no-repeat;
  background-image:
    radial-gradient(1000px 560px at 88% -12%, rgba(255,255,255,.13), transparent 60%),
    radial-gradient(820px 640px at 2% 120%, rgba(0,0,0,.26), transparent 58%),
    radial-gradient(circle at -60px 118%, transparent 150px, rgba(255,255,255,.08) 152px, rgba(255,255,255,.08) 159px, transparent 161px),
    radial-gradient(circle at 12% 40%, rgba(168,4,0,.10), transparent 34%)}
.feature_section1.bg-crimson::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.6px, transparent 1.6px);background-size:30px 30px;opacity:.55}
.feature_section1.bg-crimson::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-150px;top:-170px;width:500px;height:500px;border-radius:50%;border:2px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 64px rgba(255,255,255,.05),inset 0 0 80px rgba(255,255,255,.06)}
.feature_section1.bg-crimson .container{position:relative;z-index:1}

/* ---------- faq ---------- */
.faq{padding:84px 0;background:var(--bg-cool)}
.faq-list{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;padding:18px 0;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--crimson);font-size:26px;font-weight:300;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 20px;font-size:15px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#aeb6c2;padding:64px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:30px}
/* Six columns need a tablet step: at <=1180px they squeeze to three with the
   brand block full-width above them. The 880px rule below takes it to two. */
@media(max-width:1180px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:28px}.footer .brand{grid-column:1/-1}.footer .brand p{max-width:560px}}
/* Footer brand block: a headline plus three proof points, replacing the old
   logo + blurb + domain line. Labels are nowrap so "Uptime target" cannot wrap
   to a second line and knock the three stats out of alignment. */
.fbrand-h{color:#fff;font-size:25px;line-height:1.18;font-weight:700;margin:0 0 16px;max-width:270px;text-wrap:balance}
.fbrand-h span{color:#a80400}
.fstats{display:flex;gap:24px;margin:0 0 18px}
.fstat b{display:block;color:#fff;font-size:22px;font-weight:700;line-height:1.1}
.fstat span{font-size:12px;color:#8e97a3;white-space:nowrap}
.fbrand-p{font-size:14px;line-height:1.6;color:#aeb6c2;margin:0;max-width:330px}
@media(max-width:420px){.fstats{gap:16px}.fbrand-h{font-size:22px}}

/* Keep the payment line clear of the fixed chat bubble in the bottom-right
   corner: below ~1500px the page gutter is not wide enough on its own. */
@media(max-width:1500px){.foot-bottom{padding-right:110px}}
@media(max-width:700px){.foot-bottom{padding-right:0;padding-bottom:64px}}
.footer .flogo{height:40px;margin-bottom:18px}
.footer .brand p{font-size:14px;max-width:320px;margin-bottom:12px}
.footer .geo-note{font-size:13px;color:#cfd6df}.footer .geo-note b{color:#fff}
.footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px}
.footer .fcol a{display:block;color:#aeb6c2;font-size:14px;margin-bottom:10px}.footer .fcol a:hover{color:var(--teal-soft)}
.foot-region{display:inline-flex;gap:14px}
.foot-region a{color:#8b95a3;text-decoration:none}
.foot-region a:hover{color:#fff}
.foot-region a.on{color:#fff;font-weight:600}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:18px;font-size:13px;color:#8b95a3;flex-wrap:wrap;gap:8px}

/* ---------- inner page banner + content ---------- */
.page-banner{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% -25%,rgba(168,4,0,.12),transparent 60%),radial-gradient(700px 380px at 5% 120%,rgba(168,4,0,.06),transparent 55%),linear-gradient(180deg,#fff,var(--bg-cool));border-bottom:1px solid var(--line)}
.page-banner .wrap{padding:56px 48px 50px;text-align:center;position:relative;z-index:2}
.page-banner .crumb{color:var(--muted);font-size:13px;margin-bottom:12px}
.page-banner .crumb a{color:var(--teal)}.page-banner .crumb a:hover{color:var(--crimson)}
.page-banner h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:12px}
.page-banner p{color:var(--muted);font-size:19px;max-width:720px;margin:0 auto}
.section{padding:74px 0}
.section.alt{background:var(--bg-band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead{color:var(--muted);font-size:18px;max-width:760px}
.prose{max-width:840px;margin:0 auto;color:var(--ink-soft);font-size:16.5px}
.prose p{margin-bottom:16px}.prose h3{margin:28px 0 10px;font-size:22px;color:var(--ink)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:0 auto}
.stat{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 16px}
.stat b{display:block;font-size:38px;font-weight:800;color:var(--crimson);font-family:'Banana',var(--sans)}
.stat span{color:var(--muted);font-size:14px}
.incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto}
.incl{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:600;font-size:14.5px}
.incl .ic{width:20px;height:20px;color:var(--teal);flex:none}
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp th{background:var(--bg-cool);font-weight:700}.cmp td.c{text-align:center}.cmp tr:last-child td{border-bottom:none}
.cmp .ic{width:18px;height:18px;color:var(--green)}
.pricetable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:760px;margin:0 auto}
.pricetable th,.pricetable td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.pricetable th{background:var(--bg-cool);font-weight:700}.pricetable td.r{text-align:right;font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:1100px){.incl-grid,.stat-row{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}

/* ---------- uniform plan cards (matches the Hosting go-pricing tables) ---------- */
.plan-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1560px;margin:42px auto 0;align-items:start}
.plan-cards.cols-4{grid-template-columns:repeat(4,1fr);max-width:1260px}
.plan-cards.cols-3{grid-template-columns:repeat(3,1fr);max-width:950px}
.pcard{background:#fff;border:1px solid #c9d1da;text-align:center;overflow:hidden;position:relative;box-shadow:0 8px 22px -10px rgba(16,24,40,.22)}
.pcard .pc-head{background:#2c333c;color:#fff;padding:24px 14px}
.pcard .pc-name{font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.pcard .pc-price{font-size:42px;font-weight:800;line-height:1}
.pcard .pc-price .cur{font-size:20px;vertical-align:super;font-weight:700}
.pcard .pc-per{font-size:12px;opacity:.7;display:block;margin-top:6px;font-weight:600}
.pcard .pc-setup{font-size:11.5px;opacity:.62;margin-top:7px;font-weight:600;letter-spacing:.2px}

/* '?' help bubbles on plan features. The tooltip itself is a single fixed node
   appended to <body> by plan_cards.php -- .pcard has overflow:hidden for the
   POPULAR ribbon, so anything drawn inside a card would be clipped. */
.pc-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;
  padding:0;border:0;border-radius:50%;background:rgba(90,100,114,.22);color:var(--muted);
  font:700 10px/1 var(--sans);cursor:help;vertical-align:middle;transition:background .15s,color .15s}
.pc-help:hover,.pc-help:focus-visible{background:var(--crimson);color:#fff;outline:none}
.pc-help:focus-visible{box-shadow:0 0 0 3px rgba(168,4,0,.25)}
/* On the dark card head and on hovered/popular cards the muted grey disappears. */
.pc-head .pc-help,.pcard.pop .pc-feats .pc-help,.plan-cards .pcard:hover .pc-feats .pc-help{background:rgba(255,255,255,.22);color:#fff}

.pc-tip{position:fixed;z-index:2147483000;max-width:260px;background:var(--ink);color:#fff;
  font:500 12.5px/1.5 var(--sans);padding:9px 12px;border-radius:9px;box-shadow:0 12px 30px -8px rgba(16,24,40,.5);
  opacity:0;pointer-events:none;transition:opacity .13s ease;letter-spacing:.1px}
.pc-tip.on{opacity:1}
.pc-tip::after{content:"";position:absolute;left:50%;margin-left:-6px;border:6px solid transparent;
  top:100%;border-top-color:var(--ink)}
.pc-tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}
@media(max-width:520px){.pc-tip{max-width:calc(100vw - 24px)}}
.pcard .pc-feats-head{background:#eef2f6;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted);padding:11px;text-transform:uppercase}
.pcard .pc-feats{list-style:none;padding:0;margin:0}
.pcard .pc-feats li{padding:11px 12px;font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.pcard .pc-feats li:nth-child(even){background:#f7f9fb}
.pcard .pc-feats .lbl{font-weight:700;color:var(--ink)}
.pcard .pc-cta{padding:20px 14px}
.pcard .pc-cta .btn{width:auto;justify-content:center;padding:10px 30px;font-size:13px;border-radius:8px;letter-spacing:.5px}
.pcard{transition:transform .22s ease,box-shadow .22s ease}
.pcard .pc-feats-head,.pcard .pc-feats,.pcard .pc-feats li,.pcard .pc-cta{transition:background .2s ease,color .2s ease,border-color .2s ease}
/* popular keeps its bphost-red header at all times */
.pcard.pop .pc-head{background:linear-gradient(150deg,var(--crimson),var(--crimson-deep));color:#fff}
/* ===== ACTIVE STATE — popular by default, follows the mouse on hover ===== */
.pcard.pop,
.plan-cards .pcard:hover{z-index:6;transform:scale(1.06);box-shadow:0 22px 52px -18px rgba(16,24,40,.4)}
.plan-cards .pcard.pop:hover{transform:scale(1.08)}
.pcard.pop .pc-feats-head,
.plan-cards .pcard:hover .pc-feats-head{background:#14161b;color:#9aa0a8}
.pcard.pop .pc-feats,
.plan-cards .pcard:hover .pc-feats{background:#1b1e24}
.pcard.pop .pc-feats li,
.plan-cards .pcard:hover .pc-feats li{color:#dfe3e8;border-bottom-color:rgba(255,255,255,.07)}
.pcard.pop .pc-feats li:nth-child(even),
.plan-cards .pcard:hover .pc-feats li:nth-child(even){background:#23272f}
.pcard.pop .pc-feats .lbl,
.plan-cards .pcard:hover .pc-feats .lbl{color:#fff}
.pcard.pop .pc-cta,
.plan-cards .pcard:hover .pc-cta{background:#1b1e24}
/* ===== DEACTIVATE the default-popular card when another card is hovered ===== */
.plan-cards:hover .pcard.pop:not(:hover){transform:none;box-shadow:none;z-index:1}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats-head{background:#eef2f6;color:var(--muted)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats{background:#fff}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats li{color:var(--ink-soft);border-bottom-color:var(--line)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats li:nth-child(even){background:#f7f9fb}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats .lbl{color:var(--ink)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-cta{background:#fff}
.pcard .ribbon{position:absolute;top:14px;left:-32px;background:#111;color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;padding:5px 36px;transform:rotate(-45deg);z-index:3}
@media(max-width:1100px){.plan-cards,.plan-cards.cols-4,.plan-cards.cols-3{grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}.pcard.pop,.plan-cards .pcard:hover,.plan-cards .pcard.pop:hover{transform:none}}
@media(max-width:600px){.plan-cards,.plan-cards.cols-4,.plan-cards.cols-3{grid-template-columns:1fr}}

/* ---------- modern contact form ---------- */
.cform{max-width:760px;margin:0 auto}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.cform label{display:flex;flex-direction:column;font-weight:600;font-size:13.5px;color:var(--ink-soft);gap:6px;text-align:left}
.cform label.full{grid-column:1/-1}
.cform input,.cform textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:.15s}
.cform input:focus,.cform textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(168,4,0,.15)}
.cform textarea{resize:vertical;min-height:120px}
.cform .cform-submit{text-align:center}
.cform-submit .btn{width:100%;justify-content:center;padding:12px 24px}
@media(max-width:600px){.cform-grid{grid-template-columns:1fr}}

/* ---------- home service blocks: Shared / VPS / Reseller / Dedicated (modern flat dark cards) ---------- */
.svc-row{width:100%;padding:30px 0 64px}
.svc-row>.container{max-width:var(--maxw)}
.svc-head{text-align:center;max-width:720px;margin:0 auto 44px}
.svc-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:.3px;color:var(--ink)}
.svc-head p{color:var(--muted);font-size:17px;margin-top:12px;line-height:1.6}
.svc-blocks{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:24px}
.svc-block{display:flex;flex-direction:column;text-align:left;background:#2a363f;color:#fff;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:32px 28px;transition:transform .2s ease,border-color .2s ease}
.svc-block:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.svc-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;background:rgba(255,255,255,.08);margin-bottom:22px}
.svc-tag{font-size:13px;line-height:1.35;color:#8b97a5;font-weight:600;margin-bottom:9px}
.svc-block h3{font-size:21px;font-weight:800;letter-spacing:.2px;margin:0 0 12px;color:#fff}
.svc-block p{font-size:14.5px;line-height:1.65;color:#aab4c0;flex:1 1 auto;margin:0 0 26px}
.svc-more{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--crimson);color:#fff;font-weight:700;font-size:14px;letter-spacing:.2px;padding:11px 20px;border-radius:10px;transition:background .18s ease}
.svc-more,.svc-more:hover,.svc-more:focus{color:#fff}
.svc-more:hover{background:var(--crimson-deep)}
.svc-more i{transition:transform .2s ease}
.svc-block:hover .svc-more i{transform:translateX(4px)}
@media(max-width:980px){.svc-blocks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-blocks{grid-template-columns:1fr}}

/* ---------- testimonials (modern 3-card slider on a dark band with graphics) ---------- */
.tsec{position:relative;overflow:hidden;width:100%;padding:78px 0;background:#56626e;background-image:
  radial-gradient(900px 480px at 85% -12%,rgba(255,255,255,.10),transparent 60%),
  radial-gradient(820px 560px at 3% 118%,rgba(28,36,44,.45),transparent 56%)}
.tsec::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:32px 32px;opacity:.7}
.tsec::after{content:"";position:absolute;right:-170px;top:-190px;width:540px;height:540px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 72px rgba(255,255,255,.03);pointer-events:none}
.tsec>.container{position:relative;z-index:1;max-width:1560px}
.tsec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.tsec-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:#fff;display:inline-flex;align-items:center;gap:11px}
.tsec-head h2 .fa{color:var(--crimson);font-size:.9em}
.tsec-head p{color:#dfe5ea;font-size:17px;margin-top:12px;line-height:1.6}
.tg-wrap{position:relative}
.tg{overflow:hidden}
.tg-track{display:flex;gap:24px;align-items:stretch;transition:transform .6s ease;will-change:transform}
.tg-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:4;transition:background .18s ease,color .18s ease,border-color .18s ease}
.tg-nav:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.tg-nav .fa{font-size:20px;line-height:1}
.tg-nav.prev{left:-20px}
.tg-nav.next{right:-20px}
/* plan-card arrows: phones only (shown in the phone layout block) */
.pc-slider{position:relative}
.pc-slider .pc-nav{display:none;transition:opacity .2s,background .2s,color .2s}
.tcard{flex:0 0 calc((100% - 48px)/3);display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px;transition:transform .2s ease,box-shadow .2s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tstars{color:var(--crimson);font-size:13px;letter-spacing:4px;margin-bottom:18px}
.tquote{color:var(--ink-soft);font-size:15px;line-height:1.7;flex:1 1 auto;margin:0 0 24px}
.tperson{display:flex;align-items:center;gap:13px}
.tav{width:46px;height:46px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;flex:none}
.tname{font-weight:800;color:var(--ink);font-size:15px;line-height:1.25}
.trole{color:var(--muted);font-size:13px}
@media(max-width:980px){.tcard{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.tcard{flex-basis:100%}}

/* ---------- responsive ---------- */
@media(max-width:1100px){.wrap{padding:0 24px}.results-band .wrap,.hero .wrap,.cta-band .wrap{padding-left:24px;padding-right:24px}.tier-grid{grid-template-columns:repeat(3,1fr)}.feat-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;text-align:center;min-height:0}.hero-sub,.domain,.eyebrow{margin-left:auto;margin-right:auto}.hero-cta,.trust,.tlds{justify-content:center}.hero-art{order:-1;height:auto;margin-bottom:10px}.tier-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.nav .menu{display:none}}

/* ============================================================
   Sticky red-topbar header — keep the nav constantly visible
   site-wide (top_nav was static 45px; .header was absolute@48px).
============================================================ */
.top_nav{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:9001}
body .header,body.compact .header,body .fixednav3{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:9000;box-shadow:0 6px 24px -14px rgba(16,24,40,.22)}
/* the now-fixed top_nav left the normal flow (45px) — give that space back so content still clears the header */
body #main{padding-top:0}
/* end sticky header */

/* ============================================================
   Red "feature_section1" bands (home / about / hosting):
   bigger icon glyph (fill the white badge — kill the empty space),
   and larger, more readable feature copy + titles.
============================================================ */
.feature_section1.bg-crimson .element-icon{width:66px!important;height:66px!important;line-height:66px!important;font-size:34px!important;color:#a80400!important}
/* image logo badges (cPanel, WordPress, migration, support): real logo inside the same white circle as the other icons */
.feature_section1.bg-crimson .element-icon.cp-logo,
.feature_section1.bg-crimson .element-icon.wp-logo,
.feature_section1.bg-crimson .element-icon.mig-logo,
.feature_section1.bg-crimson .element-icon.sup-logo{background:#fff!important;border-radius:100%!important;float:left!important;display:flex!important;align-items:center;justify-content:center;line-height:0!important;font-size:0!important;margin:0 20px 0 6px!important}
.feature_section1.bg-crimson .element-icon.cp-logo img{width:32px;height:auto;display:block}
.feature_section1.bg-crimson .element-icon.wp-logo img{width:34px;height:auto;display:block}
.feature_section1.bg-crimson .element-icon.mig-logo img{width:36px;height:auto;display:block}
.feature_section1.bg-crimson .element-icon.sup-logo img{height:38px;width:auto;display:block}
/* FAQ toggle (+/-) icons in brand crimson instead of grey */
.vc_toggle_default .vc_toggle_icon,
.vc_toggle_default .vc_toggle_icon::before,
.vc_toggle_default .vc_toggle_icon::after,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon::before,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon::after{background:var(--crimson)!important;border-color:var(--crimson)!important}
.feature_section1.bg-crimson .king-elements h4{font-size:20px!important;line-height:1.3!important}
.feature_section1.bg-crimson .king-elements p,
.feature_section1.bg-crimson .king-elements p font{font-size:16px!important;line-height:1.65!important}
/* end feature_section1 sizing */
/* feature_section1 lead subtitle — larger + tight to the heading */
.feature_section1.bg-crimson .bpdiff-sub,
.feature_section1.bg-crimson .bpdiff-sub font{font-size:18px!important;line-height:1.6!important;color:#fff!important}
.feature_section1.bg-crimson h1{margin-bottom:8px!important}
/* hosting "BPHost Difference" band: pull the title block up (eat the top gap),
   open a gap before the icon grid, and recolour red -> site dark-gray slate
   (bpdiff-sub is hosting-only, so this is scoped to that band) */
.feature_section1.bg-crimson:has(.bpdiff-sub){padding-top:50px!important;
  background-color:#2c333c!important;
  background-image:
    radial-gradient(1000px 560px at 88% -12%,rgba(255,255,255,.08),transparent 60%),
    radial-gradient(820px 640px at 2% 120%,rgba(0,0,0,.30),transparent 58%)!important}
.feature_section1.bg-crimson .bpdiff-sub{margin-bottom:40px!important}

/* ============================================================
   Legacy fix: the ArkaHost theme floats the content column
   (.entry-content.blog_postcontent) and its wpb_row sections,
   which made following sections overlap (grey bg bleeding up
   behind the pricing). Unfloat so all content stacks normally.
============================================================ */
body .entry-content.blog_postcontent{float:none!important;width:auto!important}
body .entry-content.blog_postcontent .wpb_row{float:none!important;width:auto!important}
/* end legacy float fix */

/* legacy "what comes with..." text columns (dedicated / vps / reseller):
   bump the small body text into proportion with the big section title */
body .entry-content .wpb_text_column ul li,
body .entry-content .wpb_text_column ol li,
body .entry-content .wpb_text_column p,
body .entry-content .wpb_text_column p font{font-size:17px!important;line-height:1.75!important}
body .entry-content .wpb_text_column ul li{margin-bottom:7px!important}
body .entry-content .wpb_text_column h4,
body .entry-content .wpb_text_column h4 strong{font-size:21px!important;line-height:1.4!important}
body .entry-content .wpb_text_column h4{margin-bottom:14px!important}
/* end legacy text-column sizing */

/* Website portfolio (web-design.php): the legacy "outer_slider" JS plugin isn't
   loaded, so the slides collapsed to zero height. Render them as a clean,
   responsive thumbnail grid instead — no JS dependency. */
#slider-outline{max-width:1180px;margin:0 auto!important;padding:0 16px}
#slider-outline #slider,#slider-outline #sl-view{height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}
#sl-wrap{position:static!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;width:auto!important;height:auto!important}
#sl-wrap .sl-div{width:auto!important;height:auto!important;float:none!important;margin:0!important;left:auto!important;top:auto!important;position:static!important}
#sl-wrap .sl-div .wpb_single_image,#sl-wrap .sl-div figure,#sl-wrap .sl-div .vc_single_image-wrapper,#sl-wrap .sl-div a{margin:0!important;padding:0!important;display:block!important;border:0!important;background:none!important}
#sl-wrap .sl-div img{width:100%!important;height:230px!important;object-fit:cover;object-position:top center;border-radius:12px;display:block;box-shadow:0 12px 30px -16px rgba(16,24,40,.45);transition:transform .25s ease}
#sl-wrap .sl-div img:hover{transform:translateY(-6px)}
#sl-next,#sl-prev{display:none!important}

/* two-tone page titles: black base + red highlight span */
.page-head h1 .hl{color:var(--crimson)}

/* web-design dark band: space out the 4 text columns (legacy vc_col-sm-3 had 0 gutter) */
#king-611877 .vc_row .vc_col-sm-3{padding-left:20px!important;padding-right:20px!important}
#king-611877 .margin_top9{margin-top:40px!important}

/* ===== Domains page: search results on light section + full TLD price table ===== */
#resultsBand{max-width:1400px;margin:30px auto 36px;padding:0 20px}
#resultsBand .db-results-title{color:var(--ink);font-size:20px;font-weight:800;margin:0 0 16px;text-align:center}
/* ====== DOMAIN PRICING TABLE — full-width modern restyle ====== */

/* Filter toolbar: full width, left-aligned, modern pill input with search icon + crimson focus ring */
.tld-tools{width:100%;max-width:none;margin:0 0 22px;display:flex;justify-content:flex-start}
.tld-tools input{width:420px;max-width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 18px 13px 44px;font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;box-shadow:var(--shadow-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.tld-tools input::placeholder{color:var(--muted)}
#tldFilter:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(168,4,0,.12)}

/* Table: full width (980px cap removed), soft-shadow rounded card, no heavy borders */
.tld-table{width:100%;max-width:none;margin:0;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);font-family:var(--sans)}
.tld-table th,.tld-table td{padding:15px 22px;font-size:15px;vertical-align:middle}

/* Numeric columns right-aligned, Domain left — set on every cell so .price and .na both align */
.tld-table th:not(:first-child),.tld-table td:not(:first-child){text-align:right}
.tld-table th:first-child,.tld-table td:first-child{text-align:left}

/* Header: clean white micro-label row with a crimson underline accent, sticky below the site nav */
.tld-table thead th{background:#fff;color:var(--muted);font-weight:700;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;border-bottom:2px solid var(--crimson);box-shadow:0 1px 0 var(--line)}

/* Body rows: hairline dividers on cells (filter-safe, no nth-child zebra) + full-height hover tint */
.tld-table tbody tr td{border-top:1px solid var(--line);transition:background-color .12s ease}
.tld-table tbody tr:hover td{background:var(--bg-cool)}

/* Cell emphasis: bold ink TLD; Register price in ink, transfer/renew muted; tabular figures */
.tld-table .tld{font-weight:800;color:var(--ink);letter-spacing:-.1px}
.tld-table td.price{font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tld-table td.tld + td.price{font-weight:800;color:var(--ink)}
.tld-table td.na{color:var(--muted);font-weight:600;white-space:nowrap}

@media(max-width:900px){
  .tld-tools input{width:100%}
  .tld-table th,.tld-table td{padding:12px 14px;font-size:14px}
  .tld-table thead th{padding-left:14px;padding-right:14px;font-size:11px}
}
@media(max-width:640px){
  .tld-table th,.tld-table td{padding:11px 12px;font-size:13.5px}
}
@media(max-width:420px){
  .tld-table th,.tld-table td{padding:10px 8px;font-size:13px}
  .tld-table thead th{padding-left:8px;padding-right:8px;font-size:10.5px;letter-spacing:.5px}
}

/* ===== Domains hero: animated red search band ("something big about to be born") ===== */
.dom-hero{position:relative;overflow:hidden;isolation:isolate;padding:96px 24px 104px;background:linear-gradient(135deg,#c00500 0%,#9a0300 46%,#760200 100%)}
.dom-hero-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;text-align:center}
.dom-hero-title{color:#fff;font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:.3px;line-height:1.06;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.28)}
.dom-hero-sub{color:rgba(255,255,255,.9);font-size:clamp(15px,1.6vw,19px);margin:16px 0 36px}
.dom-search{display:flex;align-items:stretch;max-width:880px;height:66px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 30px 70px -22px rgba(0,0,0,.55);overflow:hidden;position:relative;z-index:2}
.dom-www{display:flex;align-items:center;padding:0 22px;background:#fbe7e6;color:var(--crimson);font-weight:800;font-size:18px;letter-spacing:.5px}
.dom-search input{flex:1;min-width:0;border:0;outline:0;padding:0 22px;font-size:17px;color:var(--ink);background:#fff}
.dom-search input::placeholder{color:#9aa3ad}
.dom-ext{display:flex;align-items:center;background:#fbe7e6;border-left:1px solid #f2d4d2}
.dom-ext select{height:100%;border:0;background:transparent;color:var(--crimson);font-weight:700;font-size:16px;padding:0 16px;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
.dom-go{border:0;background:var(--crimson);color:#fff;width:74px;flex:none;display:grid;place-items:center;cursor:pointer;transition:background .18s}
.dom-go:hover{background:var(--crimson-deep)}
.dom-go .ic{width:26px;height:26px;stroke-width:2.4}
@media(max-width:560px){.dom-search{height:auto;flex-wrap:wrap}.dom-www{display:none}.dom-search input{flex:1 1 100%;height:56px;border-bottom:1px solid var(--line)}.dom-ext{flex:1}.dom-go{width:auto;flex:1}}
.dom-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dom-hero-bg::before{content:"";position:absolute;inset:-20%;background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.6px);background-size:28px 28px;opacity:.5;animation:domDots 18s linear infinite}
.dom-hero-bg .blob{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.dom-hero-bg .b1{width:420px;height:420px;background:radial-gradient(circle,#ff6a5a,transparent 68%);top:-110px;left:6%;opacity:.6;animation:domDrift1 9s ease-in-out infinite}
.dom-hero-bg .b2{width:340px;height:340px;background:radial-gradient(circle,#ff9b3f,transparent 70%);bottom:-90px;right:9%;opacity:.55;animation:domDrift2 11s ease-in-out infinite}
.dom-hero-bg .b3{width:300px;height:300px;background:radial-gradient(circle,#ffffff,transparent 70%);top:22%;right:24%;opacity:.2;animation:domDrift3 8s ease-in-out infinite}
.dom-hero-bg .b4{width:260px;height:260px;background:radial-gradient(circle,#ff362b,transparent 70%);bottom:4%;left:16%;opacity:.55;animation:domDrift1 10s ease-in-out infinite reverse}
.dom-hero-bg .glow{position:absolute;left:50%;top:56%;width:680px;height:680px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0) 60%);animation:domBorn 4.5s ease-in-out infinite}
.dom-hero-bg .sweep{position:absolute;top:-60%;left:-45%;width:42%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-16deg);animation:domSweep 6.5s ease-in-out infinite}
@keyframes domDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,64px) scale(1.28)}}
@keyframes domDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-104px,-52px) scale(1.22)}}
@keyframes domDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-72px,84px) scale(1.34)}}
@keyframes domBorn{0%,100%{transform:translate(-50%,-50%) scale(.62);opacity:.28}50%{transform:translate(-50%,-50%) scale(1.34);opacity:.95}}
@keyframes domSweep{0%{left:-45%}58%,100%{left:135%}}
@keyframes domDots{from{background-position:0 0}to{background-position:280px 140px}}

/* nav links: bold, black inactive, crimson active/hover; top utility bar -> black */
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a{color:#0E0E12!important;font-weight:700!important}
body .navbar-default .navbar-nav>li>a:hover,body .navbar-default .navbar-nav>li:hover>a,.header ul.nav>li>a:hover{color:var(--crimson)!important}
body .navbar-default .navbar-nav>li.current-menu-item>a,body .navbar-default .navbar-nav>li.current_page_item>a,body .navbar-default .navbar-nav>li.current-menu-parent>a,body .navbar-default .navbar-nav>li.active>a{color:var(--crimson)!important}
.top_nav{background-color:#0E0E12!important}

/* homepage domain-search results: 3-column grid (was being squeezed to 1 col by the shared #resultsBand cap) */
.domain_search #resultsBand{max-width:1400px;margin:20px auto 6px;padding:0}
/* keep results title + status text light on the dark homepage band (beats the domains-page #resultsBand dark rule) */
.domain_search #resultsBand .db-results-title,.domain_search #resultsBand .db-results-title strong{color:#fff}
.domain_search #resultsBand .dr-msg{color:#dfe5ec}
.domain_search #resultsBand .dr-note{color:#aab3c0}
.domain_search .domain-results{grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.domain_search .domain-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.domain_search .domain-results{grid-template-columns:1fr}}
/* good-news search results title -> brand green (same green as the AVAILABLE indicator) */
.db-results-title.is-good,.db-results-title.is-good strong{color:var(--green)!important}

/* ===== Plan billing toggle (Monthly / Annual = 1 month free) ===== */
.bill-toggle{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 30px}
.bill-opt{font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);background:#fff;border:1px solid #c7ced7;border-radius:999px;padding:11px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .15s,border-color .15s,color .15s}
.bill-opt:hover{border-color:var(--crimson)}
.bill-opt.active{background:var(--crimson);border-color:var(--crimson);color:#fff}
.bill-save{font-size:11.5px;font-weight:800;letter-spacing:.2px;border-radius:999px;padding:3px 9px;background:var(--crimson);color:#fff;white-space:nowrap}
.bill-opt.active .bill-save{background:rgba(255,255,255,.2);color:#fff}
.pc-was{font-size:14px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:line-through;margin:0 0 3px;line-height:1.1;display:block}
/* contact form: swap eyebrow/heading colors (heading red, eyebrow dark) */
.cform-head .kick{color:var(--ink)}
.cform-head .display{color:var(--crimson)}
/* top bar: Client Area as plain text (no box) */
.top_nav .tpbut{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.top_nav .tpbut:hover{background:transparent!important;color:var(--crimson)!important}

/* kill the black top bar + add cart/login icons after the nav */
.top_nav{display:none!important}
#king-mainmenu .nav-sep{float:left;list-style:none;width:1px;height:24px;background:#c7ced7;margin:18px 8px 0 16px}
#king-mainmenu .nav-act{float:left;list-style:none}
#king-mainmenu .nav-act>a{display:block;padding:19px 9px;line-height:0;color:var(--crimson)!important}
#king-mainmenu .nav-act>a svg{width:22px;height:22px;display:block}
#king-mainmenu .nav-act>a:hover{color:var(--crimson-deep)!important}
.domain_search .offers ul li.last{padding-bottom:10px!important}

/* About — founding story */
.alicent.about-story{max-width:820px;margin:0 auto;text-align:center}
.alicent.about-story h3.light{font-size:25px;line-height:1.4;font-weight:600;color:var(--ink);margin:0 0 24px}
.alicent.about-story p{font-size:17px;line-height:1.78;color:var(--muted);margin:0 0 16px}
.alicent.about-story p:last-child{margin-bottom:0}
@media(max-width:600px){.alicent.about-story h3.light{font-size:21px}}

/* ===========================================================
   Legal documents (privacy.php / terms.php / aup.php / legal.php)
   Rendered by partials/legal_doc.php. A sticky contents rail
   beside a single readable column — these are long documents
   people arrive at mid-way from a footer link, so the rail is
   what makes them navigable rather than a wall of text.
=========================================================== */
.legal{padding:56px 0 72px}
.legal-grid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:56px;align-items:start;max-width:1180px}

/* --- contents rail --- */
/* The legacy theme sets overflow-x:hidden on <html> (style.css) AND <body>
   (menu-4.css). With both set, <body> becomes a scroll container that never
   scrolls, and a sticky element sticks to its nearest scroll container -- so
   the rail rode away with the page. clip still stops sideways scrolling but
   is not a scroll container. Scoped to pages that carry the rail. */
body:has(.legal-grid){overflow-x:clip}
/* The rail spans the document's full height (the grid's align-items:start
   would shrink it to the list's own height, leaving the sticky list no room
   to travel), and the list inside it floats beside the reader. */
.legal-toc{align-self:stretch}
.legal-toc .lg-toc-in{position:sticky;top:104px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:thin}
.lg-toc-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.legal-toc li{margin:0}
.legal-toc a{display:flex;gap:8px;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);transition:color .15s,border-color .15s}
.legal-toc a span{color:#9aa4b2;font-variant-numeric:tabular-nums;flex:none}
.legal-toc a:hover{color:var(--crimson);border-left-color:var(--crimson)}
/* The section being read, set by the script in partials/legal_doc.php. */
.legal-toc a.is-active{color:var(--crimson);border-left-color:var(--crimson);font-weight:600}
.legal-toc a.is-active span{color:var(--crimson)}

/* --- document --- */
.legal-doc{min-width:0}
.lg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 26px}
.lg-badge{display:inline-block;background:#FBECEB;color:var(--crimson-deep);border:1px solid #F3D3D1;border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.lg-entity{font-size:13px;color:var(--muted)}
.lg-lead{font-size:17.5px;line-height:1.65;color:var(--ink-soft);padding:0 0 28px;border-bottom:1px solid var(--line)}
.lg-lead p+p{margin-top:14px}

.lg-sec{padding:30px 0 4px;scroll-margin-top:110px}
.lg-sec h2{display:flex;align-items:baseline;gap:12px;font-size:22px;font-weight:600;color:var(--ink);margin:0 0 14px;letter-spacing:-.2px}
.lg-num{flex:none;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--crimson);color:#fff;border-radius:8px;font-size:13px;font-weight:700;align-self:center}
.lg-anchor{margin-left:6px;color:#c9d2dc;font-weight:400;opacity:0;transition:opacity .15s}
.lg-sec:hover .lg-anchor{opacity:1}
.lg-anchor:hover{color:var(--crimson)}

.lg-sec p,.lg-sec li{font-size:15.5px;line-height:1.72;color:var(--ink-soft)}
.lg-sec p+p{margin-top:13px}
.lg-sec h3{font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 8px}
.lg-sec ul,.lg-sec ol{margin:12px 0 0;padding-left:20px}
.lg-sec li{margin:7px 0}
.lg-sec li::marker{color:var(--crimson)}
.lg-sec a{color:var(--crimson);text-decoration:underline;text-underline-offset:2px}
.lg-sec a.btn{text-decoration:none}
.lg-sec a.btn-primary,.lg-sec a.btn-primary:hover{color:#fff}
.lg-sec strong{color:var(--ink);font-weight:600}

/* A callout for the handful of clauses people genuinely need to notice
   (backups, liability, cooling-off) rather than burying them in the run of text. */
.lg-note{background:var(--bg-cool);border-left:3px solid var(--crimson);border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0 0}
.lg-note p{font-size:14.5px;color:var(--ink-soft)}
.lg-note p+p{margin-top:9px}

.lg-dl{margin:16px 0 22px}
.lg-row{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.lg-row dt{flex:none;width:170px;color:var(--muted)}
.lg-row dd{margin:0;color:var(--ink);font-weight:500}

.lg-foot{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}
.lg-foot h2{font-size:20px;font-weight:600;margin:0 0 10px}
.lg-foot p{font-size:15.5px;color:var(--ink-soft);line-height:1.7}

@media(max-width:1000px){
  .legal-grid{grid-template-columns:1fr;gap:0;max-width:820px}
  /* On narrow screens the rail becomes a collapsed index above the document
     rather than a sticky column that would eat half the viewport. */
  .legal-toc .lg-toc-in{position:static;max-height:none;overflow:visible;background:var(--bg-cool);border-radius:14px;padding:18px 20px;margin-bottom:30px}
  .legal-toc ol{columns:2;column-gap:26px;border-left:0}
  .legal-toc a{padding:5px 0;border-left:0}
}
@media(max-width:620px){
  .legal{padding:34px 0 52px}
  .legal-toc ol{columns:1}
  .lg-lead{font-size:16px}
  .lg-sec h2{font-size:19px;gap:10px}
  .lg-row{flex-direction:column;gap:2px}
  .lg-row dt{width:auto}
}


/* ===========================================================
   Secure contact form (partials/contact_form.php -> api/contact.php)
   No email address is ever printed on the page, so there is nothing
   for a harvester to pick up.
=========================================================== */

/* Honeypot. Kept out of the layout AND out of the accessibility tree, so a
   person never meets it but a form-filling bot does. Not display:none —
   some bots skip hidden fields, and this way they don't. */
.bp-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.cform label .lbl{display:block}
.cform label .opt{font-weight:400;color:var(--muted)}
.cform .cform-submit{text-align:center}
.cform-submit .btn[disabled]{opacity:.6;cursor:progress}
.cform-status{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;min-height:1.2em}
.cform-status.ok{color:#127a52;font-weight:600}
.cform-status.bad{color:var(--crimson-deep);font-weight:600}

/* Result banner for the no-JavaScript path (redirected back with ?sent=/?err=). */
.cform-msg{max-width:760px;margin:0 auto 22px;padding:14px 18px;border-radius:12px;font-size:15px;line-height:1.55}
.cform-msg.ok{background:#EAF7F1;border:1px solid #BFE6D6;color:#0F6B48}
.cform-msg.bad{background:#FBECEB;border:1px solid #F3D3D1;color:var(--crimson-deep)}

/* ---------- contact page: form beside the support panel ----------
   contact_form.php with $cform_aside. The panel shares the testimonials
   band's slate (.tsec) so the page reads as part of the same site. */
.cform-split-sec{padding:56px 0 80px}
.cform-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch;max-width:1320px;margin:0 auto}
.cform-split .cform-head{text-align:left;max-width:none;margin:0 0 26px}
.cform-split .cform,.cform-split .cform-msg{max-width:none;margin-left:0;margin-right:0}
.cform-split .recaptcha-note{text-align:left}
.cform-main{background:#fff;border:1px solid #d5dce4;border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow-sm)}
.cform-aside{position:relative;overflow:hidden;border-radius:var(--radius);padding:42px 40px;color:#e7ebef;
  background:#56626e;background-image:
  radial-gradient(700px 420px at 100% -10%,rgba(255,255,255,.12),transparent 60%),
  radial-gradient(620px 460px at 0% 115%,rgba(28,36,44,.5),transparent 58%);box-shadow:var(--shadow)}
.cform-aside::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:28px 28px;opacity:.6}
.cform-aside::after{content:"";position:absolute;right:-150px;top:-160px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 56px rgba(255,255,255,.03);pointer-events:none}
.cform-aside>*{position:relative;z-index:1}
/* The legacy theme bullets and indents every list in .entry-content. */
.cform-aside ul.ca-links,.cform-aside ul.ca-promise{margin-left:0;padding-left:0}
.cform-aside ul.ca-links>li,.cform-aside ul.ca-promise>li{list-style:none;margin:0;padding-left:0;background:none}
.cform-aside ul.ca-links>li::before,.cform-aside ul.ca-promise>li::before{content:none;display:none}
.ca-kick{font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#ffb3ae;margin-bottom:10px}
.ca-title{font-size:34px;line-height:1.15;font-weight:800;color:#fff;margin:0 0 14px}
.ca-lead{font-size:15.5px;line-height:1.65;color:#dfe4e9;margin:0 0 26px}
.ca-links{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.ca-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.ca-links a:hover,.ca-links a:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);transform:translateX(3px);color:#fff;outline:none}
.ca-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--crimson);flex:none;box-shadow:0 6px 16px -6px rgba(168,4,0,.7)}
.ca-ic .ic{width:21px;height:21px;color:#fff}
.ca-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ca-txt strong{font-size:15px;font-weight:700}
.ca-txt span{font-size:13px;color:#c9d0d7;line-height:1.4}
.ca-go{width:18px;height:18px;color:#c9d0d7;flex:none}
.ca-promise{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:9px}
.ca-promise li{display:flex;align-items:center;gap:10px;font-size:14px;color:#eef1f4}
.ca-promise .ic{width:18px;height:18px;color:#7be0b4;stroke-width:2.6}
@media(max-width:980px){.cform-split{grid-template-columns:1fr;gap:26px}}
@media(max-width:560px){.cform-main,.cform-aside{padding:28px 22px}.ca-title{font-size:28px}.cform-split .cform-grid{grid-template-columns:1fr}}

/* Legal page footer call-to-action pair. */
.lg-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media(max-width:480px){.lg-cta{flex-direction:column}.lg-cta .btn{width:100%;justify-content:center}}

/* ===========================================================
   Kairo chat widget — moved out of partials/chat_widget.php
   (was a 6.3 KB inline <style> on every page). All .bpc- scoped.
=========================================================== */
#bpc-root{--bpc-red:#a80400;--bpc-red2:#7c0300;--bpc-ink:#1f2a37;--bpc-mut:#64748b;--bpc-line:#e8ebf0;position:fixed;right:22px;bottom:22px;z-index:2147483000;font-family:inherit}
#bpc-toggle{position:relative;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,var(--bpc-red),var(--bpc-red2));color:#fff;box-shadow:0 10px 28px rgba(168,4,0,.42);transition:transform .18s ease,box-shadow .18s ease;display:flex;align-items:center;justify-content:center}
#bpc-toggle:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(168,4,0,.5)}
#bpc-toggle .bpc-ic{width:28px;height:28px;fill:#fff;position:absolute;transition:opacity .18s,transform .25s}
#bpc-toggle .bpc-ic-close{opacity:0;transform:rotate(-90deg) scale(.6)}
#bpc-root.bpc-open .bpc-ic-chat{opacity:0;transform:rotate(90deg) scale(.6)}
#bpc-root.bpc-open .bpc-ic-close{opacity:1;transform:none}
#bpc-toggle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(168,4,0,.5);animation:bpc-pulse 2.6s infinite}
#bpc-root.bpc-open #bpc-toggle::after,#bpc-root.bpc-seen #bpc-toggle::after{animation:none}
@keyframes bpc-pulse{0%{box-shadow:0 0 0 0 rgba(168,4,0,.45)}70%{box-shadow:0 0 0 16px rgba(168,4,0,0)}100%{box-shadow:0 0 0 0 rgba(168,4,0,0)}}

#bpc-panel{position:absolute;right:0;bottom:76px;width:374px;max-width:calc(100vw - 32px);height:auto;max-height:min(560px,calc(100vh - 120px));background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(20,30,50,.28);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:bpc-in .22s cubic-bezier(.22,1,.36,1)}
#bpc-panel[hidden],#bpc-teaser[hidden]{display:none!important}
@keyframes bpc-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
#bpc-head{background:linear-gradient(135deg,var(--bpc-red),var(--bpc-red2));color:#fff;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bpc-head-id{display:flex;align-items:center;gap:11px}
.bpc-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;letter-spacing:.5px}
.bpc-head-txt{display:flex;flex-direction:column;line-height:1.25}
.bpc-head-txt strong{font-size:15.5px}
.bpc-head-txt small{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:6px}
.bpc-online{width:7px;height:7px;border-radius:50%;background:#46e07f;display:inline-block;box-shadow:0 0 0 2px rgba(70,224,127,.3)}
#bpc-x{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.85;padding:0 4px}
#bpc-x:hover{opacity:1}

#bpc-msgs{flex:0 1 auto;min-height:0;max-height:min(46vh,340px);overflow-y:auto;padding:16px 14px;background:#f6f8fb;display:flex;flex-direction:column;gap:10px}
.bpc-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;white-space:normal;word-wrap:break-word}
.bpc-msg a{color:var(--bpc-red);text-decoration:underline}
.bpc-bot{align-self:flex-start;background:#fff;color:var(--bpc-ink);border:1px solid var(--bpc-line);border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(20,30,50,.05)}
.bpc-user{align-self:flex-end;background:linear-gradient(135deg,var(--bpc-red),var(--bpc-red2));color:#fff;border-bottom-right-radius:5px}
.bpc-msg p{margin:0 0 8px}.bpc-msg p:last-child{margin:0}
.bpc-msg ul{margin:6px 0;padding-left:18px}.bpc-msg li{margin:2px 0}
.bpc-msg .bpc-h{font-weight:700;margin:9px 0 3px}.bpc-msg .bpc-h:first-child{margin-top:0}
.bpc-typing{align-self:flex-start;background:#fff;border:1px solid var(--bpc-line);border-radius:14px;border-bottom-left-radius:5px;padding:12px 14px;display:flex;gap:4px}
.bpc-typing span{width:7px;height:7px;border-radius:50%;background:#c2cad6;animation:bpc-bounce 1.2s infinite}
.bpc-typing span:nth-child(2){animation-delay:.18s}.bpc-typing span:nth-child(3){animation-delay:.36s}
@keyframes bpc-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

#bpc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 4px;background:#f6f8fb}
.bpc-chip{font-size:12.5px;color:var(--bpc-red);background:#fff;border:1px solid #f0d3d2;border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s}
.bpc-chip:hover{background:#fff4f3;border-color:var(--bpc-red)}

#bpc-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--bpc-line);background:#fff}
#bpc-input{flex:1;border:1px solid #dfe4ea;border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit;resize:none;max-height:96px;outline:none;color:var(--bpc-ink)}
#bpc-input:focus{border-color:var(--bpc-red);box-shadow:0 0 0 3px rgba(168,4,0,.1)}
#bpc-send{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--bpc-red),var(--bpc-red2));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .12s}
#bpc-send svg{width:19px;height:19px}
#bpc-send:hover{transform:translateY(-1px)}#bpc-send:disabled{opacity:.5;cursor:default;transform:none}
#bpc-foot{font-size:11px;color:var(--bpc-mut);text-align:center;padding:0 12px 10px;background:#fff}
#bpc-foot a{color:var(--bpc-mut);text-decoration:underline}
#bpc-teaser{position:absolute;right:4px;bottom:78px;width:250px;background:#fff;color:var(--bpc-ink);border-radius:15px;box-shadow:0 16px 38px rgba(20,30,50,.22);padding:14px 30px 14px 15px;font-size:13.5px;line-height:1.5;cursor:pointer;animation:bpc-in .3s cubic-bezier(.22,1,.36,1)}
#bpc-teaser p{margin:0}
#bpc-teaser::after{content:"";position:absolute;right:24px;bottom:-7px;width:15px;height:15px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0}
#bpc-teaser-x{position:absolute;top:5px;right:8px;border:0;background:transparent;font-size:18px;line-height:1;color:#aab3bf;cursor:pointer;padding:0}
#bpc-teaser-x:hover{color:#64748b}
#bpc-root.bpc-open #bpc-teaser{display:none}
@media(max-width:480px){#bpc-root{right:14px;bottom:14px}#bpc-panel{width:calc(100vw - 24px);max-height:calc(100vh - 88px)}#bpc-msgs{max-height:calc(100vh - 300px)}#bpc-teaser{width:calc(100vw - 92px);max-width:260px}}

/* ---- reCAPTCHA v3 (partials/recaptcha.php) -------------------------------
   Invisible: Google's floating corner badge is hidden, which its terms allow
   as long as each protected form shows the short notice below. Kept quiet so
   it reads as a footnote, not a feature. */
.grecaptcha-badge{visibility:hidden!important}
.recaptcha-note{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.5;color:var(--muted)}
.recaptcha-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.recaptcha-note a:hover{color:var(--ink)}
#bpc-foot .recaptcha-note{display:block;margin:4px 0 0;font-size:10.5px;color:var(--bpc-mut)}

/* ---------- shared utilities (replace every former inline style="") ----------
   The site carries no inline CSS: pages use these classes, and anything a
   script shows or hides uses the hidden attribute. !important because each
   stands in for an inline style, which always beat the legacy theme's rules. */
[hidden]{display:none!important}
.svg-sprite{position:absolute!important}
.ta-left{text-align:left!important}
.ta-center{text-align:center!important}
.tx-white{color:#fff!important}
.mb-8{margin-bottom:8px!important}
.mb-26{margin-bottom:26px!important}
.measure-780{max-width:780px!important;margin-left:auto!important;margin-right:auto!important}
.bg-crimson{background-color:#a80400!important}
.bg-congruent{background-image:url(../legacy/uploads/2015/08/congruent_outline.png)!important;background-repeat:repeat!important}
/* The FAQ sections' texture, darkened a step so the white cut-out art in
   front of it stands out: a flat tint layered over the tile, at any height. */
.bg-agsquare{background-image:linear-gradient(rgba(17,24,39,.07),rgba(17,24,39,.07)),url(../legacy/uploads/2015/08/agsquare.png)!important;background-repeat:repeat!important}
.bg-concrete{background-image:url(../legacy/uploads/2015/08/concrete-texture.png)!important;background-repeat:repeat!important}
.img-460{max-width:min(460px,100%)!important;height:auto!important}
.img-380{display:block!important;margin:10px auto!important;max-width:380px!important;width:100%!important;height:auto!important}

/* ---------- network status page (status.php), moved out of the page ---------- */
.bps{padding:10px 0 70px}
.bps .wrap{max-width:880px;margin:0 auto;padding:0 20px}
.bps-banner{display:flex;align-items:center;gap:14px;border-radius:14px;padding:20px 22px;margin:0 0 26px;font-weight:600;font-size:18px;color:#fff}
.bps-banner.ok{background:linear-gradient(135deg,#1FB57A,#15935f)}
.bps-banner.bad{background:linear-gradient(135deg,#a80400,#7e0300)}
.bps-banner svg{flex:0 0 auto;width:28px;height:28px}
.bps-list{list-style:none;margin:0;padding:0;border:1px solid #e7e3e4;border-radius:14px;overflow:hidden;background:#fff}
.bps-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-top:1px solid #efebec}
.bps-list li:first-child{border-top:0}
.bps-name{font-weight:600;color:#0E0E12}
.bps-desc{display:block;font-size:14px;color:#6f676a;margin-top:2px}
.bps-state{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
.bps-state i{width:10px;height:10px;border-radius:50%;display:inline-block}
.bps-state.ok{color:#15935f}.bps-state.ok i{background:#1FB57A}
.bps-state.bad{color:#a80400}.bps-state.bad i{background:#a80400}
.bps-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:16px;font-size:14px;color:#6f676a}
.bps-meta a{color:#a80400;font-weight:600;text-decoration:none}
.bps-help{margin-top:30px;padding:18px 20px;border-radius:14px;background:#f7f4f5;color:#3b3538;font-size:15px}
.bps-help a{color:#a80400;font-weight:600}
@media (max-width:600px){.bps-list li{flex-direction:column;align-items:flex-start;gap:8px}.bps-banner{font-size:16px}}

/* ========== PHONE LAYOUT (2026-10-02) ==========================================
   The legacy ArkaHost responsive.css pins .container to fixed widths per phone
   size (335px on a 390px phone, 350px, 440px...) with `body .container`, which
   outranks main.css's `.container{width:auto}`. Add main.css's 48px side padding
   and every section ran in a 239px strip with ~75px of white either side. Below
   1000px the container is fluid again; on phones the gutters drop to 18px. */
@media(max-width:999px){html body .container{width:auto}}
@media(max-width:760px){
  html body .container{padding-left:18px;padding-right:18px}
  .wrap,.results-band .wrap,.cta-band .wrap{padding-left:18px;padding-right:18px}
}

/* ---------- hero, phone: copy first, compact search, smaller superhero ---------- */
.hero .wrap>*{min-width:0}  /* grid items may shrink; the search box forced a 456px column */
@media(max-width:760px){
  .hero .wrap{display:flex;flex-direction:column;gap:0;text-align:left;padding:18px 18px 0;min-height:0}
  .hero-copy{width:100%}
  h1.hero-title{font-size:clamp(34px,10.5vw,44px);line-height:1.04;margin:10px 0 12px}
  .hero-sub{font-size:15.5px;line-height:1.55;margin:0 0 18px;max-width:none}
  /* search: the box keeps its look; the input gets the full first row */
  .domain{flex-wrap:wrap;gap:8px;padding:8px;max-width:none;margin:0}
  .domain .pfx{padding-left:8px}
  .domain input{flex:1 1 calc(100% - 46px);font-size:16px;padding:10px 4px}  /* 16px stops iOS zooming in */
  .domain select{flex:1 1 auto;height:44px;font-size:15px}
  .domain .go{flex:0 0 auto;height:44px;padding:0 20px;font-size:15px;justify-content:center}
  /* trust ticks as a tidy 2x2 grid */
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:18px;font-size:14px}
  .trust span{white-space:nowrap}
  /* the superhero under the copy, smaller, still breaking into the next band */
  .hero-art{order:0;height:auto;margin:6px 0 0;align-self:center}
  .hero-art .hero-img{max-height:250px;margin-bottom:-34px}
  .hero-art .glow{width:90%;height:60%}
  .chip{display:none}
}

/* ---------- "since 2014" price band, phone: an even 3x2 grid ---------- */
@media(max-width:760px){
  .domain_search .db-heading{font-size:20px;letter-spacing:.6px;gap:10px;padding-top:6px;line-height:1.2;text-align:left;justify-content:flex-start}
  .domain_search .db-heading .ic{width:22px;height:22px}
  .domain_search .offers ul{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;padding:14px 0 6px}
  .domain_search .offers ul li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;margin:0;border:0;width:auto;font-size:15px;line-height:1.3;text-align:center}
  .domain_search .offers ul li strong{display:block;font-size:15px}
  .domain_search .offers ul li.last{grid-column:1/-1;padding:4px 0 0!important}
  .domain_search .offers ul li.last small{display:block;width:auto;font-size:12px;line-height:1.4}
  .domain_search .offers ul li.last small br{display:none}
}

/* ---------- "Why choose BPHOST", phone: every icon centred ---------- */
@media(max-width:760px){
  .feature_section1.bg-crimson h1,.feature_section1.bg-crimson h2{font-size:28px!important;line-height:1.15!important}
  /* .king-elements-inner raises this above the desktop rule that floats the
     logo icons (cp/wp/mig/sup-logo) left */
  .feature_section1.bg-crimson .king-elements-inner .element-icon{float:none!important;display:flex!important;align-items:center;justify-content:center;margin:0 auto 14px!important}
  .feature_section1.bg-crimson .king-elements-inner{text-align:center}
}

/* ---------- plan cards, phone: one swipeable row, next card peeking ---------- */
@media(max-width:600px){
  .bill-toggle{flex-wrap:nowrap;gap:8px;margin-bottom:22px}
  .bill-opt{font-size:14px;padding:9px 14px;gap:6px}
  .bill-save{font-size:10.5px;padding:2px 7px}
  .plan-cards,.plan-cards.cols-4,.plan-cards.cols-3{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:24px -18px 0;padding:6px 18px 18px;scroll-padding:0 18px;scrollbar-width:none;align-items:stretch}
  .plan-cards::-webkit-scrollbar{display:none}
  .plan-cards .pcard{flex:0 0 84%;scroll-snap-align:start}
  /* arrows: brand red, halfway down the cards so the eye finds them */
  .pc-slider .pc-nav{display:grid;top:50%;transform:translateY(-50%);width:44px;height:44px;z-index:6;
    background:var(--crimson);border-color:var(--crimson);color:#fff;box-shadow:0 8px 20px -6px rgba(168,4,0,.55)}
  .pc-slider .pc-nav:hover,.pc-slider .pc-nav:active{background:var(--crimson-deep);border-color:var(--crimson-deep);color:#fff}
  .pc-slider .pc-nav.prev{left:0}
  .pc-slider .pc-nav.next{right:0}
  .pc-slider .pc-nav.is-off{opacity:0;pointer-events:none}
  .pcard.pop,.plan-cards .pcard:hover,.plan-cards .pcard.pop:hover{transform:none}
}

/* ---------- SSL comparison table, phone: swipe inside its own box ---------- */
@media(max-width:760px){
  .cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp th,.cmp td{padding:10px 12px;font-size:13px;white-space:nowrap}
  .cmp th:first-child,.cmp td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line)}
  .cmp th:first-child{background:var(--bg-cool)}
}

/* ---------- domain search results, phone: two-line cards ----------
   Each row (dot, name, status, price, button) wanted 425px on one line, and
   the grid's plain 1fr column grew to fit it, pushing every card past the
   screen edge. minmax(0,1fr) lets the column shrink; the row becomes a grid:
   name + status on top, price + button underneath. */
@media(max-width:720px){
  .domain-results,.domain_search .domain-results{grid-template-columns:minmax(0,1fr)}
  .dr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name status" "price price act";align-items:center;gap:10px 10px;padding:12px 14px}
  .dr-dot{grid-area:dot}
  .dr-name{grid-area:name;font-size:15px}
  .dr-status{grid-area:status;font-size:11px;justify-self:end}
  .dr-price{grid-area:price;margin-left:0;font-size:15px}
  .dr-act{grid-area:act;justify-self:end;padding:8px 14px;font-size:13px}
  .domain_search .db-results-title,.db-results-title{font-size:18px;line-height:1.35}
}