/* Circular Std, self-hosted — the same faces and weights as ls17
   (Book 400 / Medium 500 / Bold 700 / Black 900, woff2, font-display: swap).
   Only these four weights exist, so the rules below never ask for 600: a weight
   with no face gets synthesised by the browser and looks subtly wrong next to
   the real Bold. */
@font-face{font-family:"Circular Std";src:url("/assets/fonts/CircularStd-Book.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("/assets/fonts/CircularStd-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("/assets/fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Circular Std";src:url("/assets/fonts/CircularStd-Black.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}

/* Lineserve Partners — brand tokens lifted verbatim from the Lineserve WHMCS
   hostim theme (tblconfiguration.EmailCSS header):
     blue #2563FF · blue-d #1D4FD8 · navy #0B1225 · slate #64748B
     mist #F1F5F9 · tint #EEF3FF · line #E2E8F0
   Body copy #334155, sub-heads #475569. Black uppercase header bar, 10px radii,
   Helvetica stack — all as the WHMCS client area and transactional mail use. */
:root{
  --blue:#2563FF; --blue-d:#1D4FD8; --navy:#0B1225; --slate:#64748B;
  --mist:#F1F5F9; --tint:#EEF3FF; --line:#E2E8F0;
  --body:#334155; --subhead:#475569;
  --ok:#0a7d4f; --warn:#8a5a00; --bad:#b4232b;
  --radius:10px; --wrap:1060px;
  --sans:"Circular Std",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--mist);color:var(--body);font:16px/1.65 var(--sans)}
a{color:var(--blue);font-weight:500}
a:hover{color:var(--blue-d)}
code{background:var(--tint);color:var(--blue-d);padding:2px 6px;border-radius:4px;
  font:13px var(--mono)}
pre{background:var(--navy);color:var(--mist);padding:14px 16px;border-radius:8px;
  font:13px/1.5 var(--mono);overflow-x:auto}

/* black uppercase bar, exactly as the WHMCS email header */
.top{background:#000;color:#fff;display:flex;align-items:center;gap:26px;
  padding:18px 28px;position:relative}
.brand{font-weight:700;font-size:20px;letter-spacing:.10em;text-transform:uppercase;
  color:#fff;text-decoration:none;line-height:1.1}
.brand:hover{color:#fff;text-decoration:none}
.brand span{opacity:.62}

/* The toggle is visually hidden but focusable, so keyboard users can still reach
   it; the label is the visible button and only appears on narrow screens. */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.navbtn{display:none}

#nav{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#nav a{color:#fff;font-size:15px;font-weight:500;text-decoration:none;opacity:.85}
#nav a:hover{opacity:1;color:#fff;text-decoration:none}
.who{font-size:12px;opacity:.7;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
a.who{text-decoration:none;color:#fff;opacity:.85;max-width:16em;overflow:hidden;
  text-overflow:ellipsis}
a.who:hover{opacity:1;color:#fff;background:rgba(255,255,255,.12);text-decoration:none}

.btn,.btn-ghost{border-radius:8px;padding:9px 18px;font-weight:500;font-size:15px;
  display:inline-block;text-decoration:none}
.btn{background:var(--blue);color:#fff}
.btn:hover{background:var(--blue-d);color:#fff;text-decoration:none}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
main .btn-ghost{border-color:var(--line);color:var(--navy);background:#fff}
main .btn-ghost:hover{background:var(--mist);color:var(--navy)}

main{max-width:var(--wrap);margin:28px auto;padding:36px 30px 52px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius)}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.01em;margin:0 0 12px}
h1{font-size:26px;font-weight:700;line-height:1.25}
h2{font-size:20px;font-weight:700;line-height:1.3;margin-top:38px}
h3{font-size:17px;font-weight:700;line-height:1.35}
h4{font-size:15px;font-weight:700;color:var(--subhead)}
.lede{font-size:17px;color:var(--body);max-width:64ch;margin:0 0 26px}
.muted{color:var(--slate)}
.small{font-size:14px}
strong{color:var(--navy)}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.card h3{margin-top:0}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--mist)}
.stat .n{font-size:27px;font-weight:700;letter-spacing:-.02em;display:block;color:var(--navy)}
.stat .k{font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}

table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
th,td{text-align:left;padding:9px 12px;border:1px solid var(--line);vertical-align:top}
th{background:var(--mist);font-weight:700;color:var(--navy)}
.table-wrap{overflow-x:auto;border-radius:6px;margin:12px 0}
.table-wrap table{min-width:620px;border-radius:6px}

.tag{font-size:12px;font-weight:500;border-radius:999px;padding:3px 9px;white-space:nowrap;
  display:inline-block}
.tag.ok{background:#e6f5ee;color:var(--ok)}
.tag.warn{background:#fdf3e0;color:var(--warn)}
.tag.bad{background:#fdecec;color:var(--bad)}
.tag.flat{background:var(--mist);color:var(--slate)}

form .field{margin:0 0 18px}
label{display:block;font-weight:500;font-size:14px;margin-bottom:6px;color:var(--navy)}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;color:var(--body);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;
  border-color:var(--blue)}
textarea{min-height:140px;resize:vertical}
.hint{font-size:13px;color:var(--slate);margin-top:5px}
button{border:0;border-radius:8px;background:var(--blue);color:#fff;font:inherit;
  font-weight:500;padding:12px 24px;cursor:pointer}
button:hover{background:var(--blue-d)}

.notice{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--tint);
  border-radius:8px;padding:14px 16px;margin:0 0 22px}
.notice.bad{border-left-color:var(--bad);background:#fdecec}
.notice.warn{border-left-color:var(--warn);background:#fdf3e0}
.notice p{margin:0 0 10px}
.notice p:last-child{margin-bottom:0}
.notice ul{margin:6px 0 0;padding-left:20px}

.qa{border-bottom:1px solid var(--line);padding:18px 0}
.qa:last-child{border-bottom:0}
.qa h3{margin:0 0 6px}
.qa p{margin:0}

footer{background:var(--mist);border-top:1px solid var(--line);color:var(--slate);
  font-size:13px;line-height:1.6;padding:22px 28px;display:flex;gap:20px;align-items:flex-start}
footer strong{color:var(--subhead)}
footer a{color:var(--subhead);font-weight:500;text-decoration:none}
footer a:hover{color:var(--blue);text-decoration:underline}
footer .links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}

/* ---- responsive ----------------------------------------------------------
   Below 860px the nav collapses behind the checkbox: the label becomes the
   button and the nav drops out of flow beneath the bar, full width. Above it
   the label is hidden and the nav sits inline in the bar. */
@media only screen and (max-width:860px){
  .top{gap:16px;padding:16px 20px;flex-wrap:nowrap}

  .navbtn{display:flex;align-items:center;gap:9px;cursor:pointer;margin-left:auto;
    color:#fff;font-size:15px;font-weight:500;padding:9px 14px;
    border:1px solid rgba(255,255,255,.3);border-radius:8px;
    user-select:none;-webkit-tap-highlight-color:transparent}
  .navtoggle:focus-visible+.navbtn{outline:2px solid #fff;outline-offset:2px}
  .navtoggle:checked+.navbtn{background:rgba(255,255,255,.12)}
  .navbtn .bars{width:15px;height:10px;position:relative;display:inline-block}
  .navbtn .bars::before,.navbtn .bars::after{content:"";position:absolute;
    left:0;right:0;height:1.5px;background:#fff}
  .navbtn .bars::before{top:0;box-shadow:0 4.25px 0 #fff}
  .navbtn .bars::after{bottom:0}

  #nav{display:none}
  .navtoggle:checked~#nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:20;background:#000;
    border-top:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 32px rgba(0,0,0,.34);padding:8px 20px 18px}
  /* 48px tap targets, with separators so it reads as rows not a block */
  .navtoggle:checked~#nav a{opacity:1;padding:14px 0;min-height:48px;display:flex;
    align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}
  .navtoggle:checked~#nav a:last-child{border-bottom:0}
  .navtoggle:checked~#nav .btn,.navtoggle:checked~#nav .btn-ghost{
    margin-top:12px;text-align:center;justify-content:center;border-bottom:0}
  .navtoggle:checked~#nav .who{align-self:flex-start;margin:12px 0 4px}

  footer{flex-direction:column;gap:16px;padding:20px}
  footer .links{margin-left:0;justify-content:flex-start;gap:14px 18px}
}

@media only screen and (max-width:640px){
  main{margin:0;border-radius:0;border-left:0;border-right:0;padding:26px 18px 42px}
  h1{font-size:23px} h2{font-size:19px;margin-top:32px} .lede{font-size:16px}
  .top{padding:14px 18px} .brand{font-size:17px;letter-spacing:.08em}
  .navbtn{padding:8px 12px}
  .navtoggle:checked~#nav{padding:8px 18px 16px}
  .grid{grid-template-columns:1fr;gap:14px}
  .stat .n{font-size:24px}
  button{width:100%}
  footer{padding:20px 18px}
}

/* Very narrow: let the two-word brand wrap rather than shove the button off. */
@media only screen and (max-width:380px){
  .brand{font-size:15px}
  .navbtn{font-size:14px;padding:8px 10px}
}