:root{--ink:#202d3d;--blue:#1263ae;--red:#dc1740;--muted:#687584;--border:#e1e5eb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1240px;margin:auto;padding:0 24px}.header{background:white;border-bottom:1px solid #e8edf3}.nav{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.5px;font-size:20px}.logo-mark{background:#165c9d;color:#fff;border-radius:9px;padding:5px 7px;font-size:15px}.logo-mark span{font-size:10px}.accent{color:#1263ae}nav{display:flex;gap:34px;font-size:14px;font-weight:600}nav a:hover,.text-link:hover{color:var(--blue)}.account{font-size:13px;font-weight:700;border:1px solid #d6dce5;padding:10px 16px;border-radius:5px}.hero{background:radial-gradient(ellipse at 50% 4%,#c9e2ff 0,#e8f3ff 43%,#fff 77%);padding:68px 0 70px}.eyebrow,.section-label{display:inline-block;background:#f1eae2;color:#444;padding:2px 9px;font-size:13px;font-weight:700;letter-spacing:.6px}.hero h1{font-size:clamp(32px,3.4vw,49px);line-height:1.12;letter-spacing:-1.4px;margin:18px 0 10px;font-weight:800}.hero h1 span{display:block}.subtitle{font-size:27px;font-weight:700;margin:0}.intro{max-width:740px;font-size:17px;color:#506174;margin:18px 0 24px}.highlights{display:flex;gap:28px;flex-wrap:wrap;font-size:14px;margin-bottom:56px}.highlights span{font-weight:600}.pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch;scroll-margin-top:20px}.plan{position:relative;background:white;border:1px solid var(--border);border-radius:5px;text-align:center;padding:48px 18px 28px;box-shadow:0 8px 22px #153a6510}.plan.featured{background:linear-gradient(180deg,#f1eafe,white 44%);border-color:#aab4e5}.ribbon{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#5c43c9,#e0003e);color:white;border-radius:3px;font-size:11px;font-weight:800;white-space:nowrap;padding:4px 9px}.plan-top{font-size:13px;color:#737a84;min-height:24px}.plan h2{font-size:25px;letter-spacing:-.5px;margin:12px 0 30px}.price{font-size:38px;font-weight:800;letter-spacing:-1.4px;line-height:1}.price small{font-size:13px;letter-spacing:0;font-weight:500;color:#586574}.annual{font-size:13px;color:#5b6674;margin:15px 0 22px}.buy{display:block;background:#26313b;color:white;border-radius:4px;font-weight:700;padding:12px}.featured .buy{background:#d90032}.buy:hover{filter:brightness(1.1)}.plan ul{list-style:none;padding:18px 0 0;margin:0;text-align:left;font-size:14px}.plan li{border-bottom:1px solid #edf0f4;padding:10px 4px}.plan li:before{content:'✓';color:#248458;margin-right:9px;font-weight:700}.note{font-size:12px;color:#6c7480;margin:20px 0 0}.section{padding:84px 0}.section h2{font-size:clamp(27px,3vw,38px);line-height:1.2;letter-spacing:-.7px;max-width:760px;margin:18px 0}.section-intro{color:#647080;max-width:690px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}.features>div{border:1px solid #e2e6ed;padding:24px;border-radius:7px}.feature-icon{font-size:28px}.features h3{font-size:18px;margin:14px 0 6px}.features p,.split p{color:#657282}.alt{background:#f5f8fc}.split{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:70px}.info-panel{background:#e2edfa;border-radius:10px;padding:35px}.info-panel strong{font-size:19px}.info-panel p{border-bottom:1px solid #cbd9e9;padding:10px 0}.text-link{color:#1263ae;font-weight:700}.narrow{max-width:900px}details{border-bottom:1px solid #dfe5ec;padding:17px 0}summary{font-weight:700;cursor:pointer}details p{color:#657282}footer{background:#172c43;color:white;padding:40px 0}.foot{display:flex;justify-content:space-between;gap:25px}.foot p{font-size:13px;color:#c1d1df}@media(max-width:1050px){.pricing,.features{grid-template-columns:repeat(2,minmax(0,1fr))}nav{gap:14px}.logo{font-size:17px}}@media(max-width:650px){.wrap{padding:0 17px}.nav{min-height:70px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}nav{order:3;width:100%;justify-content:space-between;font-size:12px;gap:8px}.account{font-size:11px;padding:8px}.hero{padding:45px 0}.hero h1{font-size:34px;letter-spacing:-1px}.subtitle{font-size:22px}.intro{font-size:15px}.highlights{gap:12px;margin-bottom:35px;font-size:12px}.pricing{grid-template-columns:1fr;gap:14px}.plan{padding-top:40px}.plan h2{margin-bottom:20px}.plan ul{max-width:300px;margin:auto}.features,.split{grid-template-columns:1fr}.section{padding:55px 0}.foot{flex-direction:column}}

/* Detailed plan features and highlighted two-year domain offer */
.plan{display:flex;flex-direction:column}.plan .buy{flex-shrink:0}.domain-gift{margin:17px 0 0;background:#eaf8ef;border:1px solid #b8e3c6;border-radius:7px;padding:12px 8px;display:flex;align-items:center;justify-content:center;gap:9px;color:#176c3a;text-align:left;min-height:72px}.domain-gift strong{display:block;font-size:12px;letter-spacing:.2px}.domain-gift span:not(.gift-icon){display:block;font-size:12px;font-weight:600}.gift-icon{font-size:25px}.domain-placeholder{min-height:89px}.plan ul{margin-top:0;padding-top:8px}.plan li{font-size:13px;line-height:1.4}.plan li:last-child{border-bottom:0}@media(max-width:650px){.domain-placeholder{display:none}.plan ul{max-width:none;width:100%}}

.compare{width:100%;border-collapse:collapse;margin:2rem 0;background:#fff}.compare th,.compare td{text-align:left;padding:14px;border-bottom:1px solid #dae4ef}.compare th{background:#edf4fb}

/* Responsive, accessible navigation */
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d6dce5;border-radius:7px;background:#fff;color:#202d3d;cursor:pointer;flex-shrink:0}
.menu-toggle svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-toggle:focus-visible,.site-navigation a:focus-visible{outline:3px solid #1263ae;outline-offset:3px}
@media(max-width:800px){
 .nav{display:flex;flex-wrap:wrap;gap:12px;min-height:70px;padding-top:12px;padding-bottom:12px}
 .nav .logo{font-size:clamp(15px,3.7vw,20px);min-width:0}
 .menu-toggle{display:flex;margin-left:auto}
 .nav .site-navigation{display:none;order:4;width:100%;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid #e1e5eb;border-radius:8px;box-shadow:0 10px 20px #10233c12;padding:6px 0;font-size:15px}
 .nav .site-navigation.is-open{display:flex}
 .nav .site-navigation a{display:block;padding:12px 16px;border-bottom:1px solid #edf0f4}
 .nav .site-navigation a:last-child{border-bottom:0}
 .nav .account{order:3;font-size:12px;padding:9px 12px}
}
@media(max-width:420px){.nav .logo{font-size:15px}.nav .account{font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* WebHosting365: desktop navigation improvements.
   Append this block to the END of the existing styles.css. */
@media (min-width: 801px) {
  .nav {
    gap: 14px;
  }
  .nav .logo {
    flex: 0 0 auto;
  }
  .nav .site-navigation {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: clamp(3px, .5vw, 9px);
    font-size: clamp(11px, .84vw, 13px);
  }
  .nav .site-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.2;
    padding: 9px clamp(5px, .55vw, 10px);
    border: 1px solid #dce5ef;
    border-radius: 7px;
    background: #fff;
    transition: background-color .15s, border-color .15s, color .15s;
  }
  .nav .site-navigation a:hover {
    background: #edf5ff;
    border-color: #a7c9ec;
    color: #1263ae;
  }
  .nav .account {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
  }
}
@media (min-width: 801px) and (max-width: 1180px) {
  .nav { flex-wrap: wrap; justify-content: space-between; row-gap: 4px; padding-top: 10px; padding-bottom: 10px; }
  .nav .site-navigation { order: 3; flex: 0 0 100%; width: 100%; justify-content: center; }
  .nav .account { order: 2; }
}


/* Customer area button */
.nav .account {
    background: #172c43;
    color: #ffffff;
    border-color: #172c43;
    border-radius: 7px;
    transition: background .2s ease;
}

.nav .account:hover {
    background: #1263ae;
    border-color: #1263ae;
    color: #ffffff;
}