/* ===================================================================
   FEATURES MENU — the navbar's hover panel, and its mobile list.
   Shared by index.html and every page under features/, which is why it
   is a file rather than another inline <style>: ten copies of it would
   drift the moment one page's panel is adjusted.

   It lives INSIDE #hero-nav-wrap, so the bar's own .is-light class —
   written by the tint script from whatever section sits under the bar —
   reaches the panel too and the two never disagree about the ground
   they are on.
   =================================================================== */

/* --- the trigger ------------------------------------------------------
   A button, not a link: there is no /features/ hub to send anyone to, and
   an <a href="#features"> pointing at an id that does not exist is what
   this replaces. It still carries .nav-tint, so it flips with the links
   either side of it. */
.feat-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  white-space: nowrap; cursor: pointer;
  transition: opacity .2s ease;
}
.feat-trigger:hover { opacity: 0.7; }

/* --- the panel --------------------------------------------------------
   Full-bleed like the bar above it, with the icon row constrained to the
   same 1440 column — so the glass runs edge to edge while the content
   stays in line with the logo and the CTA.
   Absolute against #hero-nav-wrap (which is fixed), hanging off its
   bottom edge; nothing below it moves. */
.feat-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;
  /* Solid, not glass: these are the colours the translucent versions resolved to
     over their own sections, and a blur behind an opaque fill is only cost. */
  background: #0C0C0C;
  /* no top highlight: the bar above it is now wearing the same ground, and a lit edge
     between them is exactly the seam that made this read as a separate slab */
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.feat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

/* ...and the bar takes the panel's ground while the panel is open, at the same values,
   so the two are one continuous surface even over the hero, where the bar is otherwise
   transparent. The stuck state's inset bottom rule goes away for the same reason: it
   would draw a line straight across the middle of that surface. */
#hero-nav-wrap.feat-open {
  background: #0C0C0C;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
#hero-nav-wrap.is-light.feat-open { background: #FAFAFA; box-shadow: none; }
/* The light twin. Only .is-light matters here, not .is-stuck: the bar is
   transparent over the hero's black, and a panel dropping out of it still
   needs a ground of its own. */
#hero-nav-wrap.is-light .feat-panel {
  background: #FAFAFA;
  box-shadow: 0 18px 40px rgba(41,41,41,0.10);
}

.feat-row {
  margin-inline: auto; width: 100%; max-width: 1440px;
  padding: 18px 20px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 4px;
}
@media (min-width: 640px) { .feat-row { padding-inline: 32px; } }
@media (min-width: 1024px) { .feat-row { padding-inline: 120px; } }
/* Nine 104px cells and their gaps need 968px, plus the column's own 240px of
   padding — so below 1208px they cannot all share a line. Left alone the row
   breaks wherever it runs out, which reads as eight and a stray. Capping the
   row at five cells makes the break deliberate: 5 over 4, both centred. */
/* padding-inline goes with it: the box is border-box, so a capped width that
   still carries the column's 120px gutters would only fit two cells. */
@media (max-width: 1207px) { .feat-row { max-width: 548px; padding-inline: 0; } }

/* One cell per feature: glyph over label, the whole thing a link. Fixed
   width so the wrap lands on whole cells and the two rows stay centred
   under each other rather than ragged. */
.feat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; width: 104px; padding: 12px 6px 11px;
  border-radius: 14px; text-align: center;
  color: #FFFFFF;
  transition: background-color .18s ease, color .3s ease;
}
.feat-item:hover { background: rgba(255,255,255,0.10); }
.feat-item svg { width: 28px; height: 28px; display: block; }
/* AirMind carries the product mark instead of an outline glyph. The mark is a filled
   square, so it ships in two fills and the panel's own tint picks one — the same
   crossfade the navbar logo uses, rather than a second source of truth. */
.feat-mark { position: relative; display: block; width: 28px; height: 28px; }
.feat-mark img {
  position: absolute; inset: 0; width: 28px; height: 28px;
  object-fit: contain;
  transition: opacity .3s ease;
}
.feat-mark-b { opacity: 0; }
#hero-nav-wrap.is-light .feat-mark-w { opacity: 0; }
#hero-nav-wrap.is-light .feat-mark-b { opacity: 1; }
.feat-label { font-size: 13px; font-weight: 300; line-height: 1.2; }
#hero-nav-wrap.is-light .feat-item { color: #292919; }
#hero-nav-wrap.is-light .feat-item:hover { background: rgba(41,41,25,0.06); }

/* The one item with no page behind it yet still gets its cell — it is the
   feature, not the page, that is coming soon. */
.feat-item .feat-soon {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500; line-height: 1;
  opacity: 0.55; letter-spacing: 0.01em;
}

/* the panel belongs to the desktop bar; below it the mobile list takes over */
@media (max-width: 767px) { .feat-panel { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .feat-panel { transition: opacity .01s linear, visibility .01s linear; transform: none; }
  .feat-mark img { transition: none; }
}

/* ===================================================================
   MOBILE — the same nine, as a list inside .mnav-panel.
   "Features" becomes a disclosure button; the list unrolls under it and
   the panel grows. Ink is already handled by .mnav[data-theme].
   =================================================================== */
.mnav-acc {
  width: 100%;
  font: inherit; background: none; border: 0; text-align: left;
  cursor: pointer;
}

/* Collapsed by height so the panel animates rather than jumping. The open
   height is written by the script from the list's own scrollHeight — nine
   rows at one font size is still a number that changes with the label
   wrapping on a narrow phone. */
.mnav-sub {
  display: flex; flex-direction: column;
  overflow: hidden; height: 0;
  transition: height .28s cubic-bezier(.22,.61,.36,1);
}
.mnav-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  color: inherit; opacity: .82;
  -webkit-tap-highlight-color: transparent;
}
.mnav-sub a:active { background: rgba(41,41,25,0.06); }
.mnav[data-theme="dark"] .mnav-sub a:active { background: rgba(255,255,255,0.10); }
.mnav-sub svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .75; }
.mnav-sub .feat-mark { width: 21px; height: 21px; flex-shrink: 0; }
.mnav-sub .feat-mark img { width: 21px; height: 21px; }
/* the mobile panel is light by default and dark only over the dark sections */
.mnav-sub .feat-mark-w { opacity: 0; }
.mnav-sub .feat-mark-b { opacity: 1; }
.mnav[data-theme="dark"] .mnav-sub .feat-mark-w { opacity: 1; }
.mnav[data-theme="dark"] .mnav-sub .feat-mark-b { opacity: 0; }
.mnav-sub .feat-soon { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 10px; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .mnav-sub { transition: none; } }

/* The list can outgrow a short phone once it is unrolled — nine rows plus the
   four page links and the CTA is more than an SE has below the bar. The panel
   scrolls inside itself rather than running off the bottom of the screen. */
.mnav-panel { max-height: calc(100dvh - var(--mnav-top, 84px) - 20px); overflow-y: auto; overscroll-behavior: contain; }