/* ============================================================================
   utility.css — the stylesheet for NexiUni's two UTILITY domains
   (haikongnet.cloud and yzworld.com). One file, copied into both folders.

   It is deliberately NOT nexiuni.css. These pages must not look like the
   company site: the whole point of them is that a visitor who lands here can
   tell in one glance that they are not on nexiuni.com and know where to go
   instead. So: same palette and typeface — they are the same company — but no
   sticky nav, no hero, no gradient panels, no marketing furniture. A page of
   facts, set like a page of facts.

   Self-contained on purpose. These two folders are mounted into their own
   nginx containers and share nothing with the marketing build, so nothing here
   may reference ../nexiuni.com/. Copied rather than symlinked for the same
   reason: a bind mount of one folder cannot follow a link out of it.
   ============================================================================ */

:root{
  --navy:#0b2c66; --blue:#1d4ed8; --cyan:#06b6d4;
  --ink:#0f172a; --muted:#5b6b7c; --line:#e6ecf3; --soft:#f5f8fc; --white:#fff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:820px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;color:var(--ink);background:var(--white);line-height:1.65;font-size:16px;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;}
img,svg{max-width:100%;}
a{color:var(--blue);}
a:hover{color:var(--navy);}
h1,h2{line-height:1.25;margin:0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ── Masthead ─────────────────────────────────────────────────────────────
   A thin dark band rather than the marketing site's white sticky nav — the
   fastest available signal that this is a different kind of page. */
.top{background:var(--navy);color:#fff;padding:14px 0;}
.top .wrap{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.top img{height:24px;width:24px;display:block;}
.top .host{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.2px;}
.top .role{font-size:13px;color:#b9cbe8;margin-left:auto;}
@media (max-width:520px){ .top .role{margin-left:0;flex-basis:100%;} }

/* ── Page ─────────────────────────────────────────────────────────────────── */
/* main.wrap, not main — `.wrap` sets padding, and a bare `main` selector loses to
   it on specificity, which silently drops the top gap under the masthead. */
main.wrap{padding:44px 24px 8px;}
h1{font-size:29px;letter-spacing:-.2px;}
.lede{font-size:18px;color:var(--muted);margin:14px 0 0;}
section{margin-top:38px;}
h2{font-size:16px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  padding-bottom:9px;border-bottom:1px solid var(--line);}
p{margin:14px 0;}
code,.mono{font-family:var(--mono);font-size:.93em;}

/* A one-line signpost to the site a lost visitor was actually looking for.
   First thing under the heading, because for most arrivals it is the answer. */
.elsewhere{margin:22px 0 0;padding:14px 16px;background:var(--soft);
  border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;}
.elsewhere p{margin:0;}

/* ── Fact table ───────────────────────────────────────────────────────────
   Wide content scrolls inside its own box; the page body never scrolls
   sideways on a phone. */
.tablebox{overflow-x:auto;margin-top:18px;}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:600;border-bottom:1px solid #d5dfeb;}
/* The first column is a hostname: size it to its content instead of letting the
   table give it half the width and strand the values a screen away from it. */
th:first-child,td:first-child{width:1%;}
td:first-child{white-space:nowrap;font-family:var(--mono);font-size:14px;color:var(--navy);
  padding-right:34px;}
tbody tr:last-child td{border-bottom:0;}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{margin-top:52px;border-top:1px solid var(--line);padding:22px 0 40px;
  font-size:14px;color:var(--muted);}
footer .wrap{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:baseline;}
footer .sp{margin-left:auto;}
@media (max-width:520px){ footer .sp{margin-left:0;flex-basis:100%;} }