/* Approved product-story composition. Shared landing styles own all primitives,
   typography and palette; these rules only arrange Dianjingtu's existing media. */
.dianjingtu-story-shell .landing-story-hero { min-height: 0; }
.dianjingtu-story-shell .landing-story-hero-atmosphere {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.dianjingtu-story-shell .landing-story-hero h1 {
  font-size: clamp(3.3rem, 8.5vw, 8rem);
}
.dianjingtu-story-shell .dianjingtu-examples-link {
  margin-top: 1.5rem; border-bottom: 1px solid currentColor;
  color: var(--landing-ink); font-size: 0.95rem; font-weight: 650;
}
.dianjingtu-story-shell .dianjingtu-proof {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--landing-surface);
}
.dianjingtu-proof figure { margin: 0; min-width: 0; }
.dianjingtu-proof figure + figure { border-left: 1px solid var(--landing-line); }
.dianjingtu-proof figcaption {
  padding: 1.2rem; color: var(--landing-ink); font-size: 0.95rem; font-weight: 600;
}
.dianjingtu-story-shell .dianjingtu-style-media { aspect-ratio: 1; }
.dianjingtu-style-media img { display: block; width: 100%; height: auto; }
.dianjingtu-workflow ol { padding-left: 0; list-style: none; counter-reset: steps; }
.dianjingtu-workflow li {
  counter-increment: steps; min-height: 11rem; padding: 2.2rem 0;
  border-bottom: 1px solid var(--landing-line);
}
.dianjingtu-workflow li + li { margin-top: 0; }
.dianjingtu-workflow li::before {
  content: counter(steps, decimal-leading-zero); display: block; margin-bottom: 1.35rem;
  color: var(--landing-muted); font-size: 0.78rem; font-weight: 700;
}
.dianjingtu-story-shell .landing-story-intro > .landing-story-eyebrow {
  margin: 0 0 1.35rem; font-size: 0.78rem;
}
.dianjingtu-story-shell a:focus-visible,
.dianjingtu-story-shell button:focus-visible {
  outline: 2px solid var(--color-focus-ring); outline-offset: 4px;
}
.dianjingtu-skip {
  position: absolute; z-index: 30; top: 1rem; left: 1rem; transform: translateY(-200%);
  padding: 0.75rem 1.5rem; background: var(--landing-surface); color: var(--landing-ink);
}
.dianjingtu-skip:focus { transform: translateY(0); }
@media (max-width: 900px) {
  .dianjingtu-story-shell .landing-story-header nav { display: none; }
}
@media (max-width: 560px) {
  .dianjingtu-story-shell .dianjingtu-proof { grid-template-columns: 1fr; }
  .dianjingtu-proof figure + figure { border-left: 0; border-top: 1px solid var(--landing-line); }
}
@media (prefers-reduced-motion: reduce) {
  .dianjingtu-story-shell .landing-story-primary-cta { transition: none; transform: none; }
}