/* Build S48: the landing pages (the role pages, the industry pages, /ai-receptionist-cost and
   /missed-calls-calculator). They are the home page (index.html, body.page-home.page-landing) with their own
   sections in .page-sections (routes/pages.js). Loaded only on those pages, so the home page is unchanged.
   Takes over what css/role.css (retired) had for the table, the sources and the questions. */

.page-landing .page-eyebrow { margin-bottom: 12px; }
/* The role and industry h1s are longer than the home page's headline. */
.page-landing .hero-title { font-size: clamp(32px, 4.6vw, 60px); }
.page-landing .page-calc-hero { margin: 24px 0 8px; max-width: 960px; }

.page-landing .page-sec .h-section { margin-bottom: 24px; }
.page-landing .page-text { max-width: 720px; font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.page-landing .page-text a, .page-landing .role-roles a, .page-landing .role-sources a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page-landing .page-cta { margin: 24px 0 0; }
.page-landing .page-calc { margin-top: 8px; }

.page-landing .role-does { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; margin: 0; list-style: none; }
.page-landing .role-does li { padding: 16px 18px; border-radius: 12px; background: var(--paper, #fff); border: 1px solid rgba(18, 19, 21, .1); font-size: 16px; line-height: 1.5; }
.page-landing .role-does strong { display: block; margin-bottom: 4px; }

.page-landing .role-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-landing .role-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.page-landing .role-table th, .page-landing .role-table td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid rgba(18, 19, 21, .12); }
.page-landing .role-table thead th { font-family: var(--font-mono, monospace); font-size: 13px; }
.page-landing .role-table tr.is-ours { background: rgba(255, 91, 26, .08); }
.page-landing .role-sources { font-size: 13px; opacity: .85; margin: 12px 0 0; padding-left: 18px; }
.page-landing .role-sources li { margin: 4px 0; }

.page-landing .role-faq { margin: 0; max-width: 760px; }
.page-landing .role-faq dt { font-weight: 600; margin-top: 18px; font-size: 17px; }
.page-landing .role-faq dd { margin: 6px 0 0; font-size: 16px; line-height: 1.55; }
.page-landing .role-roles { font-size: 16px; line-height: 1.55; margin: 0 0 10px; max-width: 760px; }