/* Ava Camera Inventory Request.
   Laid out after avigilon.com's product pages (read 2026-09-29): white pages,
   black type and bars, pill buttons, a green quote button, light gray bands.
   Bluebird's own marks stay Bluebird's: the black logo (Matt, 2026-09-29) and
   the Arial family from the brand standards, where Avigilon uses Roboto.
   Hyphens and pipes, no dashes. */

:root {
  --ink: #000000;            /* headings, buttons, bars */
  --body: #4D4D4D;           /* running text, as avigilon.com */
  --mute: #6E6E6E;
  --rule: #E5E5E5;
  --band: #F7F7F8;           /* light section background */
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --link: #005EB8;           /* Avigilon blue */
  --go: #007848;             /* Avigilon's "Get a quote" green */
  --go-dark: #00603A;
  --warn-bg: #FFF7E6;
  --warn-line: #E0A100;
  --stop-bg: #FDECEC;
  --stop-line: #C0392B;
  --ok: #1E7A46;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 400; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--link); }
small { font-size: 12.5px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
.narrow.wide-doc { max-width: 1000px; }

/* ------------------------------------------------------------------ header */
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
header.site .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 22px; width: auto; display: block; }

/* A recipient's own logo beside ours, on their site and their quotes. */
.cobrand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding-left: 18px; border-left: 1px solid var(--rule); min-height: 36px;
}
.cobrand .for {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mute); white-space: nowrap;
}
.cobrand img { max-height: 38px; max-width: 190px; width: auto; display: block; object-fit: contain; }
.cobrand .who { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

header.site nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
header.site nav a {
  color: var(--ink); text-decoration: none; font-size: 14px;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
header.site nav a:hover { background: var(--band); }
header.site nav a.on { font-weight: 700; }

/* The request button, in Avigilon's quote green. */
.pill {
  background: var(--go); color: #fff; border-radius: 999px;
  padding: 7px 18px; font-size: 12.5px; font-weight: 700; text-decoration: none;
  text-transform: uppercase; letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
/* The nav link rules above are more specific than .pill, and without this the
   button's label rendered in the nav's colors. */
header.site nav a.pill, header.site nav a.pill:hover { color: #fff; margin-left: 6px; }
header.site nav a.pill:hover { background: var(--go-dark); }
.pill .n {
  background: #fff; color: var(--go); border-radius: 999px;
  padding: 0 7px; font-size: 12px; min-width: 20px; text-align: center; letter-spacing: 0;
}

/* ------------------------------------------------------------- notice bar */
.deadline {
  background: var(--ink); color: #fff; font-size: 14.5px;
  padding: 12px 0; text-align: center;
}
.deadline b { color: #fff; }
.deadline.shut { background: var(--stop-line); }

main { padding: 36px 0 64px; }
section { margin-bottom: 34px; }

/* the page title: name, a short lead, and who to call */
.title-row { display: flex; gap: 12px 32px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.title-row h1 { margin-bottom: 8px; }
.title-row .lead { margin-bottom: 0; }
.helpline { font-size: 13.5px; color: var(--body); text-align: right; line-height: 1.5; }
.helpline b { color: var(--ink); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; padding: 22px;
}
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ------------------------------------------------------------------ notice */
.notice {
  border-left: 3px solid var(--warn-line); background: var(--warn-bg);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin-bottom: 16px; font-size: 14px;
}
.notice.stop { border-left-color: var(--stop-line); background: var(--stop-bg); }
.notice.flat { border-left-color: var(--ink); background: var(--band); }
.notice h3 { margin-bottom: 4px; font-size: 15px; }
.notice p:last-child { margin-bottom: 0; }

.banner { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner.ok { background: #E8F5EE; color: #14532D; border: 1px solid #A7D8BC; }
.banner.error { background: var(--stop-bg); color: #7F1D1D; border: 1px solid #F0B4AE; }

/* ---------------------------------------------------------------- filters */
.frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftab {
  font-size: 13.5px; color: var(--ink); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid #D4D4D4;
  background: var(--paper); white-space: nowrap;
}
.ftab:hover { border-color: var(--ink); }
.ftab.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

.chip {
  font-size: 12px; background: var(--band); border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px 10px; color: var(--body); white-space: nowrap;
}
.chip.warn { background: var(--warn-bg); border-color: #F0D9A0; color: #7A5600; font-weight: 700; }

/* ------------------------------------------------------------------ tables */
.tbl-wrap {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #EDEDED; }
thead th {
  background: var(--band); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--body); font-weight: 700; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sku { font-size: 13px; color: var(--ink); font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.now { font-weight: 700; color: var(--ink); }
.qty-in {
  width: 76px; padding: 6px 8px; border: 1px solid #CFCFCF; border-radius: 8px;
  font: inherit; font-size: 14px; text-align: right; background: var(--paper);
}
.qty-in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
tfoot td { background: var(--band); font-weight: 700; color: var(--ink); border-top: 1px solid var(--rule); }
/* the request priced the other way, and the sentences that explain a total */
tfoot tr.alt td { font-weight: 400; }
tfoot tr.why td { font-weight: 400; font-size: 13px; color: var(--body); background: var(--paper); }
.pdf-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; color: var(--mute); }

/* Avigilon's wordmark over the page title: they make the cameras */
img.maker { display: block; height: 18px; width: auto; margin: 0 0 12px; }
.gate img.maker { height: 14px; margin-bottom: 14px; }

/* live stock: a count that just changed flashes once; a quantity over what is left turns red */
.tick { animation: tick 1.6s ease-out; }
@keyframes tick { from { background-color: #FFF1BF; } }
.qty-in.over { border-color: var(--stop-line); background: var(--stop-bg); }
@media (prefers-reduced-motion: reduce) { .tick { animation: none; } }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-block; background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 10px 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.4;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: #2B2B2B; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--band); }
.btn.wide { width: 100%; }
.btn.quiet { border-color: #D4D4D4; color: var(--mute); font-weight: 400; text-transform: none; letter-spacing: 0; }

.sticky-bar {
  position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule);
  padding: 12px 0; margin-top: 22px; box-shadow: 0 -2px 14px rgba(0, 0, 0, .06); z-index: 15;
}
.sticky-bar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sticky-bar .sum { font-size: 14px; }
.sticky-bar .sum b { color: var(--ink); font-size: 16px; }
.sticky-bar .act { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------- forms */
label.fld { display: block; margin-bottom: 14px; }
label.fld .lb { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
label.fld .lb .req { color: var(--stop-line); }
input[type=text], input[type=email], input[type=tel], input[type=password], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid #CFCFCF; border-radius: 8px;
  font: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}
input[type=file] { font: inherit; font-size: 13.5px; }
textarea { min-height: 78px; resize: vertical; }

/* ------------------------------------------------------------ camera list */
.lead { font-size: 16px; max-width: 72ch; margin-bottom: 16px; }
.famtabs { margin-bottom: 16px; }
.tbl-wrap.flat { border-radius: 12px; }
table.stock td { vertical-align: top; }
table.stock tr.famrow th {
  background: var(--paper); color: var(--ink); text-transform: none; letter-spacing: 0;
  padding: 18px 12px 12px; border-bottom: 1px solid var(--rule); font-weight: 400;
}
.famhead { display: flex; align-items: center; gap: 16px; }
.famhead img {
  width: 64px; height: 48px; object-fit: contain; flex-shrink: 0;
  background: var(--band); border-radius: 8px; padding: 4px;
}
.famhead .nm { font-size: 17px; font-weight: 700; color: var(--ink); display: block; }
.famhead .sp { font-size: 12.5px; color: var(--body); }
td.warr { font-size: 12.5px; color: var(--mute); min-width: 150px; }
p.foot { font-size: 13px; color: var(--mute); margin-top: 12px; max-width: 92ch; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
section.send { margin-top: 30px; }

/* hardware only, or with Bluebird installation */
.basis { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.basis p { margin: 0; font-size: 13px; color: var(--mute); flex: 1; min-width: 240px; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); text-transform: uppercase; letter-spacing: .03em;
}
.seg button + button { border-left: 1px solid var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }
.seg button:focus-visible { outline: 3px solid rgba(0, 94, 184, .45); outline-offset: -3px; }

/* ------------------------------------------------------------------ quote */
.doc {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  padding: 32px 34px;
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.doc-head > img { height: 24px; display: block; margin-top: 4px; }
.doc-for { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.doc-for .for { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.doc-for img { max-height: 48px; max-width: 200px; display: block; object-fit: contain; }
.doc-for .who { font-size: 16px; font-weight: 700; color: var(--ink); }
.doc h1 { font-size: 30px; margin-bottom: 6px; }
.doc-flag { font-weight: 700; color: var(--ink); font-size: 14px; }
.doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 20px 0; }
.doc-meta dt {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute);
}
.doc-meta dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
table.doc-lines { margin: 8px 0 16px; font-size: 13px; }
table.doc-lines td, table.doc-lines th { padding: 8px 8px; }
/* With and without installation are two price columns; their headings wrap so the description keeps its room. */
table.doc-lines thead th { white-space: normal; vertical-align: bottom; }
.doc-note { font-size: 12.5px; color: var(--body); }
.doc-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--mute); }

/* ------------------------------------------------------------------- admin */
h2.adm { margin-top: 34px; }
/* the sticky header would cover a heading jumped to by #anchor */
h1[id], h2[id], .card [id] { scroll-margin-top: 80px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 0 14px; }
.grid4 { display: grid; grid-template-columns: 1.6fr 1.6fr 1fr; gap: 0 14px; }
.rateform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.rateform .btn { padding: 6px 14px; white-space: nowrap; }
td.when { white-space: nowrap; font-size: 13px; }
tr.off td { color: var(--mute); }
table.prices td { vertical-align: top; }
table.prices td.now-col { background: #F2F7FC; }
table.prices tr.famrow th {
  background: var(--paper); color: var(--ink); font-size: 13px; text-transform: none;
  letter-spacing: 0; padding-top: 16px; border-bottom: 1px solid var(--rule);
}
label.pct { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-right: 10px; white-space: nowrap; }
small.fig { display: block; color: var(--mute); margin-top: 4px; font-size: 12px; }
.qty-in.wide { width: 110px; }
.newcode { margin-bottom: 22px; border-color: var(--ok); }
.codeline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.codeline .sku { font-size: 22px; letter-spacing: .06em; overflow-wrap: anywhere; }
.logo-thumb { max-height: 28px; max-width: 110px; display: block; object-fit: contain; }
/* A white logo, made for the dark header of its own site, needs dark behind it. */
img.on-dark { background: #1F1F1F; padding: 5px 9px; border-radius: 6px; }
details.brandform summary { cursor: pointer; font-size: 13px; color: var(--link); }
details.brandform form { margin-top: 8px; display: grid; gap: 8px; min-width: 240px; }

/* -------------------------------------------------------------------- gate */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--band); }
.gate .box { width: 100%; max-width: 400px; }
.gate .card { padding: 32px; }
.gate img.lg { height: 24px; margin-bottom: 24px; display: block; }
.gate-for { margin: 0 0 14px; }

/* ------------------------------------------------------------------- terms */
.terms { counter-reset: cl; }
.terms h2 {
  font-size: 17px; font-weight: 700; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.terms h2::before {
  counter-increment: cl; content: counter(cl) ". "; color: var(--mute);
}
.terms p, .terms li { font-size: 14px; }
.terms ul { padding-left: 20px; }
.terms li { margin-bottom: 5px; }

/* ------------------------------------------------------------------ footer */
footer.site {
  background: var(--ink); color: #fff;
  padding: 30px 0; font-size: 13px;
}
footer.site .contact { font-weight: 700; }
footer.site .legal { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: #BDBDBD; }
footer.site a { color: #fff; }

@media (max-width: 760px) {
  h1 { font-size: 26px; }
  .wrap { padding: 0 16px; }
  .grid2, .grid3, .grid4, .doc-meta { grid-template-columns: 1fr; }
  /* The same on every row, and the note under the table says it. */
  table.stock .col-warr { display: none; }
  .doc { padding: 22px 16px; }
  .cobrand { order: 3; width: 100%; border-left: 0; padding-left: 0; min-height: 0; padding-bottom: 10px; }
  /* Three rows tall on a phone, so it scrolls away instead of covering the list. */
  header.site { position: static; }
  .helpline { text-align: left; }
  .famhead img { width: 52px; height: 40px; }
  .sticky-bar .act { margin-left: 0; width: 100%; }
  .sticky-bar .act .btn { flex: 1; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 9px 8px; }
}

@media print {
  header.site, footer.site, .sticky-bar, .deadline, .btn, .noprint { display: none !important; }
  body { background: #fff; font-size: 11px; }
  main { padding: 0; }
  .card, .tbl-wrap { break-inside: avoid; }
  .doc { border: 0; padding: 0; }
  table.doc-lines tr { break-inside: avoid; }
}