/* =====================================================================
   FEATURE PAGES from the "What it does" menu  /static/css/feature-pages.css
   Extras on top of feature-lander.css for templates/features/*.html.
   Tokens only; product UI pieces follow realui.css.
   ===================================================================== */

/* keyword search box inside a Distribb window */
.fp-search{display:flex;align-items:center;gap:8px;margin:12px 0 10px;padding:9px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #e5e5e5;font:500 13px var(--f-ui);color:#111}
.fp-search svg{width:15px;height:15px;color:#888;flex:none}
.fp-search .caret{display:inline-block;width:1.5px;height:15px;margin-left:-6px;background:#111;animation:blink 1s step-end infinite}
.q-r.fp-kw{grid-template-columns:minmax(0,1fr) 70px 44px 128px}
.q-r.fp-kw>span:last-child{display:flex;justify-content:flex-end}

/* an inline link inside grid copy */
.il-u{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.il-u:hover{text-decoration-color:var(--ink)}

/* /features: one block per menu column */
.fp-col{margin-top:var(--s-8)}
.fp-col:first-child{margin-top:56px}
.fp-col-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fp-col-h h2{font-size:var(--fs-t1);letter-spacing:-.02em;line-height:1.2}
.fp-col-h p{font-size:var(--fs-sm);color:var(--muted)}
.fp-col-h .tiles{margin-left:auto;gap:6px}
.fp-col-h .mi{width:30px;height:30px;border-radius:8px}
.fp-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 32px;margin-top:8px}
.fp-list a{display:block;margin:0 -12px;padding:16px 12px;border-radius:14px;transition:background var(--t-fast)}
.fp-list a:hover{background:var(--paper);box-shadow:var(--sh-1)}
.fp-list b{display:flex;align-items:center;gap:8px;font-size:var(--fs-t2);font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.fp-list b svg{width:14px;height:14px;color:var(--red-2);transition:transform var(--t-fast)}
.fp-list a:hover b svg{transform:translateX(3px)}
.fp-list span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.fp-list .pl{display:inline-block;margin-left:2px;padding:2px 8px;border-radius:var(--r-full);background:var(--red-wash);color:var(--red-2);font-size:11.5px;font-weight:600;letter-spacing:.02em;vertical-align:2px}

/* /developers: endpoint list */
.fp-ep{display:grid;gap:0;margin-top:22px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--sh-1);overflow:hidden}
.fp-ep>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 22px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.fp-ep>div:first-child{border-top:0}
.fp-ep code{font:500 13.5px var(--f-mono);color:var(--ink)}
.fp-ep em{font:600 11.5px var(--f-mono);font-style:normal;color:var(--red-2)}

@media (max-width:900px){
  .fp-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fp-col-h .tiles{margin-left:0;width:100%}
  .q-r.fp-kw{grid-template-columns:minmax(0,1fr) 40px 26px 108px;gap:6px}
  .q-r.fp-kw>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fp-ep>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 16px}
}

/* the optimizations list sits inside the app window, so it drops its own float */
.op.fp-op{max-width:none;margin-top:14px;box-shadow:0 0 0 1px #ececec}