/* Helios content pages: docs, compare, pricing, guides, trust, compliance,
   roadmap, customers, accounting, the blog index and the bespoke posts.
   One stylesheet on the landing page's tokens, so a reader who clicks off
   the home page lands somewhere that looks like the same site. Page-specific
   rules stay in a small inline block on the page, written against these
   tokens. The old per-page <style> blocks (light article chrome and the dark
   compare chrome) are gone. */
:root{
  --bg:#faf8f4;--ink:#131b2c;--navy:#101d3d;--navy2:#182a55;--grey:#5d6474;--line:#e8e4da;
  --blue:#004A9E;--blue-dark:#003B7E;--sky:#dbe7ff;--sky2:#eef3ff;--butter:#ffe9c2;--sage:#dcefdd;--blush:#ffe3d6;
  --surface:#fff;--surface2:#f4f1ea;--line2:#d9d4c8;
  --text:var(--ink);--text2:#39415a;--text3:var(--grey);--signal:var(--blue);--signal-bright:var(--blue-dark);
  --good:#1c7a3d;--amber:#b45309;--body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Outfit','Instrument Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.025em;margin:0;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 40px}
.disp{font-family:var(--disp)}

/* nav, the landing page's */
.navbar{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:31px;width:auto;display:block}
.nav .links{display:flex;gap:24px;font-size:14.5px;font-weight:500}
.nav .links a{color:var(--ink)}
.nav .links a:hover,.nav .links a.on{color:var(--blue)}
.nav .side{display:flex;gap:16px;align-items:center;font-size:14.5px;font-weight:600}
.nav .side a{color:var(--ink)}
.cta{background:var(--blue);color:#fff !important;padding:10px 21px;border-radius:999px;font-weight:600;font-size:14px;transition:background .2s}
.cta:hover{background:var(--blue-dark)}
.burger{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--ink)}
.mmenu{display:none}
@media (max-width:980px){
  .nav .links{display:none}
  .nav .side .signin{display:none}
  .burger{display:block}
  .mmenu.open{display:block;background:#fff;border-bottom:1px solid var(--line);padding:10px 22px 16px}
  .mmenu a{display:block;padding:10px 0;font-size:15px;font-weight:600;color:var(--ink)}
}

/* page top */
.pagehead{padding:54px 0 26px}
.pagehead h1{font-size:clamp(34px,4.4vw,50px);line-height:1.06;font-weight:700;max-width:820px;text-wrap:balance}
.pagehead .lede,.pagehead .sub{margin-top:16px;font-size:18px;line-height:1.6;color:var(--grey);max-width:660px}
.pagehead .lede b,.pagehead .sub b{color:var(--ink);font-weight:600}
.pagehead .fine{margin-top:14px;font-size:14px;color:var(--grey)}
.crumbs{font-size:13.5px;color:var(--grey);margin:26px 0 0}
.crumbs a:hover{color:var(--ink)}
.eyebrow{font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px}

/* long-form article pages */
.artwrap{max-width:780px;margin:0 auto;padding:0 24px 72px}
.artwrap .crumbs{margin:26px 0 22px}
article h1{font-size:clamp(32px,4.4vw,46px);line-height:1.08;font-weight:700;margin:6px 0 16px;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--grey);font-size:14px;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.meta .tag{font-weight:600;color:var(--ink)}
article .lede{font-size:19px;line-height:1.55;color:var(--ink);margin:0 0 28px}
article h2{font-size:27px;font-weight:700;margin:40px 0 12px;line-height:1.15}
article h3{font-size:19px;font-weight:600;margin:26px 0 8px}
article p{color:var(--text2);font-size:16.5px;line-height:1.65;margin:0 0 16px}
article ul,article ol{color:var(--text2);font-size:16.5px;line-height:1.6;margin:0 0 16px;padding-left:22px}
article li{margin:7px 0}
article strong,article b{color:var(--ink)}
article a.inline,article p a,article li a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(0,74,158,.3);text-underline-offset:2px}
article a.inline:hover,article p a:hover,article li a:hover{text-decoration-color:var(--blue)}
article code,.code{font-family:var(--mono);font-size:.92em;background:var(--surface2);border-radius:6px;padding:2px 6px}
article pre{background:var(--navy);color:#e6edf7;border-radius:14px;padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.55;margin:0 0 18px}
article pre code{background:none;padding:0;font-size:inherit}
article img{border-radius:14px;border:1px solid var(--line);display:block;margin:6px 0 18px}
.credo{font-size:14.5px;color:var(--grey);margin:14px 0 6px;max-width:64ch}
.callout{background:var(--sky2);border-radius:14px;padding:16px 20px;margin:22px 0}
.callout p{margin:0;font-size:15px;color:var(--text2)}
.callout p+p{margin-top:8px}
.tldr{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:26px 0}
.tldr .eyebrow{margin-bottom:8px}
.tldr ul{margin:0;padding-left:18px}
.tldr li{margin:7px 0;color:var(--ink);font-size:15.5px}
.sources ul{margin:8px 0 0;padding-left:18px}
.sources li{margin:6px 0;font-size:14.5px;color:var(--text2)}
.sources a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(0,74,158,.3)}
.sources .note{font-size:13.5px;color:var(--grey);margin:6px 0 0}
.fineprint{font-size:13px;color:var(--grey);margin-top:34px;border-top:1px solid var(--line);padding-top:16px;line-height:1.55}

/* tables */
.tablewrap{overflow-x:auto;margin:8px 0 22px}
.vs{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vs th{font-family:var(--disp);font-weight:600;color:var(--ink);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line2);font-size:14px;background:var(--surface2)}
.vs td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text2);vertical-align:top;line-height:1.5}
.vs tr:last-child td{border-bottom:0}
.vs td:first-child{color:var(--grey);font-size:13.5px;width:26%}
.vs .hcell{color:var(--ink);background:var(--sky2)}
.vs .ok{color:var(--good)}
.vs .warn{color:var(--amber)}

/* cards and buttons */
.gridcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:26px 0}
.ccard{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--surface);display:block;transition:border-color .15s}
.ccard:hover{border-color:var(--navy)}
.ccard h3{font-size:17.5px;margin:0 0 6px}
.ccard p{font-size:14.5px;color:var(--text2);margin:0;line-height:1.55}
.ccard .go{display:block;margin-top:12px;font-size:14px;color:var(--blue);font-weight:600}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .15s,background .2s;background:var(--blue);color:#fff;white-space:nowrap}
.btn:hover{transform:translateY(-1px);background:var(--blue-dark)}
.btn.p{background:var(--ink);color:#fff}
.btn.p:hover{background:#000}
.btn.s{color:var(--ink);border:1.5px solid var(--ink);background:transparent}
.btn.s:hover{background:transparent}
.btn.light{background:#fff;color:var(--navy)}
.btn.light:hover{background:#fff}
.btn.ghostw{color:#fff;border:1.5px solid rgba(255,255,255,.4);background:transparent}
.btn.ghostw:hover{background:transparent}
.btn-lg{padding:16px 30px;font-size:16px}
.endcta{background:var(--navy);color:#fff;border-radius:20px;padding:30px 32px;margin:44px 0 0}
.endcta h3{font-size:22px;color:#fff;margin:0 0 8px}
.endcta p{font-size:15.5px;color:#b9c4e4;margin:0 0 18px;max-width:60ch}
.endcta .btn{background:#fff;color:var(--navy)}
.endcta .btn:hover{background:#fff}
.cta-band{background:var(--navy);color:#fff;border-radius:24px;padding:44px 40px;margin:50px auto 0;text-align:center}
.cta-band h2{color:#fff;font-size:34px;font-weight:700}
.cta-band p{color:#b9c4e4;font-size:16.5px;max-width:56ch;margin:12px auto 22px}
.cta-band .btn{background:#fff;color:var(--navy)}

/* footer, the landing page's */
footer.site{border-top:1px solid var(--line);padding:38px 0 30px;margin-top:54px}
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.fcols .logo img{height:24px;width:auto;display:block}
.fcols .blurb{font-size:14px;color:var(--grey);line-height:1.6;margin:14px 0 0;max-width:260px}
.fcols h5{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:0 0 14px}
.fcols ul{list-style:none;font-size:14px;margin:0;padding:0}
.fcols li{padding:4px 0}
.fcols li a{color:var(--ink)}
.fcols li a:hover{color:var(--blue)}
.listed{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px 30px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--grey)}
.listed a{color:var(--grey)}
.listed b{color:var(--ink)}
.listed .sf-root{width:96px;line-height:0}
.listed .sf-root img{display:block;width:100%;height:auto}
.listed .g2{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600}
.listed .g2 svg{flex:none}
.legal{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--grey);flex-wrap:wrap;gap:12px}
.legal .cred{display:flex;align-items:center;gap:6px}
.legal .cred b{color:var(--ink)}
.legal a{color:var(--grey)}

@media (max-width:820px){
  .wrap{padding:0 22px}
  .pagehead{padding:36px 0 20px}
  .fcols{grid-template-columns:1fr 1fr}
  .cta-band{padding:34px 24px}
  .cta-band h2{font-size:28px}
}

/* ── The comparison tables have to fit a phone ───────────────────────────────
   Found 2026-09-14 by sweeping the site at 390px. Four of the seven compare
   pages checked had the rival's column clipped: `.tablewrap` scrolls, so nothing
   was broken, but the last column sat 12 to 45 pixels past the edge with no
   scrollbar shown until you were already dragging it.

   That matters more here than anywhere else on the site. The compare pages are
   the best-converting family we have, the whole stance on them is an honest
   side-by-side, and a phone visitor seeing our column and half of theirs reads
   as hiding the comparison.

   Measured, not guessed: `11px 14px` cells in a 342px box needing up to 387px.
   Taking eight pixels off each side of every cell buys back more than the worst
   case, and the first column's fixed 26% is relaxed so long labels wrap instead
   of forcing the table wider. */
@media (max-width:760px){
  /* `fixed` so the CONTENT stops deciding how wide the table is. Tighter cells
     alone got five of the seven pages to fit exactly and left NinjaOne and Datto
     still 14 and 25 pixels over, because one long cell in the rival's column was
     dragging the whole row past the screen. Under a fixed layout the columns take
     the widths below and everything else wraps, which is the only version that
     fits every page rather than most of them. */
  .vs{font-size:14px;table-layout:fixed}
  .vs th,.vs td{padding:10px 8px;overflow-wrap:break-word;hyphens:auto}
  .vs td:first-child,.vs th:first-child{width:27%}
  /* The row label stays put while the columns scroll under it, so you never
     lose track of which line you are reading. */
  .vs td:first-child,.vs th:first-child{position:sticky;left:0;background:var(--surface)}
  .vs th:first-child{background:var(--surface2)}
}