/* The app page: real captures of Docuria on the same paper-and-light ground as the overview. */
.app-page {
  background:
    radial-gradient(60rem 40rem at 78% -10%, color-mix(in srgb, #fff 55%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at -10% 40%, color-mix(in srgb, #fff 25%, transparent), transparent 70%),
    var(--bg);
  min-height: 100vh;
}
:root[data-theme='dark'] .app-page {
  background:
    radial-gradient(56rem 40rem at 20% -6%, rgba(255, 214, 160, 0.10), transparent 70%),
    var(--bg);
}
.app-page .top { position: sticky; }

.wrap { width: min(78rem, 100% - 2 * var(--gut)); margin-inline: auto; }

.app-hero { padding: 5rem 0 4rem; text-align: center; }
.app-hero .lead { margin-inline: auto; max-width: 36rem; }
.app-icon { width: 5.5rem; height: 5.5rem; margin-bottom: 1.6rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)); }
.app-hero h1 { font-size: clamp(3rem, 6.4vw, 6.6rem); margin-bottom: 1.4rem; }
.app-hero h1 span { display: inline; }

.shot { margin: 0; position: relative; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(20, 24, 32, 0.22)) drop-shadow(0 4px 10px rgba(20, 24, 32, 0.12));
}
:root[data-theme='dark'] .shot img { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); }
.shot .d { display: none; }
:root[data-theme='dark'] .shot .l { display: none; }
:root[data-theme='dark'] .shot .d { display: block; }
.shot figcaption { margin-top: 1rem; font-size: 0.875rem; color: var(--faint); }
.hero-shot { margin-top: 3.5rem; }

.feat {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--rule);
}
.feat.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feat.flip .mode-text { order: 2; }
.feat.wide { grid-template-columns: 1fr; }
.feat.wide .mode-text { max-width: 44rem; }
.mode-name {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.mode-name::before { content: ''; width: 1.6rem; height: 0.55rem; border-radius: 0.15rem; background: var(--c); }
.feat h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }

.facts { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.facts li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  line-height: 1.5;
}
.facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 0.5rem;
  height: 2px;
  background: var(--c, var(--faint));
}
.facts.cols { columns: 2; column-gap: 3rem; }
.facts.cols li { break-inside: avoid; }

.formats { padding: 5rem 0 6rem; border-top: 1px solid var(--rule); }
.formats h2 { font-size: clamp(2rem, 3vw, 3rem); }

@media (max-width: 820px) {
  .app-hero { padding: 3rem 0 2rem; }
  .feat, .feat.flip { grid-template-columns: 1fr; }
  .feat.flip .mode-text { order: 0; }
  .facts.cols { columns: 1; }
  .top nav { display: none; }
  .app-page .top .btn.small { display: inline-flex; }
}