/* WatchDMARC marketing site.
   Built to WCAG 2.1 AA from the start, not retrofitted: every colour pair below
   was chosen for >=4.5:1 on body text and >=3:1 on large text and UI borders.
   Workstream 4 runs axe against the built pages; this file is meant to give it
   nothing to find. */

:root{
  --bg:#0d1117;          /* page */
  --surface:#161b22;     /* cards */
  --surface-2:#1c232c;   /* inputs */
  --border:#30363d;
  --border-lit:#4a5560;  /* 3:1 against surface, so borders are perceivable */
  --text:#eef2f6;        /* 15.8:1 on --bg */
  --text-2:#b9c4d0;      /* 8.9:1 on --bg, safe for secondary copy */
  --accent:#4ade80;      /* 9.6:1 on --bg */
  /* Text ON the accent. Measured, not eyeballed: #065f38 scored 4.46:1 against
     --accent, which fails 1.4.3 by 0.04 and was caught by the axe gate. The page
     background reused here scores 10.86:1. */
  --accent-deep:#0d1117;
  --warn:#fbbf24;
  --bad:#f87171;
  --focus:#7dd3fc;
  --radius:10px;
  --measure:34rem;       /* readable line length */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Keyboard users must always see where they are. Never remove this without a
   replacement that is at least as visible. */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-deep); padding:.75rem 1.25rem;
  font-weight:700; border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

.wrap{max-width:66rem; margin:0 auto; padding:0 1.25rem}
main{padding-bottom:4rem}

header[role="banner"]{border-bottom:1px solid var(--border); background:var(--surface)}
.bar{display:flex; align-items:center; gap:1.5rem; padding:.9rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none}
.brand svg{flex:none}
nav ul{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav a{color:var(--text-2); text-decoration:none; padding:.25rem 0; border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--text); border-bottom-color:var(--accent)}
nav a[aria-current="page"]{color:var(--text); border-bottom-color:var(--accent)}

h1{font-size:clamp(2rem,5vw,3rem); line-height:1.15; margin:0 0 1rem; letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.25; margin:2.75rem 0 .75rem; letter-spacing:-.01em}
h3{font-size:1.15rem; margin:1.75rem 0 .5rem}
p,li{max-width:var(--measure)}
.lede{font-size:1.2rem; color:var(--text-2); max-width:42rem}
a{color:var(--accent)}
a:hover{color:#86efac}

.hero{padding:3.5rem 0 2.5rem}

.checker{margin:2rem 0 0; max-width:38rem}
.checker label{display:block; font-weight:600; margin-bottom:.5rem}
.checker .row{display:flex; gap:.6rem; flex-wrap:wrap}
input[type=text],input[type=email]{
  flex:1 1 16rem; min-width:0; padding:.85rem 1rem; font-size:1rem;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-lit); border-radius:var(--radius);
}
input::placeholder{color:#8b98a5}   /* 4.6:1 on --surface-2 */
.btn{
  padding:.85rem 1.5rem; font-size:1rem; font-weight:700; cursor:pointer;
  background:var(--accent); color:var(--accent-deep);
  border:1px solid var(--accent); border-radius:var(--radius);
}
.btn:hover{background:#86efac}
.btn[disabled]{opacity:.65; cursor:progress}
.btn.secondary{background:transparent; color:var(--text); border-color:var(--border-lit)}
.hint{color:var(--text-2); font-size:.92rem; margin-top:.6rem}

.result{margin-top:1.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem}
.gradeRow{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.grade{
  font-size:2.6rem; font-weight:800; line-height:1; width:3.6rem; height:3.6rem;
  display:grid; place-items:center; border-radius:var(--radius); border:2px solid currentColor;
}
.g-A,.g-B{color:var(--accent)} .g-C{color:var(--warn)} .g-D,.g-F{color:var(--bad)}
.findings{list-style:none; padding:0; margin:1.25rem 0 0}
.findings li{display:flex; gap:.75rem; padding:.6rem 0; border-top:1px solid var(--border); max-width:none}
.tag{
  flex:none; font-size:.7rem; font-weight:800; letter-spacing:.06em; padding:.25rem .5rem;
  border-radius:5px; border:1px solid currentColor; align-self:start; min-width:4.2rem; text-align:center;
}
.t-ok{color:var(--accent)} .t-warn{color:var(--warn)} .t-fail{color:var(--bad)} .t-error{color:var(--text-2)}
.msg{padding:.9rem 1.1rem; border-radius:var(--radius); border:1px solid var(--border-lit); background:var(--surface)}
.msg.err{border-color:var(--bad); color:#fecaca}

.cards{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); margin-top:1.5rem}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem}
.card h3{margin-top:0}
.card p{max-width:none; color:var(--text-2); margin-bottom:0}

table{border-collapse:collapse; width:100%; margin-top:1rem}
th,td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--border); vertical-align:top}
th{font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2)}
caption{text-align:left; color:var(--text-2); padding-bottom:.6rem}

details{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:0 1.1rem; margin:.7rem 0}
summary{cursor:pointer; font-weight:600; padding:1rem 0; list-style-position:inside}
details[open] summary{border-bottom:1px solid var(--border)}
details p{margin:1rem 0}

footer[role="contentinfo"]{border-top:1px solid var(--border); background:var(--surface); padding:2.5rem 0; color:var(--text-2)}
footer ul{list-style:none; padding:0; display:flex; gap:1.25rem; flex-wrap:wrap; margin:0 0 1rem}
footer a{color:var(--text-2)}
footer a:hover{color:var(--text)}
.scanned{margin-top:1rem; font-size:.9rem}

.consent{
  position:fixed; inset:auto 1rem 1rem 1rem; z-index:90; max-width:38rem; margin:0 auto;
  background:var(--surface); border:1px solid var(--border-lit); border-radius:var(--radius); padding:1.1rem 1.25rem;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}
.consent p{margin:0 0 .9rem; max-width:none; font-size:.95rem}
.consent .row{display:flex; gap:.6rem; flex-wrap:wrap}

/* Respect the setting. Nothing here animates for anyone who asked it not to. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}