:root {
  --bg-app: #f3efe8;
  --bg-content: #faf7f1;
  --bg-card: #ffffff;
  --bg-sidebar: #efeae1;
  --topbar: #0a0d0c;
  --topbar-text: #e8eae6;
  --topbar-text-dim: #8b9088;

  --text: #1a1f1c;
  --text-dim: #6b7269;
  --text-faint: #a4a89e;
  --border: #e2dccf;
  --border-strong: #d4ccba;

  --green-1: #2f6a47;
  --green-2: #3a8a55;
  --green-soft: #6ec88a;
  --warn: #b87a1f;
  --danger: #b8453d;

  --serif: 'Instrument Serif', Georgia, serif;
  --ui: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

.mono { font-family: var(--mono); letter-spacing: 0.02em; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--text); }

/* ---------- top bar ---------- */
.topbar {
  height: 56px;
  background: var(--topbar);
  color: var(--topbar-text);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 18px;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid #1a1d1c;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-name { font: 600 18px/1 var(--ui); letter-spacing: -.01em; color: #fff; }
.brand-pill {
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border: 1px solid #2a2e2d;
  border-radius: 3px;
  color: #b9bcb6;
  text-transform: uppercase;
}
.topbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.tb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--topbar-text-dim); }
.tb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-soft); box-shadow: 0 0 6px var(--green-soft); }
.tb-user { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px; }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #4a90c8, #2a6090);
  color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-name { font-size: 12px; color: #d4d6d2; }
.pro-tag {
  font-size: 9px;
  background: #4ea36a;
  color: #06140d;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.10em;
  font-weight: 600;
}
.tb-link { font-size: 12px; color: var(--topbar-text-dim); }
.tb-link:hover { color: #fff; }
.tb-about {
  font-size: 12px;
  color: #fff;
  padding: 5px 12px;
  border: 1px solid #2a2e2d;
  border-radius: 5px;
}
.tb-about:hover { border-color: #4a4e4d; }

/* ---------- shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 56px);
}

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  position: sticky;
  top: 56px;
  align-self: flex-start;
  height: calc(100vh - 56px);
}
.sb-section { margin-bottom: 20px; }
.sb-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 0 10px 8px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sb-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
.sb-item.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px var(--border);
  font-weight: 500;
}
.sb-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.sb-card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 12px 12px;
}
.sb-card-title { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.soon-pill { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: rgba(184,122,31,0.18); color: #d8a25a; border: 1px solid rgba(184,122,31,0.42); }
.sb-card-body { font-family: var(--mono); font-size: 10px; color: var(--text-dim); line-height: 1.55; }
.sb-card.dev { display: flex; gap: 10px; align-items: flex-start; }
.sb-card.dev .icon { color: var(--warn); flex-shrink: 0; margin-top: 1px; }

.sb-foot-links {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11px;
  color: var(--text-faint);
  padding: 4px 6px;
}
.sb-foot-links a:hover { color: var(--text-dim); }

/* ---------- content area ---------- */
.content-wrap {
  position: relative;
  background: var(--bg-content);
  overflow: hidden;
}
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.content {
  position: relative;
  z-index: 1;
  display: grid;
  /* The scanner column's minimum was 0 while the right rail's floor was 280px,
     so between ~900px and ~1150px the rail held its width and the scanner
     column collapsed — squeezing the URL field down to ~8px on iPad landscape
     and shrunk desktop windows. Giving the scanner a real floor and lowering
     the rail's keeps both usable. 320+220 still fits at 900px, where the
     single-column media query below takes over. */
  grid-template-columns: minmax(320px, 560px) minmax(220px, 1fr);
  gap: 28px;
  padding: 36px 44px 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .content { grid-template-columns: 1fr; }
  .right-rail { display: none; }
}

/* ---------- page header ---------- */
.page-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.page-title em { color: var(--text-dim); }
.page-sub {
  margin: 0 0 24px;
  color: var(--text-dim);
  max-width: 540px;
  line-height: 1.55;
}

/* ---------- card ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(40, 40, 30, 0.03);
}
.card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.card-title .ic { color: var(--text-dim); }
.card-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--text-dim);
}

/* url field */
.url-row {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 12px;
  /* Wrap rather than crush the input: the prefix chip and Run button both have
     fixed widths, so without this the field absorbs every pixel lost. The
     button drops to its own line before the input becomes unusable. On wide
     layouts everything still fits on one line, so desktop is unchanged. */
  flex-wrap: wrap;
}
.url-prefix-box {
  display: inline-flex; align-items: center;
  background: #f3efe8;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  flex-shrink: 0;
}
.url-input-box {
  /* 220px basis is the wrap trigger — below that the row reflows instead of
     shrinking the field further. */
  flex: 1 1 220px; min-width: 0;
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.url-input-box:focus-within {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(78, 163, 106, 0.12);
}
.url-input-box .pfx {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-faint);
}
.url-input-box input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  padding: 10px 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: transparent;
}
.run-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #14181a;
  color: #fff;
  border-radius: 6px;
  min-height: 44px;
  max-width: 100%;
  justify-content: center;
  padding: 10px 18px;
  line-height: 1.3;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.05s;
}
.run-btn:hover:not(:disabled) { background: #1f2426; }
.run-btn:active:not(:disabled) { transform: translateY(1px); }
.run-btn:disabled { background: #b8b3a8; cursor: not-allowed; }

/* big file dropzone */
.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 200px;
  padding: 32px 20px;
  margin-bottom: 12px;
  text-align: center;
  background: #fbfaf6;
  border: 2px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.file-drop:hover { border-color: var(--green-2); background: #f6f4ec; }
.file-drop:focus-visible { outline: none; border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(78, 163, 106, 0.15); }
.file-drop.is-drag { border-color: var(--green-2); background: #eef5ef; }
.file-drop.has-file { border-style: solid; border-color: var(--green-2); background: #f4f8f4; }
.file-drop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: var(--green-2);
  opacity: 0.85;
}
.file-drop-icon svg { width: 32px; height: 32px; }
.file-drop-name {
  font-size: 16px; font-weight: 600; color: var(--text);
  word-break: break-all;
}
.file-drop-hint { font-size: 13px; color: var(--text-dim); }
.run-btn.file-run {
  width: 100%; justify-content: center;
  padding: 14px 18px;
  font-size: 15px;
}

/* opt chips */
.opts {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding-top: 4px;
}
.opt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.opt input { display: none; }
.opt-box {
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.opt input:checked + .opt-box {
  background: #14181a;
  border-color: #14181a;
  color: #fff;
}

/* scan in progress card */
.scan-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.scan-progress-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.scan-progress-status .ok { color: var(--green-2); }

.scan-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scan-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.scan-tile-head { display: flex; align-items: center; gap: 8px; }
.scan-tile-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid #d4ccba;
  border-top-color: var(--text-dim);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}
.scan-tile.done .scan-tile-spinner {
  border: none;
  background: var(--green-2);
  position: relative;
  animation: none;
}
.scan-tile.done .scan-tile-spinner::after {
  content: '';
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 2px 5px / 5px 2px no-repeat,
    linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 4px 5px / 5px 2px no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scan-tile-name { font-size: 12.5px; font-weight: 500; }
.scan-tile-status { font-size: 11px; color: var(--text-dim); padding-left: 20px; }

.scan-progress-foot {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.scan-progress-bar {
  flex: 1;
  height: 3px;
  background: #f0ebe1;
  border-radius: 2px;
  overflow: hidden;
}
.scan-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-1), var(--green-soft));
  transition: width 0.3s;
}
.scan-progress-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* recent scans */
.recents {
  display: flex; flex-direction: column;
}
.recents-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 10px 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.recents-row:first-of-type { border-top: none; padding-top: 6px; }
.recent-target { display: inline-flex; align-items: center; gap: 10px; }
.recent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.recent-dot.bad { background: var(--danger); }
.recent-dot.warn { background: var(--warn); }
.recent-url { font-family: var(--mono); color: var(--green-1); }
.recent-score { font-family: var(--mono); color: var(--green-1); }
.recent-score.bad { color: var(--danger); }
.recent-time { font-family: var(--mono); color: var(--text-faint); font-size: 11px; }

/* ---------- verdict / details ---------- */
.verdict-card {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 28px;
  align-items: center;
}
.verdict-score-block { text-align: center; padding: 8px 0; }
.verdict-num {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--green-1);
}
.verdict-num.bad { color: var(--danger); }
.verdict-score-label { font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); margin-top: 6px; }
.verdict-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(78, 163, 106, 0.12);
  color: var(--green-1);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.verdict-pill.bad,
.verdict-pill-danger { background: rgba(184, 69, 61, 0.12); color: var(--danger); }
.verdict-pill-warn   { background: rgba(184, 122, 31, 0.14); color: var(--warn); }
.verdict-pill-safe   { background: rgba(78, 163, 106, 0.12); color: var(--green-1); }
.verdict-card.lvl-warn   .verdict-num { color: var(--warn); }
.verdict-card.lvl-danger .verdict-num { color: var(--danger); }
.verdict-card.lvl-safe   .verdict-num { color: var(--green-1); }
.verdict-target { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-bottom: 4px; overflow-wrap: anywhere; word-break: break-word; }
.verdict-headline {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 4px;
}
.verdict-body { margin: 0; color: var(--text-dim); font-size: 13px; max-width: 60ch; }
.verdict-meta {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--mono);
  text-align: right;
  border-left: 1px solid var(--border);
  padding-left: 22px;
  align-self: stretch;
}
.verdict-meta .label { font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); text-transform: uppercase; }
.verdict-meta .row { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }

/* preview */
.preview-frame {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.preview-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #faf7f1;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  min-width: 0;
}
.preview-chrome .ic { color: var(--text-dim); flex-shrink: 0; }
/* keep the URL on one line and truncate instead of forcing the card wider */
.preview-chrome .mono {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-body {
  height: 360px;
  background: linear-gradient(180deg, #f7f5ee, #ece8de);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 12px;
  position: relative;
  overflow: hidden;
}
.preview-body::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(78,163,106,0) 0%, rgba(78,163,106,0.08) 50%, rgba(78,163,106,0) 100%);
  background-size: 100% 200%;
  animation: pscan 6s linear infinite;
}
@keyframes pscan { from { background-position: 0 -100%; } to { background-position: 0 100%; } }
.preview-caption {
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: #faf7f1;
}

/* checks table */
.checks {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.checks-head, .checks-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 2.3fr 0.7fr;
  gap: 14px;
  padding: 11px 16px;
  font-size: 12px;
}
.checks-head {
  background: #f3efe8;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.checks-row { border-top: 1px solid var(--border); align-items: center; }
.checks-row:first-of-type { border-top: none; }
.check-name { color: var(--text); font-weight: 500; }
.check-source { font-family: var(--mono); color: var(--text-dim); font-size: 11px; }
.check-finding { color: var(--text); }
.check-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(78, 163, 106, 0.12);
  color: var(--green-1);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em;
  justify-self: start;
}
.check-status.bad { background: rgba(184, 69, 61, 0.12); color: var(--danger); }

/* ai block */
.ai-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #faf7f1;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.ai-block-title { font-size: 13px; font-weight: 600; margin: 0 0 10px; }

/* footer actions */
.actions {
  display: flex; gap: 10px;
  padding: 4px 0;
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
}
.btn:hover { background: #faf7f1; }
.btn.ghost { background: transparent; }
.btn.warn { color: var(--danger); }
.btn .ic { font-size: 14px; }

/* ---------- right rail (background canvas + globe loader + scan whirl) ---------- */
.right-rail {
  position: relative;
  min-height: 720px;
  display: flex; flex-direction: column;
  align-items: center;
  padding-top: 90px;
  gap: 36px;
}
.rail-globe-card {
  background: #fdfaf3;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 12px 40px rgba(40, 40, 30, 0.06);
  width: 240px;
}
.rail-globe-card .label {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rail-globe-card .target {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  word-break: break-all;
  text-align: center;
}
.rail-whirl {
  width: 240px;
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rail-whirl-cap {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.rail-whirl-cap .num {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rail-whirl-cap .lbl {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---------- engines connected sidebar bottom ---------- */
.engines-status {
  display: flex; align-items: flex-start; gap: 10px;
}
.engines-status .dot {
  width: 7px; height: 7px;
  background: var(--green-2);
  border-radius: 50%;
  margin-top: 4px;
  box-shadow: 0 0 6px var(--green-2);
}

/* responsive */
@media (max-width: 1100px) {
  .right-rail { padding-top: 24px; min-height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 820px) {
  /* topbar collapses */
  .topbar { height: auto; padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .brand-pill { display: none; }
  .topbar-right { gap: 8px; width: 100%; justify-content: space-between; }
  .topbar-right .tb-chip:nth-of-type(2) { display: none; }
  .tb-link, .tb-about { font-size: 11px; padding: 4px 8px; }
  .user-name { display: none; }

  /* shell — sidebar becomes a horizontal scrolling pill bar at the top */
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sb-section { margin: 0; display: inline-flex; gap: 4px; flex-shrink: 0; }
  .sb-label { display: none; }
  .sb-item {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
  }
  .sb-item.active { box-shadow: none; background: #14181a; color: #fff; }
  .sb-item.active .sb-icon { color: #fff; }
  .sb-bottom { display: none; }

  /* content */
  .content {
    grid-template-columns: 1fr;
    padding: 20px 14px 40px;
    gap: 20px;
  }
  .page-title { font-size: 30px; }
  .page-sub { font-size: 13px; margin-bottom: 16px; }

  /* card */
  .card { padding: 14px 14px; border-radius: 8px; }
  .card-title { font-size: 13px; }
  .card-sub { font-size: 11px; margin-bottom: 10px; }

  /* url field stacks */
  .url-row { flex-direction: column; gap: 8px; }
  .url-prefix-box { padding: 8px 10px; font-size: 10px; align-self: flex-start; }
  /* Below 820px the row is flex-direction: column, where the base rule's
     flex-basis would apply to height instead of width. Reset it here. */
  .url-input-box { width: 100%; padding: 0 10px; flex: 0 0 auto; }
  .url-input-box .pfx { font-size: 12px; }
  .url-input-box input { font-size: 13px; padding: 12px 4px; }
  .run-btn { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }

  .opts { gap: 10px 14px; }
  .opt { font-size: 12px; }

  /* scan tiles single column */
  .scan-tiles { grid-template-columns: 1fr; }
  .scan-progress-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* verdict stacks */
  .verdict-card { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .verdict-score-block { display: flex; align-items: center; gap: 16px; text-align: left; padding: 0; }
  .verdict-num { font-size: 56px; }
  .verdict-score-label { margin-top: 0; }
  .verdict-meta {
    border-left: none; border-top: 1px solid var(--border);
    padding-left: 0; padding-top: 14px;
    text-align: left;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }
  .verdict-meta .row { align-items: flex-start; }
  .verdict-headline { font-size: 20px; }
  .verdict-body { font-size: 13px; }

  /* preview body shorter */
  .preview-body { height: 220px; }
  .preview-chrome { padding: 8px 10px; }

  /* checks become stacked cards */
  .checks-head { display: none; }
  .checks-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .check-source { font-size: 10px; }
  .check-status { margin-top: 4px; }

  /* recents single line truncates */
  .recents-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 10px 4px;
  }
  .recent-target { grid-column: 1 / -1; }
  .recent-url { font-size: 11.5px; word-break: break-all; }
  .recent-time { grid-column: 1; font-size: 10.5px; }
  .recent-score { grid-column: 2; grid-row: 2; font-size: 12px; }

  /* actions */
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1; justify-content: center; min-width: 0; }

  /* right rail — hide on mobile to keep it focused */
  .right-rail { display: none; }
}

@media (max-width: 480px) {
  .page-title { font-size: 26px; }
  .verdict-num { font-size: 48px; }
  .verdict-meta { grid-template-columns: 1fr; }
  .opt span:last-child { font-size: 12px; }
}

/* ---------- About page tiles ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.about-tile {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.about-tile-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.about-tile-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.about-tile-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Live Website Preview · locked (free users) ───────────────────────────── */
.preview-locked { position: relative; overflow: hidden; }
.preview-locked-body { position: relative; padding: 0; min-height: 340px; }

/* The faux page rendered behind the lock */
.fake-page {
  position: absolute; inset: 0;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #fafaf5 0%, #f1ece1 100%);
  filter: blur(12px) saturate(1.05);
  transform: scale(1.04);
  opacity: 0.85;
  pointer-events: none;
}
.fp-nav { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(60,60,60,0.08); }
.fp-logo { width: 90px; height: 14px; border-radius: 4px; background: #1f3a2a; }
.fp-links { display: flex; gap: 12px; flex: 1; }
.fp-links i { width: 50px; height: 10px; border-radius: 3px; background: #7a7e75; display: inline-block; }
.fp-cta { width: 84px; height: 28px; border-radius: 6px; background: #3a8a55; }
.fp-hero { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.fp-h1 { height: 28px; width: 70%; border-radius: 6px; background: #2a2d28; }
.fp-h2 { height: 12px; width: 85%; border-radius: 4px; background: #babfb4; }
.fp-h2.short { width: 55%; }
.fp-buttons { display: flex; gap: 10px; margin-top: 6px; }
.fp-buttons span { width: 100px; height: 28px; border-radius: 6px; background: #1f3a2a; }
.fp-buttons span.ghost { background: transparent; border: 1px solid #babfb4; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 6px; }
.fp-card { background: #ffffff; border: 1px solid rgba(60,60,60,0.08); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.fp-img { width: 100%; height: 48px; border-radius: 5px; background: linear-gradient(135deg, #d8e6dc, #c1d2c5); }
.fp-line { height: 9px; border-radius: 3px; background: #c8ccc1; }
.fp-line.short { width: 60%; }

/* Shimmer sweep across the blurred page */
.fp-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  animation: previewShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes previewShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Foreground lock + CTA overlay */
.preview-locked-overlay {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 24px; text-align: center; min-height: 340px;
  background: radial-gradient(closest-side, rgba(250,247,241,0.92), rgba(250,247,241,0.55) 70%, transparent 100%);
  backdrop-filter: blur(2px);
}
.preview-lock {
  animation: lockFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
}
@keyframes lockFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.preview-locked-title { font-size: 16px; font-weight: 600; color: #1a1f1c; }
.preview-locked-desc {
  font-size: 13px; color: var(--text-dim); max-width: 380px; line-height: 1.55;
}
.preview-locked-cta {
  margin-top: 8px; position: relative; overflow: hidden;
  animation: ctaPulse 2.6s ease-in-out infinite;
}
.preview-locked-cta::after {
  content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation: ctaShine 3.2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58,138,85, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(58,138,85, 0); }
}
@keyframes ctaShine {
  0%   { left: -150%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-shimmer, .preview-lock, .preview-locked-cta, .preview-locked-cta::after { animation: none; }
}

/* ── Limit-reached upgrade card ─────────────────────────────────────────── */
.limit-card {
  border-color: var(--green-2) !important;
  background: linear-gradient(180deg, #fafaf5 0%, #f1ece1 100%);
  position: relative;
  overflow: hidden;
}
.limit-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 80% -10%, rgba(58,138,85,0.18), transparent 60%);
  pointer-events: none;
}
.limit-card-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(58,138,85,0.12); color: var(--green-2);
  margin-bottom: 14px;
}

/* ── Buying points: limit-wall receipt + post-threat card ────────────────── */
.receipt {
  position: relative;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  font-size: 13px;
}
.receipt-row { display: flex; justify-content: space-between; padding: 3px 0; }
.receipt-row strong { font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.receipt-bad strong { color: #b8453d; }
.receipt-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.receipt-targets span {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(184,69,61,0.1); color: #8f332c;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The $1 offer button: big, blue, glowing. Overrides the green pulse that
   .preview-locked-cta adds, but keeps its light sweep (::after). */
.run-btn.offer-btn {
  position: relative; overflow: hidden;
  justify-content: center;
  padding: 18px 38px;
  min-width: 300px;
  font-size: 19px; font-weight: 700; letter-spacing: 0.01em;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 8px 24px rgba(37,99,235,0.45), 0 0 32px rgba(59,130,246,0.55);
  animation: offerGlow 2.2s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}
.run-btn.offer-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}
.run-btn.offer-btn::after {
  content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  animation: ctaShine 3.2s ease-in-out infinite;
}
@keyframes offerGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 8px 24px rgba(37,99,235,0.40), 0 0 22px rgba(59,130,246,0.45); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 10px 30px rgba(37,99,235,0.55), 0 0 48px rgba(96,165,250,0.85); }
}
@media (max-width: 520px) { .run-btn.offer-btn { width: 100%; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .run-btn.offer-btn, .run-btn.offer-btn::after { animation: none; } }
.activating-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  padding: 12px 16px; text-align: center; font-weight: 600; font-size: 13px;
  color: #fff; background: linear-gradient(90deg, #2563eb, #3b82f6);
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}
.offer-terms { margin: 6px 0 0; font-size: 10px; letter-spacing: 0.01em; color: #9a9f98; }
/* One-time $5 pass: a quiet text link under the main offer. */
.offer-alt {
  display: block; margin: 8px auto 0; padding: 4px 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px;
}
.offer-alt span { color: #6b7269; text-decoration: none; }
.offer-alt:hover { color: #1e3a8a; }
.threat-card { border-color: #b8453d !important; background: #fdf6f4; }
.threat-card .card-title { color: #8f332c; }

/* ── sign-in modal ─────────────────────────────────────────────────────────
   Centred-mark layout: logo, heading, one full-width provider row, then the
   free-tier ticks and the privacy line. Written as classes (not inline styles)
   so the other sign-in prompts can adopt the same look without duplication. */
.signin-card {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px 36px 24px;
  position: relative;
  text-align: center;
}
.signin-close {
  position: absolute; top: 14px; right: 15px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 17px; line-height: 1;
  color: var(--text-faint);
}
.signin-close:hover { background: var(--bg-app); color: var(--text-dim); }
/* scanify-mark.png is the helmet cropped tight with a transparent field, so it
   needs no black tile and no scale hack — it sits directly on the modal. */
.signin-mark {
  width: 46px; height: 46px;
  display: block; margin: 0 auto 15px;
}
.signin-title {
  font-family: var(--serif);
  font-size: 29px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 22px;
}
.signin-provider {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 14px 16px;
  font-size: 14.5px; font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.signin-provider:hover { background: #fff; border-color: var(--text-faint); }
.signin-provider:active { transform: translateY(1px); }
.signin-rule { border-top: 1px solid var(--border); margin: 20px 0 14px; }
.signin-perk {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  padding: 4px 0;
}
.signin-perk .ic { color: var(--green-2); display: flex; }
.signin-privacy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 16px 0 0;
}
@media (max-width: 480px) {
  .signin-card { padding: 28px 22px 20px; }
  .signin-title { font-size: 25px; }
}

/* Updu AI Studio waitlist card, shown under every finished scan (same as updu-banner-3-scan-result.html) */
.updu-bn-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--rule, #d4ccba);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-1, #1a1a18);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.updu-bn-result *, .updu-bn-result *::before, .updu-bn-result *::after { box-sizing: border-box; }
.updu-bn-result p { margin: 0; }
.updu-bn-result .updu-bn-result__tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(160deg, #83c8fc 0%, #c6e7fd 65%, #edf4fb 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.updu-bn-result .updu-bn-result__tile img { display: block; width: 30px; height: 30px; margin: 0; }
.updu-bn-result .updu-bn-result__eyebrow {
  color: var(--ink-3, #5a6157);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 16px;
  text-transform: uppercase;
}
.updu-bn-result .updu-bn-result__title {
  margin-top: 4px;
  color: var(--ink-1, #1a1a18);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-wrap: balance;
}
.updu-bn-result .updu-bn-result__title em {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-size: 1.08em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.updu-bn-result .updu-bn-result__text { margin-top: 4px; color: var(--ink-3, #5a6157); font-size: 14px; }
.updu-bn-result .updu-bn-result__text b { color: var(--ink-1, #1a1a18); font-weight: 600; }
.updu-bn-result .updu-bn-result__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 8px;
  background: linear-gradient(100deg, #124ee0, #086da8);
  box-shadow: 0 8px 18px -10px rgba(18, 78, 224, .8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease;
}
.updu-bn-result .updu-bn-result__cta:hover { color: #fff; filter: brightness(1.1); text-decoration: none; }
.updu-bn-result .updu-bn-result__cta:focus-visible { outline: 2px solid #124ee0; outline-offset: 3px; }
@media (max-width: 640px) {
  .updu-bn-result { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; }
  .updu-bn-result .updu-bn-result__tile { width: 40px; height: 40px; border-radius: 10px; }
  .updu-bn-result .updu-bn-result__tile img { width: 26px; height: 26px; }
  .updu-bn-result .updu-bn-result__title { font-size: 16px; }
  .updu-bn-result .updu-bn-result__cta { grid-column: 1 / -1; }
}

/* Launch-week lifetime offer under the paywall buttons (self-expiring). */
.offer-launch {
  display: block; margin: 12px auto 0; padding: 9px 12px; max-width: 420px;
  background: #f2f1ee; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: #3a3a3a; text-decoration: none; text-align: center;
}
.offer-launch b {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #2f7d4a; margin-right: 6px;
}
.offer-launch:hover { background: #eae8e3; }
.offer-launch:focus-visible { outline: 2px solid #2f7d4a; outline-offset: 2px; }

/* The Black Friday line is a button now (it opens the checkout sheet). */
button.offer-launch { width: 100%; border: 0; cursor: pointer; font-family: inherit; }

/* ── live scan steps ──────────────────────────────────────────────────────
   Each tile is one source. It spins until that source has answered, then
   shows the fact it came back with. */
.scan-live .scan-progress-status { text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-tile { transition: border-color .3s, background .3s; }
.scan-tile.active { border-color: var(--border-strong); }
.scan-tile.done { border-color: #cfe3d5; background: #fbfdfb; animation: tileTick .4s cubic-bezier(.2, 1.4, .4, 1); }
.scan-tile.done.missed { border-color: var(--border); background: #fff; }
.scan-tile.done.missed .scan-tile-spinner { background: var(--text-faint); }
.scan-tile-status.fact {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  animation: factIn .35s ease-out both;
}
.scan-tile.done.missed .scan-tile-status.fact { color: var(--text-dim); }
.scan-progress-fill { transition: width .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes tileTick { 0% { transform: scale(.985); } 60% { transform: scale(1.012); } 100% { transform: none; } }
@keyframes factIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* A short, plain note under the scan inputs about where the data goes. */
.privacy-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.privacy-note a { color: var(--green-1); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Reveal the report after the purchase is confirmed. */
.unlock-reveal > * { animation: unlockIn .8s cubic-bezier(.16, 1, .3, 1) both; }
.unlock-reveal > *:nth-child(2) { animation-delay: .06s; }
.unlock-reveal > *:nth-child(3) { animation-delay: .14s; }
.unlock-reveal > *:nth-child(4) { animation-delay: .22s; }
.unlock-reveal > *:nth-child(n+5) { animation-delay: .3s; }
@keyframes unlockIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(12px) scale(.985); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
.unlocked-note {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 12px 16px; border-radius: 10px;
  background: #eef7f1; border: 1px solid #cfe3d5; color: var(--green-1); font-size: 13px;
}
.unlocked-note .ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-2); color: #fff;
}
.unlocked-note strong { font-weight: 700; }

/* ── "link Google" banner for someone who paid without an account ───────── */
.link-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 44px 10px 16px; position: relative;
  background: #eef7f1; border-bottom: 1px solid #cfe3d5; color: var(--green-1); font-size: 13px;
}
.link-banner-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--border-strong);
  color: var(--text); font-weight: 500; font-size: 12.5px;
}
.link-banner-cta:hover { border-color: var(--text-faint); }
.link-banner-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 6px; font-size: 18px; line-height: 1; color: var(--green-1);
}
.link-banner-x:hover { background: rgba(47, 106, 71, .1); }

/* Scan evidence is shared by the locked report and its checkout. */
.report-summary {
  isolation: isolate; position: relative; overflow: hidden;
  padding: 28px; background: #153c34; color: #f7faf0;
}
.report-summary::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -64px; top: -94px; width: 260px; height: 260px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 18px, rgba(187,222,156,.23) 19px 20px, transparent 21px 32px);
  animation: reportRingsPulse 6s ease-in-out infinite;
}
@keyframes reportRingsPulse {
  0%, 100% { transform: scale(.92); opacity: .6; }
  50% { transform: scale(1.12); opacity: 1; }
}
.report-imprint {
  display: flex; align-items: center; gap: 9px; color: #d4e4cf;
  font: 500 11px/1.3 var(--mono);
}
.report-mark { display: inline-grid; place-items: center; width: 24px; height: 26px; border: 1px solid #789783; border-radius: 6px; }
.report-imprint > span { color: #95b6a0; }
.report-identity { margin: 28px 0 20px; }
.report-identity h2, .cs-pay h2, .report-unlock h3, .cs-included h3, .cs-activating h3 { font-family: var(--serif); font-weight: 400; }
.report-identity h2 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1; letter-spacing: -.035em; margin: 0 0 10px; }
.report-target { display: block; font: 12px/1.5 var(--mono); color: #d7e9cd; overflow-wrap: anywhere; }
.report-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #47685a; display: grid; gap: 8px; }
.report-facts li, .report-fact-count { display: flex; align-items: baseline; gap: 8px; color: #e0eadd; font: 12px/1.45 var(--ui); }
.report-facts li span { display: inline-flex; align-self: center; color: #c8eaa7; }
.report-preview { overflow: hidden; margin: 12px 0 22px; background: #fffdf7; border: 1px solid #cad3c5; border-radius: 17px; }
.report-unlock { padding: 22px 28px 20px; }
.report-unlock h3 { margin: 0; font-size: 29px; line-height: 1.12; }
.report-unlock p { margin: 7px 0 16px; font-size: 14px; color: #475348; line-height: 1.5; }
.report-action { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #20563e; color: white; border-radius: 8px; min-height: 46px; padding: 10px 17px; font-size: 15px; font-weight: 600; }
.report-action:hover { background: #143f2d; }
.report-action span { font-size: 21px; }
.report-unlock .report-renewal { font-size: 12px; margin: 9px 0 4px; }
.report-alt { min-height: 42px; padding: 6px 0; color: #245d40; font: 500 13px var(--ui); text-decoration: underline; text-underline-offset: 3px; }

.cs-sheet {
  padding: 0; border: 1px solid #cdd2c7; border-radius: 20px; margin: auto;
  width: min(960px, calc(100vw - 48px)); max-width: none; max-height: 91vh; max-height: 91dvh;
  overflow-y: auto; overscroll-behavior: contain; color: var(--text); background: #fff;
  box-shadow: 0 20px 80px #10291c44;
}
.cs-sheet[open] { animation: csEnter .2s ease-out; }
.cs-sheet::backdrop { background: rgba(11,25,19,.54); backdrop-filter: blur(4px); }
.cs-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 22px; background: #fffef9; border-bottom: 1px solid #d7dbcf; }
.cs-brand { display: inline-flex; align-items: center; gap: 9px; font: 600 18px/1 var(--ui); letter-spacing: -.01em; }
.cs-bar-label { padding-left: 15px; border-left: 1px solid #cdd2c7; color: #586557; font-size: 12px; }
.cs-close { margin-left: auto; height: 40px; width: 40px; border: 1px solid #d1d6cc; border-radius: 50%; background: #fff; color: #253a2c; font-size: 22px; line-height: 1; }
.cs-close:hover { background: #eff4eb; }
.cs-close:disabled { opacity: .45; }
.cs-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.cs-grid[hidden] { display: none; }
.cs-summary { display: flex; flex-direction: column; background: #f2f2e8; border-right: 1px solid #d5dacd; min-width: 0; }
.cs-summary .report-summary { padding: 30px 28px; }
.cs-summary .report-identity { margin: 54px 0 26px; }
.cs-included { margin: 25px 28px; }
.cs-included h3 { margin: 0 0 17px; font-size: 27px; }
.cs-included ul { list-style: none; display: grid; padding: 0; margin: 0; }
.cs-included li { display: flex; align-items: center; gap: 12px; min-height: 43px; border-top: 1px solid #cfd5c8; color: #354b3c; font-size: 13px; }
.cs-included svg { color: #486b4e; }
.cs-pay { min-width: 0; padding: 24px 28px 16px; }
.cs-pay h2 { margin: 0 0 18px; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.cs-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-width: 0; padding: 0; margin: 0 0 14px; border: 0; }
.cs-plans legend { padding: 0; margin: 0 0 8px; color: #435346; font: 500 12px var(--ui); }
.cs-plan { display: grid; position: relative; cursor: pointer; align-content: center; gap: 6px; min-height: 65px; padding: 9px 12px; border: 1px solid #c5cdc2; background: #fff; border-radius: 9px; color: #24392c; }
.cs-plan:has(input:checked) { border-color: #296b48; background: #edf4e6; box-shadow: inset 0 0 0 1px #296b48; }
.cs-plan input { position: absolute; right: 8px; top: 9px; margin: 0; width: 12px; height: 12px; accent-color: #246440; }
.cs-plan:has(input:focus-visible), .cs-close:focus-visible, .report-action:focus-visible, .report-alt:focus-visible { outline: 3px solid #327b5b; outline-offset: 3px; }
.cs-plan-name { font: 500 12px var(--ui); padding-right: 12px; }
.cs-plan strong { font: 600 18px/1 var(--ui); font-variant-numeric: tabular-nums; }
.cs-order { background: #f7f8f3; border-block: 1px solid #dae0d5; padding: 10px 12px; margin: 0 0 15px; }
.cs-due { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; }
.cs-breakdown { display: grid; gap: 2px; font-size: 12px; color: #506151; border-bottom: 1px solid #dae0d5; margin-bottom: 6px; padding-bottom: 6px; }
.cs-breakdown span { display: flex; justify-content: space-between; gap: 8px; }
.cs-breakdown b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-trust a { text-decoration: underline; }
.cs-due strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.cs-order p { margin: 4px 0 0; color: #506151; font: 12px/1.5 var(--ui); }
.cs-payment-area { position: relative; min-width: 0; }
.cs-frame { min-height: 140px; }
.cs-state { position: absolute; inset: 0; padding: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #435846; }
.cs-spinner { width: 22px; height: 22px; border: 2px solid #c7d6c8; border-top-color: #235e43; border-radius: 50%; animation: spin .8s linear infinite; }
.cs-trust { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #566458; font: 12px var(--ui); }
.cs-activating { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 35px; }
.cs-activating h3 { margin: 0; font-size: 35px; }
.cs-activating p { margin: 0; max-width: 36ch; color: #546255; line-height: 1.5; }
.cs-check svg { fill: none; stroke: #467454; stroke-width: 2; }
.cs-check:not(.done) circle { stroke-dasharray: 38 108; transform-origin: center; animation: spin 1s linear infinite; }
.cs-check:not(.done) path { visibility: hidden; }
@keyframes csEnter { from { transform: translateY(12px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (max-width: 740px) {
  .cs-sheet { margin: auto 0 0; width: 100%; max-height: 95vh; max-height: 95dvh; border-radius: 17px 17px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .cs-bar { height: 48px; padding: 0 16px; }
  .cs-close { height: 38px; width: 38px; }
  .cs-grid { grid-template-columns: minmax(0,1fr); }
  .cs-summary { border: 0; }
  .cs-summary .report-summary { padding: 15px 20px 14px; }
  .cs-summary .report-imprint { font-size: 10px; }
  .cs-summary .report-mark { width: 19px; height: 20px; }
  .cs-summary .report-identity { margin: 12px 0 0; }
  .cs-summary .report-identity h2 { font-size: 33px; margin-bottom: 4px; }
  .cs-summary .report-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding-top: 7px; }
  .cs-summary .report-facts li { font-size: 11px; }
  .cs-summary .report-facts li:nth-child(n+3), .cs-included { display: none; }
  .cs-pay { padding: 17px 16px 14px; }
  .cs-pay h2 { font-size: 29px; margin-bottom: 14px; }
  .cs-plan { min-height: 58px; padding: 8px; }
  .cs-plan-name { font-size: 11px; }
  .cs-plan input { width: 11px; height: 11px; right: 6px; }
  .cs-order { margin-bottom: 12px; }
  .report-unlock, .report-preview .report-summary { padding: 20px; }
  .scan-live .scan-progress-status { max-width: 100%; text-align: left; }
  .link-banner { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-tile.done, .scan-tile-status.fact, .unlock-reveal > *, .cs-sheet[open], .cs-spinner, .cs-check:not(.done) circle, .report-summary::before { animation: none !important; }
  .scan-progress-fill { transition: none; }
}