/* Hot Email Signatures — shared sheet for the /install/ guide pages (2026-10-07; brand-aligned 2026-10-08).
   A trimmed copy of the home page's inline styles so the guides share its header, type and footer.
   Lives under /install/, not /assets/, because _headers makes /assets/* immutable for a year.
   Brand: Inter (self-hosted from /fonts/), navy #0A2540, Signal Red #F03322, Service Teal #00A3A3, ground #F8FAFC,
   rules #E6E9EE, body #475569. Light only, like hotwireless.co.za. */
/* Same font setup as the home page (2026-10-09): Inter with font-display:optional + a metric-matched Arial fallback,
   so a late font never shifts the layout. See the comment in index.html. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url('/fonts/InterVariable-4.1-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-024F,U+2000-206F,U+20A0-20CF,U+2122,U+2190-2199,U+2212,U+2713-2714}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/InterVariable-Italic-4.1-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-024F,U+2000-206F,U+20A0-20CF,U+2122,U+2190-2199,U+2212,U+2713-2714}
@font-face{font-family:'Inter Fallback';src:local('Arial');font-weight:100 500;size-adjust:112%;ascent-override:96.9%;descent-override:24.1%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 900;size-adjust:99%;ascent-override:96.9%;descent-override:24.1%;line-gap-override:0%}
:root{color-scheme:light;--paper:#F8FAFC;--ink:#0A2540;--ink-2:#475569;--muted:#65707D;--rule:#E6E9EE;--card:#FFFFFF;--card-2:#F6F7F9;
--accent:#F03322;--accent-hover:#C7281A;--teal:#00A3A3;--teal-ink:#007F7F;--navy-200:#9FAEBF;--navy-50:#E9EDF2;
--accent-text:#007F7F;--btn-fill:#F03322;--btn-ink:#FFFFFF;--btn-hover:#C7281A;
--display:'Inter','Inter Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--body:'Inter','Inter Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:none}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--accent-text)}
a:hover{color:var(--teal-ink);text-decoration:underline}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-0.02em;color:var(--ink)}
h1{font-size:clamp(30px,5vw,52px);font-weight:800}
h2{font-size:clamp(22px,3vw,30px);font-weight:800}
p{margin:0}
.eyebrow{font-size:12.8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:38em}
/* Same shape as the main site's .btn: 14px radius, 19px/700 (white on Signal Red passes AA only as large text). */
.btn{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;border:1.5px solid var(--navy-200);background:transparent;color:var(--ink);font-weight:700;font-size:19px;line-height:1;letter-spacing:-0.01em;text-decoration:none}
.btn:hover{border-color:var(--ink);background:var(--navy-50);color:var(--ink)}
.btn.primary{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
/* The header CTA is smaller than 19px, so it takes the darker fill (#C7281A, 5.60:1 with white). */
header.top .btn.primary{font-size:15px;padding:10px 16px;border-radius:10px;background:var(--accent-hover);border-color:var(--accent-hover)}
header.top .btn.primary:hover{background:#9E1F13;border-color:#9E1F13}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
header.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
/* 2026-10-16: the brand is one image, /brand/lockup-v3.svg (H badge + "email signatures" in Inter), 36 px high, 30 px on phones. */
.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;flex:none}
.brand img{display:block;height:36px;width:auto}@media (max-width:480px){.brand img{height:30px}}
nav.main{display:flex;gap:22px;font-size:14px;font-weight:600}
nav.main a{color:var(--ink-2);text-decoration:none}
nav.main a:hover{color:var(--ink)}
@media(max-width:720px){nav.main{display:none}}
.crumbs{font-size:13px;color:var(--ink-2);padding-block:18px 0}
.crumbs a{color:var(--ink-2)}
.crumbs span{color:var(--ink)}
.crumbs-pricing{display:none;float:right;font-weight:600}
@media(max-width:720px){.crumbs-pricing{display:inline-block}}
article{display:grid;gap:22px;padding-block:clamp(24px,4vw,48px) clamp(48px,7vw,88px);max-width:46em}
.guide{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:24px}
.guide h2{margin-bottom:12px;font-size:20px}
.guide ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2)}
.guide ol b{color:var(--ink)}
.problems{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--ink-2)}
.problems b{color:var(--ink)}
.others{font-size:14px;color:var(--ink-2)}
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px;border-radius:12px;background:#0A2540;color:#FFFFFF}
.strip p{max-width:30em}
.strip b{font-family:var(--display);font-size:18px;display:block;margin-bottom:4px}
.strip .btn{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
.strip .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
footer{padding-block:34px;color:#C6CFDA;font-size:13px;background:#0A2540}
footer .wrap{display:grid;gap:8px}
footer a{color:#FFFFFF}
footer a:hover{color:var(--teal)}
footer .legal{color:#FFFFFF}
img{max-width:100%}
nav.main a,.crumbs a,.others a,footer a{display:inline-block;min-height:24px;line-height:24px}