/* Tech look (2026-10-20): engineered, "wired" feel on top of both themes.
   Two fonts (Space Grotesk + JetBrains Mono), blueprint grid, QR finder-pattern corner marks, sharper corners,
   a scanner line on the hero, and a dark terminal panel for the free-account band. Markup stays as is. */
:root { --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --accent: #b50600; }
* { font-family: var(--sans); } /* app.css sets * { Poppins } */
h1, h2, h3, h4 { letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

/* Mono for data and labels: table headers, small caps labels, links to destinations, numbers. */
th, th *, .uppercase.tracking-wider, .uppercase.tracking-wider *, .font-mono, [data-link], #ws-switch, #ws-switch option,
[data-qr] h4 + a, [data-qr] h4 + a *, .admin-count, .admin-count *, [data-qr] .text-sm span { font-family: var(--mono); }
th, .uppercase.tracking-wider { letter-spacing: 0.08em; font-weight: 500; }
[data-qr] h4 + a { font-size: 0.8125rem; }

/* Sharper geometry. */
.rounded-xl, .md\:rounded-xl { border-radius: 8px; }
.rounded-2xl, .md\:rounded-2xl { border-radius: 10px; }
.rounded-3xl, .md\:rounded-3xl { border-radius: 12px; }
.rounded-lg { border-radius: 6px; }

/* Blueprint grid on the page background (light and dark). */
.light .bg-gray-950 {
  background-image: linear-gradient(rgba(17,24,39,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17,24,39,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.dark .bg-gray-950, .dark .bg-black.min-h-screen {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* QR finder-pattern corner marks (top-left, top-right, bottom-left) on cards. */
.bg-gray-900.border:not([class*="bg-gradient"]):not([data-modal] > *), [data-qr], .bg-white\/5.border:not([class*="bg-gradient"]):not(input):not(select):not(textarea) {
  --c: var(--accent);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: left 6px top 6px, left 6px top 6px, right 6px top 6px, right 6px top 6px, left 6px bottom 6px, left 6px bottom 6px;
  background-repeat: no-repeat;
}
[data-qr]:hover, .bg-gray-900.border:hover { border-color: rgba(181,6,0,.45); }

/* Hero: a slow scanner line sweeping the photo, under the text. */
section.bg-cover { overflow: hidden; }
section.bg-cover::after {
  content: ''; position: absolute; left: 0; right: 0; top: 12%; height: 2px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(181,6,0,.85) 20%, rgba(181,6,0,.85) 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(181,6,0,.35);
  animation: cqr-scan 7s ease-in-out infinite;
}
@keyframes cqr-scan { 0%, 100% { top: 12%; opacity: 0; } 10% { opacity: 1; } 50% { top: 88%; opacity: 1; } 60% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { section.bg-cover::after { display: none; } }

/* Free-account band: a dark terminal panel with the grid, in both themes. */
#free .bg-gradient-to-br {
  background-color: #0b0f17;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  border-color: rgba(181,6,0,.6);
  box-shadow: 0 0 0 1px rgba(181,6,0,.15), 0 24px 60px -24px rgba(181,6,0,.45);
}
#free .bg-gradient-to-br .text-white, .light #free .bg-gradient-to-br .text-white { color: #fff; }
#free .bg-gradient-to-br .text-gray-300, .light #free .bg-gradient-to-br .text-gray-300 { color: #cbd5e1; }

/* Code cards: the stats line wraps instead of pushing the card wider; labels stay on one line. */
[data-qr] .mt-3.flex { flex-wrap: wrap; row-gap: 6px; }
[data-qr] .mt-3.flex > * { white-space: nowrap; }
[data-qr] .min-w-0 { min-width: 0; }
@media (max-width: 639px) {
  [data-qr] .text-sm span { font-family: var(--sans); }
  [data-qr] .mt-3.flex > .truncate { flex-basis: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }
}

/* Home FAQ (2026-10-22, SEO): accordion rows, left-aligned answers, 17px body. */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.03); }
.light .faq-item { border-color: #e5e7eb; background: #fff; }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: 1.0625rem; color: #fff; }
.light .faq-q { color: #111827; }
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { flex-shrink: 0; color: var(--accent); transition: transform .2s ease; }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-a { padding: 0 24px 22px; font-size: 1.0625rem; line-height: 1.65; color: #cbd5e1; max-width: 65ch; }
.light .faq-a { color: #374151; }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
/* Smaller hero photo on phones. */
@media (max-width: 800px) { .hero-bg { background-image: url(/hero-qr-scan-1200.webp) !important; } }