/* Product pages: "Sound familiar?" pains and "What changes" fixes with product screens. Loaded after turquoise.css. */
.pn { background: #f4f7f8; }
.pn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: stretch; }
.pn-photo { position: relative; margin: 0; min-height: 420px; overflow: hidden; background: #0e2730; }
.pn-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.pn-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,39,48,0) 55%, rgba(14,39,48,.78)); }
.pn-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 22px; color: #fff; font: 500 15px/1.4 "Source Sans 3", sans-serif; border-top: 3px solid #1fb3cc; }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pn-card { background: #fff; border: 1px solid #e1e8ea; border-left: 3px solid #b42318; padding: 20px 24px; display: grid; gap: 8px; }
.pn-card__q { margin: 0; font: 500 22px/1.25 "Newsreader", Georgia, serif; color: #2f3a3d; }
.pn-card__d { margin: 0; font-size: 15.5px; line-height: 1.5; color: #55605f; }
.pn-card__f { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pn-card__f span { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #7b8a8c; }
.pn-card__f b { font: 600 13px/1 "Source Sans 3", sans-serif; color: #b42318; background: #fbefed; padding: 6px 10px; }

.fxs { background: #fff; }
.fx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; padding: 44px 0; border-top: 1px solid #e6ecee; }
.fx:first-of-type { border-top: 0; padding-top: 8px; }
.fx--flip .fx__copy { order: 2; }
.fx--phone { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx--phone .fx__shot img { max-width: 300px; margin: 0 auto; }
.fx--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.fx--flip.fx--phone { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx__copy h3 { margin: 10px 0 14px; font: 500 30px/1.15 "Newsreader", Georgia, serif; color: #2f3a3d; }
.fx__n { margin: 0; display: flex; align-items: center; gap: 12px; }
.fx__n span { font: 600 12px/1 "IBM Plex Mono", monospace; color: #fff; background: #0b8fa8; padding: 6px 8px; }
.fx__n s { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #b42318; text-decoration-thickness: 1.5px; }
.fx__copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx__copy li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: #55605f; }
.fx__copy li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: #e3f4f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230b8fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fx__out { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: #0b8fa8; color: #fff; font: 600 15px/1.3 "Source Sans 3", sans-serif; }
.fx__out::before { content: "→"; font-weight: 700; }
.fx__shot { margin: 0; }
.fx__shot img { display: block; width: 100%; height: auto; }

@media (max-width: 960px) {
  .pn-grid { grid-template-columns: 1fr; }
  .pn-photo { min-height: 260px; }
  .fx, .fx--phone, .fx--flip, .fx--flip.fx--phone { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .fx--flip .fx__copy { order: 0; }
  .fx__copy h3 { font-size: 26px; }
}
@media (max-width: 560px) {
  .pn-card { padding: 16px 18px; }
  .pn-card__q { font-size: 19px; }
  .fx__shot { margin: 0 -8px; }
  .fx--phone .fx__shot img { max-width: 260px; }
}

/* ==========================================================================
   In the field — four photographs per product: lead (16:9), portrait with the phone,
   the team at the desk, and a tech detail. Loaded on every product page.
   ========================================================================== */
.fd { background: #fff; }
.fd__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: clamp(10px, 1.2vw, 16px); }
.fd__ph { position: relative; margin: 0; overflow: hidden; border-radius: 10px; background: #e9f0f1; }
.fd__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.fd__ph:hover img { transform: scale(1.03); }
.fd__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; background: linear-gradient(180deg, transparent, rgba(10, 20, 24, 0.72)); color: #fff; font: 500 13px/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.01em; }
.fd__ph--lead { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; }
.fd__ph--tall { grid-column: 3; grid-row: 1 / 3; }
.fd__ph--desk { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
.fd__ph--tech { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
.fd__note { margin: 14px 0 0; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #8a979a; }
@media (max-width: 760px) {
  .fd__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .fd__ph--lead { grid-column: 1 / -1; grid-row: auto; }
  .fd__ph--tall { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .fd__ph--desk { grid-column: 2; grid-row: auto; aspect-ratio: 4 / 5; }
  .fd__ph--tech { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .fd__ph figcaption { font-size: 12px; padding: 28px 12px 10px; }
}