/* Approved wide-screen correction: full-width bands, bounded reading and product surfaces. */
:root {
  --content-width: 1200px;
  --page-gutter: clamp(24px, 4vw, 64px);
  --content-inset: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
}
header {
  width: min(calc(100% - 64px), 1320px);
  margin-inline: auto;
}
.wrap, .bridge, .cta {
  padding-inline: var(--content-inset);
}
footer {
  padding-inline: max(32px, calc((100% - 1320px) / 2));
}
.photohero {
  width: min(calc(100% - 64px), 1440px);
  margin-inline: auto;
}
.app-capture {
  max-width: 1120px;
  margin-inline: auto;
}
.demo {
  max-width: 1120px;
  margin-inline: auto;
}
.product-heading {
  max-width: 1120px;
  margin-inline: auto;
}
.split, .reading, .start-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.tools-section img {
  width: 100%;
  max-width: 520px;
  justify-self: start;
}
@media (min-width: 701px) {
  .photohero { height: 600px; }
  .photohero .copy { left: 6%; top: 16%; max-width: 620px; }
  .photohero h1 { font-size: clamp(48px, 5vw, 72px); }
  .photohero > img { object-position: 65% top; }
  .product { padding-block: 80px; }
  .demo { grid-template-columns: 250px minmax(0, 1fr); }
  .tools-section .split { gap: 80px; }
  .reading { gap: 80px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  nav { gap: 18px; }
  header { width: calc(100% - 48px); }
  .photohero .copy { max-width: 530px; }
  .product-heading { align-items: start; gap: 32px; }
  .demo { grid-template-columns: 210px minmax(0, 1fr); }
  .demo-side { padding: 24px; }
  .demo-main { padding: 26px; }
}
@media (max-width: 700px) {
  :root { --page-gutter: 6%; }
  header { width: 90%; }
  .photohero { width: 94%; }
  .split, .reading, .start-section { grid-template-columns: minmax(0, 1fr); }
}

/* Free allowance is visible beside each primary action; usage beyond it is paid. */
.photohero .free-usage-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #eeede7;
  max-width: none;
}
.cta-action { flex-shrink: 0; }
.cta .free-usage-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #50594e;
}
@media (max-width: 700px) {
  .photohero .free-usage-note { font-size: 13px; max-width: 100%; }
  .cta-action { width: 100%; }
}
