/* Website grader. Sits on top of ../styles.css and uses its colours and type. */
.gr-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.gr-hero h1{max-width:11em}
.gr-points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;color:#CFCFCF}
.gr-points li{padding-left:26px;position:relative}
.gr-points li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;background:var(--y);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.gr-form{background:var(--w);color:var(--k);padding:30px 28px 26px;max-width:none;border-top:8px solid var(--y);border-right:8px solid var(--p)}
.gr-form .fine{margin-top:4px;color:var(--mute)}
.gr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .gr-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;letter-spacing:0;text-transform:none;margin:0;line-height:1.4;cursor:pointer}
.form .gr-check input{width:22px;height:22px;flex:none;margin:0;padding:0;accent-color:var(--k)}
.gr-msg{margin:0;font-weight:700;min-height:1.4em}
.gr-msg.err{color:#B0004F}
.gr-form button[disabled]{opacity:.55;cursor:progress}

.gr-form[hidden]{display:none}
.gr-run{border:1px solid var(--line-d);border-top:6px solid var(--y);padding:30px 28px 26px;scroll-margin-top:110px}
.gr-run .label span{color:var(--w);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.gr-runhead{display:flex;align-items:baseline;gap:18px;margin:6px 0 16px}
.gr-runhead b{flex:none;font-family:var(--heavy);font-weight:900;font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--y);font-variant-numeric:tabular-nums;min-width:2.4em}
.gr-runhead p{margin:0;font-size:17px;max-width:none}
.gr-bar{height:14px;background:var(--line-d);position:relative;overflow:hidden}
.gr-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--y);border-right:6px solid var(--p);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.gr-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);background-size:220px 100%;background-repeat:no-repeat;animation:gr-sheen 1.3s linear infinite}
.gr-steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px;font-size:15px}
.gr-steps li{position:relative;padding-left:30px;display:flex;flex-wrap:wrap;gap:0 16px;align-items:baseline;animation:gr-in .25s ease-out}
.gr-steps li b{font-weight:700}
.gr-steps li span{color:var(--mute-d);font-size:14px;overflow-wrap:anywhere}
.gr-steps li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:14px}
.gr-steps li.on::before{background:var(--p);border-radius:50%;animation:gr-pulse .8s ease-in-out infinite}
.gr-steps li.ok::before{background:var(--y);clip-path:polygon(14% 52%,38% 76%,86% 22%,96% 32%,38% 96%,4% 62%)}
@keyframes gr-sheen{from{background-position:-220px 0}to{background-position:calc(100% + 220px) 0}}
@keyframes gr-pulse{50%{transform:scale(.55);opacity:.6}}
@keyframes gr-in{from{opacity:0;transform:translateY(6px)}}

.gr-result{padding-top:72px;scroll-margin-top:110px}
.gr-group{scroll-margin-top:120px}
.gr-top{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center;margin-bottom:44px}
.gr-top h2{margin-bottom:12px}
.gr-score{width:200px;height:200px;position:relative}
.gr-score svg{width:100%;height:100%;display:block}
.gr-score .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--heavy);font-weight:900;font-size:72px;line-height:1;letter-spacing:-.04em;color:var(--y)}
.gr-score .num span,.gr-cat b{font-variant-numeric:tabular-nums}
.gr-score .num small{font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--w);margin-top:8px}
.gr-site{font-weight:700;overflow-wrap:anywhere;margin-bottom:10px}
.gr-site span{padding-bottom:1px}
.gr-meta{color:var(--mute);font-size:15px}
.gr-actions{margin-top:18px}
.gr-linkbtn{background:none;border:0;padding:0;font:inherit;font-size:16px;text-decoration:underline;cursor:pointer;color:inherit}

.gr-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:56px}
.gr-cat{background:var(--w);border:1px solid var(--line);padding:18px 18px 16px;text-decoration:none;display:block}
.gr-cat b{display:block;font-family:var(--heavy);font-size:44px;line-height:1;letter-spacing:-.03em}
.gr-cat span{display:block;font-size:14px;margin-top:8px;line-height:1.3}
.gr-cat i{display:block;height:8px;background:var(--k);margin-top:12px;position:relative;font-style:normal}
.gr-cat i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--pct,0%);background:var(--y)}
.gr-cat{transition:transform .15s}
.gr-cat:hover{transform:translateY(-3px)}
.gr-cat.low i::after{background:var(--p)}
.gr-cat.ai{border-color:var(--k)}

.gr-block{margin-bottom:56px}
.gr-block h3{font-family:var(--heavy);font-weight:900;font-size:26px;margin-bottom:18px;display:inline-block;background:linear-gradient(transparent 58%,var(--y) 58%);padding:0 6px;margin-left:-6px}
.gr-block h3+*{clear:both}
.gr-toplist{list-style:none;counter-reset:t;padding:0;margin:0;display:grid;gap:12px}
.gr-toplist li{counter-increment:t;background:var(--w);border:1px solid var(--line);border-left:6px solid var(--y);padding:20px 22px 18px 74px;position:relative}
.gr-toplist li::before{content:counter(t,decimal-leading-zero);position:absolute;left:16px;top:18px;font-family:var(--heavy);font-size:30px;color:var(--p)}
.gr-toplist b{display:block;font-size:19px}
.gr-toplist p{margin:6px 0 0;max-width:none}
.gr-toplist .fix{color:#333}
.gr-ev{font-size:15px;color:#333;overflow-wrap:anywhere}

.gr-group{margin-bottom:26px}
.gr-group h4{font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--mute);margin:0 0 10px;display:flex;justify-content:space-between;gap:12px}
.gr-row{background:var(--w);border:1px solid var(--line);margin-top:-1px}
.gr-row summary{list-style:none;cursor:pointer;padding:14px 18px 14px 52px;position:relative;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline}
.gr-row summary::-webkit-details-marker{display:none}
.gr-row summary b{flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
.gr-row summary span{color:#444;font-size:15px;flex:1 1 280px;overflow-wrap:anywhere}
.gr-row summary::before{content:"";position:absolute;left:18px;top:17px;width:18px;height:18px;border-radius:50%}
.gr-row.pass summary::before{background:var(--k);clip-path:polygon(14% 52%,38% 76%,86% 22%,96% 32%,38% 96%,4% 62%);border-radius:0}
.gr-row.warn summary::before{background:var(--y);box-shadow:inset 0 0 0 2px var(--k)}
.gr-row.fail summary::before{background:var(--p)}
.gr-row.not_checked summary::before{background:transparent;box-shadow:inset 0 0 0 2px #9A9A9A}
.gr-row .body{padding:0 18px 16px 52px;font-size:15px}
.gr-row .body p{margin:0 0 8px;max-width:60em;color:#333}
.gr-row .body ul{margin:0 0 8px;padding-left:18px;overflow-wrap:anywhere}
.gr-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor;white-space:nowrap;align-self:center}
.gr-row.warn .gr-tag{background:var(--y);color:var(--k);border-color:var(--y);font-weight:700}
.gr-row.fail .gr-tag{background:var(--p);color:var(--k);border-color:var(--p);font-weight:700}
.gr-row.warn{border-left:4px solid var(--y)}
.gr-row.fail{border-left:4px solid var(--p)}

.gr-speed{background:var(--w);border:1px solid var(--line);padding:22px}
.gr-speed p{max-width:none;margin:0}
.gr-speedwrap{display:flex;gap:36px;align-items:flex-start;margin-bottom:18px}
.gr-phone{flex:none;width:176px;margin:0 8px 8px 0}
.gr-phone img{display:block;width:100%;height:auto;background:var(--w);border:7px solid var(--k);border-top-width:20px;border-bottom-width:20px;border-radius:22px;box-shadow:8px 8px 0 var(--p)}
.gr-phone figcaption{font-size:13px;color:var(--mute);margin-top:16px;line-height:1.3}
.gr-speedgrid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px;margin-bottom:12px}
.gr-speedgrid b{display:inline-block;font-family:var(--heavy);font-size:28px;line-height:1.1;background:linear-gradient(transparent 62%,var(--y) 62%);padding:0 4px;margin-left:-4px}
.gr-speedgrid span{display:block}
.gr-speedgrid span{font-size:13px;color:var(--mute)}
.gr-wait{color:var(--mute)}
.gr-method p{color:#333;font-size:15px;max-width:60em}
.gr-cta{padding:40px 36px;display:grid;gap:10px;justify-items:start}
.gr-cta p{color:#CFCFCF}
.gr-cta .hand{margin:0}

.gr-hl{background:linear-gradient(transparent 58%,var(--y) 58%);color:inherit;padding:0 .12em;white-space:nowrap}
.gr-hl.p{background:linear-gradient(transparent 58%,var(--p) 58%)}
.gr-tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gr-chip{font-size:14px;color:var(--k);padding:5px 12px;background:var(--w);border:1px solid var(--line)}
.gr-chip b{font-family:var(--heavy);font-size:17px}
.gr-chip{border-left:5px solid var(--line)}
.gr-chip.pass{border-left-color:var(--k)}
.gr-chip.warn{border-left-color:var(--y)}
.gr-chip.fail{border-left-color:var(--p)}
.gr-gscore{background:var(--k);color:var(--y);font-family:var(--heavy);letter-spacing:.04em;padding:3px 10px;font-size:12px}
.gr-result{-webkit-print-color-adjust:exact;print-color-adjust:exact}

@media (max-width:900px){
  .gr-hero{grid-template-columns:1fr;gap:36px}
  .gr-cats{grid-template-columns:repeat(2,1fr)}
  .gr-top{grid-template-columns:1fr;gap:24px}
  .gr-score{width:160px;height:160px}
  .gr-score .num{font-size:58px}
  .gr-speedgrid{grid-template-columns:repeat(2,1fr)}
  .gr-speedwrap{flex-direction:column;gap:24px}
  .gr-toplist li{padding-left:60px}
  .gr-toplist li::before{font-size:24px;left:14px;top:21px}
  .gr-form{padding:24px 20px}
  .gr-run{padding:24px 20px}
  .gr-runhead{gap:14px}
  .gr-runhead b{font-size:46px}
}
@media print{
  .nav,.foot,#start,.gr-actions,.gr-cta,.skip{display:none!important}
  body,.light{background:#fff}
  section{padding:0}
  .gr-row .body{display:block}
  details.gr-row>summary~*{display:block}
}