.sr-only{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.audit{padding:clamp(3.25rem,7vw,5.75rem) clamp(1.25rem,5vw,3rem)}
.audit__inner{
 position:relative;
 max-width:760px;
 margin:0 auto;
 text-align:center
}
.audit__copy{
 position:relative;
 z-index:2;
 max-width:760px;
 margin:0 auto
}
.audit__title{
 margin:0;
 max-width:18ch;
 margin-inline:auto;
 font-size:clamp(1.9rem,4.4vw,3rem);
 font-weight:var(--fw-display);
 line-height:var(--lh-display);
 letter-spacing:var(--tracking);
 text-wrap:balance
}
.audit__lead{
 margin:1.1rem auto 0;
 max-width:48ch;
 font-size:1.02rem;
 font-weight:var(--fw-emph);
 line-height:1.6;
 color:var(--muted)
}
.audit__form{
 display:flex;
 gap:.6rem;
 margin:clamp(1.65rem,3vw,2.25rem) auto 0;
 max-width:540px
}
.audit__input{
 flex:1 1 auto;
 min-width:0;
 min-height:52px;
 padding:0 1.1rem;
 font-family:inherit;
 font-size:1rem;
 font-weight:var(--fw-emph);
 color:var(--ink);
 background:var(--paper);
 border:1px solid rgba(11,10,12,.22);
 border-radius:999px;
 transition:border-color 150ms ease-out
}
.audit__input::placeholder{color:#8A847D}
.audit__input:hover{border-color:rgba(11,10,12,.4)}
.audit__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,60,170,.16)}
.audit__submit{flex:none;min-height:52px}
.audit__hint{margin:.8rem 0 0;font-size:.86rem;font-weight:var(--fw-emph);color:var(--muted)}
.audit__out{display:block;margin-top:clamp(1.8rem,3vw,2.6rem)}
.panel{
 text-align:left;
 padding:clamp(1.5rem,3.4vw,2.4rem);
 border:1px solid var(--line);
 border-radius:22px
}
.panel--msg{text-align:center}
.audit__out.is-done .panel{animation:panel-in 380ms cubic-bezier(.16,1,.3,1) both}
@keyframes panel-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.ring{position:relative;flex:none;width:104px;height:104px;display:grid;place-items:center}
.ring svg{width:104px;height:104px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring__track{stroke:rgba(11,10,12,.09)}
.ring__value{
 stroke:currentColor;
 stroke-dasharray:327;
 stroke-dashoffset:327;
 animation:ring-fill 1s cubic-bezier(.16,1,.3,1) forwards
}
@keyframes ring-fill{to{stroke-dashoffset:calc(327 - (327 * var(--pct) / 100))}}
.ring__num{
 position:absolute;
 font-size:1.9rem;
 font-weight:var(--fw-display);
 letter-spacing:var(--tracking);
 color:currentColor
}
.ring--good{color:#0F7A3D}
.ring--warn{color:#A85A00}
.ring--bad{color:#B3200F}
.panel__head{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.panel__verdict{flex:1 1 260px;min-width:0}
.panel__site{margin:0;font-size:.86rem;font-weight:var(--fw-emph);color:var(--muted);overflow-wrap:anywhere}
.panel__sentence{
 margin:.25rem 0 0;
 font-size:clamp(1.08rem,1.9vw,1.3rem);
 font-weight:var(--fw-title);
 letter-spacing:var(--tracking);
 line-height:1.3
}
.panel__meta{margin:.35rem 0 0;font-size:.88rem;font-weight:var(--fw-emph);color:var(--muted)}
.panel__note{margin:.6rem 0 0;font-size:.95rem;font-weight:var(--fw-emph);color:var(--muted)}
.cards{
 list-style:none;
 margin:clamp(1.5rem,3vw,2rem) 0 0;
 padding:0;
 display:grid;
 gap:.8rem;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.card{
 padding:1.05rem 1.15rem 1.15rem;
 border:1px solid var(--line);
 border-radius:14px;
 border-left-width:3px
}
.card--high{border-left-color:#B3200F;background:rgba(179,32,15,.03)}
.card--mid{border-left-color:#A85A00;background:rgba(168,90,0,.03)}
.card--low{border-left-color:rgba(11,10,12,.28)}
.card--pending{border-left-color:var(--accent);background:rgba(108,60,170,.03)}
.card__sev{
 display:inline-block;
 font-size:.7rem;
 font-weight:var(--fw-title);
 letter-spacing:.09em;
 text-transform:uppercase
}
.card--high .card__sev{color:#B3200F}
.card--mid .card__sev{color:#A85A00}
.card--low .card__sev{color:var(--muted)}
.card--pending .card__sev{color:var(--accent)}
.card__title{
 margin:.4rem 0 0;
 font-size:1rem;
 font-weight:var(--fw-title);
 letter-spacing:var(--tracking);
 line-height:1.25;
 display:flex;
 align-items:center;
 gap:.45rem;
 flex-wrap:wrap
}
.card__text{margin:.35rem 0 0;font-size:.92rem;font-weight:var(--fw-body);line-height:1.55;color:var(--muted)}
.card--new{animation:panel-in 380ms cubic-bezier(.16,1,.3,1) both}
.panel__rest{margin:1.1rem 0 0;font-size:.9rem;font-weight:var(--fw-emph);color:var(--muted)}
.panel__cta{margin-top:1.5rem}
.panel--msg .panel__cta{margin-inline:auto}
.panel--loading{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.ring--idle{color:var(--accent)}
.ring__spin{
 stroke:currentColor;
 stroke-dasharray:80 247;
 animation:ring-spin 1.1s linear infinite
}
@keyframes ring-spin{to{transform:rotate(360deg);transform-origin:60px 60px}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;flex:1 1 240px}
.step{
 font-size:.95rem;
 font-weight:var(--fw-emph);
 color:rgba(11,10,12,.3);
 transition:color 220ms ease-out
}
.step.is-on{color:var(--ink);font-weight:var(--fw-title)}
.step.is-done{color:var(--muted)}
.step.is-done::before{content:"";display:inline-block;width:12px}
.dots{display:inline-flex;gap:3px;align-items:center}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@media (max-width:900px){
 .audit__inner{text-align:center}
}
@media (max-width:600px){
 .audit__form{flex-direction:column}
 .audit__submit{width:100%}
 .panel__head{gap:.9rem}
 .ring,.ring svg{width:84px;height:84px}
 .ring__num{font-size:1.6rem}
 .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .ring__value{animation:none;stroke-dashoffset:calc(327 - (327 * var(--pct) / 100))}
 .ring__spin{animation:none}
 .dots i{animation:none;opacity:.6}
 .audit__out.is-done .panel,.card--new{animation:none}
}