@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap");
/* The nav drop-downs. Shared by every mega menu in the bar; a menu's own
   partial carries only markup. Opens on hover and on keyboard focus, no
   JavaScript involved.

   The panel hangs off the nav bar, not off the link: centred on the link it
   ran past the left edge of the window on a 1000px screen. For hover to
   survive that, the item that owns a menu has to reach the bottom of the bar —
   otherwise the pointer leaves it in the bar's own empty strip. */
@media (min-width: 981px) {
  .nav-links { align-self: stretch; }
  /* Every item in the bar, not only the ones that own a menu: a full-height
     flex box centres its link on the bar, while a plain <li> centres it in a
     line box instead and ends up 1.5px lower. */
  .nav-links > li { position: static; align-self: stretch; display: flex; align-items: center; }
}

/* .fm is an invisible layer the width of the bar; .fm-card is the panel you
   see. The layer itself takes no pointer events — empty space beside the card
   must not hold the menu open — except for ::before, the strip that bridges
   the gap between the bar and the card so the pointer never crosses dead
   ground on the way down. Every card therefore has to sit under its own link:
   that is why the right-hand menu is aligned right rather than made narrow. */
.fm { position: absolute; top: 100%; left: 0; right: 0; padding-top: 22px; z-index: 60;
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s; }
.fm::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  pointer-events: auto; }
.fm-wrap:hover .fm, .fm-wrap:focus-within .fm { opacity: 1; visibility: visible;
  transform: translateY(0); }

.fm-card { pointer-events: auto; width: min(880px, 100%); margin: 0 auto;
  padding: 30px 34px 26px; border-radius: 22px;
  /* Opaque black, not glass: this sits inside the nav, which already carries
     a backdrop-filter, and a nested one does not apply. The border is what
     separates the panel from the page, so it has to stay. */
  background: #121214;
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inner), var(--glass-drop); }
/* A menu further right in the bar opens further right. */
.fm-right .fm-card { width: min(880px, 100%); margin-left: auto; margin-right: 0; }

.fm-grid { display: grid; grid-template-columns: 1fr 1fr 226px; gap: 0 34px; }

/* A quiet label over the column, not a headline — the link titles below are
   what the eye should land on. */
/* Creme-Fassung, aus demselben Grund deckend wie die dunkle. */
[data-theme="light"] .fm-card{ background: #f7f6f1; }
[data-theme="light"] .fm .fm-item:hover{ background: rgba(23,19,16,.05); }

.fm-col-head { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--text3);
  text-transform: none; margin-bottom: 14px; }

/* .nav-links a sets display:inline-flex and outranks a single class, so these
   need the extra step or the rows flow side by side instead of stacking. */
.fm .fm-item { display: block; padding: 9px 10px; margin: 0 -10px 4px; border-radius: 10px;
  text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: background .15s; }
.fm .fm-item:hover { background: rgba(255,255,255,.06); }
.fm .fm-t { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); }

.fm-foot { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--border);
  text-align: right; }
.fm .fm-all { display: inline-flex; font-size: 12.5px; font-weight: 700; color: var(--green-text,var(--green2));
  text-decoration: none; text-transform: none; letter-spacing: 0; }
.fm .fm-all:hover { color: var(--text); }

/* ── In the burger panel ─────────────────────────────────────────────────
   Below 980px the panels do not hang off the bar; they fold out under their
   own row instead, so the sub-pages are reachable on a phone too. The row
   toggles (a small script in _featmenu.html), the chevron turns, the card
   loses its shell and reads as an indented list. */
@media (max-width: 980px) {
  .fm { display: none; }
  nav.menu-open .fm-wrap { display: flex; flex-direction: column; }
  nav.menu-open .fm-wrap > a { justify-content: space-between; }
  nav.menu-open .fm-wrap > a .nav-chevron { display: inline-block; opacity: .7;
    transform: translateY(-3px) rotate(45deg); }
  nav.menu-open .fm-wrap.open > a .nav-chevron { transform: translateY(1px) rotate(225deg); opacity: 1; }
  nav.menu-open .fm-wrap.open .fm { display: block; position: static; padding: 0 0 6px 12px;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; }
  nav.menu-open .fm::before { display: none; }
  nav.menu-open .fm-card, nav.menu-open .fm-right .fm-card { width: auto; margin: 0; padding: 0;
    border: none; box-shadow: none; background: transparent; border-radius: 0; }
  nav.menu-open .fm-grid { display: block; }
  nav.menu-open .fm-col-head { padding: 10px 14px 4px; margin: 0; }
  nav.menu-open .fm-promo { display: none; }
  nav.menu-open .fm .fm-item { margin: 0; padding: 11px 14px; }
  nav.menu-open .fm .fm-t { font-size: 13.5px; font-weight: 500; }
  nav.menu-open .fm-foot { margin: 4px 0 0; padding: 10px 14px 4px; border-top: 1px solid var(--border);
    text-align: left; }
  nav.menu-open .fm .fm-all { font-size: 13px; }
}

/* ── The card in the Community menu ─────────────────────────────────────────
   Same drawn tile as a blog cover: flat blocks of colour, the line set in the
   headline face. What it offers is the free plan, which is 20 leads and no
   card — nothing here is a claim we cannot keep. */
.fm-promo{ align-self: start; }
/* .nav-links a upper-cases everything inside it, the tile included. */
.fm .fm-promo-tile{ position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden; text-decoration: none;
  text-transform: none; letter-spacing: 0;
  transition: transform .18s; }
.fm .fm-promo-tile:hover{ transform: translateY(-3px); }
/* Only the backdrop, not the little mark's own svg. */
.fm .fm-promo-tile > svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-promo-t{ position: absolute; left: 18px; right: 18px; top: 16px;
  font-family: var(--font-head); font-size: 27px; font-weight: 600; line-height: 1.06;
  letter-spacing: -.02em; color: #0c0c0e; }
.fm-promo-mark{ position: absolute; left: 18px; bottom: 14px; display: inline-flex;
  align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0c0c0e; }
.fm .fm-promo-mark svg{ position: static; inset: auto; width: 13px; height: 13px; }
.fm-promo-sub{ font-size: 12.5px; line-height: 1.5; color: var(--text3); margin: 14px 0 8px; }
.fm .fm-promo-cta{ display: inline-flex; font-size: 13px; font-weight: 700; color: var(--green-text,var(--green2));
  text-decoration: none; text-transform: none; letter-spacing: 0; }
.fm .fm-promo-cta:hover{ color: var(--text); }
@media (max-width: 1100px){
  /* Not enough room for a third column — the links matter more than the card. */
  .fm-grid{ grid-template-columns: 1fr 1fr; }
  .fm-promo{ display: none; }
}

/* ── The panel, plain ──────────────────────────────────────────────────────
   The drop-down is the bar growing downwards: the same colour, the full
   width, the content starting where the logo starts. A quiet label, the
   main pages large on the left, the rest small in a second column. No card,
   no tiles, no rounded shell. The menu text is set in Inter, one face for the
   bar and every panel under it. */
nav, nav .nav-links a, .fm, nav .btn-ghost, nav .btn-solid, nav .nav-user-name{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* White, medium, plain words: no arrows next to them in the bar. */
.nav-links a{ font-weight: 500 !important; font-size: 14px !important; color: var(--text) !important; letter-spacing: 0 !important; }
@media (min-width: 981px){ .nav-links > li > a .nav-chevron{ display: none; } }
/* Under the pointer a word sits on a quiet rounded fill, and the word whose
   panel is open keeps it while the pointer is in the panel. The padding
   replaces part of the gap, so the words stay where they were. */
@media (min-width: 981px){
  nav .nav-links{ gap: 6px !important; margin-left: 36px !important; }
  .nav-links > li > a{ padding: 7px 12px; border-radius: 9px; transition: background-color .15s ease; }
  .nav-links > li > a:hover, .nav-links > li.fm-wrap:hover > a, .nav-links > li.fm-wrap:focus-within > a{
    background: rgba(255,255,255,.09); }
  [data-theme="light"] .nav-links > li > a:hover,
  [data-theme="light"] .nav-links > li.fm-wrap:hover > a,
  [data-theme="light"] .nav-links > li.fm-wrap:focus-within > a{ background: rgba(23,19,16,.065); }
}

/* ── The drop-downs as cards ───────────────────────────────────────────────
   A card hangs just under the bar, starting at the first word: columns of
   pages, each with one line on what it does, and on the right the drawn
   colour tile in a tinted bay, its button inside and a caption under it.
   It grows out of its top-left corner and leaves the same way. */
@media (min-width: 981px){
  .fm{ top: 100%; padding: 8px 0 0 calc(var(--nav-inset) + 132px) !important; pointer-events: none;
    background: none; border: 0; transform: none; transition: opacity .18s ease, visibility .18s; }
  .fm::before{ top: 0; height: 8px; }
  .fm-wrap .fm-card, .fm-wrap.fm-right .fm-card, .fm-right .fm-card{ pointer-events: auto; width: max-content;
    max-width: calc(100vw - var(--nav-inset) - 152px); margin: 0; padding: 10px; border-radius: 14px;
    background: #121214 !important; border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 28px 60px -30px rgba(0,0,0,.8);
    transform: translateY(-4px) scale(.985); transform-origin: 0 0;
    transition: transform .3s cubic-bezier(.2,.85,.25,1); }
  [data-theme="light"] .fm-wrap .fm-card{ background: #f7f6f1 !important; border-color: rgba(23,19,16,.12);
    box-shadow: 0 24px 50px -28px rgba(23,19,16,.38); }
  .fm-wrap:hover .fm-card, .fm-wrap:focus-within .fm-card{ transform: none; }
  .fm .fm-grid{ display: grid; gap: 0; max-width: none; }
  .fm .fm-grid-3{ grid-template-columns: repeat(3, 244px) 252px; }
  .fm .fm-grid-2{ grid-template-columns: repeat(2, 264px) 252px; }
  .fm .fm-promo-mark img{ display: block; width: 18px; height: auto; }
  .fm .fm-grid > div:not(.fm-promo){ padding: 14px 6px 6px; }
  .fm .fm-col-head{ font-size: 12.5px; font-weight: 400; color: var(--text3); margin: 0 10px 10px; }
  .fm .fm-item{ display: block; padding: 9px 10px; margin: 0 0 2px; border-radius: 9px; transition: background-color .15s; }
  .fm .fm-item:hover, .fm .fm-item:focus-visible{ background: rgba(255,255,255,.06); }
  [data-theme="light"] .fm .fm-item:hover, [data-theme="light"] .fm .fm-item:focus-visible{ background: rgba(23,19,16,.05); }
  .fm .fm-t{ display: block; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--text); padding: 0; }
  .fm .fm-d{ display: block; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--text3); margin-top: 2px; }
  .fm .fm-promo{ align-self: stretch; padding: 10px; border-radius: 10px; background: #1b1b1e; }
  [data-theme="light"] .fm .fm-promo{ background: #ebe8de; }
  .fm .fm-promo-tile{ border-radius: 9px; }
  .fm .fm-promo-tile:hover{ transform: none; }
  .fm .fm-promo-btn{ position: absolute; right: 12px; bottom: 12px; padding: 7px 13px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; background: #1a1714; color: #f0eee6; }
  .fm .fm-promo-sub{ margin: 10px 2px 2px; font-size: 13px; line-height: 1.45; color: var(--text2); }
}
@media (min-width: 981px) and (max-width: 1240px){ .fm .fm-promo{ display: none; } }
@media (prefers-reduced-motion: reduce){ .fm-card{ transition: none; transform: none !important; } }
@media (max-width: 980px){
  nav.menu-open .fm-grid{ display: block; }
  nav.menu-open .fm .fm-item{ padding: 10px 14px; }
  nav.menu-open .fm .fm-t{ font-size: 15px; font-weight: 500; }
  nav.menu-open .fm .fm-d{ display: none; }
}


/* ── The drop-downs, after Lovable's ───────────────────────────────────────
   Opens under its own word. On the left the main pages in two columns, each
   a name and one short line; on the right a softly tinted bay with the rest.
   White in the light theme, the dark colours as before. */
@media (min-width: 981px){
  .fm{ padding: 10px 0 0 var(--fm-x, calc(var(--nav-inset) + 132px)) !important; }
  .fm-wrap .fm-card.fm-split, .fm-right .fm-card.fm-split{ display: flex; padding: 0 !important; overflow: hidden; border-radius: 18px;
    max-width: calc(100vw - 24px); }
  [data-theme="light"] .fm-wrap .fm-card.fm-split{ background: #ffffff !important; border-color: rgba(23,19,16,.10);
    box-shadow: 0 24px 60px -28px rgba(23,19,16,.30); }
  .fm-split .fm-main{ padding: 26px 30px 24px; }
  .fm-split .fm-side{ padding: 26px 30px 24px; min-width: 250px; background: #1b1b1e; }
  [data-theme="light"] .fm-split .fm-side{ background: #f6f4ef; }
  .fm-split .fm-col-head{ margin: 0 0 14px !important; font-size: 13px; font-weight: 400; color: var(--text3); }
  .fm-split .fm-cols{ display: grid; grid-template-columns: repeat(2, minmax(236px, max-content)); gap: 4px 32px; grid-auto-flow: row; }
  .fm-split .fm-cols-1{ grid-template-columns: minmax(300px, max-content); }
  .fm-split .fm-item{ display: block; padding: 9px 12px !important; margin: 0 -12px 2px !important; border-radius: 10px !important; background: none; }
  .fm-split .fm-item:hover, .fm-split .fm-item:focus-visible{ background: rgba(255,255,255,.06) !important; }
  [data-theme="light"] .fm-split .fm-item:hover, [data-theme="light"] .fm-split .fm-item:focus-visible{ background: rgba(23,19,16,.045) !important; }
  .fm-split .fm-t{ font-size: 16px !important; font-weight: 500 !important; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
  .fm-split .fm-d{ font-size: 13px !important; line-height: 1.4; color: var(--text2) !important; margin-top: 3px; white-space: nowrap; }
  .fm-right .fm-split .fm-side{ min-width: 300px; }
}
@media (min-width: 981px) and (max-width: 1180px){ .fm-split .fm-d{ white-space: normal; } .fm-split .fm-cols{ grid-template-columns: repeat(2, 210px); } }
@media (max-width: 980px){
  nav.menu-open .fm-split{ display: block; }
  nav.menu-open .fm-split .fm-main, nav.menu-open .fm-split .fm-side{ padding: 0; background: none; }
  nav.menu-open .fm-split .fm-cols{ display: block; }
}
/* The burger panel on a phone was black in the light theme too. */
@media (max-width: 980px){
  [data-theme="light"] nav.menu-open .nav-links{ background: #ffffff !important; border-color: rgba(23,19,16,.12) !important;
    box-shadow: 0 24px 60px -28px rgba(23,19,16,.3) !important; }
}

/* ── Type after Lovable's menu, the colour tile back on the right ──────────
   Measured on lovable.dev: name 16px/24px at weight 480, line under it
   12px/16px in a warm grey, each row padded 7/12/9px with a 10px corner, the
   panel 32/20/24px. Their face (Camera Plain) is licensed, so the bar's Inter
   stands in at the same sizes; it is variable, so 480 is a real weight.
   The rest of the pages sit in a plain third column, and the drawn colour
   tile has the tinted bay on the far right, its button inside and a caption
   under it. */
@media (min-width: 981px){
  .fm-wrap .fm-card.fm-split, .fm-right .fm-card.fm-split{ border-radius: 16px; }
  .fm-split .fm-main, .fm-split .fm-side{ padding: 32px 20px 24px; background: none !important; min-width: 0; }
  .fm-split .fm-main{ padding-left: 24px; }
  .fm-right .fm-split .fm-side{ min-width: 0; }
  .fm-split .fm-col-head{ margin: 0 12px 12px !important; font-size: 12px !important; line-height: 16px; font-weight: 400 !important; color: #5f5f5d !important; }
  .fm-split .fm-cols{ grid-template-columns: repeat(2, 240px); gap: 2px 12px; }
  .fm-split .fm-cols-1{ grid-template-columns: 240px; }
  .fm-split .fm-item{ width: 240px; box-sizing: border-box; padding: 7px 12px 9px !important; margin: 0 0 2px !important; border-radius: 10px !important; }
  .fm-split .fm-t{ font-size: 16px !important; line-height: 24px; font-weight: 480 !important; letter-spacing: 0; color: #191919; }
  .fm-split .fm-d{ font-size: 12px !important; line-height: 16px; font-weight: 400; margin-top: 0; color: #5f5f5d !important; white-space: normal; }
  [data-theme="dark"] .fm-split .fm-t{ color: #f2f1ee; }
  [data-theme="dark"] .fm-split .fm-d, [data-theme="dark"] .fm-split .fm-col-head{ color: #a3a19c !important; }
  .fm-split .fm-promo{ display: block; align-self: stretch; width: 268px; flex: none; padding: 20px; border-radius: 0; background: #1b1b1e; }
  [data-theme="light"] .fm-split .fm-promo{ background: #f6f4ef; }
  .fm-split .fm-promo-tile{ border-radius: 12px; }
  .fm-split .fm-promo-sub{ margin: 12px 2px 0; font-size: 12px; line-height: 16px; color: #5f5f5d; }
  [data-theme="dark"] .fm-split .fm-promo-sub{ color: #a3a19c; }
}
@media (min-width: 981px) and (max-width: 1240px){ .fm-split .fm-promo{ display: none; } }
@media (max-width: 980px){ nav.menu-open .fm-split .fm-promo{ display: none; } }