/* zatila.com landing pages (/features/*, /for/*, and the restaurant cards on /features), on top of site.css: the
   breadcrumbs (also on every other subpage), the short answer with its facts, the how-it-works steps and the
   related-page cards. */
.w-crumbs { margin-bottom: 1.5rem }
.w-crumbs ol { display: flex; padding: 0; list-style: none; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem; font: 500 0.875rem/1.25rem var(--font-sans); color: var(--text-3) }
.w-page-hero:not(.w-page-hero--center) .w-crumbs ol { justify-content: flex-start }
.w-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem }
.w-crumbs li + li::before { content: "/"; opacity: 0.6 }
.w-crumbs a { display: inline-block; padding-block: 0.375rem; color: var(--text-2); text-decoration: none }
.w-crumbs a[aria-current="page"] { color: var(--text) }
@media (hover: hover) { .w-crumbs a:hover { color: var(--text); text-decoration: underline } }
.w-display--page { font-size: clamp(2.25rem, 5.4vw, 4.25rem); line-height: 1.04 }
.w-answer { display: grid; gap: 2rem; align-items: start }
@media (min-width: 64rem) { .w-answer { grid-template-columns: 7fr 5fr; gap: 5rem } }
.w-answer__text { margin-top: 1rem; max-width: 44rem; font: 400 clamp(1.125rem, 1.4vw, 1.25rem)/1.6 var(--font-sans); color: var(--text-2); text-wrap: pretty }
.w-facts { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--w-shadow-card) }
.w-facts div { padding: 1rem 1.25rem }
.w-facts div + div { border-top: 1px solid var(--line) }
.w-facts dt { font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow) }
.w-facts dd { margin-top: 0.25rem; font-weight: 500; line-height: 1.45; color: var(--text) }
.w-howto { display: grid; gap: 1rem }
@media (min-width: 48rem) { .w-howto { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 64rem) { .w-howto { grid-template-columns: repeat(4, 1fr) } }
.w-howto__step { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--w-shadow-card) }
.w-howto__step h3 { margin-top: 1.25rem; font: 700 1.1875rem/1.3 var(--font-sans) }
.w-howto__step p { margin-top: 0.5rem; color: var(--text-2); font-size: 1rem; line-height: 1.55 }
.w-related a.w-card { display: flex; flex-direction: column; height: 100% }
.w-related .w-card h3 { margin-top: 0 }
.w-related .w-link { margin-top: auto; padding-top: 1.25rem }
.w-phone--solo { width: min(17rem, 62%); margin-inline: auto }
/* The /for/ pages: six problem cards in rows of three, the feature cards after the rows, and the targets table. */
@media (min-width: 64rem) { .w-cards--3 { grid-template-columns: repeat(3, 1fr) } }
.w-row + .w-cards { margin-top: clamp(4rem, 9vw, 7rem) }
.w-table--text td { font-family: inherit; color: var(--text-2) }
.w-table--text thead th { font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow) }
.w-table--text tbody th { font-weight: 600 }
@media (min-width: 48rem) { .w-table--text tbody th { width: 32% } }
@media (max-width: 47.99rem) {
  .w-table--text thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .w-table--text tr, .w-table--text th, .w-table--text td { display: block; width: auto; border: 0; padding-block: 0.25rem }
  .w-table--text tbody tr { padding-block: 0.75rem; border-top: 1px solid var(--line) }
  .w-table--text td::before { display: block; font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow); content: "Target" }
  .w-table--text td + td::before { content: "If it's out of range" }
}