/* Industry detail pages (/industries/<slug>) and the city pages. The hub (/industries) uses industries.css.
   Layout follows the homepage: copy and the demo box on the left, a real product screenshot on
   the right, then the customer proof line. */

.page-hero { padding: 56px 0 48px; }
.ind-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.page-hero .display { font-size: clamp(36px, 3.9vw, 54px); max-width: 20ch; line-height: 1.06; }
.page-hero .lede { margin-top: 20px; }
.ind-hero-shot { margin: 0; }
.ind-hero-shot .shot img { display: block; width: 100%; height: auto; }
.ind-hero-shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) {
  .ind-hero { grid-template-columns: 1fr; gap: 36px; }
  .page-hero .display { max-width: none; }
}

/* A tall product card on a tinted stage, cropped to its most useful part (same as the homepage). */
.shot-stage { background: var(--accent-soft); border-radius: var(--radius-lg); padding: 32px 32px 0; display: flex; justify-content: center; overflow: hidden; }
.shot-portrait { max-width: 420px; width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.shot-portrait img { display: block; width: 100%; height: 440px; object-fit: cover; object-position: top; }
@media (max-width: 600px) { .shot-stage { padding: 20px 20px 0; } .shot-portrait img { height: 360px; } }

/* Customer proof line under the hero (same as the homepage). */
.proof-strip { padding: 0; }
.proof-strip-inner {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px 32px; align-items: center;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-top: 22px; padding-bottom: 22px;
}
.proof-strip-inner p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.proof-strip-inner strong { color: var(--ink); }
.proof-strip-link { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.proof-strip-link:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .proof-strip-inner { grid-template-columns: 1fr; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
}

/* Who it is for: a plain text grid, no boxes. */
.cards-section { padding: 80px 0 0; }
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 32px; }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ind-grid { grid-template-columns: 1fr; gap: 24px; } }
.ind-card { border-top: 1px solid var(--hair-2); padding-top: 18px; }
.ind-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.ind-card p { color: var(--ink-2); font-size: 15px; margin-top: 8px; line-height: 1.55; }
a.ind-card { display: block; text-decoration: none; }
a.ind-card h3::after { content: " \2192"; color: var(--accent); }
a.ind-card:hover h3 { color: var(--accent); }

.body-section { padding: 80px 0 0; }
.body-section p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; max-width: 68ch; }
.body-section p + p { margin-top: 14px; }
.body-section h2 + p, .body-section h2 + .body-copy { margin-top: 18px; }
.body-section h3 { margin-top: 40px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.body-section h3 + p { margin-top: 8px; }
.body-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.body-copy p + p { margin-top: 14px; }

/* FAQ: hairline list, same as /demo. */
.faq-section { padding: 80px 0 0; }
.faqs { margin-top: 24px; border-top: 1px solid var(--hair-2); }
.faq { border-bottom: 1px solid var(--hair-2); padding: 18px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 600; font-size: 17px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq[open] summary::after { content: "\2212"; }
.faq p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 70ch; }
.faq a { color: var(--accent); text-decoration: underline; }

/* Missed-call calculator (legal, home services, restaurants). */
.calc-section { padding: 80px 0 0; }
.calc-section .calc-intro { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.calc-section [data-missed-call-calculator] { margin-top: 24px; }

/* Links to city pages: a plain list, not a grid of identical cards. */
.city-links-section { padding: 80px 0 0; }
.city-links { list-style: none; padding: 0; margin: 20px 0 0; columns: 4 140px; column-gap: 32px; }
.city-links li { padding: 6px 0; break-inside: avoid; }
.city-links a { color: var(--ink-2); font-size: 15.5px; text-decoration: none; }
.city-links a:hover { color: var(--accent); text-decoration: underline; }
.city-links-all { margin-top: 14px; font-size: 15px; }
.city-links-all a { color: var(--accent); font-weight: 600; text-decoration: none; }
.city-links-all a:hover { text-decoration: underline; }

.cta-section { padding: 88px 0 0; }
.cta-block { background: var(--accent); color: #fff; border-radius: var(--radius-lg); padding: 56px; }
.cta-block h2 { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -0.022em; line-height: 1.1; max-width: 22ch; color: #fff; }
.cta-block p { color: rgba(255, 255, 255, 0.86); font-size: 17px; line-height: 1.6; margin-top: 14px; max-width: 54ch; }
.cta-block .row { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.cta-block .btn-primary { background: #fff; color: var(--accent); box-shadow: none; }
.cta-block .btn-primary:hover { background: #F1F6F3; }
.cta-block .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cta-block .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 600px) { .cta-block { padding: 36px 24px; } }

/* Three proof points, then the link (2026-09-28). The phone rule is repeated so it still wins. */
.proof-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
@media (max-width: 1100px) {
  .proof-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-strip-link { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .proof-strip-inner { grid-template-columns: 1fr; } }