.guide-page .breadcrumb { gap: 8px; }
.guide-hero h1 { font-size: clamp(2.7rem, 4.5vw, 4.2rem); }
.guide-hero .ordering-hero-copy { padding-left: 10px; }
.guide-hero--photo-first .guide-hero-photo { order: -1; }
/* Display the supplied photographs without the surrounding screenshot. */
.guide-photo { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--crop-w) / var(--crop-h); border-radius: 9px; background: #efefef; }
.guide-photo img { position: absolute; width: calc(709 / var(--crop-w) * 100%); max-width: none; height: auto; left: calc(-1 * var(--crop-x) / var(--crop-w) * 100%); top: calc(-1 * var(--crop-y) / var(--crop-h) * 100%); }
.guide-mittpillow .guide-hero-photo, .guide-dreamtopper .guide-hero-photo { --crop-x: 59; --crop-y: 329; --crop-w: 300; --crop-h: 200; }
.guide-dreambox .guide-hero-photo { --crop-x: 361; --crop-y: 329; --crop-w: 280; --crop-h: 200; }
.guide-mittpillow .guide-detail-photo, .guide-dreamtopper .guide-detail-photo { --crop-x: 356; --crop-y: 621; --crop-w: 290; --crop-h: 192; }
.guide-dreambox .guide-detail-photo { --crop-x: 59; --crop-y: 635; --crop-w: 290; --crop-h: 193; }
.guide-section { padding-block: 72px 65px; }
.guide-section > header { max-width: 760px; margin-bottom: 30px; }
.guide-section h2 { margin: 10px 0 0; font-family: var(--heading); font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.guide-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.guide-layout--photo-first { grid-template-columns: .95fr 1.05fr; }
.guide-layout--photo-first .guide-detail-photo { order: -1; }
.guide-steps { margin: 0; padding: 0; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.guide-steps li:first-child { padding-top: 4px; }
.guide-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.guide-step-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--green-dark); background: #ffdfd4; font-size: .8125rem; font-weight: 800; }
.guide-steps h3 { margin: 3px 0 10px; font-family: var(--heading); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.025em; }
.guide-steps p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.guide-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-bottom a { padding: 8px 0; font-size: .875rem; font-weight: 800; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 5px; }
@media (max-width: 1000px) {
  .guide-layout, .guide-layout--photo-first { gap: 30px; }
  .guide-hero .ordering-hero-copy { padding-left: 0; }
}
@media (max-width: 760px) {
  .guide-hero--photo-first .guide-hero-photo { order: 0; }
  .guide-hero h1 { font-size: clamp(2.7rem, 8vw, 4rem); }
  .guide-section { padding-block: 50px; }
  .guide-layout, .guide-layout--photo-first { grid-template-columns: 1fr; gap: 30px; }
  .guide-layout--photo-first .guide-detail-photo { order: 0; }
  .guide-detail-photo { max-width: 560px; justify-self: center; }
}
@media (max-width: 520px) {
  .guide-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .guide-section h2 { font-size: 2.1rem; }
  .guide-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 13px; }
  .guide-step-number { width: 30px; height: 30px; }
  .guide-bottom { flex-direction: column; align-items: start; gap: 10px; margin-top: 30px; }
}