/* Chrome for the service pages (/managed-wordpress-hosting, /joomla-hosting,
   /laravel-hosting). The design tokens are the same ones legal-head.php carries
   inline, lifted into a file here so a third copy never has to exist. The legal
   pages still hold their own inline copy; moving them onto this file means
   editing live documents, which is worth doing separately rather than as part of
   adding pages. */
:root {
  --navy-deep:#1a2d3d; --navy:#234462; --tint:#f0f7ff;
  --cyan:#0891b2; --cyan-text:#0e7490; --cyan-deep:#155e75;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --decor:#94a3b8;
  --surface:#ffffff; --band:#f8fafc; --line:#e2e8f0;
  --maxw:820px; --r:12px;
}
body {
  margin:0; background:var(--surface); color:var(--body);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.7; -webkit-text-size-adjust:100%;
}
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
a { color:var(--cyan-text); }

.topbar { border-bottom:1px solid var(--line); }
.topbar .wrap { display:flex; align-items:center; gap:10px; padding:12px 20px; max-width:1080px; }
.topbar img { width:28px; height:28px; }
.topbar .name { font-weight:700; color:var(--ink); text-decoration:none; }
.topbar .spacer { flex:1; }
.topbar .topnav { display:none; gap:20px; margin-right:20px; }
.topbar .topnav a { color:var(--body); text-decoration:none; font-size:.93rem; font-weight:600; }
.topbar .cta { background:var(--cyan-text); color:#fff; text-decoration:none; padding:8px 14px;
               border-radius:8px; font-size:.92rem; font-weight:600; }
@media (min-width:1000px) { .topbar .topnav { display:flex; } }

header.page { padding:46px 0 22px; border-bottom:1px solid var(--line); }
header.page h1 { margin:0 0 8px; font-size:2rem; line-height:1.25; color:var(--ink); letter-spacing:-.01em; }
header.page .meta { margin:0; color:var(--muted); font-size:.92rem; }

/* Sibling nav: each service page reachable from the other two. */
.page-nav { background:var(--band); border-bottom:1px solid var(--line); }
.page-nav .wrap { max-width:1080px; display:flex; flex-wrap:wrap; gap:6px 4px; padding-top:10px; padding-bottom:10px; }
.page-nav a { text-decoration:none; color:var(--body); font-size:.88rem; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.page-nav a:hover { background:#fff; color:var(--ink); }
.page-nav a[aria-current="page"] { background:var(--cyan-text); color:#fff; font-weight:600; }

main { padding:34px 0 60px; }
main h2 { margin:38px 0 10px; font-size:1.22rem; color:var(--ink); line-height:1.35; scroll-margin-top:16px; }
main h3 { margin:24px 0 6px; font-size:1.02rem; color:var(--ink); }
main p, main li { color:var(--body); }
main ul, main ol { padding-left:22px; }
main li { margin:6px 0; }
main table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.94rem; }
main th, main td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
main th { color:var(--ink); font-weight:600; background:var(--band); }
.lede { font-size:1.04rem; }
.callout { background:var(--band); border:1px solid var(--line); border-left:3px solid var(--cyan);
           border-radius:var(--r); padding:14px 16px; margin:22px 0; }
.callout p { margin:0; font-size:.95rem; }
.toc { background:var(--band); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin:24px 0 8px; }
.toc p { margin:0 0 8px; font-weight:600; color:var(--ink); font-size:.92rem; }
.toc ol { margin:0; padding-left:20px; font-size:.94rem; }
.toc li { margin:3px 0; }
.cta-band { background:var(--tint); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:34px 0 0; }
.cta-band h2 { margin:0 0 8px; }
.cta-band p { margin:0 0 14px; }
.cta-band a.btn { display:inline-block; background:var(--cyan-text); color:#fff; text-decoration:none;
                  padding:10px 18px; border-radius:8px; font-weight:600; font-size:.95rem; }

.site-footer { background:var(--navy-deep); color:#fff; padding:38px 0 calc(38px + env(safe-area-inset-bottom,0px)); }
.site-footer .wrap { max-width:1080px; display:grid; gap:26px; grid-template-columns:1fr; }
.site-footer h2 { margin:0 0 10px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:700; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.site-footer a { color:#fff; text-decoration:none; font-size:.93rem; }
.site-footer a:hover { text-decoration:underline; }
.site-footer .copy { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.18); padding-top:18px; color:rgba(255,255,255,.88); font-size:.9rem; margin:0; }
.site-footer .tm-notice { grid-column:1/-1; margin:-12px 0 0; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.72); }
@media (min-width:720px) { .site-footer .wrap { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } }