/* isyouremailsafe.com - shared styles.
   Deliberately its own look (cool, technical, sans-serif) so it does not read as
   a clone of the other sending domains. Part of ProNet Cyber / Leisure Websites Ltd. */
:root{
  color-scheme: light;
  --ground:#EEF2F6; --panel:#FFFFFF; --ink:#0E1A26; --body:#33414F;
  --muted:#657484; --rule:#D7DEE6; --brand:#0B6E8C; --brandink:#085066;
  --warn:#B23A1E; --ok:#1C7A4D;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0B1219; --panel:#121C25; --ink:#EAF1F6; --body:#B7C3cf;
    --muted:#7E8c99; --rule:#223039; --brand:#36A7C7; --brandink:#8BD3E6;
    --warn:#E8795F; --ok:#4FB587;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0B1219; --panel:#121C25; --ink:#EAF1F6; --body:#B7C3cf;
  --muted:#7E8c99; --rule:#223039; --brand:#36A7C7; --brandink:#8BD3E6;
  --warn:#E8795F; --ok:#4FB587;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:40rem; margin:0 auto; padding:26px 16px 64px}
h1{color:var(--ink); font-size:clamp(1.8rem,4.6vw,2.45rem); line-height:1.12;
   letter-spacing:-.02em; font-weight:800; margin:0 0 18px; text-wrap:balance}
h2{color:var(--ink); font-size:1.18rem; font-weight:700; margin:34px 0 8px}
h3{color:var(--ink); font-size:1rem; font-weight:700; margin:22px 0 6px}
p{margin:0 0 16px; max-width:64ch}
.eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.14em;
   text-transform:uppercase; color:var(--brand); margin:0 0 14px}
a{color:var(--brand)}
a:hover{text-decoration:none}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible{
   outline:2px solid var(--brand); outline-offset:2px}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:10px;
   padding:20px 22px; margin:24px 0}
.safe{border-left:4px solid var(--ok)}
.btn{display:inline-block; background:var(--brand); color:#fff;
   text-decoration:none; font-weight:700; font-size:.98rem;
   padding:13px 24px; border-radius:7px; margin-top:4px; border:0; cursor:pointer}
.btn:hover{background:var(--brandink)}
.btn:disabled{opacity:.5; cursor:default}
.btn:disabled:hover{background:var(--brand)}
.btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--brand)}
.btn.ghost:hover{background:transparent; color:var(--brandink); border-color:var(--brandink)}
ul{margin:0 0 16px; padding-left:20px}
li{margin:0 0 7px}
.note{font-size:.9rem; color:var(--muted)}
.dom{font-weight:700; color:var(--ink)}
dl{margin:0 0 16px}
dt{font-weight:700; color:var(--ink); margin-top:14px}
dd{margin:4px 0 0}
label.consent{display:flex; gap:11px; align-items:flex-start; font-size:.95rem;
   color:var(--body); margin:16px 0; cursor:pointer}
label.consent input{margin-top:3px; flex:0 0 auto}
.hide{display:none}
.ok{color:var(--ok); font-weight:700}
/* masthead */
.top{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:baseline;
   border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:32px}
.wordmark{font-weight:800; font-size:1.05rem; color:var(--ink);
   text-decoration:none; letter-spacing:-.01em}
.wordmark span{color:var(--brand)}
nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:16px; font-size:.88rem}
nav a{color:var(--muted); text-decoration:none}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
footer{border-top:1px solid var(--rule); margin-top:44px; padding-top:20px;
   font-size:.86rem; color:var(--muted)}
footer p{margin:0 0 5px}
footer a{color:var(--muted)}