/* FotoDoc v82 Step 8 — landing-only visual refinements. */
.landing-hero-free{
  color:inherit;
  font-family:"Arial Black","Segoe UI Black","Helvetica Neue",system-ui,sans-serif;
  font-weight:950;
  font-stretch:expanded;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

/* Before and after occupy equal outer dimensions. */
.landing-demo-flow{
  grid-template-columns:minmax(210px,1fr) 58px minmax(210px,1fr);
}
.landing-photo-source,
.landing-photo-result{max-width:230px;}
.landing-photo-result .landing-photo-label{width:min(100%,230px);}

/* 10×15 cm paper; 4 photos of 4×6 cm occupy 8×12 cm centered on the sheet. */
.landing-print-sheet{
  position:relative;
  width:min(100%,230px);
  aspect-ratio:2 / 3;
  margin:0 auto;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 92%,transparent);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 30px rgba(16,24,40,.12);
}
.landing-print-grid{
  position:absolute;
  left:10%;top:10%;width:80%;height:80%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
}
.landing-print-photo{
  position:relative;
  overflow:hidden;
  aspect-ratio:2 / 3;
  background:#fff;
  border:.5px solid rgba(20,31,49,.12);
}
.landing-print-photo img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 24%;
}

/* Extra formats use the same button grid and reveal in-place. */
.landing-format-extra{animation:landingFormatReveal .24s var(--ease) both;}
@keyframes landingFormatReveal{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.landing-format-all > span:last-child{transition:transform .18s ease;}
.landing-format-all[aria-expanded="true"] > span:last-child{transform:rotate(90deg);}

@media(max-width:640px){
  .landing-demo-flow{grid-template-columns:94px 28px 94px;max-width:270px;}
  .landing-photo-source,.landing-photo-result,.landing-photo-frame,.landing-print-sheet{width:94px;max-width:94px;}
  .landing-photo-result .landing-photo-label{width:94px;}
  .landing-photo-result .landing-photo-label small{display:none;}
}
@media(max-width:360px){
  .landing-demo-flow{grid-template-columns:82px 24px 82px;max-width:236px;}
  .landing-photo-source,.landing-photo-result,.landing-photo-frame,.landing-print-sheet{width:82px;max-width:82px;}
  .landing-photo-result .landing-photo-label{width:82px;}
}