/* Class B — every page except homepage. No WebGL, no backdrop-filter, no shimmer. */
/* padding-block, never the shorthand: these elements also carry .container, and
   a shorthand with 0 on the inline axis overrides the gutter it provides, since
   this file loads after base.css at equal specificity. That put every heading
   and paragraph flush against the screen edge on phones. */
.page-header { padding-block: var(--lv-space-6) var(--lv-space-5); }
.page-header h1 { max-width: 760px; }
.page-header .lede { max-width: 620px; font-size: 1.05rem; }
.page-header .eyebrow::before {
  content: '@LeviteAVC /';
  /* .eyebrow uppercases its text; the brand name is always cased LeviteAVC */
  text-transform: none;
  margin-right: 0.5em;
  color: var(--lv-muted);
  font-weight: 400;
}

.section { padding-block: var(--lv-space-6); }
.section-wash { background: var(--lv-deep); }
.section-wash-alt { background: linear-gradient(180deg, var(--lv-base), var(--lv-deep)); }

/* Phones get roughly half the vertical rhythm. 4rem top and bottom means 8rem
   between sections, which is most of a phone screen spent on nothing. Matches
   the treatment the homepage uses. */
@media (max-width: 900px) {
  .page-header { padding-block: var(--lv-space-5) var(--lv-space-4); }
  .section { padding-block: var(--lv-space-5); }
}

.baseline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lv-space-4);
  margin-bottom: var(--lv-space-3);
  flex-wrap: wrap;
}
.baseline-glyph { width: 120px; height: 36px; flex-shrink: 0; }

.panel {
  background: linear-gradient(175deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lv-radius-md);
  padding: var(--lv-space-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
a.panel {
  transition: border-color var(--lv-duration-base) var(--lv-ease), transform var(--lv-duration-base) var(--lv-ease);
}
a.panel:hover, a.panel:focus-visible {
  border-color: var(--lv-accent);
  transform: translateY(-3px);
}

/* .two-col moved to base.css for the same reason as .routing-links: the shared
   footer uses it, and this file does not load on the homepage. */

.deliverables-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lv-space-2); }
.deliverables-list li {
  padding: var(--lv-space-3);
  border: 1px solid var(--lv-hairline);
  border-radius: var(--lv-radius-sm);
  color: var(--lv-secondary);
}
.deliverables-list li::before { content: '— '; color: var(--lv-accent); font-family: var(--lv-font-mono); }

.compliance-block {
  border-left: 3px solid var(--lv-accent);
  padding: var(--lv-space-3) var(--lv-space-4);
  background: var(--lv-glass-strong);
  border-radius: 0 var(--lv-radius-sm) var(--lv-radius-sm) 0;
}

.price-band { font-family: var(--lv-font-mono); font-size: 1.1rem; color: var(--lv-accent); }

.faq-item { border-bottom: 1px solid var(--lv-hairline); padding: var(--lv-space-3) 0; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: var(--lv-space-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--lv-accent); font-family: var(--lv-font-mono); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin-top: var(--lv-space-2); }

.wa-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--lv-space-2);
  background: var(--lv-accent);
  color: var(--lv-deep);
  padding: 0.9rem 1.6rem;
  border-radius: var(--lv-radius-sm);
  font-weight: 700;
}

/* .routing-links moved to base.css: the footer uses it and the footer is shared
   by every page, but this file only loads on Class B. */