/* Signature check page. Self-contained so it does not depend on the marketing site's CSS. */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --radius-card: 16px;
  --radius-control: 12px;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --fill: rgba(120, 120, 128, 0.12);
  --label: #1d1d1f;
  --label-2: rgba(60, 60, 67, 0.76);
  --label-3: rgba(60, 60, 67, 0.48);
  --separator: rgba(60, 60, 67, 0.18);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --tint: #007a8c;
  --tint-mark: #00a3bd;
  --tint-fill: rgba(0, 163, 189, 0.13);
  --red: #d70015;
  --red-mark: #ff3b30;
  --red-fill: rgba(255, 59, 48, 0.11);
  --grey-mark: #8e8e93;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --fill: rgba(118, 118, 128, 0.24);
    --label: #f5f5f7;
    --label-2: rgba(235, 235, 245, 0.7);
    --label-3: rgba(235, 235, 245, 0.42);
    --separator: rgba(84, 84, 88, 0.6);
    --shadow-card: none;
    --tint: #3fc6db;
    --tint-mark: #1bb2cb;
    --tint-fill: rgba(64, 200, 224, 0.17);
    --red: #ff6961;
    --red-mark: #ff453a;
    --red-fill: rgba(255, 69, 58, 0.19);
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--label); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--tint); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; }
.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-bar, .vp, .site-foot { max-width: 640px; margin: 0 auto; padding-right: 20px; padding-left: 20px; }
.site-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.site-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--label); font: 600 16px var(--font); text-decoration: none; }
.site-brand img { width: 26px; height: 26px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; font: 600 15px var(--font); text-decoration: none; cursor: pointer; }
.btn-small { padding: 7px 14px; font-size: 14px; }
.btn-tinted { background: var(--tint-fill); color: var(--tint); }
.btn-filled { background: var(--tint); color: #fff; }
.vp { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; padding-bottom: 14px; }
.vp-hero { display: flex; flex-direction: column; align-items: center; padding: 6px 8px 8px; text-align: center; }
.hero-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--grey-mark); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.hero-mark .i { width: 30px; height: 30px; stroke-width: 2; }
.hero-mark:empty { display: none; }
.vp-hero[data-mood='ok'] .hero-mark { background: var(--tint-mark); }
.vp-hero[data-mood='stop'] .hero-mark { background: var(--red-mark); }
.vp-hero h1 { margin: 0; font: 700 30px/1.15 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; }
.vp-hero p { max-width: 500px; margin: 10px 0 0; color: var(--label-2); font-size: 16px; text-wrap: pretty; }
.vp-hero p b { color: var(--label); font-weight: 600; }
.vp-card { padding: 18px 20px 20px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.vp-card h2 { margin: 0; font: 600 17px/1.3 var(--font); }
.vp-card > p { margin: 6px 0 0; color: var(--label-2); font-size: 14px; }
.vp-card > p b { color: var(--label); font-weight: 600; }
.vp-form { display: flex; gap: 8px; margin-top: 14px; }
.vp-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--label); font: 500 15px var(--font-mono); letter-spacing: 0.02em; outline: none; }
.vp-form input::placeholder { color: var(--label-3); font-family: var(--font); letter-spacing: 0; }
.vp-form input:focus { box-shadow: inset 0 0 0 1.5px var(--tint); }
.vp-form .btn { flex-shrink: 0; padding: 12px 22px; }
.vp-result { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-control); color: var(--label-2); font-size: 14px; }
.vp-result[hidden] { display: none; }
.vp-result b { display: block; color: var(--label); font-weight: 600; }
.vp-result[data-tone='ok'] { background: var(--tint-fill); }
.vp-result[data-tone='ok'] .i { color: var(--tint); }
.vp-result[data-tone='bad'] { background: var(--red-fill); }
.vp-result[data-tone='bad'] .i { color: var(--red); }
.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: word; }
.words li { display: flex; align-items: baseline; gap: 8px; padding: 12px; border-radius: var(--radius-control); background: var(--fill); font: 600 17px var(--font); counter-increment: word; }
.words li::before { content: counter(word); color: var(--label-3); font-size: 12px; font-weight: 500; }
.vp-fine { margin: 12px 0 0; color: var(--label-2); font-size: 13px; }
.vp-facts { margin: 10px 0 0; }
.vp-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--separator); font-size: 14px; }
.vp-facts > div:first-child { border-top: 0; }
.vp-facts dt { color: var(--label-2); }
.vp-facts dd { margin: 0; overflow-wrap: anywhere; }
.vp-facts dd small { display: block; color: var(--label-2); font-size: 13px; }
.vp-facts .is-ok { color: var(--tint); }
.vp-facts .is-bad { color: var(--red); }
.vp-steps { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.vp-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.vp-steps .i { color: var(--tint); }
.vp-cta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.vp-cta img { width: 40px; height: 40px; }
.vp-cta div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vp-cta b { font-weight: 600; }
.vp-cta span { color: var(--label-2); font-size: 13px; }
.vp-cta .btn { flex-shrink: 0; }
.site-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 6px; padding-bottom: 32px; color: var(--label-3); font-size: 12px; text-align: center; }
.site-foot .i { width: 14px; height: 14px; }
[hidden] { display: none !important; }
@media (max-width: 480px) {
  .vp-hero h1 { font-size: 26px; }
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .vp-cta { flex-wrap: wrap; }
}
.sprite { display: none; }
.vp-stack { display: flex; flex-direction: column; gap: 14px; }