/* LuperIQ v2 — self-hosted font @font-face declarations */
@import url("/static/fonts/font-face.css");

/* =====================================================================
 * LuperIQ v2 — homepage styles
 * Scoped to .luperiq-v2 so this can ship alongside the existing site
 * without collisions. Move design tokens to :root once v2 is the default.
 * ===================================================================== */

.luperiq-v2 {
  /* design tokens */
  --ink: #0d0d0c;
  --paper: #f6f3ec;
  --paper-2: #ece7da;
  --paper-3: #e3decc;
  --rule: #d9d3c2;
  --muted: #6e6a5e;

  /* category palette (pulled from logo blue + complementary editorial colors) */
  --c-business: #2596be;   /* logo teal — primary accent */
  --c-food:     #c75f3c;
  --c-community:#3f6d56;
  --c-faith:    #6b4f8a;
  --c-events:   #c89a3c;
  --c-creator:  #1f4f6b;
  --c-accent-soft: #6bb9e3;

  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif;
}

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

.luperiq-v2 .mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.luperiq-v2 .serif { font-family:'Instrument Serif', Georgia, serif; font-weight:400; }

/* ===== nav ===== */
.luperiq-v2 .v2-nav {
  display:flex; align-items:center; padding: 22px 56px;
  border-bottom: 1px solid var(--rule);
}
.luperiq-v2 .v2-logo { display:inline-flex; align-items:center; }
.luperiq-v2 .v2-logo img { height: 38px; width:auto; display:block; }
.luperiq-v2 .v2-nav-links { display:flex; gap:28px; margin-left:56px; font-size:14px; font-weight:500; }
.luperiq-v2 .v2-nav-links span { cursor:pointer; }
.luperiq-v2 .v2-nav-links .count { color: var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px; margin-left:4px; }
.luperiq-v2 .v2-nav-right { margin-left:auto; display:flex; gap:14px; align-items:center; }
.luperiq-v2 .v2-nav-right a { font-size:14px; text-decoration:none; color:var(--ink); }

/* ===== buttons ===== */
.luperiq-v2 .v2-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; text-decoration:none;
  font-family: inherit;
}
.luperiq-v2 .v2-btn.primary { background: var(--ink); color: var(--paper); }
.luperiq-v2 .v2-btn.big { padding: 16px 24px; font-size: 15px; }

/* ===== live ribbon ===== */
.luperiq-v2 .v2-ribbon {
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 56px; font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing:.18em; color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.luperiq-v2 .v2-ribbon .dot {
  width:8px; height:8px; border-radius:50%; background: var(--c-accent-soft);
  display:inline-block; margin-right:8px;
  animation: v2-pulse 2.2s ease-in-out infinite;
}
@keyframes v2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}

/* ===== hero ===== */
.luperiq-v2 .v2-hero {
  padding: 90px 56px 70px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.luperiq-v2 .v2-hero .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: 22px;
}
.luperiq-v2 .v2-hero .kicker .line {
  display:inline-block; width: 40px; height:1px;
  background: var(--muted); vertical-align: middle;
  margin-right: 14px;
}
.luperiq-v2 h1.v2-headline {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(64px, 9vw, 148px);
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 1200px;
  text-wrap: balance;
}
.luperiq-v2 h1.v2-headline .minutes { color: var(--c-business); font-style: italic; }
.luperiq-v2 h1.v2-headline .ticker {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: .62em;
  letter-spacing: -.01em;
  color: var(--c-business);
  display: inline-block;
  min-width: 3.2ch;
  vertical-align: baseline;
}
.luperiq-v2 .v2-subhead {
  font-size: 20px; line-height: 1.5;
  color: #2a2a26;
  margin: 36px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}
.luperiq-v2 .v2-ctas {
  display:flex; gap: 14px; align-items:center;
  margin-top: 40px; flex-wrap: wrap;
}
.luperiq-v2 .v2-ctas .note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  letter-spacing: .08em;
  margin-left: 4px;
}

/* ===== metric rail ===== */
.luperiq-v2 .v2-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 90px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.luperiq-v2 .v2-rail .cell {
  padding: 26px 30px;
  border-right: 1px solid var(--rule);
}
.luperiq-v2 .v2-rail .cell:last-child { border-right: none; }
.luperiq-v2 .v2-rail .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em;
  color: var(--muted);
}
.luperiq-v2 .v2-rail .big {
  font-family: 'Instrument Serif', serif;
  font-size: 60px; line-height: 1;
  margin-top: 6px;
  letter-spacing: -.02em;
}
.luperiq-v2 .v2-rail .big em { font-style: italic; color: var(--c-business); }
.luperiq-v2 .v2-rail .desc {
  font-size: 13px; color: #333; margin-top: 8px; max-width: 280px; line-height: 1.5;
}

.luperiq-v2 .v2-blob {
  position: absolute;
  top: 40px; right: 56px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}

/* ===== footnote / section transition ===== */
.luperiq-v2 .v2-footnote {
  max-width: 1440px; margin: 0 auto;
  padding: 28px 56px 70px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 40px; flex-wrap: wrap;
}
.luperiq-v2 .v2-footnote p {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; line-height: 1.35;
  max-width: 640px;
  font-style: italic;
  color: #2a2a26;
  margin: 0;
}
.luperiq-v2 .v2-footnote .sig {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  letter-spacing: .14em;
  margin-top: 10px;
  font-style: normal;
}
.luperiq-v2 .v2-footnote .next {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--muted);
  letter-spacing:.14em; text-align:right;
}

/* ===== 44 site types section ===== */
.luperiq-v2 .v2-grid-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 56px 100px;
  border-top: 1px solid var(--rule);
}
.luperiq-v2 .v2-head-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 40px;
  padding-top: 50px;
}
.luperiq-v2 .v2-grid-section .kicker {
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing:.22em; color: var(--muted);
  margin-bottom: 18px;
  display:flex; align-items:center; gap: 12px;
}
.luperiq-v2 .v2-grid-section .kicker .num {
  font-family:'Instrument Serif', serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--c-business);
}
.luperiq-v2 h2.v2-head {
  font-family:'Instrument Serif', serif;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .95;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.luperiq-v2 h2.v2-head em { font-style: italic; color: var(--c-business); }
.luperiq-v2 .v2-lede {
  font-size: 17px; line-height: 1.55; color: #2a2a26;
  max-width: 460px;
  margin: 0;
}
.luperiq-v2 .v2-lede .em { color: var(--ink); font-weight: 600; }

/* filter chips */
.luperiq-v2 .v2-controls {
  display:flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 30px 0 40px;
}
.luperiq-v2 .v2-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.luperiq-v2 .v2-chip:hover { background: var(--paper-2); }
.luperiq-v2 .v2-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.luperiq-v2 .v2-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.luperiq-v2 .v2-chip .count { font-family:'JetBrains Mono', monospace; font-size: 10px; opacity: .7; }
.luperiq-v2 .v2-chip.active .count { opacity: .85; }
.luperiq-v2 .v2-search {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  width: 240px;
}
.luperiq-v2 .v2-search input {
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13px; width: 100%;
  color: var(--ink);
}
.luperiq-v2 .v2-search input::placeholder { color: var(--muted); }
.luperiq-v2 .v2-search svg { flex-shrink:0; opacity:.6; }

/* category band */
.luperiq-v2 .v2-band { margin-top: 50px; }
.luperiq-v2 .v2-band:first-of-type { margin-top: 0; }
.luperiq-v2 .v2-band-head {
  display:flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.luperiq-v2 .v2-band-head .swatch { width: 12px; height: 12px; border-radius: 50%; }
.luperiq-v2 .v2-band-head .label {
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .22em; font-weight: 600;
}
.luperiq-v2 .v2-band-head .rule { flex: 1; height: 1px; }
.luperiq-v2 .v2-band-head .count {
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: .12em;
}
.luperiq-v2 .v2-band-desc {
  font-size: 14px; color: #444; margin: 0 0 22px;
  max-width: 760px; line-height: 1.5;
}

/* card grid */
.luperiq-v2 .v2-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .luperiq-v2 .v2-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .luperiq-v2 .v2-cards { grid-template-columns: repeat(2, 1fr); } }

.luperiq-v2 .v2-card {
  position: relative;
  padding: 22px 20px 56px;
  background: var(--paper-2);
  border-radius: 6px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--cat, var(--ink));
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  min-height: 220px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  text-align: center;
  align-items: center;
}
.luperiq-v2 .v2-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  background: var(--paper);
}
.luperiq-v2 .v2-card .index {
  font-family:'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  color: var(--muted);
}
.luperiq-v2 .v2-card .icon {
  width: 38px; height: 38px;
  margin: 4px auto 0;
  display:flex; align-items:center; justify-content:center;
  color: var(--cat, var(--ink));
  opacity: .9;
}
.luperiq-v2 .v2-card .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.luperiq-v2 .v2-card .icon svg.solid { stroke: none; fill: currentColor; }
.luperiq-v2 .v2-card.is-business .icon { color: var(--paper); opacity: 1; }
.luperiq-v2 .v2-card .free {
  position: absolute; top: 18px; right: 18px;
  font-family:'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .14em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--paper-3);
  color: var(--muted);
}
.luperiq-v2 .v2-card.is-business .free { display:none; }
.luperiq-v2 .v2-card .name {
  font-family:'DM Serif Display', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.005em;
  margin: auto 0;
  padding: 8px 0;
}
.luperiq-v2 .v2-card .sub {
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: .03em;
  max-width: 220px;
  padding-top: 12px;
  position: relative;
}
.luperiq-v2 .v2-card .sub::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 1px;
  background: var(--cat, var(--rule));
  opacity: .55;
}
.luperiq-v2 .v2-card.is-business .sub::before { opacity: .45; }
.luperiq-v2 .v2-card .arrow {
  position: absolute; bottom: 16px; right: 18px;
  font-size: 18px;
  color: var(--cat, var(--ink));
  font-weight: 600;
  transition: transform .18s ease;
}
.luperiq-v2 .v2-card:hover .arrow { transform: translateX(4px); }

.luperiq-v2 .v2-card.is-business {
  background: var(--c-business);
  color: var(--paper);
  border-color: var(--c-business);
}
.luperiq-v2 .v2-card.is-business:hover { background: #2087ad; }
.luperiq-v2 .v2-card.is-business .index { color: rgba(246,243,236,.7); }
.luperiq-v2 .v2-card.is-business .sub { color: rgba(246,243,236,.85); }
.luperiq-v2 .v2-card.is-business .arrow { color: var(--paper); }

.luperiq-v2 .v2-card.hidden { display: none; }
.luperiq-v2 .v2-band.empty { display: none; }

/* bottom CTA */
.luperiq-v2 .v2-end-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.luperiq-v2 .v2-end-row .qa {
  font-family:'Instrument Serif', serif;
  font-size: 32px; line-height: 1.2;
  letter-spacing: -.02em; margin: 0;
}
.luperiq-v2 .v2-end-row .qa em { color: var(--c-business); font-style: italic; }
.luperiq-v2 .v2-end-row .actions { display:flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.luperiq-v2 .v2-end-row .v2-btn { padding: 13px 20px; }

/* ===== footer ===== */
.luperiq-v2 .v2-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 70px 56px 36px;
}
.luperiq-v2 .v2-footer .foot-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(246,243,236,.1);
}
.luperiq-v2 .v2-footer .brand-col h3 {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 32px; line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -.02em;
  max-width: 320px;
}
.luperiq-v2 .v2-footer .brand-col h3 em { color: var(--c-accent-soft); font-style: italic; }
.luperiq-v2 .v2-footer .brand-col .sig {
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(246,243,236,.55);
  margin-top: 24px;
}
.luperiq-v2 .v2-footer .col-head {
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em;
  color: rgba(246,243,236,.55);
  margin-bottom: 16px;
}
.luperiq-v2 .v2-footer ul { list-style: none; padding: 0; margin: 0; }
.luperiq-v2 .v2-footer ul li { margin-bottom: 10px; font-size: 14px; }
.luperiq-v2 .v2-footer ul li a {
  color: var(--paper); text-decoration: none; opacity: .85;
}
.luperiq-v2 .v2-footer ul li a:hover { opacity: 1; }
.luperiq-v2 .v2-footer .legal {
  max-width: 1440px; margin: 0 auto;
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em;
  color: rgba(246,243,236,.55);
  flex-wrap: wrap; gap: 16px;
}
.luperiq-v2 .v2-footer .legal img { height: 28px; opacity: .9; filter: invert(1) brightness(2); }

@media (max-width: 900px) {
  .luperiq-v2 .v2-footer .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
 * Mobile breakpoints — added to ship v2 cleanly on phones.
 * The handoff package was desktop-first; this fills the gap.
 * ───────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* nav: stack into two rows, drop secondary links to a slimmer set,
     keep primary CTA always visible */
  .luperiq-v2 .v2-nav {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 10px;
  }
  .luperiq-v2 .v2-logo img { height: 30px; }
  .luperiq-v2 .v2-nav-links {
    order: 3;
    margin-left: 0;
    flex-basis: 100%;
    gap: 14px;
    font-size: 13px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .luperiq-v2 .v2-nav-links::-webkit-scrollbar { display: none; }
  .luperiq-v2 .v2-nav-links a { white-space: nowrap; }
  .luperiq-v2 .v2-nav-right {
    margin-left: auto;
    gap: 10px;
  }
  .luperiq-v2 .v2-nav-right a:not(.v2-btn) { font-size: 13px; }

  /* ribbon: stack 3 cells vertically with thin separators */
  .luperiq-v2 .v2-ribbon {
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
    text-align: center;
    font-size: 11px;
  }
  .luperiq-v2 .v2-ribbon span {
    display: block;
    width: 100%;
  }

  /* hero: tighter padding, smaller blob, smaller headline scale */
  .luperiq-v2 .v2-hero {
    padding: 40px 20px 32px;
  }
  .luperiq-v2 .v2-headline {
    font-size: clamp(38px, 12vw, 64px) !important;
    line-height: 1.05 !important;
  }
  .luperiq-v2 .v2-blob {
    width: 180px !important;
    height: 180px !important;
    top: 60px !important;
    right: -40px !important;
  }
  .luperiq-v2 .v2-subhead {
    font-size: 16px;
    line-height: 1.5;
  }
  .luperiq-v2 .v2-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .luperiq-v2 .v2-ctas .v2-btn {
    text-align: center;
    justify-content: center;
  }
  .luperiq-v2 .v2-ctas .note {
    text-align: center;
    margin-top: 4px;
  }

  /* metric rail: stack vertically */
  .luperiq-v2 .v2-rail {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-top: 32px;
  }
  .luperiq-v2 .v2-rail .cell {
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
  }
  .luperiq-v2 .v2-rail .cell:last-child { border-bottom: none; }

  /* footnote: stack sig and "next" pointer */
  .luperiq-v2 .v2-footnote {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 32px 20px;
  }

  /* grid section header row: stack lede below H2 */
  .luperiq-v2 .v2-grid-section {
    padding: 32px 20px !important;
  }
  .luperiq-v2 .v2-head-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 20px !important;
  }
  .luperiq-v2 .v2-head {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .luperiq-v2 .v2-lede {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* filter chips: wrap onto multiple lines, all centered, search
     on its own line at the bottom (Dave's spec — no horizontal
     scroll on mobile). */
  .luperiq-v2 .v2-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    overflow-x: visible;
    padding: 0 4px;
  }
  .luperiq-v2 .v2-chip {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
  }
  .luperiq-v2 .v2-search {
    flex: 0 0 100%;
    margin-top: 6px;
    justify-content: center;
  }
  .luperiq-v2 .v2-search input {
    text-align: center;
  }

  /* cards: 1 column below 480px (already 2 above) */
  @media (max-width: 480px) {
    .luperiq-v2 .v2-cards {
      grid-template-columns: 1fr !important;
    }
  }

  /* end-row: stack qa text and actions */
  .luperiq-v2 .v2-end-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px;
  }

  /* footer: 1 column at this breakpoint */
  .luperiq-v2 .v2-footer .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .luperiq-v2 .v2-footer .legal {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}