/* ComplyClear free scanner - page-specific components. Shared header/footer/hero/panels/buttons live in cc-styles.css. */

/* ---- scan form card ---- */
.scan-wrap{max-width:760px;margin:0 auto}
.scan-card{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--radius);
  box-shadow:0 18px 44px -30px rgba(15,32,56,.4);padding:1.6rem}
.scan-form{display:flex;flex-direction:column;gap:1rem}
.scan-row{display:flex;gap:.7rem;flex-wrap:wrap}
.scan-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#url{flex:1 1 260px;min-width:0;padding:.85rem 1rem;font:inherit;color:var(--ink);
  background:var(--white);border:1.5px solid #7d8896;border-radius:var(--radius-sm)}
#url:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
#url::placeholder{color:#6b7480}
#scan-btn{flex:0 0 auto}
.wcag-opts{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;font-size:.92rem;color:var(--muted-2)}
.wcag-opts strong{color:var(--ink);font-weight:600;margin-right:.2rem}
.wcag-opt{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.wcag-opt input{width:1.05rem;height:1.05rem;accent-color:var(--gold)}
.wcag-opt input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.scan-note{font-size:.84rem;color:var(--muted);margin:.3rem 0 0}

/* ---- loading / error ---- */
#loading{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(11,23,40,.80);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#loading[hidden],#error[hidden],#results[hidden]{display:none}
.scan-overlay-card{background:#fff;border-radius:12px;padding:clamp(24px,4vw,36px);width:100%;max-width:520px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:cc-pop .35s ease both}
.spin{width:22px;height:22px;border:3px solid var(--cream-2);border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
#error{max-width:760px;margin:1.2rem auto 0;background:#fdecea;border:1px solid #f3b7b1;
  color:#8a231a;border-radius:var(--radius-sm);padding:1rem 1.2rem;font-weight:600}
#error:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---- results (full-width, two columns) ---- */
.results-wrap{padding:0 clamp(28px,5vw,72px)}
#results{margin:1.8rem 0 0;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
  gap:clamp(1.4rem,2.6vw,2.2rem);align-items:start}
#results:focus{outline:none}
.results-col{min-width:0}
@media(max-width:960px){
  #results{grid-template-columns:1fr;gap:1.4rem}
}
.result-card{background:#fff;border:1px solid var(--card-bd);border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.7rem);box-shadow:0 22px 54px -34px rgba(15,32,56,.45)}

/* screenshot frame */
.result-shot{margin:0 0 1.3rem;border:1px solid var(--navy-bd);border-radius:8px;overflow:hidden;background:var(--navy-900)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--navy-850)}
.shot-bar i{width:9px;height:9px;border-radius:50%;flex:none}
.shot-bar i.r{background:#E4695E}.shot-bar i.y{background:#E8B84B}.shot-bar i.g{background:#5FBF8A}
.shot-bar span{margin-left:6px;font-size:12.5px;color:#8FA1BC;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-img-wrap{position:relative;aspect-ratio:16/9;background:#0B1728;overflow:hidden}
.shot-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot-img-wrap.loading img{opacity:0}
.shot-img-wrap.loading::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#0B1728 30%,#17293F 50%,#0B1728 70%);background-size:220% 100%;
  animation:cc-flow 1.4s linear infinite}
.shot-img-wrap.loading::after{content:"Capturing your page… this can take a few seconds";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:#8FA1BC;font-size:.9rem;font-weight:600}
.shot-img-wrap.failed img{display:none}
.shot-img-wrap.failed::after{content:"Live preview unavailable for this page";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:#8FA1BC;font-size:.9rem;font-weight:600;text-align:center;padding:1rem}

/* summary row: meta + gauge */
.result-main{display:flex;gap:1.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.result-meta{flex:1 1 300px;min-width:0}
#r-url{font-weight:700;color:var(--ink);word-break:break-all;font-size:1.05rem}
#r-title{color:var(--muted);font-size:.92rem;margin:.25rem 0 0}
.result-counts{display:flex;gap:1.4rem;margin:.9rem 0 0;flex-wrap:wrap;font-size:.9rem}
.result-counts b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem;display:block}
.rc-err b{color:#c0392b}.rc-warn b{color:#8A5E0F}.rc-std b{color:var(--ink)}
.result-counts span{color:var(--muted)}

/* gauge */
.gauge{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.gauge-ring{position:relative;width:154px;height:154px}
.score-ring{width:154px;height:154px;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring-track{stroke:var(--cream-2)}
#ring-fill{stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){#ring-fill{transition:none}}
.score-good #ring-fill{stroke:var(--ok)}
.score-ok #ring-fill{stroke:var(--gold)}
.score-poor #ring-fill{stroke:#c0392b}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#ring-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.7rem;color:var(--ink);line-height:1}
.ring-grade{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.82rem;
  padding:.1rem .5rem;border-radius:999px;letter-spacing:.02em}
.g-good{background:#E5F3EB;color:#1C5B37}.g-ok{background:#FBF1DA;color:#8A5E0F}.g-poor{background:#FBE6E4;color:#A0201A}
.score-cap{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* verdict (urgency) */
.verdict{margin:1.35rem 0 0;padding:1rem 1.2rem;border-radius:var(--radius-sm);
  font-size:.98rem;line-height:1.55;border-left:4px solid}
.verdict strong{display:block;font-size:1.06rem;margin-bottom:.15rem}
.v-poor{background:#FBE9E7;border-color:#C0392B;color:#7A1D14}
.v-ok{background:#FBF3E1;border-color:#E29E29;color:#6A4E0C}
.v-good{background:#E9F5EE;border-color:#2E8B57;color:#195234}

/* category bars */
.cats{margin:1.35rem 0 0}
.cats-head{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.75rem}
.cat{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.cat-name{flex:0 0 42%;max-width:220px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.cat-track{flex:1;height:13px;border-radius:7px;background:var(--cream-2);overflow:hidden}
.cat-fill{display:block;height:100%;border-radius:7px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width .9s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.cat-fill{transition:none}}
.cat-num{flex:0 0 auto;min-width:1.6rem;text-align:right;font-weight:700;color:var(--ink);font-size:.9rem}

/* actions */
.result-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0 0}
@media(max-width:560px){.cat-name{flex-basis:52%}.result-actions .btn{flex:1 1 100%;justify-content:center}}

#disclaimer{max-width:none;margin:.9rem 0 0;font-size:.84rem;color:var(--muted);
  background:var(--cool);border:1px solid #dbe3f0;border-radius:var(--radius-sm);padding:.8rem 1rem}

/* ---- issue cards (dark) ---- */
.issues{display:flex;flex-direction:column;gap:.9rem;margin:0}
.issue{background:#23262D;border:1px solid #363B44;border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:1.15rem 1.3rem;color:var(--ink-lt);
  box-shadow:0 14px 40px -30px rgba(0,0,0,.6);animation:cc-rise .4s ease both}
.issue.is-error{border-left-color:#E4695E}
.issue:nth-child(1){animation-delay:.04s}.issue:nth-child(2){animation-delay:.1s}
.issue:nth-child(3){animation-delay:.16s}.issue:nth-child(4){animation-delay:.22s}
.issue:nth-child(5){animation-delay:.28s}.issue:nth-child(6){animation-delay:.34s}
.issue:nth-child(7){animation-delay:.4s}.issue:nth-child(n+8){animation-delay:.46s}
.issue-top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .7rem}
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:.36rem .66rem;border-radius:999px;line-height:1}
.badge-error{background:#4A2420;color:#F3B0A8}
.badge-warning{background:#3A2F12;color:#F2B441}
.badge-level{background:rgba(255,255,255,.09);color:var(--muted-lt2)}
.badge-crit{background:#15304C;color:#82B6EE;text-decoration:none}
.badge-crit:hover{background:#1D3E61;color:#A6CDF6}
.badge-crit:focus-visible{outline:3px solid #82B6EE;outline-offset:2px}
.issue-msg{color:var(--ink-lt);font-weight:600;line-height:1.5}
.issue-fix{color:var(--muted-lt);font-size:.92rem;margin:.5rem 0 0;line-height:1.55}
.issue-snippet{display:block;margin:.75rem 0 0;padding:.75rem .9rem;background:#15171C;
  color:#dbe6f5;border:1px solid var(--navy-bd);border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.all-clear{background:#12331F;border:1px solid #1F6B3D;color:#8FE3AC;font-weight:700;
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem}

/* ---- manual checks list ---- */
.manual-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.manual-list li{position:relative;padding:.9rem 1rem .9rem 2.4rem;background:var(--white);
  border:1px solid var(--cream-2);border-radius:var(--radius-sm);color:var(--muted-2);font-size:.94rem}
.manual-list li strong{display:block;color:var(--ink);margin:0 0 .15rem}
.manual-list li::before{content:"";position:absolute;left:1rem;top:1.15rem;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}


/* ---- "don't take our word for it" tools ---- */
.tools-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tool{display:block;text-decoration:none;background:var(--white);border:1px solid var(--card-bd);
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem;transition:border-color .15s,transform .15s,box-shadow .15s}
.tool:hover{border-color:#C9D6E8;transform:translateY(-2px);box-shadow:0 16px 40px -28px rgba(15,32,56,.5)}
.tool:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tool-name{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-weight:700;font-size:16px;color:var(--ink)}
.tool-name svg{width:15px;height:15px;flex:none;color:var(--gold-tx)}
.tool p{margin:.35rem 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---- flashy scanning animation (booth draw) ---- */
.scan-anim{display:flex;justify-content:center;width:100%}
.scan-doc{position:relative;width:min(440px,92%);height:158px;background:#fff;border:1px solid var(--card-bd);
  border-radius:8px;padding:22px 22px 0;overflow:hidden;box-shadow:0 18px 46px -26px rgba(15,32,56,.45)}
.sd-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sd-bar{display:block;height:12px;border-radius:6px;background:var(--cream-2)}
.sd-chip{width:26px;height:26px;border-radius:7px;background:var(--cool);flex:none}
.sd-bar.w1{width:62%}.sd-bar.w2{width:84%}.sd-bar.w3{width:48%}
.sd-bar.w4{width:73%}.sd-bar.w5{width:38%}.sd-bar.w6{width:56%}
.scan-beam{position:absolute;left:0;right:0;height:60px;top:-60px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(226,158,41,.16) 42%,rgba(226,158,41,.55) 50%,rgba(226,158,41,.16) 58%,transparent);
  box-shadow:0 0 22px rgba(226,158,41,.45);animation:cc-beam 1.9s ease-in-out infinite}
.scan-beam::after{content:"";position:absolute;left:0;right:0;top:29px;height:2px;background:var(--gold-lt);
  box-shadow:0 0 10px 2px rgba(242,180,65,.7)}
@keyframes cc-beam{0%{transform:translateY(0)}100%{transform:translateY(220px)}}
.scan-status{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:1.1rem;text-align:center}
.scan-status-title{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.02rem;color:var(--ink)}
.scan-steps{position:relative;height:22px;width:280px;max-width:80vw;margin-top:2px}
.scan-steps span{position:absolute;inset:0;opacity:0;font-size:.9rem;font-weight:600;color:var(--gold-tx);
  animation:cc-step 6s linear infinite}
.scan-steps span:nth-child(1){animation-delay:0s}
.scan-steps span:nth-child(2){animation-delay:1.2s}
.scan-steps span:nth-child(3){animation-delay:2.4s}
.scan-steps span:nth-child(4){animation-delay:3.6s}
.scan-steps span:nth-child(5){animation-delay:4.8s}
@keyframes cc-step{0%{opacity:0;transform:translateY(7px)}5%{opacity:1;transform:none}17%{opacity:1;transform:none}22%{opacity:0;transform:translateY(-7px)}100%{opacity:0}}

/* ---- results reveal (pop) ---- */
#results:not([hidden]) .result-card{animation:cc-rise .45s ease both}
#results:not([hidden]) .gauge{animation:cc-pop .6s .12s ease both}
@keyframes cc-pop{0%{transform:scale(.55);opacity:0}62%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}
.score-good #ring-fill{filter:drop-shadow(0 0 5px rgba(46,139,87,.55))}
.score-ok #ring-fill{filter:drop-shadow(0 0 5px rgba(226,158,41,.6))}
.score-poor #ring-fill{filter:drop-shadow(0 0 5px rgba(192,57,43,.55))}
@media(prefers-reduced-motion:reduce){.scan-beam,.scan-steps span,.issue,#results *{animation:none!important}}

/* ---- platform / builder badge ---- */
.platform{margin:.85rem 0 0}
.platform[hidden]{display:none}
.platform-badge{display:inline-flex;align-items:center;gap:.42rem;background:var(--cool);border:1px solid #d7e0ee;
  color:var(--navy-600);font-weight:600;font-size:.82rem;padding:.3rem .62rem;border-radius:6px}
.platform-badge .pf-ico svg{width:15px;height:15px;display:block}
.platform-note{margin:.5rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.55;max-width:52ch}
.platform-note a{color:var(--gold-tx);font-weight:600}
.platform-note a:hover{color:var(--ink)}

/* ---- email-me-the-report lead card (soft, appears after a scan) ---- */
.lead-card{margin:1.2rem 0 0;background:var(--cream-2);border:1px solid var(--cream-bd);
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem}
.lead-card.sent{background:#E9F5EE;border-color:#8FD3AC}
.lead-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:0}
.lead-copy{color:var(--muted-2);font-size:.9rem;line-height:1.5;margin:.35rem 0 .8rem}
.lead-row{display:flex;gap:.6rem;flex-wrap:wrap}
.lead-row input[type=email]{flex:1 1 200px;min-width:0;font:inherit;font-size:15px;padding:.7rem .9rem;
  border:1.5px solid #C9C2B4;border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.lead-row input[type=email]:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.lead-row .btn{flex:0 0 auto}
.lead-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.lead-turnstile,#lead-turnstile{margin:.7rem 0 0}
.lead-status{margin:.6rem 0 0;font-size:.86rem;font-weight:600;min-height:1em}
.lead-status.err{color:#B0231A}
.lead-status.ok{color:#1B7A44}
.lead-card.sent .lead-title,.lead-card.sent .lead-copy{text-align:center}