/* ============================================================
   The public site checker. Same tokens as the rest of the
   site; its own file because nothing else on the marketing
   pages needs any of it.
   ============================================================ */
.chk-body{ background:var(--bg); }
.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; }
/* The field bots fill in and people never see. Not display:none --
   some bots skip anything hidden that way. */
.chk-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.chk-top{ display:flex; align-items:center; justify-content:space-between; gap:16px;
          max-width:820px; margin:0 auto; padding:22px var(--pad); }
.chk-top .brand{ display:flex; align-items:center; gap:10px; text-decoration:none;
                 color:var(--head); font-weight:600; font-size:15px; }
.chk-back{ font-family:var(--mono); font-size:13px; color:var(--muted); text-decoration:none; }
.chk-back:hover{ color:var(--accent-ink); }

.chk-wrap{ max-width:820px; margin:0 auto; padding:20px var(--pad) 80px; }
.chk-hero h1{ font-size:clamp(2rem,6vw,3.1rem); line-height:1.05; letter-spacing:-.025em;
              margin:.15em 0 .4em; }
.chk-lede{ font-size:clamp(1rem,2.4vw,1.15rem); color:var(--text); max-width:56ch; line-height:1.6; }
.chk-fine{ font-size:13.5px; color:var(--muted); margin-top:14px; max-width:60ch; line-height:1.6; }

.chk-form{ display:flex; gap:10px; margin:28px 0 0; flex-wrap:wrap; }
.chk-form input[type=text], .chk-form input[type=email], .chk-form input[type=url]{
    flex:1 1 300px; min-width:0; font:inherit; font-size:17px; color:var(--head);
    background:var(--surf); border:1px solid var(--line-2); border-radius:9px; padding:15px 17px; }
.chk-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15); outline:none; }
.chk-form .btn{ flex:0 0 auto; padding:15px 26px; font-size:16px; }

.chk-err{ background:rgba(192,57,43,.08); border:1px solid var(--bad); color:var(--head);
          border-radius:9px; padding:13px 16px; margin:22px 0 0; font-size:15px; }
.chk-ok{ background:rgba(var(--ok-rgb),.10); border:1px solid var(--ok); color:var(--head);
         border-radius:9px; padding:13px 16px; margin:26px 0 0; font-size:15px; }

/* result ---------------------------------------------------- */
.chk-result h1{ font-size:clamp(1.6rem,5vw,2.4rem); letter-spacing:-.02em; margin:.1em 0 .55em;
                overflow-wrap:anywhere; }
.chk-score{ display:flex; align-items:baseline; gap:14px; padding:22px 24px; border-radius:var(--r);
            background:var(--surf); border:1px solid var(--line); border-left:4px solid var(--line-2);
            margin-bottom:34px; flex-wrap:wrap; }
.chk-score__n{ font-family:var(--mono); font-size:2.8rem; font-weight:700; line-height:1;
               letter-spacing:-.03em; }
.chk-score__l{ font-size:1.05rem; color:var(--text); }
.chk-score--bad{ border-left-color:var(--bad); }
.chk-score--bad .chk-score__n{ color:var(--bad); }
.chk-score--ok{ border-left-color:var(--warn); }
.chk-score--ok .chk-score__n{ color:var(--warn); }
.chk-score--good{ border-left-color:var(--ok); }
.chk-score--good .chk-score__n{ color:var(--ok); }

.chk-list{ list-style:none; margin:0 0 36px; padding:0; counter-reset:f; }
.chk-list li{ counter-increment:f; position:relative; padding:20px 0 20px 46px;
              border-bottom:1px solid var(--line); }
.chk-list li:last-child{ border-bottom:0; }
.chk-list li::before{ content:counter(f); position:absolute; left:0; top:20px;
    width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
    font-family:var(--mono); font-size:13px; font-weight:600;
    background:rgba(192,57,43,.10); color:var(--bad); }
.chk-list h2{ font-size:1.12rem; letter-spacing:-.01em; margin:0 0 6px; line-height:1.3; }
.chk-list p{ margin:0; color:var(--text); font-size:15px; line-height:1.6; max-width:62ch; }

.chk-cant, .chk-ask{ background:var(--bg-2); border-radius:var(--r); padding:24px 26px; margin-bottom:26px; }
.chk-ask{ background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.22); }
.chk-cant h2, .chk-ask h2{ font-size:1.1rem; margin:0 0 10px; }
.chk-cant p, .chk-ask p{ margin:0 0 8px; color:var(--text); font-size:15px; line-height:1.65; max-width:62ch; }

.chk-again{ font-size:14px; color:var(--muted); margin-top:30px; }
.chk-again a{ color:var(--accent-ink); }

.chk-foot{ border-top:1px solid var(--line); }
.chk-foot p{ max-width:820px; margin:0 auto; padding:22px var(--pad); font-size:13.5px; color:var(--muted); }
.chk-foot a{ color:var(--muted); }
.chk-foot a:hover{ color:var(--accent-ink); }

@media (max-width:560px){
  .chk-form .btn{ width:100%; }
  .chk-list li{ padding-left:38px; }
}

/* ------------------------------------------------------- the live check
   Each line is a real step the server is taking, and resolves only once
   its result is in hand. The pacing decides when a line is shown, never
   what it says. */
.stage{ margin-top:30px; background:var(--surf); border:1px solid var(--line);
        border-radius:var(--r); padding:8px 20px; }
.stage__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.stg{ display:flex; align-items:center; gap:13px; padding:13px 0;
      border-bottom:1px solid var(--line); opacity:.42; transition:opacity .2s ease; }
.stg:last-child{ border-bottom:0; }
.stg.is-running, .stg.is-done{ opacity:1; }

.stg__spin{ flex:none; width:17px; height:17px; border-radius:50%;
            border:2px solid var(--line-2); border-top-color:transparent; }
.stg.is-running .stg__spin{ border-color:var(--accent); border-top-color:transparent;
                            animation:stgspin .62s linear infinite; }
@keyframes stgspin{ to{ transform:rotate(360deg); } }

/* Resolved: the ring becomes the mark, so nothing jumps sideways. */
.stg.is-done .stg__spin{ animation:none; border:0; display:grid; place-items:center;
                         font-size:11px; font-weight:700; line-height:1; }
.stg.is-ok  .stg__spin::after{ content:'\2713'; color:var(--ok); font-size:14px; }
.stg.is-bad .stg__spin::after{ content:'\00D7'; color:var(--bad); font-size:16px; }

.stg__label{ font-size:14.5px; color:var(--head); }
.stg.is-done .stg__label{ color:var(--text); }
.stg__note{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--muted);
            text-align:right; opacity:0; animation:stgin .22s ease forwards; }
.stg:not(.is-done) .stg__note{ animation:none; }
.stg.is-bad .stg__note{ color:var(--bad); }
@keyframes stgin{ from{ opacity:0; transform:translateX(4px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .stg, .stg__note{ transition:none; animation:none; opacity:1; }
  .stg.is-running .stg__spin{ animation:none; }
}
@media (max-width:520px){
  .stg{ flex-wrap:wrap; }
  .stg__note{ margin-left:30px; width:100%; text-align:left; }
}

/* the smaller tier on the result */
.chk-score__sub{ display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px; }
.chk-notes{ background:var(--bg-2); border-radius:var(--r); padding:22px 26px; margin-bottom:26px; }
.chk-notes__h{ font-size:1.05rem; margin:0 0 4px; }
.chk-notes ul{ list-style:none; margin:16px 0 0; padding:0; }
.chk-notes li{ padding:12px 0; border-top:1px solid var(--line); }
.chk-notes li strong{ display:block; font-size:14.5px; color:var(--head); }
.chk-notes li span{ display:block; font-size:13.5px; color:var(--muted); margin-top:3px;
                    line-height:1.55; max-width:62ch; }

/* The finished list on the result page. Same rows, no spinner state, and
   a little quieter -- it is evidence now, not the main event. */
.stage--done{ margin:0 0 30px; padding:6px 20px; background:var(--bg-2); border-color:transparent; }
.stage--done .stg{ padding:10px 0; opacity:1; }
.stage--done .stg__label{ font-size:13.5px; color:var(--muted); }
.stage--done .stg__note{ animation:none; opacity:1; }

/* The line that ties the crosses above to the explanations below. */
.chk-verdict{ font-size:1.05rem; line-height:1.6; color:var(--text); max-width:60ch;
              margin:0 0 30px; padding-left:16px; border-left:3px solid var(--bad); }
.chk-verdict strong{ color:var(--head); }
.chk-verdict--good{ border-left-color:var(--ok); }
/* The honest caveat under a clean pass. Neutral rather than red: it is
   not a fault, it is the limit of what the eight can see. */
.chk-verdict--but{ border-left-color:var(--line); color:var(--muted); }
.chk-verdict--but strong{ color:var(--head); }
/* What the check actually measured, under the heading it explains. */
.chk-list__found{ font-family:var(--mono); font-size:12px; color:var(--muted);
                  margin:0 0 8px !important; }
.stage__foot{ margin:0; padding:14px 0 4px; border-top:1px solid var(--line);
              font-size:13px; color:var(--muted); line-height:1.55; max-width:60ch; }
.stage--done .stage__foot{ border-top-color:rgba(12,20,32,.08); }

/* What the eight tests are, and who the check is for. Landing state only;
   a result page carries its own explanation of each line. */
.chk-what{ max-width:640px; margin:56px auto 0; }
.chk-what h2{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
              margin:32px 0 12px; }
.chk-what ul{ list-style:none; padding:0; margin:0; }
.chk-what li{ padding:9px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.55; }
.chk-what li:last-child{ border-bottom:1px solid var(--line); }
.chk-what strong{ color:var(--head); }
.chk-what p{ margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--text); }