/* Section 06: features, screens first. Sticky notes are real text laid over each main screen. */
#final .ft-list { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: 40px; }
#final .ft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 16px 40px; align-items: start; }
#final .ft-text { position: sticky; top: 150px; padding-top: 8px; }
#final .ft-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--text); font: 500 14px/1 var(--font-display); }
#final .ft-text h3 { margin: 14px 0 8px; font-family: var(--font-display); font-weight: 500; line-height: 1.3; text-wrap: balance; }
#final .ft-text p { margin: 0; color: var(--muted); }
#final .ft-main { position: relative; margin: 0; padding: clamp(16px, 3vw, 32px); border-radius: var(--radius, 12px); background: var(--tint); }
#final .ft button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
#final .ft-main img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35); }
#final .ft button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 8px; }

/* sticky note: same look as the Figma notes, but readable, editable and never baked into the image */
#final .sticky {
  position: absolute; z-index: 1; width: min(220px, 42%); margin: 0; padding: 14px 16px;
  background: #fff3a3; color: #2b2a1f; font: 400 15px/1.45 var(--font-body);
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .3); rotate: -2deg;
}
#final .sticky.tr { top: -16px; right: 12px; }
#final .sticky.br { bottom: -16px; right: 12px; rotate: 2deg; }

#final .ft-more { grid-column: 2; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#final .ft-more img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 8px; border: 1px solid var(--line); background: #fff; transition: translate .3s cubic-bezier(.22, 1, .36, 1); }
#final .ft-more button:hover img { translate: 0 -3px; }
#final .ft-more span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  #final .ft { grid-template-columns: minmax(0, 1fr); }
  #final .ft-text { position: static; }
  #final .ft-more { grid-column: 1; }
  /* on phones the note sits under the screen, at full size, instead of covering it */
  #final .sticky, #final .sticky.tr, #final .sticky.br { position: relative; inset: auto; width: auto; margin: 16px 4px 0; rotate: -1deg; }
}
@media (max-width: 560px) { #final .ft-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }