/* One visual language, with a composition chosen for each feature. */
.landing-page .feature {
  --feature-gutter: max(6%, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr);
  grid-template-areas: "copy media";
  gap: clamp(36px, 5vw, 80px);
  min-height: 0;
  padding: 104px var(--feature-gutter);
  border-bottom: 0;
}
.landing-page .feature-copy { grid-area: copy; }
.landing-page .feature-media {
  grid-area: media;
  padding: clamp(20px, 2.2vw, 34px);
  margin: 0;
}
.landing-page .feature-media::before { inset: 0; border-radius: 24px; }
.landing-page .feature .image-button { box-shadow: 0 16px 35px -25px #33415555; }
.landing-page .feature .image-button img { height: auto; object-fit: contain; }
.landing-page .feature h2 { font-size: clamp(52px, 5.2vw, 80px); }
.landing-page .feature .lede { font-size: 19px; line-height: 1.6; }

/* Two broad chapters give the largest demonstrations room to breathe. */
.landing-page :is(.feature-screens, .feature-audit) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "media";
  justify-items: center;
  gap: 54px;
  background: var(--media);
  text-align: center;
}
.landing-page :is(.feature-screens, .feature-audit) .feature-copy { width: 100%; max-width: 1000px; }
.landing-page :is(.feature-screens, .feature-audit, .feature-fields) .eyebrow { justify-content: center; }
.landing-page :is(.feature-screens, .feature-audit, .feature-fields) .text-reveal-ink { transform-origin: center; }
.landing-page :is(.feature-screens, .feature-audit, .feature-fields) .lede { max-width: 680px; margin: 25px auto 0; }
.landing-page :is(.feature-screens, .feature-audit) .note { max-width: 700px; margin: 17px auto 0; }
.landing-page :is(.feature-screens, .feature-audit) .feature-media { width: 100%; padding: 0; }
.landing-page :is(.feature-screens, .feature-audit) .feature-media::before { display: none; }
.landing-page .feature-screens .feature-media { max-width: 1000px; }
.landing-page .feature-screens .device-stage { max-width: 1000px; }
.landing-page .feature-audit .feature-media { max-width: 1200px; }
.landing-page .feature-audit .standards { border: 0; padding-top: 0; }

/* Image-first compositions balance the copy-first certificate section. */
.landing-page :is(.feature-labels, .feature-import) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .78fr);
  grid-template-areas: "media copy";
}
.landing-page .feature-labels h2 { font-size: clamp(48px, 4.6vw, 68px); }
.landing-page .feature-labels .lede { font-size: 17px; }
.landing-page .feature-import h2 { max-width: none; }
.landing-page .feature-import .import-summary { margin-top: 24px; }
.landing-page .feature-import .import-summary .image-button { padding: 12px; min-height: 48px; }
.landing-page .feature-import .import-summary .expand-hint { opacity: 1; }

/* A quieter, more focused feature between the larger demonstrations. */
.landing-page .feature-fields {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "media";
  justify-items: center;
  gap: 38px;
  padding-block: 80px;
  text-align: center;
}
.landing-page .feature-fields .feature-copy { width: 100%; max-width: 900px; }
.landing-page .feature-fields h2 { font-size: clamp(48px, 4.8vw, 68px); }
.landing-page .feature-fields .feature-media { width: 100%; max-width: 820px; }

/* A contained pricing panel on the same open background as the split sections. */
.landing-page .pricing-section {
  background: var(--bg);
  padding: 104px max(6%, calc((100vw - 1440px) / 2));
  border-bottom: 0;
}
.landing-page .price-panel { border-radius: 24px; padding: 28px; }

@media (max-width: 1100px) and (min-width: 801px) {
  .landing-page .feature { --feature-gutter: 4%; gap: 36px; padding-block: 80px; }
  .landing-page .feature h2 { font-size: 56px; }
  .landing-page .feature-labels h2 { font-size: 48px; }
  .landing-page .feature .lede { font-size: 17px; }
  .landing-page .feature-labels .lede { font-size: 16px; }
  .landing-page .feature-fields .feature-media { max-width: 740px; }
}

@media (max-width: 800px) {
  .landing-page .feature {
    --feature-gutter: 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "media";
    gap: 34px;
    padding-block: 64px;
  }
  .landing-page .feature-media { width: 100%; padding: 18px; margin: 0; }
  .landing-page .feature-media::before { inset: 0; border-radius: 20px; }
  .landing-page .feature h2 { font-size: clamp(48px, 7vw, 64px); }
  .landing-page .feature-labels h2 { font-size: clamp(46px, 6.8vw, 60px); }
  .landing-page .feature .lede { font-size: 18px; }
  .landing-page .feature .eyebrow { margin-bottom: 24px; }
  .landing-page :is(.feature-screens, .feature-audit) { gap: 38px; }
  .landing-page :is(.feature-screens, .feature-audit) .feature-media { padding: 0; }
  .landing-page .feature-screens .device-stage { max-width: 600px; }
  .landing-page .feature-fields { gap: 30px; padding-block: 60px; }
  .landing-page .feature-fields .feature-media { max-width: 650px; }
  .landing-page .feature-import h2 br { display: block; }
  .landing-page .feature-import .import-summary { margin-top: 20px; }
  .landing-page .pricing-section { padding: 64px 24px; }
  .landing-page .price-panel { border-radius: 20px; padding: 18px; }
}

@media (max-width: 430px) {
  .landing-page .feature { --feature-gutter: 22px; }
  .landing-page .feature-media { padding: 14px; }
  .landing-page .feature-media::before { border-radius: 18px; }
  .landing-page :is(.feature-screens, .feature-audit, .feature-fields) h2 { font-size: 46px; }
  .landing-page .feature-import h2 { font-size: 56px; }
  .landing-page .feature-import .import-summary .image-button { padding: 10px; }
  .landing-page .feature-import .import-summary .expand-hint { right: 8px; bottom: 8px; }
  .landing-page .price-panel { padding: 14px; }
}

/* Main-page readability refinement: a modest increase for the small labels. */
.landing-page[data-page="management"] .eyebrow {
  font-size: 12px;
  letter-spacing: .15em;
}
.landing-page[data-page="management"] .section-number {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 11px;
}
.landing-page[data-page="management"] .chapter-nav a { font-size: 12px; }
.landing-page[data-page="management"] .import-summary figcaption { font-size: 12px; }