/* /guides/from-screenshot-to-w2c-source/ — image-clue extraction desk. Original layout. */

.ss-hero{padding:48px 0 12px;max-width:840px}
.ss-hero h1{font-size:clamp(26px,3.6vw,38px);margin:.3em 0 .5em}
.ss-lede{font-size:17px;color:#C4C6C8}

.ss-desk{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center}
@media (max-width:760px){.ss-desk{grid-template-columns:1fr}}
.ss-frame{position:relative;aspect-ratio:4/5;background:linear-gradient(135deg,#232326,#18181a);border:2px dashed var(--border);border-radius:var(--radius-lg)}
.ss-frame-photo{position:absolute;inset:14%;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 8px,rgba(255,255,255,.03) 8px,rgba(255,255,255,.03) 16px);border-radius:10px}
.ss-callout{position:absolute;background:var(--coral);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.ss-desk-copy h3{font-size:17px;margin-bottom:10px}
.ss-desk-copy ul{margin:0;padding-left:1.1em}
.ss-desk-copy li{font-size:13.5px;color:#C4C6C8;margin-bottom:6px}

.ss-weak-strong{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:10px}
.ss-weak-strong p{margin:0 0 10px;font-size:14.5px;font-style:italic}
.ss-weak-strong p:last-child{margin-bottom:0}

.ss-rank{padding:20px}
.ss-rank h3{font-size:15px;margin-bottom:8px}
.ss-rank p{font-size:13.5px;color:var(--muted);margin:0}
.ss-rank-high{background:var(--qc-green-tint)}
.ss-rank-med{background:var(--amber-tint)}
.ss-rank-low{background:rgba(255,255,255,.05)}

.ss-search-cta{display:flex;gap:10px;max-width:480px;margin-top:16px}
.ss-search-cta input{flex:1;min-width:0;border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:999px;padding:12px 16px;font-size:14.5px}

.ss-trail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.ss-trail span:not(.ss-trail-arrow){background:var(--coral-tint);color:var(--coral);font-weight:700;font-size:13px;padding:7px 12px;border-radius:999px}
.ss-trail-arrow{color:var(--border);font-size:16px}

.ss-card-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.ss-card-fields{grid-template-columns:repeat(2,1fr)}}
.ss-card-fields span{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;color:#C4C6C8;min-width:0}