/* Core VibeCheck product routes, Road House local candidate.
   Loaded only by the hand-authored product and contact surfaces. */

.vc-core { overflow: clip; }
.vc-core .hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line); background: linear-gradient(125deg, var(--ground), #101216 72%, var(--ground));
}
.vc-core .hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: min(76%, 920px);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px; opacity: 0.45; mask-image: linear-gradient(90deg, #000, transparent 100%);
}
.vc-core .hero::after {
  content: ""; position: absolute; z-index: -1; inset: auto -8rem -13rem auto; width: 42rem; aspect-ratio: 1;
  border: 1px solid rgba(244, 246, 250, 0.16); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(230, 235, 242, 0.025), 0 0 0 10rem rgba(230, 235, 242, 0.014);
}
.vc-core .hero .wrap { position: relative; }
.vc-core .hero .eyebrow, .vc-core-label {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.45rem;
  color: var(--muted); font: 500 0.75rem/1.2 var(--jb); letter-spacing: 0.16em; text-transform: uppercase;
}
.vc-core .hero .eyebrow::before, .vc-core-label::before { content: ""; width: 0.48rem; height: 0.48rem; background: var(--accent); box-shadow: 0 0 0.75rem var(--accent); }
.vc-core .hero h1 { max-width: 10.5ch; font-size: clamp(3.3rem, 7.2vw, 8.3rem); line-height: 0.82; letter-spacing: -0.08em; }
.vc-core .hero .lede { max-width: 48rem; margin: 2rem 0 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.8vw, 1.34rem); line-height: 1.45; }
.vc-core .hero .hero__actions { margin-top: 2.1rem; }

.vc-core .section { padding-block: clamp(4.75rem, 9vw, 9rem); }
.vc-core .section--alt { background: var(--panel); border-block: 1px solid var(--line-soft); }
.vc-core .section > .wrap > h2, .vc-core .section .vc-section-title { max-width: 13ch; font-size: clamp(2.35rem, 5.3vw, 5.6rem); line-height: 0.86; letter-spacing: -0.07em; }
.vc-core .section > .wrap > h2 + p, .vc-core .section .vc-section-intro { max-width: 46rem; color: var(--ink-2); font-size: 1.06rem; line-height: 1.55; }
.vc-core .vc-scope-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 6vw, 5.5rem); background: var(--line); }
.vc-core .vc-scope-card { min-height: 250px; padding: clamp(1.4rem, 3vw, 2.75rem); background: var(--ground); }
.vc-core .vc-scope-card:nth-child(1) { grid-column: span 7; }
.vc-core .vc-scope-card:nth-child(2) { grid-column: span 5; background: var(--panel-deep); }
.vc-core .vc-scope-card:nth-child(3) { grid-column: span 5; background: var(--panel); }
.vc-core .vc-scope-card:nth-child(4) { grid-column: span 7; }
.vc-core .vc-scope-card__number { margin: 0 0 3rem; color: var(--accent); font: 500 0.75rem/1 var(--jb); letter-spacing: 0.14em; }
.vc-core .vc-scope-card h3 { max-width: 15ch; margin: 0; font-size: clamp(1.6rem, 3vw, 3.2rem); line-height: 0.9; letter-spacing: -0.065em; }
.vc-core .vc-scope-card p:last-child { max-width: 32rem; margin: 1.45rem 0 0; color: var(--ink-2); }
.vc-core .vc-status-rail { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1px; padding: 1.2rem 0.15rem; color: var(--muted); font: 500 0.75rem/1.35 var(--jb); letter-spacing: 0.1em; text-transform: uppercase; }
.vc-core .vc-status-rail i { height: 1px; background: linear-gradient(90deg, var(--accent), var(--line)); }

.vc-core .vc-human-gate { display: grid; grid-template-columns: minmax(10rem, 0.5fr) 1.5fr; gap: clamp(2rem, 9vw, 10rem); padding: clamp(4rem, 8vw, 8rem) 0; }
.vc-core .vc-human-gate h2 { max-width: 10ch; color: var(--accent); font-size: clamp(3rem, 7vw, 7.6rem); line-height: 0.82; letter-spacing: -0.08em; }
.vc-core .vc-human-gate p { max-width: 42rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.5; }
.vc-core .vc-human-gate .vc-core-label { margin-top: 0.6rem; }

.vc-core .vc-roles { display: grid; grid-template-columns: 5fr 7fr; gap: 1px; margin-top: 3rem; background: var(--line); }
.vc-core .vc-role-pane { min-height: 330px; padding: clamp(1.5rem, 4vw, 4rem); background: var(--ground); }
.vc-core .vc-role-pane--cyan { background: linear-gradient(135deg, #17181d, var(--panel-deep)); }
.vc-core .vc-role-pane h2 { max-width: 13ch; font-size: clamp(2.1rem, 4.4vw, 4.8rem); line-height: 0.86; letter-spacing: -0.075em; }
.vc-core .vc-role-pane p:last-child { max-width: 31rem; margin-bottom: 0; color: var(--ink-2); }

.vc-core .vc-sequence { max-width: 950px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.vc-core .vc-sequence li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.3rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.vc-core .vc-sequence .vc-step-no { color: var(--accent); font: 500 0.75rem/1.5 var(--jb); letter-spacing: 0.12em; }
.vc-core .vc-sequence h3 { margin: 0; font-size: clamp(1.55rem, 3vw, 3rem); line-height: 0.92; letter-spacing: -0.06em; }
.vc-core .vc-sequence p { max-width: 41rem; margin: 0.75rem 0 0; color: var(--ink-2); }

.vc-core .vc-faq { max-width: 900px; margin-top: 3rem; border-top: 1px solid var(--line); }
.vc-core .vc-faq details { border-bottom: 1px solid var(--line); padding: 0; background: transparent; border-radius: 0; }
.vc-core .vc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; color: var(--ink); font: 700 clamp(1.2rem, 2.5vw, 2rem)/1.02 var(--it); letter-spacing: -0.045em; }
.vc-core .vc-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent); font: 400 1.4rem/1 var(--jb); }
.vc-core .vc-faq details[open] summary::after { content: "−"; }
.vc-core .vc-faq details p { max-width: 48rem; padding-bottom: 1.5rem; color: var(--ink-2); }

.vc-core .vc-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; }
.vc-core .vc-contact h1 { max-width: 9ch; font-size: clamp(3.3rem, 7.2vw, 8.1rem); line-height: 0.82; letter-spacing: -0.08em; }
.vc-core .vc-contact p { max-width: 36rem; color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; }
.vc-core .vc-contact__action { padding: clamp(1.4rem, 3vw, 2.7rem); border: 1px solid var(--line); background: var(--panel-deep); }
.vc-core .vc-contact__action a { display: inline-flex; width: 100%; justify-content: space-between; align-items: center; min-height: 54px; padding: 0.8rem 1rem; background: var(--accent); color: var(--on-accent); font: 500 0.75rem/1 var(--jb); letter-spacing: 0.06em; text-decoration: none; }
.vc-core .vc-contact__action small { display: block; margin-top: 1rem; color: var(--muted); font: 500 0.75rem/1.55 var(--jb); }

@media (max-width: 720px) {
  .vc-core .hero { padding-block: 4.5rem 4rem; }
  .vc-core .hero h1 { font-size: clamp(3rem, 13vw, 5.2rem); }
  .vc-core .vc-scope-card:nth-child(n), .vc-core .vc-role-pane, .vc-core .vc-human-gate, .vc-core .vc-contact { grid-column: auto; }
  .vc-core .vc-scope-grid, .vc-core .vc-roles, .vc-core .vc-human-gate, .vc-core .vc-contact { grid-template-columns: 1fr; }
  .vc-core .vc-scope-card { min-height: 0; }
  .vc-core .vc-scope-card__number { margin-bottom: 1.8rem; }
  .vc-core .vc-human-gate { gap: 1.7rem; }
  .vc-core .vc-sequence li { grid-template-columns: 3.5rem 1fr; }
}

@media (forced-colors: active) {
  .vc-core .hero, .vc-core .section, .vc-core .vc-scope-card, .vc-core .vc-role-pane, .vc-core .vc-contact__action { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .vc-core .hero::before, .vc-core .hero::after { display: none; }
  .vc-core .hero .eyebrow::before, .vc-core-label::before { background: CanvasText; box-shadow: none; }
}

@media print {
  .vc-core .hero, .vc-core .section, .vc-core .vc-scope-card, .vc-core .vc-role-pane, .vc-core .vc-contact__action { background: #fff; color: #000; border-color: #000; }
  .vc-core .hero::before, .vc-core .hero::after { display: none; }
  .vc-core .hero h1, .vc-core h2, .vc-core h3 { color: #000; }
}