/* Do by Businlog: global chrome (header, mega menu, phone menu, big footer). Loaded after site.css and brand.css.
   Light only. Works without JS: menus are <details>; base.html adds hover intent, Esc and click-outside. */

:root {
  --mm-w: 980px;
  --tone-violet: #5b3df5; --tone-violet-bg: rgba(91, 61, 245, .10);
  --tone-pink: #c42a6b;   --tone-pink-bg: rgba(255, 77, 141, .12);
  --tone-sun: #b45309;    --tone-sun-bg: rgba(255, 176, 32, .18);
  --tone-mint: #0b8a63;   --tone-mint-bg: rgba(18, 184, 134, .14);
}

/* ---------- header ---------- */
.site-head { transition: border-color .2s, box-shadow .25s, background-color .2s; }
.site-head.scrolled { box-shadow: 0 1px 0 rgba(70, 45, 10, .04), 0 10px 30px -18px rgba(70, 45, 10, .22); }
.site-head:has(.mm[open]) { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); }
.head-in { position: relative; }
.nav.mm-nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }

/* triggers + the plain Pricing link share one pill look */
.mm > summary, .mm-solo {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 999px; color: var(--ink-2); font: 550 .94rem/1 var(--f-body); text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none; position: relative;
  transition: color .15s, background-color .15s;
}
.mm > summary::-webkit-details-marker { display: none; }
.mm > summary::marker { content: ""; }
.mm > summary:hover, .mm-solo:hover, .mm[open] > summary { color: var(--ink); background: var(--surface); }
.mm[open] > summary { box-shadow: var(--shadow-sm); }
.mm-solo[aria-current="page"], .mm.is-current > summary { color: var(--ink); }
.mm-solo[aria-current="page"]::after, .mm.is-current > summary::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #5b3df5, #ff4d8d, #ffb020);
}
.mm-chev { flex: none; color: var(--ink-3); transition: transform .2s ease; }
.mm[open] .mm-chev { transform: rotate(180deg); color: var(--ink); }

/* the panel: centred under the header, one per menu */
.mm-panel {
  position: absolute; z-index: 45; top: calc(100% - 8px); left: 50%; translate: -50% 0;
  width: min(var(--mm-w), calc(100% - var(--gutter) * 2));
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 2px 4px rgba(70, 45, 10, .04), 0 34px 70px -28px rgba(30, 27, 90, .34), 0 16px 30px -18px rgba(214, 51, 122, .18);
}
.mm-panel::before { /* hover bridge from the trigger down to the panel */
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
}
.mm-in::after { /* sunrise hairline */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #5b3df5, #ff4d8d 55%, #ffb020);
}
.mm-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; border-radius: 19px; overflow: hidden; }
.mm-main { padding: 22px 22px 20px; }
.mm-kicker { margin: 0 0 10px 12px; font: 650 .74rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* undo site.css's `.nav a` / `.mnav-panel a` pill styles inside the panels */
.mm-panel a { padding: 0; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; background: none; }
.mm-panel a:hover, .mm-panel a[aria-current="page"] { color: inherit; background: none; box-shadow: none; }
.site-head .mnav-panel .mnav-foot p a, .site-head .mnav-panel .mnav-foot p a:hover { padding: 0; border-radius: 0; background: none; font-weight: 600; }
.nav .mm-solo { padding: 0 12px; }
.nav .mm-solo[aria-current="page"] { background: none; box-shadow: none; }
.nav .mm-solo[aria-current="page"]:hover { background: var(--surface); }

/* one item: icon tile + label + one line (shared by the desktop panel and the phone menu) */
.mm-panel .mm-link, .mnav-link {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px;
  color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.mm-panel .mm-cols-3 .mm-link { flex-direction: column; gap: 12px; height: 100%; }
.mm-panel .mm-link:hover, .site-head .mnav-panel .mnav-link:hover { background: var(--surface-2); text-decoration: none; }
.mm-panel .mm-link[aria-current="page"], .site-head .mnav-panel .mnav-link[aria-current="page"] { background: #fff4e2; }
.mm-ic {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  color: var(--tone-violet); background: var(--tone-violet-bg);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.mm-ic.tone-pink { color: var(--tone-pink); background: var(--tone-pink-bg); }
.mm-ic.tone-sun { color: var(--tone-sun); background: var(--tone-sun-bg); }
.mm-ic.tone-mint { color: var(--tone-mint); background: var(--tone-mint-bg); }
.mm-link:hover .mm-ic { transform: translateY(-1px) scale(1.06); }
.mm-txt { display: grid; gap: 4px; min-width: 0; }
.mm-txt b { font: 650 .95rem/1.25 var(--f-body); letter-spacing: -.01em; }
.mm-txt small { font-size: .84rem; line-height: 1.45; color: var(--ink-3); }
.mm-link .mm-txt b::after { /* a small arrow slides in on hover */
  content: "\2192";
  content: "\2192" / ""; /* decorative: keep screen readers from reading "right arrow" after each label */
  display: inline-block; margin-left: 6px; color: var(--accent-ink);
  opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .2s;
}
.mm-link:hover .mm-txt b::after, .mm-link:focus-visible .mm-txt b::after { opacity: 1; transform: none; }

/* the warm side card */
.mm-aside {
  padding: 26px 24px 22px; border-left: 1px solid var(--line);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 176, 32, .20), transparent 70%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 77, 141, .10), transparent 70%),
    #fffaf2;
  font-size: .9rem; color: var(--ink-2);
}
.mm-aside p { margin: 0 0 10px; line-height: 1.5; max-width: none; text-wrap: pretty; }
.mm-aside-k { font: 650 .74rem/1 var(--f-body) !important; letter-spacing: .08em; text-transform: uppercase; color: #c2410c; margin-bottom: 12px !important; }
.mm-aside-big { font-size: .95rem; color: var(--ink); }
.mm-aside-big b { font: 750 1.9rem/1 var(--f-display); letter-spacing: -.03em; margin-right: 4px; }
.mm-panel .mm-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 650; color: var(--accent-ink); text-decoration: none; }
.mm-more svg { transition: transform .2s; }
.mm-panel .mm-more:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.mm-more:hover svg { transform: translateX(3px); }
.mm-mail { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; }
.mm-panel .mm-mail a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .mm[open] > .mm-panel { animation: mm-in .22s cubic-bezier(.2, .7, .2, 1) both; }
  .mnav[open] > .mnav-panel { animation: mnav-in .28s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1100px) {
  .mm-in { grid-template-columns: minmax(0, 1fr) 240px; }
  .mm-panel .mm-cols-3 .mm-link { flex-direction: row; }
  .mm-cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phone + tablet menu ---------- */
@media (max-width: 960px) {
  .nav.mm-nav { display: none; }
  .mnav { display: block; }
  .site-head .mnav { position: static; }
  html:has(.mnav[open]) { overflow: hidden; }
  .site-head:has(.mnav[open]) { background: var(--surface); border-bottom-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.mnav > summary { transition: background-color .15s, border-color .15s; }
.mnav[open] > summary { background: var(--surface-2); border-color: var(--line-2); }
.site-head .mnav-panel {
  position: absolute; left: 0; right: 0; top: 100%; width: auto; z-index: 45;
  height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 0; padding: 0;
  background: var(--surface); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.mnav-in { display: grid; gap: 22px; padding: 18px var(--gutter) 24px; }
.mnav-h { margin: 0 0 6px 12px; font: 650 .74rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mnav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-head .mnav-panel .mnav-link { padding: 10px 12px; font-weight: 400; }
.mnav-link .mm-ic { width: 36px; height: 36px; }
.mnav-solos { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.site-head .mnav-panel .mnav-solo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 400;
}
.mnav-solo b { font: 650 1rem/1.2 var(--f-body); }
.mnav-solo span { color: var(--ink-3); font-size: .86rem; }
.site-head .mnav-panel .mnav-solo:hover { background: var(--surface-2); }
.site-head .mnav-panel .mnav-solo[aria-current="page"] { background: #fff4e2; }
.mnav-foot {
  position: sticky; bottom: 0; margin-top: auto; display: grid; gap: 10px;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 252, 246, .96); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-head .mnav-panel .mnav-foot .btn { margin: 0; --h: 48px; }
.mnav-foot p { margin: 2px 0 0; text-align: center; font-size: .86rem; color: var(--ink-3); }
.mnav-foot p a { color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 620px) and (max-width: 960px) {
  .mnav-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding-top: 24px; }
  .mnav-solos { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
  .mnav-foot { grid-template-columns: 1fr 1fr; }
  .mnav-foot p { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .mnav-link small { display: none; }
  .mnav-link { align-items: center; }
}

/* ---------- big footer ---------- */
.big-foot { position: relative; padding: clamp(48px, 7vw, 80px) 0 32px; border-top: 0; }
.big-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #5b3df5, #ff4d8d 50%, #ffb020); opacity: .85; }
.big-foot .foot-grid { grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)); gap: 32px 28px; }
.big-foot .foot-grid h2 { margin-top: 4px; }
.big-foot .foot-grid ul { gap: 10px; }
.big-foot .foot-grid a { overflow-wrap: anywhere; }
.big-foot .foot-about p { color: var(--ink-2); }
.foot-talk {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; max-width: 26rem; padding: 14px 16px;
  background: var(--surface); border: 1px solid rgba(255, 138, 0, .22); border-radius: 16px;
  box-shadow: 0 10px 26px -18px rgba(255, 140, 40, .45);
}
.foot-talk p { margin: 0 !important; font-size: .9rem; line-height: 1.5; }
.foot-talk b { color: var(--ink); }
.foot-talk a { color: var(--accent-ink) !important; font-weight: 650; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.foot-talk-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--tone-sun); background: var(--tone-sun-bg); }
.big-foot .foot-base { margin-top: 44px; align-items: center; font-size: .86rem; }
.foot-top { color: var(--ink-2); text-decoration: none; font-weight: 600; white-space: nowrap; }
.foot-top:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 1100px) {
  .big-foot .foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .big-foot .foot-about { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 8px 40px; align-items: start; }
  .big-foot .foot-about .brand { grid-column: 1 / -1; }
  .big-foot .foot-about p { margin-top: 0; }
  .foot-talk { margin-top: 0; }
}
@media (max-width: 760px) {
  .big-foot .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .big-foot .foot-about { display: block; }
  .big-foot .foot-about p { margin-top: 14px; }
  .foot-talk { margin-top: 18px; }
  .big-foot .foot-base { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.site-head .mnav-foot .btn-ghost { display: inline-flex; }