/* VibeCheck.luxury — site override layer (rebuild 2026-09).
   Vendored design system lives at /ds/system.css + /ds/theme.css, loaded
   before this file and left unmodified (see ds/HASHES check). This file only
   maps the site's existing component classes onto stable local aliases and
   keeps the layout rules those components already depended on. The Road House
   candidate intentionally owns its accent aliases here while leaving vendored
   design-system files byte-for-byte untouched.
   Road House local candidate: near-black ground, off-white ink, one deep
   neutral black satin with a red-neon accent proposal. Cream, magenta, and
   purple are retired visual treatments. */

:root[data-ds-theme="vibecheck"] {
  --ground: #08090c;
  --panel: #0d0e11;
  --panel-deep: #151317;
  --ink: #fff8f7;
  --ink-2: #e4e1e2;
  --muted: #aaa5a7;
  --line: rgba(255, 248, 247, 0.17);
  --line-soft: rgba(255, 248, 247, 0.09);
  /* Owner-directed local red-neon comparison, 2026-09-09. The field stays
     neutral black/charcoal; red is reserved for tube light and small signals.
     This is a review proposal, not a permanent brand decision. */
  --accent: #ff3048;
  --accent-deep: #e81f40;
  --on-accent: #21060c;
  --fr: 'Inter Tight', 'Inter Tight Fallback', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --it: 'Inter Tight', 'Inter Tight Fallback', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --jb: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1120px;
  --narrow: 720px;
  --r: 3px;
  /* The frozen vendored theme remains byte-for-byte intact. Components that
     still read its semantic tokens resolve to the Road House red proposal. */
  --ds-ground: var(--ground);
  --ds-ground-alt: var(--panel);
  --ds-panel: var(--panel);
  --ds-panel-deep: var(--panel-deep);
  --ds-ink: var(--ink);
  --ds-ink-strong: var(--ink);
  --ds-ink-secondary: var(--muted);
  --ds-accent: var(--accent);
  --ds-accent-deep: var(--accent-deep);
  --ds-accent-surface: var(--panel-deep);
  --ds-on-accent: var(--on-accent);
  --ds-line: var(--line);
  --ds-line-soft: var(--line-soft);
  --ds-line-strong: var(--ink);
  --ds-ok: #86e6df;
  --ds-warn: #d8dd8b;
  --ds-error: #ff9a87;
  --ds-radius: var(--r);
}

/* Metric-matched local fallbacks so the swap to the web fonts does not shift
   layout (Lighthouse CLS on the desktop preset). */
@font-face {
  font-family: 'Fraunces Fallback'; src: local('Georgia');
  size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight Fallback'; src: local('Helvetica Neue'), local('Arial');
  size-adjust: 93%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
/* JetBrains Mono had no metric-matched fallback. It was the third font named
   in the layout-shift record on the legal pages once the motion layer put
   another 57 KiB in front of the font requests. Menlo's advance width is
   within a fraction of a percent of JetBrains Mono's, so only the vertical
   metrics need overriding. Tuned by measurement, not from a metrics tool. */
@font-face {
  font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Consolas');
  size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--it);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { font-family: var(--fr); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p, ul, ol { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--narrow); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ground);
  padding: 12px 18px; z-index: 200; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ── Header ─────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

/* The vendored motion boot can fail after it has marked the document ready.
   Keep every public route painted even if its optional dynamic module never
   arrives. The deliberately impossible ID in :not() makes this resting state
   win over the later-loaded vendored pre-hide rule without editing vendored
   code. Road House uses static content as the reliable baseline. */
html[data-motion-ready]:not(#vc-live-motion) [data-motion="reveal"] {
  opacity: 1 !important;
  transform: none !important;
}
html[data-motion-ready]:not(#vc-live-motion) [data-motion="parallax"],
html[data-motion-ready]:not(#vc-live-motion) [data-motion="pin"] [data-motion-step],
html[data-motion-ready]:not(#vc-live-motion) [data-motion-track] {
  transform: none !important;
}
.site-head__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px; padding: 12px 24px;
  max-width: var(--wrap); margin: 0 auto;
}
.brand {
  font-family: var(--fr); font-weight: 600; font-size: 1.25rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand em { font-style: italic; color: var(--accent); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-size: 0.95rem; color: var(--ink-2); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.btn {
  display: inline-block; min-height: 44px; padding: 12px 22px; border-radius: var(--r);
  font-family: var(--it); font-weight: 500; font-size: 0.95rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.68); cursor: pointer;
  color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.025) 46%, rgba(255,255,255,.09)), rgba(8,13,16,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.42), 0 10px 28px rgba(0,0,0,.26);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
@supports (backdrop-filter: blur(1px)) { .btn { backdrop-filter: blur(14px) saturate(.8); } }
.btn--solid, .btn--ghost { background-color: rgba(8,13,16,.7); color: var(--ink); }
.btn:hover { background-color: rgba(255,255,255,.13); border-color: rgba(255,255,255,.94); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 9px 16px; font-size: 0.88rem; }

.nav-toggle { display: none; }
/* The nav checkbox only exists for the mobile toggle; on wide viewports it is
   removed from the tree so it is neither focusable nor audited. */
.nav-toggle-check { display: none; }

@media (max-width: 900px) {
  .site-head__inner { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    background: transparent; border: 1.5px solid var(--ink); border-radius: 999px;
    padding: 8px 14px; font: inherit; font-size: 0.9rem; color: var(--ink); cursor: pointer;
    order: 2;
  }
  /* The CTA follows the nav in the DOM; reorder so the wrapping nav panel drops
     below a single brand / menu / CTA row instead of pushing the CTA off it. */
  .site-head__inner > .btn { order: 3; }
  .site-nav { margin-left: 0; flex-basis: 100%; display: none; order: 4; }
  .nav-toggle-check {
    display: block; position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* Pure CSS mobile nav: a hidden checkbox toggled by the <label>. Works with
     JavaScript disabled; the inline script only keeps aria-expanded in sync. */
  .nav-toggle-check:checked ~ .site-nav { display: block; }
}

/* Below ~420px the brand, the menu toggle and the CTA stop fitting on one row
   at full size, so trim all three rather than let the bar become two rows. */
@media (max-width: 420px) {
  .brand { font-size: 1.05rem; }
  .nav-toggle { padding: 7px 12px; font-size: 0.85rem; }
  .site-head__inner > .btn { padding: 8px 14px; font-size: 0.85rem; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 12px; }
  .site-nav a { display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
}

/* ── Sections ───────────────────────────────────────── */
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--jb); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}

.hero { padding: 84px 0 64px; }
.hero p.lede { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--ink-2); max-width: 62ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.lede { font-size: 1.12rem; color: var(--ink-2); }

/* ── Cards ──────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Editorial modifier, carried over from origin/main's cae293a homepage geometry
   ("replaces repetitive homepage card grids with asymmetric editorial layouts").
   main styled `.feature-cards` f1/f2/f3 on a 12-column grid; that markup was
   replaced by the V2 rebuild, so the same 7/5/8 rhythm is applied to the grid
   this branch actually ships. Collapses to one column at the same 880px main
   used, so nothing new can overflow at 768 or 375. */
.grid--editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.grid--editorial > :nth-child(1) { grid-column: 1 / span 7; }
.grid--editorial > :nth-child(2) { grid-column: 8 / span 5; }
.grid--editorial > :nth-child(3) { grid-column: 4 / span 8; }
@media (max-width: 880px) {
  .grid--editorial { grid-template-columns: 1fr; }
  .grid--editorial > :nth-child(n) { grid-column: 1; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li {
  counter-increment: step;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 22px;
  position: relative;
}
.steps li::before {
  content: counter(step);
  font-family: var(--jb); font-size: 0.72rem;
  position: absolute; left: -13px; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--ground);
  display: grid; place-items: center;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 0.3em; }
.steps p { margin: 0; color: var(--ink-2); }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.facts li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.facts li:last-child { border-bottom: 0; }
.facts strong { display: block; font-family: var(--it); font-weight: 600; }

/* ── FAQ ────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 0 20px;
}
.faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--jb); color: var(--accent); }
.faq details[open] summary::after { content: '–'; }
.faq details > *:not(summary) { padding-bottom: 4px; }

/* ── Forms ──────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--panel-deep); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field textarea { min-height: 160px; resize: vertical; }
.form-status { font-size: 0.95rem; margin: 0; }
.form-status[data-state="error"] { color: var(--ds-error); }
.form-status[data-state="ok"] { color: var(--ds-ok); }

/* ── Blog ───────────────────────────────────────────── */
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.post-list li { border-bottom: 1px solid var(--line-soft); padding: 22px 0; }
.post-list li:first-child { border-top: 1px solid var(--line-soft); }
.post-list h3 { margin: 0 0 6px; font-size: 1.22rem; }
.post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h3 a:hover { color: var(--accent); text-decoration: underline; }
.post-list p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.post-meta { font-family: var(--jb); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── Legal ──────────────────────────────────────────── */
.legal { padding: 56px 0 80px; }
/* The legal column is `.legal-body` at a 76ch measure with no auto margins,
   sitting inside the site-wide 1120px `.wrap`. That left-pinned the whole
   agreement and left 369px of dead space down the right at 1280px, while the
   header, footer and every other page stayed centred — the same off-centre
   class of bug found on the PLLC site 2026-09-03. Fixed on the container so
   the agreement bodies stay verbatim: the wrap is narrowed to the measure
   plus its own gutters, and its existing `margin: 0 auto` centres the lot. */
.legal .wrap { max-width: calc(var(--narrow) + 48px); }
.legal-body { max-width: 100%; font-size: 1rem; overflow-wrap: anywhere; }
.legal-body h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-top: 2em; }
.legal-body h3 { font-size: 1.1rem; margin-top: 1.6em; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92rem; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-body th { background: var(--panel); }
.legal-scroll { overflow-x: auto; }
.legal-meta {
  font-family: var(--jb); font-size: 0.78rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 18px; margin: 0 0 32px; background: var(--panel);
}

/* ── Footer ─────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 48px 0 36px;
  font-size: 0.92rem;
}
.site-foot__cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-foot h2 { font-family: var(--jb); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 12px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.site-foot__base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.site-foot__base p { margin: 0 0 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =====================================================================
   MOTION LAYER SUPPORT (2026-09-03)
   Layout only. Nothing here animates and nothing here depends on JS: the
   motion layer at /ds/motion adds the movement, and every rule below
   describes the page exactly as it looks with JavaScript off or with
   prefers-reduced-motion set. Heights are reserved up front so no effect
   can cause layout shift.
   ===================================================================== */

/* Home hero: type column + the 3D scene slot. The slot is its own
   containing block (position: relative) so the canvas can fill it, and it
   owns its height through aspect-ratio before any script or image lands. */
.hero--scene .hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 64rem) {
  .hero--scene .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 56px;
  }
}
.hero__scene {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.hero__scene > img[data-scene-poster] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* No opacity override here. The 0.92 poster weight was tuned to sit the mark
   into the cream ground; on the near-black ground it only dims a stroke
   drawing that is already low-contrast, so the layer's own opacity: 1 default
   stands (see ASSUMPTIONS note 69, superseded 2026-09-03). */

/* The pinned "between sessions" sequence. min-height comes from motion.css
   only once motion is running; this keeps the band centred either way. */
.sequence { display: grid; align-items: center; }

/* Status ticker. Without the motion layer it is a plain horizontal list a
   visitor can scroll by hand; motion.css turns it into a seamless marquee. */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--panel);
  padding-block: 15px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker > ul {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter, 20px);
  white-space: nowrap;
}
.ticker li {
  font-family: var(--jb);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker li + li::before {
  content: "\00b7";
  color: var(--accent);
  margin-inline-end: 2rem;
}

/* =====================================================================
   INTERIOR HERO RULE — static, progressive.

   Road House uses a finished reading state on every route. Interior pages
   get no film, 3D object, ambient light field, scroll choreography, or
   typographic entrance. The optional attributes below remain harmless legacy
   hooks during conversion; the rule is fully drawn with JavaScript off and
   under every motion preference.
   ===================================================================== */

[data-hero-entrance] [data-hero-kicker] {
  position: relative;
  padding-top: 18px;
}

/* The accent rule. Resting state: drawn, full width, 1px. */
[data-hero-entrance] [data-hero-kicker]::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
}


/* The public shell stays directly navigable on compact screens. This removes
   the old visually-hidden-checkbox menu dependency without changing every
   inherited page's markup. */
@media (max-width: 900px) {
  .nav-toggle, .nav-toggle-check { display: none; }
  .site-nav { display: block; margin-left: 0; flex-basis: 100%; order: 4; overflow-x: auto; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 1.25rem; min-width: max-content; padding-bottom: 0.2rem; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
}

/* Converted-route header material ------------------------------------------------
   Keep the reconciled routes in the same dark-glass family as the approved home
   shell. This is deliberately scoped away from preserved historical articles. */
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.05), transparent 60%), rgba(8, 7, 11, 0.92);
  border-bottom-color: rgba(255, 245, 244, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
@supports (backdrop-filter: blur(1px)) {
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head { backdrop-filter: blur(18px); }
}
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head__inner { gap: clamp(0.75rem, 1.8vw, 1.25rem); }
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .brand {
  display: inline-flex;
  align-items: baseline;
  width: fit-content;
  font: 800 clamp(1.05rem, 1.55vw, 1.28rem)/0.85 var(--it);
  letter-spacing: -0.075em;
}
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .brand em {
  font-style: normal;
  text-shadow: 0 0 10px rgba(255, 48, 72, 0.55);
}
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav a {
  color: var(--muted);
  font: 600 0.92rem/1.1 var(--it);
}
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav a[aria-current="page"] { color: var(--ink); }
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head .btn--solid {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.7rem 1rem;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.01) 48%, rgba(255, 255, 255, 0.07)), rgba(14, 15, 16, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.18);
  font: 600 0.92rem/1.15 var(--it);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head .btn--solid:hover {
  color: var(--ink);
  border-color: rgba(255, 232, 233, 0.9);
  background-color: rgba(31, 30, 31, 0.95);
}

@media (max-width: 900px) {
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem 0.8rem;
    min-height: 70px;
    padding: 10px 16px 12px;
  }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .brand {
    min-width: 0;
    font-size: clamp(0.92rem, 4.2vw, 1.05rem);
  }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head__inner > .btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    order: initial;
    padding: 0.58rem 0.7rem;
    font-size: clamp(0.78rem, 3.3vw, 0.88rem);
  }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    overflow: visible;
    flex-basis: auto;
    order: initial;
  }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: 0.45rem 0 0;
  }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav li { min-width: 0; }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 37px;
    padding: 0.42rem 0.2rem;
    border-bottom: 2px solid transparent;
    font-size: 0.76rem;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 360px) {
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head__inner { padding-inline: 12px; }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-head__inner > .btn { padding-inline: 0.56rem; font-size: 0.76rem; }
  body:is([data-page="what_it_is"], [data-page="who_its_for"], [data-page="how_vibecheck_works"], [data-page="faq"], [data-page="contact"], [data-page="science"], [data-page="capacity"], [data-page="capacity_confirm"], [data-page="welcome"], [data-page="self_audit"], [data-page="not_found"], [data-page="legal"]) .site-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   VibeCheck material system, template adoption 2026-09-09.

   This is the single static satin owner for every packaged page family. It is
   CSS-first by design: the black field remains complete without JavaScript.
   The home-only native satin surface, when available, sits above this still
   fallback. Long-form pages retain a darker, quieter reading surface.
   -------------------------------------------------------------------------- */
body[data-page] {
  --vc-satin-base: #08090c;
  background-color: var(--vc-satin-base);
  background-image:
    linear-gradient(116deg, transparent 8%, rgba(237,240,246,.02) 24%, rgba(241,243,250,.075) 39%, rgba(221,229,240,.035) 51%, transparent 70%),
    radial-gradient(ellipse at 18% 0%, rgba(244,246,255,.03), transparent 58%),
    radial-gradient(ellipse at 100% 85%, rgba(230,235,242,.022), transparent 64%);
  background-repeat: no-repeat;
}

body[data-page] .site-head,
body[data-page] .site-foot,
body[data-page] .card,
body[data-page] .faq details,
body[data-page] .legal-meta {
  background-color: rgba(7,11,14,.84);
  background-image: linear-gradient(128deg, rgba(255,255,255,.07), transparent 52%, rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 18px 46px rgba(0,0,0,.2);
}
@supports (backdrop-filter: blur(1px)) {
  body[data-page] .site-head,
  body[data-page] .card,
  body[data-page] .faq details,
  body[data-page] .legal-meta { backdrop-filter: blur(14px) saturate(.78); }
}

/* Selected display headings are warm red neon over the neutral satin field.
   Ordinary prose, lists, cards, legal copy, and FAQ prompts remain plain. */
body[data-page] .vc-core .hero h1,
body[data-page] .vc-core .vc-human-gate h2,
body[data-page] .vc-core .section > .wrap > h2,
body[data-page] .vc-core .section .vc-section-title {
  color: #ff5263;
  text-shadow: 0 0 1px #fff4f3, 0 0 8px rgba(255,48,72,.78), 0 0 20px rgba(183,13,43,.35);
}
body[data-page] .vc-core .hero,
body[data-page] .vc-core .section--alt,
body[data-page] .vc-core .vc-scope-card,
body[data-page] .vc-core .vc-role-pane,
body[data-page] .vc-core .vc-contact__action {
  background-color: rgba(6,10,13,.78);
  background-image: linear-gradient(117deg, rgba(255,255,255,.045), transparent 42%, rgba(230,235,242,.018) 72%, transparent);
  border-color: rgba(255,255,255,.17);
}
body[data-page] .vc-core .vc-role-pane--cyan {
  background-image: linear-gradient(125deg, rgba(255,255,255,.065), transparent 48%, rgba(230,235,242,.018));
}
body[data-page] .vc-core .vc-contact__action a {
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.025) 46%, rgba(255,255,255,.1)), rgba(11,13,14,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.3);
}
body[data-page] .vc-core .vc-contact__action a:hover { background-color: rgba(255,255,255,.13); border-color: rgba(255,255,255,.96); }

/* The blog and legal reading measures stay less reflective than marketing
   surfaces, so the material never competes with long-form text. */
body[data-page] :is(.post, .post-body, .legal, .legal-body) {
  position: relative;
  z-index: 0;
}
body[data-page] :is(.post, .post-body, .legal-body)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem -1.5rem;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,9,11,.52), rgba(6,9,11,.86) 28%, rgba(6,9,11,.92) 50%, rgba(6,9,11,.86) 72%, rgba(6,9,11,.52));
}

/* The reading-field veil is intentionally wider than its measure on desktop.
   On the narrow legal measure that extra inline bleed became a real six-pixel
   document overflow at phone widths. Keep the calm surface, but contain its
   decorative edge so agreement text and its own horizontal table scroller do
   not make the viewport pan sideways. */
@media (max-width: 640px) {
  body[data-page] .legal-body::before { inset-inline: 0; }
}

@media (forced-colors: active) {
  body[data-page],
  body[data-page] :is(.site-head, .site-foot, .card, .faq details, .legal-meta, .vc-core .hero, .vc-core .section--alt, .vc-core .vc-scope-card, .vc-core .vc-role-pane, .vc-core .vc-contact__action) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
  body[data-page] :is(.post, .post-body, .legal-body)::before { display: none; }
  body[data-page] .vc-core :is(.hero h1, .vc-human-gate h2, .section > .wrap > h2, .section .vc-section-title) { color: CanvasText; text-shadow: none; }
}
@media print {
  body[data-page],
  body[data-page] :is(.site-head, .site-foot, .card, .faq details, .legal-meta, .vc-core .hero, .vc-core .section--alt, .vc-core .vc-scope-card, .vc-core .vc-role-pane, .vc-core .vc-contact__action) {
    background: #fff !important;
    color: #000;
    border-color: #000;
    box-shadow: none;
  }
  body[data-page] :is(.post, .post-body, .legal-body)::before { display: none; }
  body[data-page] .vc-core :is(.hero h1, .vc-human-gate h2, .section > .wrap > h2, .section .vc-section-title) { color: #000; text-shadow: none; }
}

/* Editorial pages carry one more primary link than the product shell. The
   prior compact fallback made that final link available only through a
   horizontal nav scroll. Match the direct, legible grid used by the core and
   legal shells instead; this stays presentation-only and preserves every
   existing route/link. */
@media (max-width: 900px) {
  body:is([data-page="article"], [data-page="blog_index"]) .site-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem 0.8rem;
    min-height: 70px;
    padding: 10px 16px 12px;
  }
  body:is([data-page="article"], [data-page="blog_index"]) .brand {
    min-width: 0;
    font-size: clamp(0.92rem, 4.2vw, 1.05rem);
  }
  body:is([data-page="article"], [data-page="blog_index"]) .site-head__inner > .btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    order: initial;
    padding: 0.58rem 0.7rem;
    font-size: clamp(0.78rem, 3.3vw, 0.88rem);
  }
  body:is([data-page="article"], [data-page="blog_index"]) .site-nav {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    overflow: visible;
    flex-basis: auto;
    order: initial;
  }
  body:is([data-page="article"], [data-page="blog_index"]) .site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: 0.45rem 0 0;
  }
  body:is([data-page="article"], [data-page="blog_index"]) .site-nav li { min-width: 0; }
  body:is([data-page="article"], [data-page="blog_index"]) .site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 37px;
    padding: 0.42rem 0.2rem;
    border-bottom: 2px solid transparent;
    font-size: 0.76rem;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 360px) {
  body:is([data-page="article"], [data-page="blog_index"]) .site-head__inner { padding-inline: 12px; }
  body:is([data-page="article"], [data-page="blog_index"]) .site-head__inner > .btn { padding-inline: 0.56rem; font-size: 0.76rem; }
  body:is([data-page="article"], [data-page="blog_index"]) .site-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Printer background settings are not reliable. Explicitly restore all shared
   header text and controls to dark ink so the navigation remains useful on a
   paper legal/article copy, independent of whether the browser prints its
   satin field. */
@media print {
  body[data-page] .site-head :is(.brand, .brand em, .site-nav a, .btn) {
    color: #000 !important;
    text-shadow: none;
  }
  body[data-page] .site-head .btn {
    background: #fff !important;
    border-color: #000 !important;
    box-shadow: none;
  }
}