/* surveyor.marketing additions on top of the shared site.css */
/* The three duo panels need more than the --col (42rem) reading measure to seat two character
   images per panel at a legible size, so this section alone widens to 64rem. .keys .vs-grid
   (site.css) already sets grid-template-columns at the same 2-class specificity; qualifying
   with .keys here (3 classes) wins the cascade unambiguously rather than relying on stylesheet
   load order. */
main > section.sm-how { padding: 2rem max(1.25rem, calc((100% - 64rem) / 2)); }
.keys .vs-grid.sm-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Only the panel grid needs the wide column; the section's own text stays in the reading measure. */
section.sm-how > h2, section.sm-how > p { max-width: 42rem; margin-left: auto; margin-right: auto; }
section.sm-how .keys { margin-bottom: 1.5rem; }
.sm-panel .sm-duo { display: grid; grid-template-columns: 1fr 1fr; align-items: end; background: #fff; }
.sm-panel .sm-duo img { width: 100%; height: auto; }
.sm-trend { border-collapse: collapse; margin: 1rem 0; font-size: 1.05rem; }
.sm-trend caption { text-align: left; font-weight: 700; margin-bottom: .3rem; }
.sm-trend th, .sm-trend td { border: 2px solid var(--ink); padding: .5rem 1rem; text-align: center; }
.sm-trend th { background: var(--wash); }
.sm-talk { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: end; }
.sm-eric { width: 100%; height: auto; }
@media (max-width: 720px) { .sm-talk { grid-template-columns: 1fr; } .sm-eric { max-width: 14rem; margin: 0 auto; } }