/* Example website audit (/audit/example/): the report we email, drawn as a page, for a made-up business. Loaded after style.css and work.css. */
.ex{--ex-soft:#3f444d;--ex-red:#a1221b;--ex-green:#2f7d3a;--ex-amber:#b86a00;--ex-track:#e3e7ed;padding-bottom:var(--sec,72px)}
.ex-head{display:grid;gap:14px;max-width:46em;padding-top:clamp(28px,5vw,56px)}
.ex-head .eyebrow{margin:0}
.ex-head h1{margin:0;font:700 clamp(34px,5vw,56px)/1.04 var(--display);letter-spacing:-.045em}
.ex-lead{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ex-soft);max-width:40em}
.ex .case-btn svg{width:16px;height:16px;flex:0 0 auto}
.ex-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* the sheet */
.ex-stage{margin-top:clamp(28px,4vw,48px);padding:clamp(14px,3vw,36px);background:var(--paper-2);border-radius:18px;background-image:radial-gradient(circle at 12% 0,rgb(127 155 255/.28),transparent 46%),radial-gradient(circle at 100% 100%,rgb(63 184 175/.24),transparent 44%)}
.ex-sheet{position:relative;max-width:820px;margin:0 auto;background:#fff;border:1.5px solid var(--ink);border-radius:14px;box-shadow:6px 8px 0 var(--blue);overflow:hidden}
.ex-tag{position:absolute;top:18px;right:-44px;transform:rotate(35deg);width:210px;padding:6px 0;background:var(--orange);color:var(--ink);font:800 11px/1.2 var(--body);letter-spacing:.14em;text-align:center;text-transform:uppercase;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.ex-bar{display:flex;align-items:center;gap:12px;padding:16px clamp(18px,3.4vw,32px);border-bottom:1.5px solid var(--ink);background:var(--paper)}
.ex-bar img{display:block;height:22px;width:auto}
.ex-bar span{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ex-soft)}

.ex-intro{padding:clamp(22px,4vw,34px) clamp(18px,3.4vw,32px) 8px}
.ex-kicker{margin:0;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ex-soft)}
.ex-domain{margin:8px 0 0;font:800 clamp(19px,5.2vw,36px)/1.1 var(--display);letter-spacing:-.04em;word-break:break-word;padding-right:clamp(0px,9vw,60px)}
.ex-for{margin:8px 0 0;font-size:14px;color:var(--muted)}

.ex-score{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(16px,3vw,26px) clamp(18px,3.4vw,32px) clamp(22px,3.4vw,32px)}
@media(min-width:700px){.ex-score{grid-template-columns:210px minmax(0,1fr)}}
.ex-ring{display:grid;justify-items:center;gap:10px;text-align:center}
.ex-ring svg{display:block;width:168px;height:168px}
.ex-ring .trk{fill:none;stroke:var(--ex-track);stroke-width:12}
.ex-ring .val{fill:none;stroke:var(--ex-amber);stroke-width:12;stroke-linecap:round}
.ex-ring .num{font:800 50px/1 var(--display);letter-spacing:-.05em;fill:var(--ink)}
.ex-ring .of{font:600 13px/1 var(--body);fill:var(--muted)}
.ex-verdict{margin:0;font:800 17px/1.25 var(--display);letter-spacing:-.02em}
.ex-areas{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ex-area-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ex-area-name{font:700 16px/1.2 var(--body)}
.ex-area-num{font:800 20px/1 var(--display);letter-spacing:-.03em}
.ex-area svg{display:block;width:100%;height:10px;margin-top:7px;border-radius:99px}
.ex-area .trk{fill:var(--ex-track)}
.ex-good .num,.ex-good .fill{color:var(--ex-green);fill:var(--ex-green)}
.ex-ok .fill{fill:var(--ex-amber)}.ex-ok .ex-area-num{color:var(--ex-amber)}
.ex-bad .fill{fill:var(--ex-red)}.ex-bad .ex-area-num{color:var(--ex-red)}
.ex-good .ex-area-num{color:var(--ex-green)}
.ex-area-w{font:500 12px/1 var(--body);color:var(--muted);margin-top:6px}

.ex-sec{padding:clamp(18px,3vw,26px) clamp(18px,3.4vw,32px);border-top:1.5px solid var(--ink)}
.ex-sec h2{margin:0 0 14px;font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ex-soft)}
.ex-fixes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ex-fix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:16px;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper)}
.ex-body{min-width:0;display:grid;gap:8px;align-content:start}
.ex-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:800 15px/1 var(--display)}
.ex-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.ex-chip{padding:5px 8px;border-radius:99px;border:1.5px solid var(--ink);background:var(--orange);color:var(--ink)}
.ex-chip--urgent{background:var(--ex-red);border-color:var(--ex-red);color:#fff}
.ex-fix h3{margin:0;font:800 18px/1.25 var(--display);letter-spacing:-.025em}
.ex-fix p{margin:0;font-size:15px;line-height:1.55;color:var(--ex-soft)}
.ex-fix p b{color:var(--ink)}
.ex-two{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:700px){.ex-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ex-two .ex-sec+.ex-sec{border-left:1.5px solid var(--ink)}}
.ex-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;line-height:1.45}
.ex-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start}
.ex-list li:before{content:"";width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--orange)}
.ex-list--ok li:before{background:var(--ex-green)}
.ex-how{padding:clamp(16px,3vw,22px) clamp(18px,3.4vw,32px);border-top:1.5px solid var(--ink);background:var(--paper);font-size:13px;line-height:1.55;color:var(--ex-soft)}
.ex-how p{margin:0}.ex-how p+p{margin-top:8px}

.ex-after{display:grid;gap:14px;max-width:820px;margin:clamp(24px,4vw,40px) auto 0;padding:clamp(20px,3.4vw,30px);background:var(--ink);color:var(--paper);border-radius:14px;box-shadow:5px 6px 0 var(--teal)}
.ex-after h2{margin:0;font:700 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.04em}
.ex-after p{margin:0;max-width:36em;line-height:1.55;color:var(--dark-muted,#bfc4cd)}
.ex-after .case-btn{background:var(--blue);border-color:var(--ink);color:var(--ink);justify-self:start}
.ex-after .case-btn:hover{background:var(--paper)}
.ex-after .case-btn--ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.ex-after .case-btn--ghost:hover{background:var(--paper);color:var(--ink)}
.ex-after-b{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:620px){.ex-bar span{display:none}.ex-domain{padding-right:0}.ex-cta,.ex-after-b{display:grid}.ex-cta .case-btn,.ex-after-b .case-btn{width:100%;justify-content:center}.ex-tag{right:-62px;top:14px;font-size:10px}.ex-fix{grid-template-columns:minmax(0,1fr)}}

@media print{.ex-tag{display:none}}