/* Photo-to-book follows create-picture-book.css: compact hero, paper bands, readable proof.
   Keep this opt-in skin isolated from the other Make pages and their artwork proportions. */
.rk-mk--photo-book {
  --photo-section-gap: clamp(48px, 5vw, 76px);
  --sec-pad: var(--photo-section-gap);
}
/* Hero = the /create/picture-book hero, one-to-one (Kim 2026-09-07): uppercase kicker, the same
   headline and lede sizes, the one-sentence composer with idea chips and the trust line, and a
   product visual that takes the larger column and starts at the top of the band. Values are the
   ones create-picture-book.css uses for .pb-hero / .pb-kicker / .lp-pb h1 / .pb-lede. */
.rk-mk--photo-book .rk-sb-breadcrumb { margin-bottom: 0; }
.rk-mk--photo-book .rk-mk-hero--split {
  grid-template-columns: minmax(300px, .9fr) minmax(460px, 1.1fr);
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  min-height: 58svh;
  padding-block: clamp(14px, 2vh, 28px) clamp(20px, 2.5vh, 28px);
}
.rk-mk--photo-book .rk-mk-hero-copy { max-width: 640px; min-width: 0; }
.rk-mk--photo-book .rk-mk-hero .lp-kicker {
  margin-bottom: 0;
  font: 700 12.5px var(--rk-font-body);
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.rk-mk--photo-book .rk-mk-hero h1 {
  max-width: 20ch;
  margin-top: 14px;
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.rk-mk--photo-book .rk-mk-answer {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--rk-ink-soft);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.6;
}
/* The composer replaces the button row: same control, same placement as .pb-hero .composer. The
   "See real pages" jump link has no counterpart in the picture-book hero and would dangle under the
   trust line, so it is not shown here; the proof section is the very next band anyway. */
.rk-mk--photo-book .rk-mk-hero-actions { display: block; margin-top: clamp(20px, 2.6vh, 34px); }
.rk-mk--photo-book .rk-mk-hero-actions .rk-mk-readbook { display: none; }
.rk-mk--photo-book .rk-mk-hero-composer { width: 100%; max-width: none; margin-inline: 0; }
.rk-mk--photo-book .rk-mk-hero-composer .composer { max-width: 620px; }
.rk-mk--photo-book .rk-mk-hero-composer .composer { min-height: 64px; padding: 6px 6px 6px 16px; border-radius: var(--rk-radius-lg, 18px); }
.rk-mk--photo-book .rk-mk-hero-composer .composer input { font-size: 16.5px; }
.rk-mk--photo-book .rk-mk-hero-composer .composer button { flex: 0 0 184px; width: 184px; height: 52px; padding: 0 18px; border-radius: 14px; font-size: 15.5px; }
.rk-mk--photo-book .rk-mk-hero-try { margin-top: clamp(14px, 2vh, 24px); justify-content: flex-start; gap: 12px; }
.rk-mk--photo-book .rk-mk-hero-try > span { font: 600 14px var(--rk-font-body); color: var(--rk-ink-muted); }
.rk-mk--photo-book .rk-mk-hero-composer .chips { justify-content: flex-start; gap: 8px; }
.rk-mk--photo-book .rk-mk-hero-composer .idea-chip { font-size: 13.5px; padding: 6px 14px; }
.rk-mk--photo-book .trust {
  display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center;
  margin-top: 16px; color: var(--rk-ink-soft); font: 600 13.5px var(--rk-font-body);
}
.rk-mk--photo-book .trust span { display: flex; align-items: center; gap: 7px; }
.rk-mk--photo-book .trust span + span { border-left: 1px solid var(--rk-line); padding-left: 20px; }
.rk-mk--photo-book .trust svg { width: 16px; height: 16px; stroke: var(--rk-emerald); fill: none; flex: none; }
/* Visual column: ONE composed scene (photo print → character print → the open book she stars in,
   with handwritten labels), exactly the way /create/picture-book carries its hero-scene. The scene
   arrives with a transparent background and its own painted shadows, so — like .pb-hero-scene — no
   frame, no radius, no rotation and no CSS shadow around it: a box around it would read as a
   rectangle behind the objects. Height is viewport-keyed (same 64svh cap as the picture-book
   scene) so a short laptop screen still sees the fold. */
.rk-mk--photo-book .rk-mk-hero-media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  padding: 0;
}
.rk-mk--photo-book .rk-mk-hero-shot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 64svh;
  margin: 0;
  object-fit: contain;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.rk-mk--photo-book .rk-mk-hero-accent { display: none; }
.rk-mk--photo-book > section > h2 {
  margin: 0 0 28px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-align: center;
}
.rk-mk--photo-book .rk-mk-gallery-sec {
  padding-top: 36px;
  border-top: 1px solid var(--rk-line);
  scroll-margin-top: 96px;
}
/* Upload gallery only. The style grid (--variants) keeps its own 4→3→2 ladder from lp.css: eight
   square tiles in three columns leave a two-tile orphan row, and a comparison grid must never
   collapse to one column. */
.rk-mk--photo-book .rk-mk-gallery:not(.rk-mk-gallery--variants) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.rk-mk--photo-book .rk-mk-shot {
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  box-shadow: none;
}
.rk-mk--photo-book .rk-mk-gallery:not(.rk-mk-gallery--variants) .rk-mk-shot img {
  width: 100%;
  height: clamp(250px, 26vw, 360px);
  object-fit: contain;
  border-radius: 10px;
  background: var(--rk-paper-2);
}
.rk-mk--photo-book .rk-mk-shot figcaption {
  padding: 18px 10px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rk-ink-soft);
}
.rk-mk--photo-book .rk-mk-gallery-note { font-size: 14px; }
/* Keep the style comparison on the same paper and content rails as the proof cases. */
.rk-mk--photo-book .rk-mk-gallery-sec:has(> .rk-mk-gallery--variants) {
  border-top: 0; padding-top: 20px;
}
.rk-mk--photo-book .rk-mk-gallery-sec:has(> .rk-mk-gallery--variants) > h2,
.rk-mk--photo-book .rk-mk-samplebooks > h2,
.rk-mk--photo-book .rk-mk-how > h2 {
  max-width: 1100px; margin: 0 auto 32px;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.03em;
}
.rk-mk--photo-book .rk-mk-gallery--variants {
  max-width: none; width: 100%; gap: 24px;
}
.rk-mk--photo-book .rk-mk-gallery--variants > .rk-mk-shot {
  min-width: 0; padding: 12px; border-radius: 22px;
  border-color: #f0e3d4; background: #fdf9f3;
  box-shadow: 0 8px 28px -22px rgba(43,42,38,.18);
}
.rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 14px;
}
.rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot figcaption {
  padding: 16px 6px 8px; font-size: 14px; line-height: 1.55;
}
.rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot figcaption strong {
  display: block; margin-bottom: 6px; color: var(--rk-ink);
  font: 800 18px/1.3 var(--rk-font-body);
}
.rk-mk--photo-book .rk-mk-gallery-sec:has(> .rk-mk-gallery--variants) > .rk-mk-gallery-note {
  max-width: 920px; margin: 20px auto 0; font-size: 13px; line-height: 1.6;
}
@media (max-width: 700px) {
  .rk-mk--photo-book .rk-mk-gallery--variants { gap: 14px; }
  .rk-mk--photo-book .rk-mk-gallery--variants > .rk-mk-shot { padding: 8px; border-radius: 16px; }
  .rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot img { border-radius: 10px; }
  .rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot figcaption { padding: 12px 2px 4px; font-size: 13px; }
  .rk-mk--photo-book .rk-mk-gallery--variants .rk-mk-shot figcaption strong { font-size: 15px; }
}
.rk-mk--photo-book .rk-mk-community-sub {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
}
.rk-mk--photo-book .rk-mk-samplebooks .rk-mk-community-sub a {
  display: table; margin: 12px auto 0;
}
.rk-mk--photo-book .rk-mk-shelf-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start; justify-items: center; gap: 24px;
  padding: 28px; border: 1px solid #f0e3d4; border-radius: 26px;
  background: #fdf9f3; box-shadow: 0 8px 28px -22px rgba(43,42,38,.18);
}
/* Preserve the physical book object while giving the shelf the same paper frame as the cases. */
.rk-mk--photo-book .rk-mk-shelfbook { width: 100%; max-width: 180px; }
.rk-mk--photo-book .rk-mk-shelfbook-title { font-size: clamp(12px, 1.1vw, 15px); }
.rk-mk--photo-book .rk-mk-how {
  padding: clamp(28px, 3.5vw, 52px);
  border: 1px solid #dce8de; border-radius: 26px;
  background: #fbfcf8; box-shadow: 0 8px 28px -22px rgba(43,42,38,.18);
}
.rk-mk--photo-book .rk-mk-steps {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.rk-mk--photo-book .rk-mk-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rk-mk--photo-book .rk-mk-step:hover,
.rk-mk--photo-book .rk-mk-decision-row:hover {
  transform: none;
  box-shadow: none;
}
.rk-mk--photo-book .rk-mk-step-n {
  flex-shrink: 0; width: 48px; height: 48px; margin: 0;
  background: var(--rk-emerald-soft); color: #075f46; font-size: 26px; font-weight: 800;
}
.rk-mk--photo-book .rk-mk-step > div { display: contents; }
.rk-mk--photo-book .rk-mk-step strong { align-self: center; margin: 0; font-size: 18px; }
.rk-mk--photo-book .rk-mk-step p { grid-column: 1 / -1; }
.rk-mk--photo-book .rk-mk-step p,
.rk-mk--photo-book .rk-mk-decision-row dd { font-size: 16px; line-height: 1.65; }
.rk-mk--photo-book .rk-mk-decision-grid { gap: 28px; }
.rk-mk--photo-book .rk-mk-decision-row,
.rk-mk--photo-book .rk-mk-decision-row:last-child {
  padding: 24px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rk-line);
  border-radius: 0;
}
.rk-mk--photo-book .rk-mk-decision-row dt { font-size: 18px; }
.rk-mk--photo-book .rk-mk-faq,
.rk-mk--photo-book .rk-mk-related { max-width: 880px; }
.rk-mk--photo-book .rk-mk-faq details { padding: 0 4px; }
.rk-mk--photo-book .rk-mk-faq summary { min-height: 48px; padding-block: 16px; font-size: 17px; }
.rk-mk--photo-book .rk-mk-faq details p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; }
.rk-mk--photo-book .rk-mk-related li { padding-block: 16px; font-size: 16px; line-height: 1.6; }
@media (max-width: 1000px) {
  .rk-mk--photo-book .rk-mk-shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rk-mk--photo-book .rk-mk-shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding: 20px; border-radius: 20px; }
  .rk-mk--photo-book .rk-mk-how { padding: 24px 20px; border-radius: 20px; }
  .rk-mk--photo-book .rk-mk-step-n { width: 40px; height: 40px; font-size: 23px; margin-bottom: 0; }
}
.rk-mk--photo-book a:focus-visible,
.rk-mk--photo-book summary:focus-visible {
  outline: 3px solid var(--rk-emerald);
  outline-offset: 4px;
}
/* The second module is a paired case study, not the generic six-card gallery.
   Source artwork is preserved; only the photo print receives a paper frame. */
@font-face {
  font-family: 'Photo Notes';
  src: url('/assets/lp/fonts/kalam/kalam-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.rk-mk--photo-book .photo-proof { padding-top: 44px; border-top: 0; }
.photo-proof-heading { max-width: 1100px; margin: 0 auto 32px; text-align: center; }
.photo-proof-kicker {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin: 0 0 12px; color: var(--rk-emerald-hover);
  font-size: 14px; line-height: 1.4; font-weight: 800; text-transform: uppercase; letter-spacing: .045em;
}
.photo-proof-kicker::before, .photo-proof-kicker::after { content: ''; width: 36px; height: 1px; background: currentColor; flex-shrink: 0; }
.photo-proof-heading h2 {
  margin: 0; color: var(--rk-ink); font-family: var(--rk-font-display);
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance;
}
.photo-proof-sub { max-width: 760px; margin: 12px auto 0; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5; color: var(--rk-ink-soft); }
.photo-proof-cases { display: grid; gap: 28px; }
.photo-proof-case {
  --case-tint: #e6f0e7;
  --case-line: #dce8de;
  --proof-stage-height: clamp(280px, 30vw, 380px);
  --proof-portrait-ratio: .6666667;
  padding: 24px 28px 28px; border: 1px solid var(--case-line); border-radius: 26px;
  background: #fbfcf8; box-shadow: 0 8px 28px -22px rgba(43,42,38,.18);
}
.photo-proof-case--peach { --case-tint: #f8e8d8; --case-line: #f0e3d4; --proof-portrait-ratio: .75; background: #fdf9f3; }
.photo-proof-case-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.photo-proof-identity { display: flex; align-items: center; gap: 18px; }
.photo-proof-identity h3 {
  margin: 0; padding: 2px 20px; border-radius: 12px;
  background: var(--case-tint); color: var(--rk-ink);
  font: 400 38px/1.25 'Photo Notes', var(--rk-font-body);
}
.photo-proof-identity > span { font-size: 16px; font-weight: 700; color: var(--rk-ink); }
.photo-proof-case-note { margin: 0; color: var(--rk-ink-soft); font: 400 19px/1.4 'Photo Notes', var(--rk-font-body); }
.photo-proof-steps {
  --proof-gap: 38px;
  --proof-arrow-size: 30px;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--proof-gap);
}
.photo-proof-step { position: relative; min-width: 0; margin: 0; }
.photo-proof-step-head { min-height: 64px; display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.photo-proof-number {
  display: grid; place-items: center; flex: 0 0 48px; height: 48px;
  border-radius: 50%; background: var(--rk-emerald-soft); color: #075f46; font-size: 26px; font-weight: 800; line-height: 1;
}
.photo-proof-step-head h4 { margin: 6px 0 4px; color: var(--rk-ink); font: 800 16px/1.3 var(--rk-font-body); }
.photo-proof-step-head p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--rk-ink-soft); }
.photo-proof-media { position: relative; height: var(--proof-stage-height); display: flex; align-items: center; justify-content: center; }
.photo-proof-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-proof-step--photo .photo-proof-media {
  margin: 10px 8px 0; padding: 12px 12px 22px; height: calc(var(--proof-stage-height) - 20px);
  border: 1px solid var(--rk-line); border-radius: 10px; background: var(--rk-surface);
  box-shadow: 0 10px 22px -12px rgba(43,42,38,.3); transform: rotate(-4deg);
}
.photo-proof-step--photo .photo-proof-art { object-fit: cover; object-position: center; }
.photo-proof-case--peach .photo-proof-step--photo .photo-proof-art { object-position: 48% center; }
.photo-proof-step--portrait .photo-proof-art { border-radius: 12px; }
.photo-proof-step--sheet .photo-proof-media {
  /* Match the source sheet's paper, so its rectangular edge disappears without recoloring art. */
  --sheet-paper: #f9f7f1;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; height: var(--proof-stage-height);
  border: 1px solid var(--case-line); border-radius: 20px;
  background: var(--sheet-paper); padding: 12px; gap: 10px;
}
.photo-proof-case--peach .photo-proof-step--sheet .photo-proof-media { --sheet-paper: #f8ede3; }
.photo-proof-step--sheet .photo-proof-art {
  width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain;
  border: 0; border-radius: 0; background: transparent;
}
.photo-proof-details { width: 100%; flex-shrink: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.photo-proof-detail { min-width: 0; text-align: center; }
.photo-proof-detail-crop { position: relative; display: block; width: 100%; max-width: 64px; margin-inline: auto; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: var(--sheet-paper); }
.photo-proof-detail-crop img { position: absolute; width: 400%; max-width: none; height: auto; }
/* Recenter Lily's subjects inside the fixed circles; percentages refer to the zoomed image. */
.photo-proof-case--sage .photo-proof-detail:nth-child(1) .photo-proof-detail-crop img { transform: translateX(-5%); }
.photo-proof-case--sage .photo-proof-detail:nth-child(2) .photo-proof-detail-crop img { transform: translateX(-2%); }
.photo-proof-case--sage .photo-proof-detail:nth-child(3) .photo-proof-detail-crop img { transform: translateX(-3%); }
.photo-proof-case--sage .photo-proof-detail:nth-child(4) .photo-proof-detail-crop img { transform: translateX(-4%); }
/* Olivia's back-view hair and cap need independent horizontal and vertical framing. */
.photo-proof-case--peach .photo-proof-detail:nth-child(2) .photo-proof-detail-crop img { transform: translateX(-4%); }
.photo-proof-case--peach .photo-proof-detail:nth-child(4) .photo-proof-detail-crop img { transform: translate(-4%, -5%); }
.photo-proof-detail small { display: block; margin-top: 5px; font-size: 12px; color: var(--rk-ink); }
.photo-proof-photo-note {
  position: absolute; inset-inline-start: -12px; bottom: -8px; max-width: 130px;
  padding: 14px 16px; border-radius: 4px; background: #fff4c9; color: var(--rk-ink);
  box-shadow: 0 5px 12px -8px rgba(43,42,38,.3); transform: rotate(-3deg);
  font: 400 18px/1.35 'Photo Notes', var(--rk-font-body);
}
.photo-proof-arrow { position: absolute; inset-inline-end: -35px; top: calc(50% + 25px); width: 30px; height: 30px; }
@media (min-width: 701px) {
  .photo-proof-steps { container-type: inline-size; }
  .photo-proof-arrow {
    /* Include object-fit's empty side gutters when centering between visible media. */
    --portrait-gutter: max(0px, calc(((100cqw - 2 * var(--proof-gap)) * .9 / 3.1 - var(--proof-stage-height) * var(--proof-portrait-ratio)) / 2));
    top: auto; bottom: calc((var(--proof-stage-height) - var(--proof-arrow-size)) / 2);
    width: var(--proof-arrow-size); height: var(--proof-arrow-size);
    inset-inline-end: calc((var(--portrait-gutter) - var(--proof-gap) - var(--proof-arrow-size)) / 2);
  }
  .photo-proof-step--photo .photo-proof-arrow {
    /* The photo print is inset by 8px; use its edge at the vertical midpoint. */
    inset-inline-end: calc(4px - (var(--portrait-gutter) + var(--proof-gap) + var(--proof-arrow-size)) / 2);
  }
}
.photo-proof-icon { display: block; width: 100%; height: 100%; background: var(--rk-emerald-hover); mask: var(--proof-icon) center / contain no-repeat; -webkit-mask: var(--proof-icon) center / contain no-repeat; }
.photo-proof-benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  list-style: none; margin: 28px auto 0; padding: 20px 16px;
  border-radius: 22px; background: var(--rk-surface);
}
.photo-proof-benefits li { display: flex; gap: 16px; align-items: center; padding: 0 20px; min-width: 0; }
.photo-proof-benefits li + li { border-inline-start: 1px solid var(--rk-line); }
.photo-proof-benefit-icon { width: 54px; height: 54px; flex: 0 0 54px; padding: 12px; border-radius: 50%; background: var(--rk-emerald-soft); }
.photo-proof-benefits strong { font-size: 15px; color: var(--rk-ink); }
.photo-proof-benefits p { font-size: 13px; line-height: 1.5; color: var(--rk-ink-soft); margin: 3px 0 0; }
.photo-proof-source { max-width: 920px; margin: 20px auto 0; font-size: 13px; line-height: 1.6; color: var(--rk-ink-soft); text-align: center; }
@media (max-width: 1000px) {
  .photo-proof-case { padding: 22px 22px 28px; }
  .photo-proof-steps { --proof-gap: 28px; --proof-arrow-size: 25px; }
  .photo-proof-step-head { gap: 8px; min-height: 76px; }
  .photo-proof-number { flex-basis: 38px; height: 38px; font-size: 23px; }
  .photo-proof-step-head h4 { font-size: 14px; margin-top: 3px; }
  .photo-proof-identity { gap: 12px; }
  .photo-proof-case-note { max-width: 40%; font-size: 17px; }
  .photo-proof-benefits li { padding-inline: 12px; gap: 10px; }
}
@media (max-width: 700px) {
  .photo-proof-heading { margin-bottom: 24px; }
  .photo-proof-kicker { font-size: 11px; gap: 10px; }
  .photo-proof-kicker::before, .photo-proof-kicker::after { width: 20px; }
  .photo-proof-case { padding: 20px 20px 30px; border-radius: 20px; }
  .photo-proof-case-head { display: block; margin-bottom: 24px; }
  .photo-proof-case-note { max-width: none; margin-top: 12px; }
  .photo-proof-identity h3 { font-size: 32px; padding-inline: 14px; }
  .photo-proof-identity > span { font-size: 14px; }
  .photo-proof-steps { grid-template-columns: 1fr; gap: 42px; }
  .photo-proof-step-head { min-height: 0; margin-bottom: 16px; gap: 12px; }
  .photo-proof-step-head h4 { font-size: 16px; }
  .photo-proof-media { height: auto; min-height: 0; }
  .photo-proof-art { width: 100%; height: auto; max-height: 390px; object-fit: contain; }
  .photo-proof-step--photo .photo-proof-media { height: 330px; max-width: 280px; margin-inline: auto; }
  .photo-proof-step--photo .photo-proof-art { height: 100%; }
  .photo-proof-step--sheet .photo-proof-media { height: auto; grid-template-rows: auto auto; }
  .photo-proof-step--sheet .photo-proof-art { height: auto; }
  .photo-proof-arrow { top: auto; bottom: -34px; width: 26px; height: 26px; inset-inline-end: calc(50% - 13px); transform: rotate(90deg); }
  .photo-proof-benefits { grid-template-columns: 1fr; padding: 4px 20px; }
  .photo-proof-benefits li { padding: 18px 0; gap: 16px; }
  .photo-proof-benefits li + li { border-inline-start: 0; border-top: 1px solid var(--rk-line); }
}
@media (max-width: 960px) {
  .rk-mk--photo-book .rk-mk-hero--split { grid-template-columns: 1fr; gap: 28px; }
  .rk-mk--photo-book .rk-mk-hero-copy { max-width: 640px; }
  .rk-mk--photo-book .rk-mk-hero h1 { max-width: 24ch; margin-inline: auto; }
  .rk-mk--photo-book .rk-mk-hero-media { justify-self: center; max-width: 560px; }
  .rk-mk--photo-book .rk-mk-hero-shot { height: auto; max-height: none; }
  .rk-mk--photo-book .rk-mk-gallery { gap: 14px; }
  .rk-mk--photo-book .rk-mk-gallery:not(.rk-mk-gallery--variants) .rk-mk-shot img { height: 240px; }
  .rk-mk--photo-book .rk-mk-steps { gap: 22px; }
}
@media (max-width: 640px) {
  .rk-mk--photo-book .rk-mk-hero--split { padding-top: 12px; }
  .rk-mk--photo-book .rk-mk-hero h1 { font-size: clamp(32px, 8.5vw, 40px); }
  .rk-mk--photo-book .rk-mk-hero .lp-kicker { font-size: 12px; }
  .rk-mk--photo-book .rk-mk-hero-media { padding-inline: 0; }
  .rk-mk--photo-book .rk-mk-hero-shot { width: 100%; height: auto; max-height: none; }
  .rk-mk--photo-book .rk-mk-gallery { grid-template-columns: 1fr; gap: 24px; }
  .rk-mk--photo-book .rk-mk-gallery--variants { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .rk-mk--photo-book .rk-mk-gallery:not(.rk-mk-gallery--variants) .rk-mk-shot img { height: 320px; }
  .rk-mk--photo-book .rk-mk-steps { grid-template-columns: 1fr; gap: 24px; }
  .rk-mk--photo-book .rk-mk-decision-grid { grid-template-columns: 1fr; }
  .rk-mk--photo-book .rk-mk-faq summary { font-size: 16px; }
}