/* ═══════════════════════════════════════════════════════════════
   feature-menu.css: the Features dropdown (landing and feature pages)
   ═══════════════════════════════════════════════════════════════
   4.2531.1. A <details> menu: it opens and closes without JavaScript
   (feature-nav.js only adds outside-click and Escape closing). The
   panel carries its own light colors so it reads the same on the
   landing page's header and on the feature pages. */
.fmenu { position: relative; display: inline-block; }
.fmenu > summary { list-style: none; cursor: pointer; user-select: none; }
.fmenu > summary::-webkit-details-marker { display: none; }
.fmenu > summary::after { content: ""; display: inline-block; margin-left: 0.4rem; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2rem) rotate(45deg); transition: transform 0.2s ease; }
.fmenu[open] > summary::after { transform: translateY(0) rotate(225deg); }
.fmenu > summary:focus-visible { outline: 3px solid #c9a227; outline-offset: 3px; }
.fmenu-panel { position: absolute; left: 0; right: auto; top: calc(100% + 0.5rem); z-index: 900; width: min(21rem, calc(100vw - 1.5rem)); max-height: 75vh; overflow: auto; padding: 0.45rem;
  background: #fffdf9; color: #0f0f0f; border: 1px solid #d6d0c4; border-radius: 10px; box-shadow: 0 18px 40px rgba(15, 15, 15, 0.18); font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.95rem; text-align: left; transform: translateX(var(--fmenu-shift, 0px)); }
.fmenu-panel ul { list-style: none; margin: 0; padding: 0; }
.fmenu-panel a { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0.6rem; border-radius: 6px; color: #1a3a5c; text-decoration: none; line-height: 1.3; }
.fmenu-panel a:hover, .fmenu-panel a:focus-visible { background: #e8edf2; outline: none; }
.fmenu-panel a[aria-current="page"] { background: #1a3a5c; color: #fffdf9; }
.fmenu-num { font-family: 'Playfair Display', Georgia, serif; font-size: 0.85rem; color: #c9a227; min-width: 1.4rem; }
.fmenu-panel a[aria-current="page"] .fmenu-num { color: #fffdf9; }
.fmenu-all { border-top: 1px solid #d6d0c4; margin-top: 0.35rem; padding-top: 0.35rem; }
.fmenu-mobile .fmenu-panel { position: static; width: 100%; margin-top: 0.4rem; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .fmenu > summary::after { transition: none; } }
/* 4.2531.8: a panel opens on the side its menu sits. Menus at the left
   of their bar (feature pages, get-started-now, pricing, signup) open
   rightward from the toggle's left edge (the rule above); menus at the
   right of their bar (About, the landing page's desktop menu) open
   leftward from the toggle's right edge. feature-nav.js then measures
   the open panel and shifts it back inside the viewport (12px padding)
   if any part still overflows, and caps its height to the space left.
   4.2531.7 moved menus left while the panel stayed right-anchored, so it
   opened off the left edge of every screen narrower than about 1150px. */
.fmenu-nav .fmenu-panel, .fmenu-push .fmenu-panel { left: auto; right: 0; }

/* Phones: the panel becomes a full-width sheet pinned 12px from both
   edges of the screen, so it can never leave the screen sideways, even
   without JavaScript. feature-nav.js sets --fmenu-top to just below the
   Features toggle; without it the sheet sits 4.5rem from the top. The
   landing page's own mobile menu (.fmenu-mobile) is already in the page
   flow and is left as it is. */
@media (max-width: 640px) {
  .fmenu:not(.fmenu-mobile) .fmenu-panel { position: fixed; left: 12px; right: 12px; width: auto; transform: none;
    top: var(--fmenu-top, 4.5rem); max-height: calc(100vh - var(--fmenu-top, 4.5rem) - 12px); }
  @supports (height: 100dvh) {
    .fmenu:not(.fmenu-mobile) .fmenu-panel { max-height: calc(100dvh - var(--fmenu-top, 4.5rem) - 12px); }
  }
}

/* 4.2531.5: on a header laid out with space-between (the About page),
   this keeps the menu immediately beside the link that follows it. */
.fmenu-push { margin-left: auto; }
/* 4.2531.25: the landing page's Features menus (data-glow-once) glowed
   on a visitor's first visit until the menu was opened once
   (feature-nav.js remembered it). Under reduced motion, a steady ring.
   4.2531.29: amber gold (the landing's --accent-amber, #f59e0b, with a
   brighter gold halo, #fbbf24) instead of cyan and blue, so it stands
   apart from the blue nav links.
   4.2531.42: visitors could not tell the glow apart from the rest of the
   page: between pulses it faded to nothing, and the word itself was the
   same gray as every other nav link. The landing's toggles became a
   filled amber pill (dark #111 text on #f59e0b, a contrast of about 8.8
   to 1) with a gold halo that breathes but never fades out, shown on
   every visit (feature-nav.js no longer adds a class or remembers a
   first visit). The caret follows the text color (currentColor) and the
   focus outline above is unchanged. Under reduced motion the halo holds
   still at its middle size.
   4.2531.43: every Features menu on the site gets the pill: the landing
   page, the twelve feature pages, About, Get Started, Pricing and Sign
   Up. data-glow-once is gone from the landing's markup.
   The :not(.fmenu-plain) does two jobs. A menu given class fmenu-plain
   keeps the plain link look (no page uses it today). It also lifts the
   selector to (0,2,2), above every page rule that colors the toggle:
   .nav-link (0,1,0) and .nav-link:hover (0,2,0) on the landing,
   .topbar .fmenu > summary (0,2,1) on the feature pages, Get Started,
   Pricing and Sign Up, and .masthead .fmenu > summary (0,2,1) on About.
   The hover rule, (0,3,2), likewise outranks their hover underline
   (0,3,1), so the pill keeps dark text and no underline on hover.
   Negative block margins take back the padding's height, so no bar or
   header changes height and nothing below the pill moves; on wide
   screens the panel opens 0.85rem below the toggle's line box, which is
   the 0.5rem gap it had, measured from the pill's lower edge. On phones
   (640px and narrower) feature-nav.js already places the panel 8px
   below the toggle's own box, padding included. */
details.fmenu:not(.fmenu-plain) > summary { background: #f59e0b; color: #111; font-weight: 700; text-decoration: none; padding: 0.35rem 0.9rem; margin-block: -0.35rem; border-radius: 999px;
  box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.45); transition: background-color 180ms ease; animation: fmenu-halo 2s ease-in-out infinite; }
details.fmenu:not(.fmenu-plain) > summary:hover { background: #fbbf24; color: #111; text-decoration: none; }
@media not all and (max-width: 640px) {
  details.fmenu:not(.fmenu-plain):not(.fmenu-mobile) > .fmenu-panel { top: calc(100% + 0.85rem); }
}
/* 4.2531.43: on phones (640px and narrower) the top bars of the feature
   pages, Get Started, Pricing, Sign Up and About have little room to
   spare. With the full padding the pill pushed a link onto another line
   at some widths between 320 and 430px (feature pages at 320, 375 and
   390; Get Started, Pricing and Sign Up at 375 and 390; About at 430)
   and moved the page below down by 24 to 42px. There the pill is a
   little slimmer and negative side margins cancel its padding, so it
   takes exactly the room the plain link took (plus its bolder letters)
   and every bar keeps the lines it had. The landing's own phone menu
   (.fmenu-mobile) has its own rule below. */
@media (max-width: 640px) {
  details.fmenu:not(.fmenu-plain):not(.fmenu-mobile) > summary { padding-inline: 0.6rem; margin-inline: -0.6rem; }
}
/* 4.2531.42: the landing's phone menu row (.hero-mobile-nav, up to 768px)
   has about 13px to spare at a 375px screen. Full padding there pushed
   the last link onto a second line at 375 and 390px and moved the page
   below down by 50px. So in that row the pill is slightly slimmer and
   negative side margins take back its extra width: the row stays one
   line from 375px up (it already wrapped at 360px and narrower), and the
   open panel keeps its 0.4rem gap below the pill. Opening that menu
   widens it to the panel's width; fit-content keeps the pill its closed
   size instead of stretching into a full-width amber bar, and since the
   open menu takes a line of its own, the side margins go back to zero
   so the pill lines up with the panel's left edge. */
details.fmenu-mobile:not(.fmenu-plain) > summary { width: fit-content; padding-inline: 0.75rem; margin-inline: -0.6rem; }
details.fmenu-mobile:not(.fmenu-plain)[open] > summary { margin-inline: 0; }
details.fmenu-mobile:not(.fmenu-plain) > .fmenu-panel { margin-top: 0.75rem; }
@keyframes fmenu-halo {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.45); }
  50% { box-shadow: 0 0 22px 6px rgba(251, 191, 36, 0.75); }
}
@media (prefers-reduced-motion: reduce) { details.fmenu:not(.fmenu-plain) > summary { animation: none; transition: none; box-shadow: 0 0 14px 3px rgba(251, 191, 36, 0.6); } }