/* ==========================================================================
   Content Risk Scanner page - hero + "how a scan works" steps.
   Loaded only by /scanner/. Colours come from the styles.css tokens; the
   three status colours only ever mean a risk level.
   ========================================================================== */
.sc-hero {
  --sc-bad: #c0263a;  --sc-bad-bg: #fdecef;
  --sc-warn: #9a5b00; --sc-warn-bg: #fff4e0;
  --sc-ok: #0b7a5a;   --sc-ok-bg: #e4f6ef;
  --sc-mark: #ffe58a;
  position: relative; overflow: clip;
  padding-top: var(--sp-7, 48px); padding-bottom: calc(var(--sp-8, 64px) + 12px);
  background:
    radial-gradient(45% 60% at 92% 30%, rgba(0, 122, 252, 0.12), transparent 70%),
    var(--surface);
}
.sc-hero::before {   /* a dotted "paper" texture behind the draft */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 24, 60, 0.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(50% 70% at 76% 50%, #000 15%, transparent 72%);
          mask-image: radial-gradient(50% 70% at 76% 50%, #000 15%, transparent 72%);
}
.sc-hero .container { position: relative; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8, 64px); align-items: center; margin-top: var(--sp-5, 24px); }
.sc-grid > * { min-width: 0; }
.sc-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; line-height: 1.06; }
.sc-hero h1 .sc-under { position: relative; white-space: nowrap; }
.sc-hero h1 .sc-under::after {      /* a marker stroke, like a reviewer's pen */
  content: ""; position: absolute; left: -2px; right: -4px; bottom: 0.06em; height: 0.28em; z-index: -1;
  background: var(--sc-mark); border-radius: 3px; transform: rotate(-1deg);
}
.sc-hero h1 { position: relative; z-index: 0; }
.sc-hero .lede { margin-top: var(--sp-5, 24px); }
.sc-sub { margin-top: 12px; color: var(--text-2); max-width: 58ch; }
.sc-hero .hero-actions { margin-top: var(--sp-6, 32px); }
.sc-plats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-6, 32px); font-size: 0.82rem; color: var(--text-3); }
.sc-plats span.sc-pl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
.sc-plats svg { width: 14px; height: 14px; }

/* ---- the draft under review ---------------------------------------------- */
.sc-visual { position: relative; padding: 8px 0 92px 0; }
.sc-post {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; width: 82%;
  box-shadow: 0 28px 56px -22px rgba(0, 24, 60, 0.25), 0 2px 6px rgba(0, 24, 60, 0.05);
  overflow: hidden;
}
.sc-post-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.sc-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; flex: 0 0 36px; }
.sc-post-head b { display: block; font-size: 0.88rem; color: var(--text-1); }
.sc-post-head small { display: block; font-size: 0.74rem; color: var(--text-3); }
.sc-draft { margin-left: auto; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 3px 9px; }
.sc-caption { padding: 0 16px 12px; font-size: 0.93rem; line-height: 1.55; color: var(--text-1); }
.sc-caption mark { background: linear-gradient(transparent 12%, var(--sc-mark) 12%, var(--sc-mark) 88%, transparent 88%); color: inherit; padding: 0 2px; border-bottom: 2px solid #e8b400; }
.sc-caption .sc-tag { color: var(--accent); }
.sc-media {
  height: 180px; position: relative;
  background: linear-gradient(160deg, #cfe3ff 0%, #8fbcf7 45%, #2f6fd1 100%);
}
.sc-media::before {   /* a simple product-on-a-table shape, no stock photo */
  content: ""; position: absolute; left: 50%; bottom: 26px; width: 74px; height: 92px; transform: translateX(-50%);
  border-radius: 14px 14px 10px 10px; background: linear-gradient(180deg, #ffffff, #e6eefb);
  box-shadow: 0 14px 24px -8px rgba(0, 24, 60, 0.45);
}
.sc-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: rgba(0, 24, 60, 0.18); }
.sc-media-label { position: absolute; left: 10px; top: 10px; z-index: 1; font-family: var(--font-mono); font-size: 0.66rem; background: rgba(255,255,255,0.9); border-radius: 6px; padding: 3px 7px; color: var(--text-2); }

/* the reviewer's comment. It sits over the (decorative) photo, never over the
   caption, and a dashed line runs up to the highlighted words. */
.sc-note {
  position: absolute; right: 0; top: 168px; width: 252px; z-index: 2;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sc-bad); border-radius: 12px;
  box-shadow: 0 18px 36px -14px rgba(0, 24, 60, 0.3); padding: 12px 14px;
  animation: scIn 0.5s ease 0.4s both;
}
.sc-note::before {   /* the connector up to the highlight */
  content: ""; position: absolute; left: 34px; top: -46px; height: 44px; border-left: 2px dashed #e8b400;
}
.sc-note::after { content: ""; position: absolute; left: 30px; top: -50px; width: 10px; height: 10px; border-radius: 50%; background: #e8b400; }
.sc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 3px 8px; }
.sc-pill.bad { color: var(--sc-bad); background: var(--sc-bad-bg); }
.sc-pill.warn { color: var(--sc-warn); background: var(--sc-warn-bg); }
.sc-pill.ok { color: var(--sc-ok); background: var(--sc-ok-bg); }
.sc-note h4 { margin: 8px 0 4px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 650; color: var(--text-1); }
.sc-note p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-2); }
.sc-note .sc-try { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--surface); font-size: 0.78rem; color: var(--text-1); }
.sc-note .sc-try b { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ok); display: block; margin-bottom: 2px; }
.sc-note-acts { display: flex; gap: 6px; margin-top: 9px; }
.sc-note-acts span { font-size: 0.72rem; font-weight: 600; border-radius: 7px; padding: 5px 9px; border: 1px solid var(--line-strong); color: var(--text-2); }
.sc-note-acts span:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the score */
.sc-score {
  position: absolute; left: -18px; bottom: 30px; width: 262px; display: flex; gap: 14px; align-items: center; z-index: 2;
  background: var(--text-1); color: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 20px 40px -14px rgba(0, 24, 60, 0.55);
  animation: scIn 0.5s ease 0.75s both;
}
.sc-ring { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.sc-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.sc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; }
.sc-score-txt { min-width: 0; flex: 1; }
.sc-score-txt small { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb6d6; }
.sc-score-txt strong { display: block; font-size: 0.98rem; margin: 1px 0 6px; }
.sc-bars { display: grid; gap: 4px; }
.sc-bar { display: grid; grid-template-columns: 62px 1fr 20px; gap: 6px; align-items: center; font-size: 0.66rem; color: #c8d6ea; }
.sc-bar i { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.14); position: relative; overflow: hidden; display: block; }
.sc-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 4px; background: var(--c, #ff8a8a); }
.sc-bar em { font-style: normal; text-align: right; color: #fff; }
.sc-example { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 0.75rem; color: var(--text-3); }
.sc-plats > span:first-child { flex-basis: 100%; }

@keyframes scIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-note, .sc-score { animation: none; } }

/* ---- how a scan works: a real sequence, so it is numbered ---------------- */
.sc-steps { list-style: none; margin: var(--sp-6, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: sc; }
.sc-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 19px; border-top: 2px dashed var(--line-strong); }
.sc-steps li { position: relative; counter-increment: sc; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sc-steps li::before {
  content: counter(sc); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--accent); background: #fff;
  border: 2px solid var(--accent-soft-2, #c9dcff); position: relative; z-index: 1; margin-bottom: 6px;
}
.sc-steps li:first-child::before, .sc-steps li:last-child::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-steps b { font-family: var(--font-display); font-size: 1rem; color: var(--text-1); }
.sc-steps span { font-size: 0.82rem; line-height: 1.45; color: var(--text-2); }

@media (max-width: 1200px) {
  .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 760px; margin-inline: auto; }
  .sc-steps::before { display: none; }
  .sc-steps li { flex-direction: row; align-items: flex-start; text-align: left; flex-wrap: wrap; column-gap: 12px; }
  .sc-steps li::before { margin: 0; flex: 0 0 40px; }
  .sc-steps li b { flex: 1 1 calc(100% - 52px); padding-top: 8px; }
  .sc-steps li span { flex: 1 1 100%; padding-left: 52px; margin-top: -4px; }
}
@media (max-width: 1024px) {
  .sc-grid { grid-template-columns: 1fr; gap: var(--sp-7, 48px); }
  .sc-visual { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 767px) {
  .sc-hero { padding-top: var(--sp-5, 24px); padding-bottom: var(--sp-7, 48px); }
  .sc-hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .sc-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .sc-hero .hero-actions .btn { width: 100%; }
  .sc-visual { padding: 0; }
  .sc-post { width: 100%; }
  .sc-note, .sc-score { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin-top: 12px; }
  .sc-note::before, .sc-note::after { display: none; }
  .sc-example { position: static; margin-top: 12px; text-align: center; }
  .sc-steps { grid-template-columns: 1fr; }
}