/* Flagship changes layered on the concept site's wow.css + vivid.css (2026-10-08).
   Transparent logo, hardware notes, a drawn football pitch instead of a hotlinked
   stock clip, and the shared styles for the demo and privacy pages. */
.logo img { width: auto; height: 58px; }
footer img { width: auto !important; height: 64px; }

.hw-note { margin-top: 18px !important; padding: 12px 14px; border: 1px dashed rgba(0,240,255,.45); background: rgba(0,240,255,.07); border-radius: 4px; font-size: 13px !important; line-height: 1.6 !important; color: #d7dde5 !important; }
.hw-note b { color: #00f0ff; }
.base-price .fine { font-size: 11.5px; line-height: 1.6; color: #9aa3ad; margin: 0 0 22px; }

/* Live Capture demo: hosted hockey clip (Pexels 6340055) with a score bug. */
.capture-main .sports-video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.pitch-score { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 9px; background: rgba(5,7,9,.78); color: #fff; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .1em; }
.sports-label { color: #ff5a5a !important; }

/* Industry cards: Flagship-chosen photos (Steve 2026-10-08) */
.industry-card.restaurant { background-image: url('img/work/menu-boards.jpg'); background-position: 42% center; }
.industry-card.sports { background-image: url('img/work/baseball.jpg'); background-position: 40% center; }
.industry-card.retail { background-image: url('img/work/fashion-gown.jpg'); background-position: center 12%; }
.industry-card.hospitality { background-image: url('img/work/hotel-lobby.jpg'); background-position: 64% center; }
.card-ticker { position: relative; margin: 0 -24px 18px; overflow: hidden; white-space: nowrap; padding: 9px 0; background: linear-gradient(90deg, #fff36a, #ffb800 48%, #ff6a35); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card-ticker .crawl-track span { font-size: 12px; }

/* ---------- Inner pages (demo, privacy) ---------- */
.page-nav { background: #050506; }
.page-nav nav a[aria-current="page"] { color: #00f0ff; }
.page { padding: 150px clamp(20px, 5vw, 78px) 110px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.page h1 { font: 700 clamp(42px, 6vw, 76px)/.95 "Space Grotesk", sans-serif; letter-spacing: -.05em; margin: 0 0 20px; }
.page h1 span { color: transparent; background: linear-gradient(95deg, #fff36a 0%, #ffb800 28%, #ff2bd6 66%, #00f0ff 100%); -webkit-background-clip: text; background-clip: text; }
.page .lead { max-width: 640px; color: #b3b5ba; font-size: 17px; line-height: 1.75; margin: 0; }
.form-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; margin-top: 44px; align-items: start; }
.form-wrap > * { min-width: 0; }
.info-card { border: 1px solid rgba(255,255,255,.12); background: #0c0e13; padding: 24px; border-radius: 4px; margin-bottom: 16px; }
.info-card b { display: block; font: 600 18px "Space Grotesk", sans-serif; margin-bottom: 8px; }
.info-card p { margin: 0; color: #a9adb4; font-size: 14px; line-height: 1.8; }
.info-card a, .fineprint a, .legal a { color: #00f0ff; }
form.demo { display: grid; gap: 16px; padding: 32px; border: 1px solid rgba(0,240,255,.25); background: linear-gradient(160deg, #0d1118, #07080b); border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.demo label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #d7d5cf; }
form.demo .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: #8d9198; }
form.demo input, form.demo select, form.demo textarea { font: 500 15px Manrope, system-ui, sans-serif; text-transform: none; letter-spacing: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; background: #050506; color: #f5f3ec; width: 100%; }
form.demo input:focus, form.demo select:focus, form.demo textarea:focus { outline: 2px solid rgba(0,240,255,.45); border-color: #00f0ff; }
form.demo textarea { min-height: 110px; resize: vertical; }
form.demo button.btn { border: 0; cursor: pointer; justify-self: start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 15px 17px; border-radius: 3px; font-weight: 700; }
.notice.ok { background: rgba(170,255,43,.1); border: 1px solid #aaff2b; }
.notice.err { background: rgba(255,90,90,.1); border: 1px solid #ff5a5a; }
.fineprint { font-size: 12px; color: #8d9198; margin: 0; }
.legal { max-width: 780px; }
.legal h2 { font: 600 24px "Space Grotesk", sans-serif; margin: 34px 0 10px; }
.legal p { color: #b3b5ba; line-height: 1.8; }
@media (max-width: 860px) { .form-wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } form.demo { padding: 22px; } .page { padding-top: 120px; } }

/* Live Capture bottom ticker (Steve 2026-10-08) */
.capture-bottom.crawl-strip { display: flex; align-items: center; overflow: hidden; white-space: nowrap; padding-left: 0; padding-right: 0; }
.crawl-track { display: inline-flex; animation: crawl 16s linear infinite; }
.crawl-track span { font: 800 13px "Space Grotesk", sans-serif; letter-spacing: .12em; padding: 0 22px; color: #111; }
.crawl-track span::after { content: "✦"; margin-left: 44px; color: #c2185b; }
@keyframes crawl { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .crawl-track { animation: none; } }

/* Ensley's Boutique sign on the retail card: real text over the photo so it stays crisp at any size */
.industry-card.retail { container-type: inline-size; }
.boutique-sign { position: absolute; z-index: 2; left: 5cqw; top: 34px; width: min(50cqw, 230px); text-align: center; color: #f6f2ea; pointer-events: none; }
.boutique-sign .script { font: 400 min(14cqw, 56px)/1 "Pinyon Script", cursive; color: #e6c88f; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.boutique-sign .word { font: 500 min(5.6cqw, 23px)/1 "Bodoni Moda", Georgia, serif; letter-spacing: .3em; margin: 1.5cqw 0 0 .3em; }
.boutique-sign i { display: block; width: 58%; height: 1px; margin: min(3cqw, 13px) auto min(2.6cqw, 11px); background: #e6c88f; }
.boutique-sign .coll { font: 500 clamp(8px, 2.3cqw, 10px)/1.3 "Bodoni Moda", Georgia, serif; letter-spacing: .24em; color: #e6c88f; }
.boutique-sign .cats { font: italic 400 clamp(10px, 3.2cqw, 14px)/1.3 "Bodoni Moda", Georgia, serif; color: #cfcac2; margin-top: min(1.6cqw, 7px); }
.boutique-sign .now { font: 500 clamp(7px, 2cqw, 9px)/1 "Bodoni Moda", Georgia, serif; letter-spacing: .32em; margin-top: min(3cqw, 12px); }

/* Phones + tablets (2026-10-10): the hero's screen mock-up (.fleet) was
   absolutely positioned at a fixed top (610px tablet / 590px phone), but at
   these widths the copy wraps longer than that, so the mock-up was drawn over
   the buttons and the $12 badge. Let it flow under the copy instead; its
   height still comes from wow.css (500px tablet, 310px phone). */
@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .fleet { position: relative; top: auto; right: auto; left: auto; width: 100%; margin-top: 44px; }
}

/* Laptops (2026-10-10): the screen mock-up starts at ~45% of the hero's
   width, but the copy column is 60vw, so at ~1280px the paragraph ran under
   the left screen card. Keep the copy clear of it until the screen is wide
   enough for the original layout. */
@media (min-width: 1101px) and (max-width: 1800px) {
  .hero-copy { width: 36vw; }
}

/* Decorative orbits/radar rings poked past the right edge on some phones and
   tablets (360px, 768px) and let the whole page scroll sideways. */
html, body { overflow-x: clip; }

/* Set up your screen page (2026-10-25) */
.setup-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; margin-top: 44px; align-items: start; }
.setup-grid > * { min-width: 0; }
.setup-code { display: inline-block; margin: 6px 0 10px !important; padding: 8px 12px; border: 1px solid rgba(0,240,255,.45); border-radius: 4px; color: #00f0ff !important; font: 600 18px "Space Grotesk", sans-serif !important; letter-spacing: .02em; }
.setup-code.small { font-size: 14px !important; padding: 3px 8px; margin: 0 !important; color: #a9adb4 !important; border-color: rgba(255,255,255,.18); }
.setup-dl { margin-top: 14px; }
.setup-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.setup-steps li { counter-increment: step; position: relative; padding: 22px 22px 22px 76px; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.12); background: #0c0e13; border-radius: 4px; }
.setup-steps li::before { content: counter(step); position: absolute; left: 22px; top: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 16px "Space Grotesk", sans-serif; color: #050506; background: linear-gradient(135deg, #fff36a, #ffb800 40%, #ff2bd6 80%, #00f0ff); }
.setup-steps b { display: block; font: 600 18px "Space Grotesk", sans-serif; margin-bottom: 6px; }
.setup-steps p { margin: 0; color: #a9adb4; font-size: 15px; line-height: 1.75; }
.setup-steps strong { color: #fff; font-weight: 600; }
.setup-steps a { color: #00f0ff; }
@media (max-width: 900px) { .setup-grid { grid-template-columns: 1fr; } .setup-steps li { padding-left: 66px; } .setup-steps li::before { left: 16px; } }