/* /features: one page per app calculator (seo/features/build.py) and the index.
   Quiet Light: screens sit on the page without frames or shadows; questions are hairline rows, not boxes. */

/* Real app screens, three across on wide screens; on phones one row that swipes sideways, the next screen peeking in */
.prose .feature-shots {
  list-style: none; padding: 0; margin: 4px 0 8px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.prose .feature-shots li { margin: 0; min-width: 0; }
.prose .feature-shots a { display: block; border-radius: 12px; text-decoration: none; }
.feature-shots img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--divider); background: var(--bg);
}
.feature-shots a:hover img, .feature-shots a:focus-visible img { border-color: var(--amber); }
.prose .feature-shot-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-sec); }
@media (max-width: 640px) {
  .prose .feature-shots {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    margin: 4px -24px 8px; padding: 0 24px 10px; scroll-padding-left: 24px;
  }
  .prose .feature-shots li { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Questions: plain rows split by hairlines */
.prose .faq-list h3 {
  font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--white);
  margin: 0; padding-top: 18px; border-top: 1px solid var(--divider);
}
.prose .faq-list h3:first-child { border-top: 0; padding-top: 4px; }
.prose .faq-list p { margin: 8px 0 18px; }

.prose .related-note { color: var(--text-sec); }
.prose .feature-cta-text { margin-bottom: 4px; }

/* Index: the calculators as rows of icon + name + one line, two across on wide screens */
.prose .calc-rows {
  list-style: none; padding: 0; margin: 16px 0 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
}
.prose .calc-rows li { margin: 0; border-top: 1px solid var(--divider); }
.prose .calc-row a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 0; text-decoration: none; color: inherit;
}
.calc-row-icon { width: 44px; height: 44px; }
.calc-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-row-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--white); }
.calc-row a:hover .calc-row-title, .calc-row a:focus-visible .calc-row-title { color: var(--amber); }
.calc-row-desc { font-size: 14px; line-height: 1.5; color: var(--text-sec); }
.calc-tier { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--text-sec); }
@media (max-width: 640px) { .prose .calc-rows { grid-template-columns: 1fr; } }