:root{color-scheme:light;--orange:#ff501d;--white:#fff;--nav-blue:#0b3160}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#061d43;color:var(--white)}
button,select,input{font:inherit}
button,a,select{touch-action:manipulation}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
#page{width:100%;max-width:1440px;margin:auto;position:relative;overflow:hidden}
#artboard{width:1024px;height:1536px;transform-origin:top left;position:relative}
.original-artwork{position:absolute;inset:0;background:url('assets/hostlah-original-cleaned.webp') no-repeat 0 0/1024px 1536px;pointer-events:none}
.ui-overlay{position:absolute;inset:0;font-size:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.service-nav{position:absolute;left:207px;top:73px;height:24px;display:flex;gap:0;align-items:center;white-space:nowrap;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 1px #001b3e66}
.service-link{height:26px;display:flex;align-items:center;justify-content:center;padding:0 12px;outline-offset:1px;transition:color .15s}
.service-link:first-child{padding-left:0;padding-right:7px;gap:7px}
.service-link:nth-child(2){padding-left:10px;padding-right:14px}
.service-link:nth-child(3){padding-left:13px;padding-right:14px}
.service-link:nth-child(4){padding-left:13px;padding-right:13px}
.service-link:nth-child(5){padding-left:10px;padding-right:12px}
.service-link:nth-child(6){padding-left:9px;padding-right:15px}
.service-link:nth-child(7){padding-left:13px;padding-right:0;gap:8px}
.service-link:hover,.service-link:focus-visible{color:#ffca35}
.domain-nav svg{width:18px;height:18px;stroke:white;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-width:1.6}
.fire{font-size:17px;line-height:1}
.currency-control{position:absolute;left:907px;top:69px;height:27px;display:flex;gap:5px;align-items:center;font-weight:700;color:white}
.my-flag{font-size:25px;line-height:1;display:block;width:34px;filter:drop-shadow(0 1px 1px #05163788)}
.currency-control select{border:0;outline-offset:3px;background:transparent;color:white;font-size:12px;font-weight:700;width:38px;height:26px;appearance:none;cursor:pointer}
.currency-control select option{color:#151d32;background:white}
.currency-chevron{pointer-events:none;width:12px;height:12px;stroke:white;fill:none;stroke-width:2.4}
.hero-actions{position:absolute;left:36px;top:399px;display:flex;gap:8px;align-items:center;height:40px}
.action-button{height:40px;display:inline-flex;gap:9px;align-items:center;justify-content:center;white-space:nowrap;border-radius:24px;font-size:13px;font-weight:700;box-shadow:0 2px 4px #00000010;color:white}
.action-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.view-plans{width:147px;border:0;background:linear-gradient(115deg,#ff9819 0%,#ff4e18 65%,#ff351c 100%)}
.watch-video{width:129px;border:1.5px solid #fff;background:rgba(3,16,41,.35)}
.watch-video svg{width:12px;height:12px;stroke:none;fill:#fff}
.action-button:hover{filter:brightness(1.12)}
.benefits{position:absolute;top:463px;left:29px;display:flex;align-items:center;white-space:nowrap;color:#fff;font-size:11px;text-shadow:0 1px 2px #001b3280}
.benefit{display:flex;align-items:center;gap:6px;height:35px}
.benefit svg{width:27px;height:34px;flex:none;filter:drop-shadow(0 1px 1px #0004)}
.benefit strong{display:block;font-size:11px;font-weight:700;line-height:14px}
.benefit span{display:block;font-size:9px;line-height:12px;white-space:nowrap}
.benefit-fast{width:138px}
.benefit-uptime{width:124px}
.benefit-support{width:149px}
.benefit-support svg{width:31px}
.domain-panel{position:absolute;left:152px;top:527px;width:719px;height:110px;display:grid;grid-template-columns:239px 1fr;column-gap:1px;padding:22px 28px 13px 31px;color:#111a32;background:rgba(255,255,255,.94);border:1px solid rgba(229,238,255,.8);border-radius:13px;box-shadow:0 6px 28px #1c467229;backdrop-filter:blur(3px)}
.domain-intro{padding-top:2px}
.domain-intro h1{font-size:19px;line-height:22px;margin:0 0 3px 0;white-space:nowrap;letter-spacing:-.65px;font-weight:800}
.domain-intro p{font-size:13px;line-height:16px;color:#39455f;white-space:nowrap;margin:0}
.domain-right{width:417px}
.domain-form{width:417px;height:40px;display:flex;border:1px solid #d0d7e4;border-radius:9px;overflow:hidden;background:#fff}
.domain-form input{min-width:0;flex:1;width:242px;border:none;outline:none;padding:0 15px;color:#102039;font-size:12px}
.domain-form input::placeholder{color:#8a95ab;opacity:1}
.domain-form select{appearance:auto;width:85px;flex:none;border:0;border-left:1px solid #d0d7e4;color:#121c34;font-size:12px;padding:0 8px 0 15px;font-weight:700;background:#f9fbff;cursor:pointer}
.domain-search-button{width:92px;flex:none;border:none;color:white;background:linear-gradient(112deg,#ff8d1e,#ff321c);font-weight:700;font-size:12px}
.domain-search-button:hover{filter:brightness(1.08)}
.domain-links{height:30px;display:flex;gap:28px;margin-top:4px;align-items:center;white-space:nowrap;font-size:9px;font-weight:500;color:#1150ad}
.domain-links a{display:flex;gap:5px;align-items:center}
.domain-links a:hover{text-decoration:underline}
.domain-links svg{width:16px;height:16px;fill:none;stroke:#1354bd;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.anchor-spot{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.feedback{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#081d3c;color:#fff;padding:10px 16px;border-radius:9px;max-width:min(90vw,580px);font:14px/1.4 Arial;box-shadow:0 3px 16px #0005;display:none;z-index:3}
.feedback.show{display:block}
.video-dialog{max-width:min(90vw,410px);padding:24px 28px;color:#101d34;border:0;border-radius:15px;box-shadow:0 12px 45px #0008;font:14px/1.5 Arial}
.video-dialog::backdrop{background:#0009}
.video-dialog h2{font-size:23px;margin:0 0 10px}
.close-dialog{float:right;border:0;background:#f1f3f8;border-radius:50%;width:30px;height:30px;font-size:23px;line-height:1;color:#11213b}
:focus-visible{outline:2px solid #ffb526;outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Header: preserve the reference logo/graphics; only the search text field
   is repainted because a raster image cannot accept keyboard input. */
.header-search{position:absolute;left:277px;top:17px;width:437px;height:38px;display:flex;z-index:2}
.header-search input{display:block;width:379px;height:38px;min-width:0;padding:0 16px 0 18px;font-size:11px;font-weight:400;letter-spacing:-.1px;outline:0;color:#293750;background:#fff;border:0;border-radius:22px 0 0 22px}
.header-search input::placeholder{color:#7e889f;opacity:1}
.header-search input::-webkit-search-cancel-button{cursor:pointer}
.header-search:focus-within input{box-shadow:inset 0 0 0 2px #ff9c45}
.header-search button{width:58px;height:38px;background:transparent;border:0;cursor:pointer;border-radius:0 22px 22px 0}
.header-search button:hover{background:#ffffff1c}
.header-search button:focus-visible,.header-hit:focus-visible{outline:2px solid #ffca41;outline-offset:0}
.header-hit{position:absolute;z-index:3;border:0;padding:0;background:transparent;cursor:pointer;border-radius:6px}
.header-hit:hover{box-shadow:inset 0 -2px 0 #ffbd42}
.header-chat{left:758px;top:15px;width:79px;height:40px}
.header-account{left:849px;top:15px;width:91px;height:40px}
.header-cart{left:952px;top:6px;width:48px;height:48px}
/* Fixed-size dialogs are deliberately outside the scaled image. */
.app-dialog{position:fixed;max-height:calc(100dvh - 36px);overflow-y:auto;color:#18243c;background:#fff;border:0;border-radius:18px;padding:0;box-shadow:0 18px 70px #00163388;font:14px/1.45 Arial,Helvetica,sans-serif}
.app-dialog::backdrop{background:#00152a9c;backdrop-filter:blur(2px)}
.app-dialog.side-panel{margin:18px 18px 18px auto;width:min(410px,calc(100vw - 36px));height:calc(100dvh - 36px);max-width:none}
.app-dialog.search-dialog{width:min(520px,calc(100vw - 32px));margin:auto;max-width:none}
.app-dialog .dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:22px 22px 4px}
.app-dialog h2{font-size:21px;letter-spacing:-.4px;margin:0}
.app-dialog .eyebrow{margin:0 0 3px;color:#d6481d;font-weight:700;font-size:10px;letter-spacing:1px}
.app-dialog .dialog-subtitle{margin:8px 22px 15px;color:#687286;font-size:12px;line-height:1.5}
.panel-close{border:0;background:#eef1f7;color:#22344a;font-size:26px;line-height:1;width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer}
.panel-close:hover{background:#ffe2d7}
.app-dialog button:not(.panel-close):hover{filter:brightness(.96)}
.search-results{padding:0 18px 20px}
.search-result{display:block;width:100%;border:1px solid #e5eaf1;padding:13px;border-radius:12px;margin-bottom:9px;background:#fff;color:#142d54;text-align:left;cursor:pointer}
.search-result b{display:block;font-size:14px}
.search-result small{display:block;color:#6c7385;margin-top:3px;font-size:12px}
.no-results{padding:14px;color:#536176}
.chat-messages{height:min(48dvh,390px);overflow-y:auto;padding:16px 22px;background:#f3f6fb;display:flex;flex-direction:column;gap:10px}
.chat-msg{padding:10px 13px;max-width:90%;font-size:13px;line-height:1.5;border-radius:14px;overflow-wrap:anywhere}
.chat-msg.bot{align-self:flex-start;color:#172a47;background:white;border:1px solid #dce5f0;border-bottom-left-radius:4px}
.chat-msg.user{align-self:flex-end;color:white;background:#f05a24;border-bottom-right-radius:4px}
.chat-topics{padding:14px 18px;display:flex;gap:7px;flex-wrap:wrap}
.chat-topics button{background:#f0f4fb;border:1px solid #d8e0ed;border-radius:20px;padding:7px 10px;font-size:12px;color:#23456d}
.chat-compose{display:flex;gap:7px;margin:0 18px 20px}
.chat-compose input,.demo-profile input{width:100%;min-width:0;outline-offset:2px;border:1px solid #d2dbe7;border-radius:9px;padding:11px 12px;color:#102341;background:white;font-size:13px}
.chat-compose button,.orange-ui-button{border:0;border-radius:9px;padding:10px 15px;background:linear-gradient(110deg,#ff8e1e,#ff3e1f);color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
#accountState{padding:8px 22px 25px}
.demo-profile{display:grid;gap:12px}
.demo-profile label{font-size:12px;font-weight:700;color:#35425b;display:grid;gap:5px}
.account-summary{padding:16px;border-radius:12px;background:#f4f7fc;margin-bottom:15px}
.account-summary strong{display:block;font-size:17px}
.account-summary small{display:block;color:#59667c;margin-top:5px}
.text-ui-button{display:block;border:1px solid #cfdaea;background:#fff;color:#21446e;border-radius:9px;padding:10px 14px;font-weight:700;margin-top:10px;cursor:pointer}
#cartContents{margin:0 22px}
.cart-empty{background:#f5f7fb;color:#65738a;border:1px dashed #cfd8e7;border-radius:12px;text-align:center;padding:28px 12px;margin-bottom:12px}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px 0;border-bottom:1px solid #e5e8ef}
.cart-item strong{font-size:13px}.cart-item small{display:block;color:#6d7890;font-size:11px}
.cart-item-amount{text-align:right;font-weight:700}
.cart-item-actions{display:flex;align-items:center;gap:5px;margin-top:7px}
.cart-item-actions button{border:1px solid #d6dfeb;background:#fff;color:#1c3661;border-radius:6px;width:27px;height:25px;font-weight:700;cursor:pointer}
.cart-item-actions .remove-cart{width:auto;padding:0 8px;font-size:11px;color:#a63f35}
.cart-summary{border-top:2px solid #e4e8f0;margin-top:13px;padding:16px 0;display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.cart-note{color:#67738b;font-size:11px;margin:10px 0}
.cart-plan-picker{padding:5px 22px 24px}
.cart-plan-picker h3{font-size:14px;color:#132849;margin:12px 0}
.plan-add{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #e9edf4}
.plan-add strong{display:block;color:#213553;font-size:13px}
.plan-add small{display:block;color:#6c7890;font-size:11px}
.plan-add button{border-radius:8px;border:1px solid #ff551c;color:#e4461b;background:#fff;padding:6px 10px;white-space:nowrap;font-weight:700;cursor:pointer}
.count-pill{background:#ff5321;color:#fff;display:inline-block;font-size:12px;vertical-align:middle;border-radius:15px;padding:2px 7px;min-width:24px;text-align:center}
@media(max-width:520px){.app-dialog.side-panel{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);margin:8px}.app-dialog .dialog-head{padding:18px 16px 4px}.app-dialog .dialog-subtitle{margin-left:16px;margin-right:16px}.chat-messages{height:35dvh}}

.header-cart-badge{position:absolute;left:976px;top:12px;width:20px;height:20px;border-radius:50%;background:#ff4f29;color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4;box-shadow:0 1px 2px #14264a44}

/* The four source-editable prices only. The panels, headings, "from",
   billing periods and arrow buttons are NOT HTML-converted. Positions are
   measured against the original 1024 × 1536 reference artboard. */
.art-price{position:absolute;display:block;z-index:1;white-space:nowrap;
  font-family:Arial,"Liberation Sans",sans-serif;font-weight:900;
  line-height:1;letter-spacing:-2.6px;transform-origin:left center;
  text-rendering:geometricPrecision;pointer-events:none;user-select:text}
.price-web{left:58px;top:765px;color:#ffeb41;font-size:51px;
  transform:rotate(4deg) scaleX(.94);letter-spacing:-2.9px}
.price-vps{left:450px;top:744px;color:#fff;font-size:41px;
  transform:rotate(-2deg) scaleX(.92);letter-spacing:-2.5px}
.price-server{left:774px;top:815px;color:#ffdf26;font-size:42px;
  transform:rotate(-11deg) scaleX(.92);letter-spacing:-2.4px}
.price-domain{left:362px;top:1024px;color:#fff;font-size:39px;
  transform:rotate(-2deg) scaleX(.90);letter-spacing:-2.8px}

/* Transparent hit areas aligned to the existing circular arrow artwork.
   They do NOT repaint, cover or replace the original image. */
.card-arrow{position:absolute;z-index:5;display:block;width:38px;height:38px;
  padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.card-arrow:hover{box-shadow:0 0 0 2px #ffffffa8,0 0 12px 4px #ffffff55}
.card-arrow:focus-visible{outline:3px solid #ffcf3f;outline-offset:2px}
.arrow-web{left:118px;top:829px}
.arrow-vps{left:528px;top:784px}
.arrow-server{left:870px;top:834px}
.arrow-domain{left:429px;top:1060px}
.arrow-builder{left:739px;top:1065px}
.builder-dialog-actions{display:flex;align-items:center;gap:12px;padding:2px 22px 24px;flex-wrap:wrap}
.builder-dialog-actions .orange-ui-button,.builder-dialog-actions .text-ui-button{width:auto;margin:0}