/* Scam Tester product page. Every rule is scoped under .p-scam.
   Brand: black on white, Inter 800-900, and the app's three score colours (theme.ts).
   Structure: a scored message, the message marked up, the meter, the buttons, a ledger. */
.p-scam {
  --st-ink: #111111;
  --st-muted: #5f5f66;
  --st-faint: #f4f4f5;
  --st-line: #e6e6e8;
  --st-bg: #ffffff;
  --st-scam: #c62828;
  --st-scam-tint: #fdecea;
  --st-careful: #b26a00;
  --st-careful-tint: #fff3e0;
  --st-normal: #1e8e3e;
  --st-normal-tint: #e8f5ec;
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.p-scam h1, .p-scam h2, .p-scam h3 { font-family: inherit; font-weight: 800; color: var(--st-ink); }
.p-scam h1 em, .p-scam h2 em { font-style: normal; color: var(--st-scam); }
.p-scam a { color: inherit; text-decoration-color: currentColor; }
.p-scam a:hover { color: var(--st-scam); }
.p-scam :focus-visible { outline: 2px solid var(--st-ink); outline-offset: 3px; }
.p-scam figure { margin: 0; }
.p-scam code { font-size: 0.85em; background: var(--st-faint); border-radius: 6px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.p-scam .st-label { margin: 0 0 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-muted); }

/* ---------------------------------------------------------------- hero: the demo is the hero */
.p-scam .st-hero { padding: 40px 0 56px; }
.p-scam .st-hero-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.p-scam .st-brand { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 0 0 20px; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.p-scam .st-brand img { width: 40px; height: 40px; border-radius: 9px; }
.p-scam .st-brand span { flex-basis: 100%; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; color: var(--st-muted); }
.p-scam h1 { font-size: clamp(2.75rem, 11vw, 5.5rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 18px; }
.p-scam .st-lead { color: var(--st-muted); font-size: 1.125rem; margin: 0 auto; max-width: 36em; }

.p-scam .st-demo { position: relative; max-width: 940px; margin: 0 auto; }
.p-scam .st-radio { position: absolute; top: 10px; left: 50%; margin: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.p-scam .st-tabs { display: flex; gap: 6px; padding: 4px; margin: 0 auto 16px; max-width: 420px; background: var(--st-faint); border-radius: 999px; }
.p-scam .st-tabs label { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--st-muted); cursor: pointer; white-space: nowrap; }
.p-scam .st-tabs label:hover { color: var(--st-ink); }
.p-scam #st-ex-toll:checked ~ .st-tabs .t-toll,
.p-scam #st-ex-wrong:checked ~ .st-tabs .t-wrong,
.p-scam #st-ex-usps:checked ~ .st-tabs .t-usps { background: var(--st-ink); color: var(--st-bg); }
.p-scam #st-ex-toll:focus-visible ~ .st-tabs .t-toll,
.p-scam #st-ex-wrong:focus-visible ~ .st-tabs .t-wrong,
.p-scam #st-ex-usps:focus-visible ~ .st-tabs .t-usps { outline: 2px solid var(--st-ink); outline-offset: 2px; }

.p-scam .st-panel { display: none; --c: var(--st-scam); --tint: var(--st-scam-tint); padding: 18px; border: 1px solid var(--st-line); border-radius: 28px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 30px 70px -34px rgba(0, 0, 0, 0.35); }
.p-scam .st-panel.careful { --c: var(--st-careful); --tint: var(--st-careful-tint); }
.p-scam .st-panel.normal { --c: var(--st-normal); --tint: var(--st-normal-tint); }
.p-scam #st-ex-toll:checked ~ .p-toll,
.p-scam #st-ex-wrong:checked ~ .p-wrong,
.p-scam #st-ex-usps:checked ~ .p-usps { display: block; }
.p-scam .st-msg { margin: 0 0 16px; max-width: 34em; background: var(--st-faint); border-radius: 20px 20px 20px 6px; padding: 12px 16px; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.p-scam .st-msg u { text-decoration-color: var(--c); }
.p-scam .st-verdict { display: grid; gap: 16px; }
.p-scam .st-result { background: var(--tint); border-radius: 20px; padding: 20px; text-align: center; align-self: start; }
.p-scam .st-ring { width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; border: 8px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c); line-height: 1; }
.p-scam .st-ring b { font-size: 2.75rem; font-weight: 900; letter-spacing: -0.05em; }
.p-scam .st-ring span { font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
.p-scam .st-bandname { margin: 10px 0 0; font-size: 1.375rem; font-weight: 800; color: var(--c); letter-spacing: -0.02em; }
.p-scam .st-small { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
.p-scam .st-todo { margin: 0 0 18px; padding-left: 12px; border-left: 3px solid var(--c); font-weight: 700; font-size: 1rem; line-height: 1.4; }
.p-scam .st-why { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; line-height: 1.4; }
.p-scam .st-why li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; margin: 0; border-bottom: 1px solid var(--st-line); }
.p-scam .st-why li:last-child { border-bottom: 0; }
.p-scam .st-why b { color: var(--c); font-weight: 800; white-space: nowrap; }

/* ---------------------------------------------------------------- sections */
.p-scam .st-sec { padding: 64px 0; border-top: 1px solid var(--st-line); }
.p-scam .st-faint { background: var(--st-faint); }
.p-scam .st-sec h2 { font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 32px; max-width: 20ch; }

/* the message, marked up */
.p-scam .st-marked { display: grid; gap: 28px; }
.p-scam .st-msg.big { --c: var(--st-scam); font-size: clamp(1.1875rem, 3.4vw, 1.5rem); line-height: 1.75; padding: 22px 24px; max-width: none; align-self: start; }
.p-scam .st-msg mark { background: var(--st-scam-tint); color: var(--st-ink); padding: 0.05em 0.2em; border-radius: 4px; box-shadow: inset 0 -2px 0 var(--st-scam); }
.p-scam .mk { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin: 0 0.15em 0 0.1em; border-radius: 50%; background: var(--st-scam); color: #ffffff; font-size: 0.55em; font-weight: 800; vertical-align: super; line-height: 1; }
.p-scam .st-notes { list-style: none; padding: 0; margin: 0; counter-reset: st; display: grid; gap: 18px; }
.p-scam .st-notes li { counter-increment: st; position: relative; margin: 0; padding-left: 40px; }
.p-scam .st-notes li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--st-scam); color: #ffffff; font-size: 0.8125rem; font-weight: 800; }
.p-scam .st-notes h3 { font-size: 1.0625rem; margin: 0 0 4px; letter-spacing: -0.01em; line-height: 1.5; }
.p-scam .st-notes p { margin: 0; color: var(--st-muted); font-size: 0.9375rem; }
.p-scam .st-also { margin: 32px 0 0; padding-top: 18px; border-top: 1px dashed var(--st-line); color: var(--st-muted); font-size: 0.9375rem; max-width: 52em; }

/* the meter, on black */
.p-scam .st-dark { background: #111111; color: #e8e8ea; border-top: 0; }
.p-scam .st-dark h2 { color: #ffffff; }
.p-scam .st-dark .st-label { color: #a1a1aa; }
.p-scam .st-meter { position: relative; height: 64px; margin: 0 0 28px; }
.p-scam .st-zones { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 30fr 40fr 31fr; gap: 4px; }
.p-scam .st-zones span { height: 14px; border-radius: 7px; }
.p-scam .st-zones .z-n { background: #4cc36b; }
.p-scam .st-zones .z-c { background: #f2a33a; }
.p-scam .st-zones .z-s { background: #ff6b61; }
.p-scam .st-pin { position: absolute; top: 26px; padding: 3px 10px; border-radius: 999px; background: #ffffff; color: #111111; font-weight: 900; font-size: 0.875rem; }
.p-scam .st-pin.n { left: 0; }
.p-scam .st-pin.c { left: 35%; transform: translateX(-50%); }
.p-scam .st-pin.s { right: 0; }
.p-scam .st-key3 { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 16px; }
.p-scam .st-key3 li { margin: 0; padding-top: 12px; border-top: 3px solid #4cc36b; font-size: 0.9375rem; color: #c9c9cf; }
.p-scam .st-key3 li.c { border-color: #f2a33a; }
.p-scam .st-key3 li.s { border-color: #ff6b61; }
.p-scam .st-key3 b { display: block; color: #ffffff; font-size: 1.0625rem; }
.p-scam .st-shots { display: flex; justify-content: center; gap: 16px; }
.p-scam .st-shot { flex: 1; max-width: 250px; padding: 7px; background: #2c2c2e; border-radius: 40px; }
.p-scam .st-shot img { width: 100%; height: auto; }

/* ways in, drawn as the app's buttons */
.p-scam .st-ways { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.p-scam .st-ways li { margin: 0; }
.p-scam .st-ways li.big { grid-column: 1 / -1; }
.p-scam .st-key { display: block; padding: 14px 10px; border-radius: 18px; background: var(--st-faint); text-align: center; font-weight: 800; font-size: 1rem; }
.p-scam .st-ways li.big .st-key { padding: 22px 10px; border-radius: 22px; background: var(--st-ink); color: #ffffff; font-size: 1.375rem; }
.p-scam .st-ways p { margin: 8px 4px 0; color: var(--st-muted); font-size: 0.875rem; line-height: 1.4; text-align: center; }

/* the ledger */
.p-scam .st-ledger { margin: 0; max-width: 900px; border-top: 2px solid var(--st-ink); }
.p-scam .st-ledger > div { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid #dcdce0; }
.p-scam .st-ledger dt { font-weight: 800; }
.p-scam .st-ledger dd { margin: 0; color: var(--st-muted); font-size: 0.9375rem; }
.p-scam .st-ledger dd b { color: var(--st-ink); }
.p-scam .st-help { margin: 24px 0 0; color: var(--st-muted); font-size: 0.9375rem; }

/* the end: a message not checked yet */
.p-scam .st-end { padding: 72px 0 80px; text-align: center; border-top: 1px solid var(--st-line); }
.p-scam .st-end-score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; height: 120px; margin: 0 auto 24px; border-radius: 50%; border: 8px dashed #c9c9cf; font-size: 2.75rem; font-weight: 900; line-height: 1; color: #a1a1aa; }
.p-scam .st-end-score span { font-size: 0.75rem; font-weight: 600; }
.p-scam .st-end h2 { font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0 auto 12px; max-width: 18ch; }
.p-scam .st-end p { margin: 0 auto; color: var(--st-muted); max-width: 34em; }

@media (min-width: 720px) {
  .p-scam .st-panel { padding: 24px; }
  .p-scam .st-verdict { grid-template-columns: 220px 1fr; gap: 24px; }
  .p-scam .st-key3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .p-scam .st-ways { grid-template-columns: repeat(5, 1fr); }
  .p-scam .st-ledger > div { grid-template-columns: 200px 1fr; gap: 24px; }
}
@media (min-width: 960px) {
  .p-scam .st-hero { padding: 64px 0 88px; }
  .p-scam .st-sec { padding: 96px 0; }
  .p-scam .st-marked { grid-template-columns: 1fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: no-preference) {
  .p-scam .st-panel { animation: st-in 0.25s ease-out; }
  @keyframes st-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}