/* The Features menu in cueday.io's top bar (menu.js builds it): a
   full-width panel under the nav. Every class starts with fm- so it can't
   clash with the home page's own styles. */
.fm-trigger { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 4px; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fm-trigger:hover, .fm-trigger[aria-expanded="true"] { color: #fff; }
.fm-trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.25s cubic-bezier(0.2, 0.75, 0.2, 1); }
.fm-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.fm-hide { display: none !important; }

.fm-panel { position: absolute; left: 0; right: 0; top: 100%; background: #070707; border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.75, 0.2, 1), visibility 0s 0.25s; text-align: left; color: #fff; }
.fm-panel.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.75, 0.2, 1); }
.fm-in { max-width: 1200px; margin: 0 auto; padding: 30px clamp(20px, 5vw, 56px) 26px; display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 26px; }
.fm-col h4 { margin: 0 0 10px 10px; font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #6b6b6b; }
.fm-item { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: #fff; transition: background 0.15s; }
.fm-item:hover, .fm-item:focus-visible { background: rgba(255,255,255,0.07); outline: none; }
.fm-item i { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex: none; }
.fm-item:hover i { background: #fff; color: #000; }
.fm-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fm-item b { display: block; font: 600 13.5px/1.3 'Inter', sans-serif; }
.fm-item span { display: block; font: 400 12.5px/1.4 'Inter', sans-serif; color: #8a8a8a; margin-top: 2px; }
/* Gallery delivery: the app's rainbow Deliver Galleries icon, on a soft tile that stays dark on hover. */
.fm-rb svg { stroke: url(#fm-rainbow); stroke-width: 1.9; }
.fm-rb i, .fm-rb:hover i { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); color: inherit; }
.fm-rb:hover i { background: rgba(255,255,255,0.16); }
.fm-star { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #0f0f0f;
  text-decoration: none; color: #fff; transition: border-color 0.2s; }
.fm-star:hover { border-color: rgba(255,255,255,0.4); }
.fm-star img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; display: block; }
.fm-star div { padding: 14px 16px 16px; }
.fm-star em { display: inline-flex; height: 22px; padding: 0 9px; align-items: center; border-radius: 999px; background: #fff; color: #000; font: 600 10.5px 'Inter', sans-serif; letter-spacing: 0.04em; font-style: normal; }
.fm-star b { display: block; margin-top: 10px; font: 600 18px/1.2 'Playfair Display', Georgia, serif; }
.fm-star span { display: block; margin-top: 4px; font: 400 12.5px/1.45 'Inter', sans-serif; color: #8a8a8a; }
.fm-foot { max-width: 1200px; margin: 0 auto; padding: 14px clamp(20px, 5vw, 56px) 18px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; gap: 24px; font: 500 13.5px 'Inter', sans-serif; }
.fm-foot a { color: #fff; text-decoration: none; } .fm-foot a:hover { text-decoration: underline; }
.fm-foot a + a { color: #9a9a9a; }

@media (max-width: 1100px) { .fm-in { grid-template-columns: repeat(2, 1fr); } .fm-star { grid-column: 1 / -1; flex-direction: row; } .fm-star img { width: 42%; aspect-ratio: auto; } }
/* Phones: a full-height sheet under the bar, one column. */
@media (max-width: 700px) {
  .fm-panel { height: calc(100dvh - 100%); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .fm-in { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
  .fm-star { order: -1; flex-direction: column; } .fm-star img { width: 100%; aspect-ratio: 16 / 9; }
  .fm-foot { flex-direction: column; gap: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* Room for logo · Features · Start free on a phone. */
@media (max-width: 420px) { .nav-links { gap: 14px !important; } .fm-trigger { padding: 0; } }
html.fm-lock, html.fm-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .fm-panel, .fm-panel.open { transition: none; } }