@charset "utf-8";
/* VitalByte — hosting persona skin (OpenCanary). Palette + assets from the original 2014 brand. */
:root{ --red:#df2846; --red2:#c5243e; --ink:#212832; --ink2:#1d2438; --gray:#878787; --gray2:#898989;
       --lt:#e7e7e7; --lt2:#eeeeee; --bd:#d8d8d8; }
*{ box-sizing:border-box; }
body{ margin:0; color:#2c3644; font-family:'Source Sans Pro','Segoe UI',Tahoma,Arial,sans-serif;
      font-size:16px; line-height:1.5; background:#fff; }
a{ color:var(--red); text-decoration:none; } a:hover{ color:var(--ink); }
.wrap{ width:960px; max-width:92%; margin:0 auto; }
.btn{ display:inline-block; background:var(--red); color:#fff; border:0; border-radius:4px;
      padding:10px 22px; font-size:1em; cursor:pointer; text-align:center; }
.btn:hover{ background:var(--red2); color:#fff; }

/* header */
header{ height:96px; border-bottom:1px solid var(--lt); }
header .wrap{ display:flex; align-items:center; height:96px; }
header .logo img{ height:34px; display:block; }
nav{ margin-left:48px; flex:1; }
nav a{ color:var(--gray); margin:0 18px; font-size:1.02em; }
nav a:hover{ color:var(--ink); }
.clientbtn{ background:var(--red); color:#fff; border-radius:4px; padding:8px 18px; }
.clientbtn:hover{ background:var(--red2); color:#fff; }

/* hero with server bg + login */
.hero{ background:var(--ink) url(images/bbg.png) repeat-x; color:#fff; padding:64px 0; }
.hero .wrap{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.hero h1{ font-size:2.5em; font-weight:600; margin:0 0 10px; }
.hero p{ font-size:1.2em; color:#c9d2dc; max-width:460px; }
.hero .pitch{ flex:1; }

/* client-area login card */
.login{ background:#fff; color:var(--ink); border-radius:6px; padding:26px 28px; width:320px;
        box-shadow:0 8px 30px rgba(0,0,0,.35); }
.login h2{ margin:0 0 4px; font-size:1.25em; color:var(--ink2); }
.login .sub{ color:var(--gray); font-size:.9em; margin:0 0 18px; }
.login label{ display:block; font-size:.85em; color:var(--gray); margin:12px 0 4px; }
.login input{ width:100%; padding:10px 12px; border:1px solid var(--bd); border-radius:4px; font-size:1em; }
.login input:focus{ outline:none; border-color:var(--red); }
.login .btn{ width:100%; margin-top:18px; }
.login .foot{ text-align:center; margin-top:14px; font-size:.85em; }
.err{ background:#fdecef; color:#b0182f; border:1px solid #f3b6c1; border-radius:4px;
      padding:9px 12px; font-size:.88em; margin:4px 0 0; }

/* plans */
.section{ padding:56px 0; } .section.alt{ background:var(--lt2); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); }
.section h2{ text-align:center; color:var(--ink2); font-size:1.9em; margin:0 0 6px; }
.section .lead{ text-align:center; color:var(--gray); margin:0 0 40px; }
.plans{ display:flex; gap:24px; justify-content:center; }
.plan{ background:#fff; border:1px solid var(--bd); border-radius:6px; width:280px; text-align:center; padding:28px 20px; }
.plan.pop{ border:2px solid var(--red); position:relative; }
.plan.pop .tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--red);
   color:#fff; font-size:.72em; padding:3px 12px; border-radius:10px; letter-spacing:.5px; }
.plan h3{ color:var(--gray); font-weight:600; margin:0 0 6px; text-transform:uppercase; letter-spacing:.5px; font-size:.95em; }
.plan .price{ color:var(--ink2); font-size:2.1em; font-weight:700; }
.plan .price span{ color:var(--gray); font-size:.42em; font-weight:400; }
.plan ul{ list-style:none; padding:0; margin:18px 0; color:#556; text-align:left; }
.plan li{ padding:7px 0 7px 26px; background:url(images/tick.png) no-repeat left 9px; border-bottom:1px solid var(--lt2); font-size:.95em; }

/* features */
.feats{ display:flex; gap:26px; }
.feat{ flex:1; text-align:center; } .feat img{ height:64px; } .feat h4{ color:var(--ink2); margin:14px 0 6px; }
.feat p{ color:var(--gray2); font-size:.95em; margin:0; }

/* footer */
footer{ background:var(--ink); color:#aeb6c0; padding:44px 0 0; }
footer .cols{ display:flex; gap:60px; } footer h5{ color:#eee; margin:0 0 12px; font-size:1em; }
footer ul{ list-style:none; padding:0; margin:0; } footer li{ padding:4px 0; }
footer a{ color:#9aa3ae; } footer a:hover{ color:#fff; }
footer .logo{ margin-left:auto; } footer .logo img{ height:44px; opacity:.9; }
.copy{ background:#0d0d0d; color:#8d949d; font-size:.85em; padding:12px 0; margin-top:36px; }
.copy .wrap{ display:flex; justify-content:space-between; }

/* interior pages */
.pagebanner{ background:var(--ink) url(images/bbg.png) repeat-x; color:#fff; padding:46px 0; text-align:center; }
.pagebanner h1{ margin:0; font-size:2.2em; font-weight:600; }
.prose{ max-width:760px; margin:0 auto; color:#556; } .prose p{ margin:0 0 16px; }
.prose h3{ color:var(--ink2); margin:26px 0 8px; }
.split{ display:flex; gap:40px; align-items:flex-start; max-width:860px; margin:0 auto; }
.split img{ height:160px; } 
.incl{ list-style:none; padding:0; max-width:640px; margin:22px auto 0; columns:2; }
.incl li{ padding:7px 0 7px 26px; background:url(images/tick.png) no-repeat left 9px; color:#556; break-inside:avoid; }