/* c.scan.css — the scan form (scan_form in templates/macros/hero.html)
   and the Services page blocks around its second copy (services_page).
   Loaded after c.pages.css and before o-buttons.css. Rules that touch
   the button carry two classes, so they outrank o-buttons.css's bare
   .o-btn whatever the order: that file stays byte-identical across
   the four OATS sites and is never edited for one call site. */

/* Anchor for /#scan. The margin keeps the form clear of the 56px
   sticky header when a link scrolls it into view. */
.c-hero-scan { margin-top: 36px; scroll-margin-top: 80px; }

/* Wide enough for a long address, narrow enough that the field does
   not run the full 1140px shell at desktop. */
.c-scan { max-width: 720px; }

/* The URL label and the checks legend share one style. */
.c-scan-lbl {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Field and button share one row; the field takes the spare width. */
.c-scan-row { display: flex; gap: 12px; }

/* 52px tall to match .o-btn. 16px text stops iOS zooming on focus.
   The border uses --muted, not --line: an input's edge needs 3:1
   against white to be seen, and --line is far below that. */
.c-scan-url {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--muted);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
}
.c-scan-url::placeholder { color: var(--muted); opacity: 1; }

/* o-buttons.css sets width: 100%; in the row the button is fixed. */
.c-scan .o-btn { flex: none; width: 160px; }

/* The two checks: a fieldset with its border and padding reset. The
   legend is floated so it lays out as a plain block, like the URL
   label; unfloated it sits in the fieldset border and some engines
   ignore its bottom margin. */
.c-scan-checks {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}
.c-scan-checks > legend { float: left; width: 100%; }
.c-scan-opts {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.c-scan-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}

/* Square checkbox to match the site's corners. The tick is the box's
   own ::before, drawn from two borders like the .o-btn arrow. Focus
   uses the site-wide :focus-visible ring in c.css, as the field does. */
.c-scan-opt input {
  display: grid;
  place-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--muted);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--paper);
  cursor: pointer;
}
.c-scan-opt input::before {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg) scale(0);
}
.c-scan-opt input:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.c-scan-opt input:checked::before { transform: rotate(45deg) scale(1); }

.c-scan-note {
  margin-top: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
}

/* Phone: the button drops under the field at full width. Same
   breakpoint as the hero's own padding and headline in c.mobile.css. */
@media (max-width: 640px) {
  .c-hero-scan { margin-top: 28px; }
  .c-scan-row { flex-direction: column; }
  .c-scan .o-btn { width: 100%; }
}

/* Ordering steps: a numbered list, the numbers are the sequence. */
.c-order-list {
  margin: 0;
  padding: 28px var(--pad-x);
  list-style-position: inside;
  color: var(--ink-2);
}
.c-order-list li { padding: 8px 0; }
.c-order-list li::marker {
  font-family: "IBM Plex Mono", monospace;
  color: var(--blue);
}

/* Services page: each scan's intro, one plain paragraph under the
   section heading, padded like the heading so the text lines up. */
.c-prod-intro {
  padding: 28px var(--pad-x);
  max-width: calc(62ch + 2 * var(--pad-x));
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* Services page: the "What it checks · N checks" line that labels
   the list under it, aligned with the intro above. */
.c-checks-lbl { padding: 0 var(--pad-x); }

/* Services page: the checks as a two-column list in the .c-list
   style (mono text, small --blue square, --line-2 rules). Every row
   draws a bottom rule instead of a top one, so the two columns line
   up without .c-list's first-item exception. The label above it
   already sets the gap, so the top padding is small. */
.c-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin: 0;
  padding: 8px var(--pad-x) 36px;
}
.c-checks li {
  padding: 12px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}

/* Services page: each scan section (#security, #ai) and the closing
   scan form (#scan) are anchors. The margin lands each one just
   under the 56px sticky header. */
.c-prod, .c-prod-scan { scroll-margin-top: 56px; }
.c-prod-scan-in { padding: 36px var(--pad-x) 48px; }

/* Phone: c.mobile.css sets 24px side padding on section blocks
   below 640px (--pad-x stays 48px), so these blocks follow it, and
   the two check columns stack. */
@media (max-width: 640px) {
  .c-order-list, .c-checks-lbl, .c-checks, .c-prod-scan-in {
    padding-left: 24px;
    padding-right: 24px;
  }
  .c-checks { grid-template-columns: 1fr; }
}