/* ==========================================================================
   bdsmchat.co — /invisible/ only. Drafted 2026-09-09.

   The sibling sites carry this as assets/invisible.css with every rule scoped
   ".legacy .inv-*", because their pages wrap an old page's body in
   <div class="legacy">. bdsmchat.co has no .legacy chrome at all — its pages
   are flat clones of rendered WordPress — so the scope here is ".inv-page",
   the wrapper this page opens inside .page-content. Same purpose: nothing in
   this file can reach any other page, and this file is loaded by that page
   alone.

   Loaded AFTER assets/site.css, which is itself loaded last on every page, so
   plain specificity wins and !important is not needed anywhere below.

   Palette taken from what the site already ships, not invented:
     #d80808  brand red        (17 uses on /vip/)
     #ba0000  brand red, deep  (its hover)
     #0f0f12  footer ground    (assets/site.css)
     #23232b  hairline         (assets/site.css)
     #9a9aa6  muted type       (assets/site.css)
   White on #d80808 measures 5.3:1 and #9a9aa6 on #0f0f12 measures 6.9:1, so
   both clear AA. Do not lighten the red for type without re-measuring.
   ========================================================================== */

.inv-page {
  --inv-brand: #d80808;
  --inv-brand-deep: #ba0000;
  --inv-ground: #0f0f12;
  --inv-panel: #16161b;
  --inv-line: #23232b;
  --inv-ink: #ffffff;
  --inv-muted: #9a9aa6;
  --inv-wrap: 1180px;
  color: var(--inv-ink);
  font-size: 16px;
  line-height: 1.6;
}

.inv-page .inv-wrap {
  max-width: var(--inv-wrap);
  margin: 0 auto;
  padding: 0 22px;
}

.inv-page section { padding: 46px 0; }
.inv-page section + section { border-top: 1px solid var(--inv-line); }

.inv-page .inv-eyebrow {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--inv-brand);
}

.inv-page .inv-title,
.inv-page .inv-sect-title,
.inv-page .inv-band-title {
  margin: 0 0 14px;
  color: var(--inv-ink);
  font-weight: 600;
  line-height: 1.25;
}
.inv-page .inv-title { font-size: 30px; }
.inv-page .inv-sect-title,
.inv-page .inv-band-title { font-size: 24px; }

.inv-page .inv-lede,
.inv-page .inv-safe-lede,
.inv-page .inv-band-sub {
  margin: 0 0 18px;
  color: var(--inv-muted);
  font-size: 17px;
}

/* ----------------------------------------------------------------- 1. INTRO */
.inv-page .inv-intro-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  align-items: center;
}
.inv-page .inv-intro-ghost {
  font-size: 82px;
  line-height: 1;
  text-align: center;
  opacity: .9;
}
.inv-page .inv-intro-copy p:last-child { margin-bottom: 0; }

.inv-page .inv-stats {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.inv-page .inv-stats li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--inv-panel);
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  padding: 15px 16px;
}
.inv-page .inv-stat-ic { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.inv-page .inv-stat-l { color: var(--inv-muted); font-size: 14.5px; }

/* -------------------------------------------------------------- 2. FEATURES */
.inv-page .inv-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
}
.inv-page .inv-feat {
  background: var(--inv-panel);
  border: 1px solid var(--inv-line);
  border-radius: 10px;
  padding: 20px 20px 22px;
}
.inv-page .inv-feat-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.inv-page .inv-ico {
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}
.inv-page .inv-feat-t {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--inv-ink);
}
.inv-page .inv-feat-d {
  margin: 0;
  color: var(--inv-muted);
  font-size: 14.5px;
}

/* ------------------------------------------------------------- 3. SAFE MODE */
.inv-page .inv-shots {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin: 24px 0 30px;
}
.inv-page .inv-shot { margin: 0; }
.inv-page .inv-shot-img,
.inv-page .inv-shot-ph {
  display: block;
  width: 100%;
  border: 1px solid var(--inv-line);
  border-radius: 12px;
  background: var(--inv-panel);
}
/* The placeholder holds the same shape a phone screenshot will, so dropping
   the real file in does not move the rest of the page. */
.inv-page .inv-shot-ph {
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  border-style: dashed;
  border-color: var(--inv-brand);
}
.inv-page .inv-shot-ph-k {
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--inv-brand);
}
.inv-page .inv-shot-ph-v { font-size: 15px; color: var(--inv-ink); }
.inv-page .inv-shot-ph-p {
  font-size: 12px;
  color: var(--inv-muted);
  word-break: break-all;
  background: none;
  padding: 0;
}
.inv-page .inv-shot figcaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inv-page .inv-shot-k { font-size: 14.5px; font-weight: 600; color: var(--inv-ink); }
.inv-page .inv-shot-v { font-size: 13.5px; color: var(--inv-muted); }

.inv-page .inv-safe-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}
.inv-page .inv-safe-col {
  background: var(--inv-panel);
  border: 1px solid var(--inv-line);
  border-radius: 10px;
  padding: 20px;
}
.inv-page .inv-safe-yes { border-left: 3px solid var(--inv-brand); }
.inv-page .inv-safe-no  { border-left: 3px solid var(--inv-line); }
.inv-page .inv-safe-h {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--inv-ink);
}

.inv-page .inv-points { list-style: none; margin: 0; padding: 0; }
.inv-page .inv-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  color: var(--inv-muted);
  font-size: 14.5px;
}
.inv-page .inv-points li:last-child { margin-bottom: 0; }
.inv-page .inv-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--inv-brand);
}
.inv-page .inv-points strong { color: var(--inv-ink); }

.inv-page .inv-safe-notes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

/* --------------------------------------------------------- 4. HOW YOU GET IT */
.inv-page .inv-band { background: var(--inv-ground); }
.inv-page .inv-band-grid { max-width: 780px; }
.inv-page .inv-band-pts,
.inv-page .inv-safe-notes {
  list-style: none;
  padding: 0;
}
.inv-page .inv-band-pts {
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
.inv-page .inv-band-pts li,
.inv-page .inv-safe-notes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--inv-panel);
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  padding: 15px 16px;
}
.inv-page .inv-band-ico { font-size: 19px; line-height: 1.3; flex: 0 0 auto; }
.inv-page .inv-band-txt { display: flex; flex-direction: column; gap: 3px; }
.inv-page .inv-band-k {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--inv-ink);
}
.inv-page .inv-band-v { color: var(--inv-muted); font-size: 14.5px; }

/* ------------------------------------------------------------ 5. SMALL PRINT */
.inv-page .inv-final {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--inv-panel);
  border: 1px solid var(--inv-line);
  border-radius: 10px;
  padding: 22px;
  margin-top: 18px;
}
.inv-page .inv-final .inv-ico { font-size: 34px; text-align: center; }
.inv-page .inv-final-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  text-align: center;
}
.inv-page .inv-btn {
  display: inline-block;
  background: var(--inv-brand);
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.inv-page .inv-btn:hover,
.inv-page .inv-btn:focus { background: var(--inv-brand-deep); color: #ffffff; }
.inv-page .inv-cta-alt {
  color: var(--inv-muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ NARROW */
@media (max-width: 980px) {
  .inv-page .inv-cards,
  .inv-page .inv-stats,
  .inv-page .inv-band-pts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .inv-page .inv-intro-grid { grid-template-columns: 1fr; text-align: center; }
  .inv-page .inv-intro-ghost { font-size: 64px; }
  .inv-page .inv-cards,
  .inv-page .inv-stats,
  .inv-page .inv-band-pts,
  .inv-page .inv-safe-grid,
  .inv-page .inv-safe-notes,
  .inv-page .inv-shots { grid-template-columns: 1fr; }
  .inv-page .inv-shots { max-width: 340px; }
  .inv-page .inv-final { grid-template-columns: 1fr; text-align: center; }
  .inv-page .inv-title { font-size: 25px; }
  .inv-page .inv-sect-title,
  .inv-page .inv-band-title { font-size: 21px; }
}