.floss-paths { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.floss-paths a { border: 1px solid #ccd9e7; border-radius: 10px; padding: 10px 14px; color: #174fb5; background: #f5f8fc; text-decoration: none; font-weight: 600; }
.floss-paths a:focus-visible, .floss-search input:focus-visible { outline: 3px solid #1f6fff; outline-offset: 3px; }
.floss-search { display: grid; gap: 8px; margin: 20px 0; }
.floss-search label { font-weight: 700; }
.floss-search input { width: 100%; box-sizing: border-box; border: 1px solid #8293a8; border-radius: 8px; padding: 12px; font: inherit; background: #fff; color: #172b4d; }
.floss-search p { margin: 0; color: #526071; font-size: .9rem; }
.floss-sample { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 24px; border-radius: 16px; background: #f7f6ef; }
.floss-sample figure { margin: 0; }
.floss-sample img { width: 100%; height: auto; border-radius: 12px; }
.floss-sample figcaption { font-size: .8rem; line-height: 1.5; color: #59635c; margin-top: 8px; }
.floss-sample ol { padding-left: 20px; margin-top: 0; }
.floss-sample a { display: inline-block; margin: 6px 10px 6px 0; }
#floss-conversion, #floss-try { scroll-margin-top: 90px; }
@media (max-width: 560px) { .floss-sample { grid-template-columns: 1fr; padding: 18px; } .floss-sample figure { max-width: 230px; margin: auto; } }