/* Homepage and "How it works" page: picture steps, file-type tiles and icon tiles. */

.more-link { margin-top: 36px; }

/* Three picture steps */
.steps3 { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.steps3 li { position: relative; }
.steps3 .frame {
  display: block; overflow: hidden; border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(15, 17, 21, 0.08), 0 2px 6px rgba(15, 17, 21, 0.05), 0 18px 40px -18px rgba(15, 17, 21, 0.3);
  background: #dde6f4;
}
.steps3 .frame img { width: 100%; height: auto; aspect-ratio: 1200 / 780; object-fit: cover; }
.steps3 .n {
  position: absolute; top: -14px; left: -10px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(10, 100, 224, 0.3);
}
.soft .steps3 .n { box-shadow: 0 0 0 4px var(--soft), 0 6px 14px rgba(10, 100, 224, 0.3); }
.steps3 h3 { margin-top: 20px; font-size: 20px; letter-spacing: -0.01em; }
.steps3 p { margin-top: 6px; color: var(--text); font-size: 16px; }

/* File types */
.types { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.types li, .tiles3 li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.types li:hover, .tiles3 li:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(15, 17, 21, 0.28); }
.types strong, .tiles3 strong { color: var(--ink); font-size: 17px; margin-top: 8px; }
.types span:not(.ti), .tiles3 span:not(.ti) { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.ti { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #eaf2ff; color: var(--accent); }
.ti svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.types .c2 .ti { background: #f1ecff; color: #6a45d8; }
.types .c3 .ti { background: #ffeef0; color: #cf3a4b; }
.types .c4 .ti { background: #fff3e2; color: #b56200; }
.types .c5 .ti { background: #e8f6ee; color: #17803f; }
.types .c6 .ti { background: #eef0f3; color: #4a5160; }
.types .c7 .ti { background: #e6f5f7; color: #0b7c8a; }
.types .c8 .ti { background: #fdf0e8; color: #b5541b; }

/* Three icon tiles */
.tiles3 { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tiles3 .ti { background: #e8f6ee; color: #17803f; }

/* The shorter photo section */
#full-quality .intro { margin-top: 14px; }

/* "How it works" page heading */
.hero-detail { padding-bottom: 8px; }
.hero-detail .title { margin-top: 8px; max-width: 18em; }
.hero-detail .lead { margin-top: 16px; }

@media (max-width: 900px) {
  .steps3 { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .steps3 { margin-top: 32px; gap: 36px; }
  .steps3 .frame { margin: 0 -8px; border-radius: 10px; }
  .steps3 .n { left: -2px; }
  .steps3 h3 { font-size: 19px; }
  .types { gap: 10px; margin-top: 28px; }
  .types li, .tiles3 li { padding: 16px 14px; }
  .types strong, .tiles3 strong { font-size: 16px; margin-top: 4px; }
  .types span:not(.ti), .tiles3 span:not(.ti) { font-size: 13.5px; }
  .ti { width: 38px; height: 38px; border-radius: 10px; }
  .ti svg { width: 21px; height: 21px; }
  .tiles3 { margin-top: 28px; gap: 10px; }
  .tiles3 li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .tiles3 li strong { margin: 0; }
  .tiles3 li span:not(.ti) { flex-basis: 100%; }
}