/* Use Cases mega menu (mega.js). A light card under the bar on every page, dark or light bar. Every hover eases. */
.mm{position:relative;display:inline-flex;align-items:center;gap:4px}
.mm-tog{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;cursor:pointer;color:inherit;opacity:.7;transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.mm-tog svg{width:12px;height:12px}
.mm:hover .mm-tog,.mm-tog:focus-visible{opacity:1}
.mm.on .mm-tog{transform:rotate(180deg);opacity:1}
.mm-tog:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:2px}
.mm-panel{position:absolute;top:calc(100% + 22px);left:50%;width:min(720px,calc(100vw - 48px));transform:translate(-50%,-6px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-line);border-radius:8px;box-shadow:0 1px 2px rgba(18,22,20,.06),0 28px 60px -28px rgba(18,22,20,.35);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s;z-index:41;text-align:left;font-weight:400}
.mm-panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px} /* keeps hover alive across the gap */
.mm.on .mm-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
.mm-k{margin:0 0 10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-secondary)}
.mm-list{padding:20px 12px 14px 20px}
.mm-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bar .mm-panel a{color:var(--color-ink)!important;opacity:1}
.bar .mm-panel a::after{display:none}
.mm-list a{display:flex;align-items:flex-start;gap:12px;padding:10px 10px;margin:0 -2px;border-radius:6px;text-decoration:none;transition:background-color .25s cubic-bezier(.22,1,.36,1)}
.mm-list a:hover,.mm-list a:focus-visible{background:var(--color-bg-subtle)}
.mm-list a:focus-visible{outline:2px solid var(--logo-green);outline-offset:-2px}
.mm-list a[aria-current] b{color:var(--logo-green)}
/* the icon sits beside the title with no tile around it (Oct 22 call), like the line icons at the top of the homepage */
.mm-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;color:var(--logo-green)}
.mm-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-t b{font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1.25;transition:color .25s cubic-bezier(.22,1,.36,1)}
.mm-t span{font-size:13.5px;line-height:1.35;color:var(--color-ink-secondary);text-wrap:pretty}
.mm-side{padding:20px 22px 22px;border-left:1px solid var(--color-line-subtle);background:linear-gradient(to bottom,var(--color-bg-subtle),var(--color-surface));border-radius:0 8px 8px 0;display:flex;flex-direction:column}
.mm-side p:not(.mm-k){margin:0;font-size:14px;line-height:1.5;color:var(--color-ink-secondary);text-wrap:pretty}
@media(max-width:1010px){.mm-tog,.mm-panel{display:none}}
/* phone and tablet menu */
.mnav-uc{display:flex;flex-direction:column;padding:6px 0 12px;border-bottom:1px solid rgba(247,247,245,.12)}
.mnav .mnav-uc a{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:400;letter-spacing:0;padding:9px 0;border-bottom:0;color:#C9CCC9;transition:color .25s cubic-bezier(.22,1,.36,1)}
.mnav .mnav-uc a:hover,.mnav .mnav-uc a[aria-current]{color:var(--color-ink-inverse)}
.mnav-uc .mm-ic{width:22px;height:22px;color:var(--color-accent)}
.mnav-uc .mm-ic svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.mm-panel,.mm-tog{transition:none}}

/* Oct 21 (Nicole): the three buyer use cases carry their buyer label in the menu too */
.mm-buyer{font-style:normal;display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--color-brand-wash);color:var(--color-brand-ink,#2F6B3A);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;font-weight:500}
.mm-list a{padding:8px 10px}
.mm-t span{font-size:13px}

/* ===== Oct 21 (Brian's reference): a wide panel under the bar. Left: the four industries two by two, each with an icon
   tile, name and question; right: a grey "By buyer" column with the three buyer use cases and All use cases. ===== */
.mm-panel{position:fixed;top:calc(var(--nav-h,84px) - 4px);left:50%;width:min(1080px,calc(100vw - 48px));grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);border-radius:12px;overflow:hidden}
.mm-panel::before{top:-28px;height:28px}
.mm-list{padding:24px 20px 20px 24px}
.mm-list ul{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mm-list a{align-items:flex-start;gap:14px;padding:14px;margin:0;border:1px solid transparent;border-radius:10px;transition:background-color .25s cubic-bezier(.22,1,.36,1),border-color .25s cubic-bezier(.22,1,.36,1)}
.mm-list a:hover,.mm-list a:focus-visible{background:color-mix(in srgb,var(--color-brand-wash) 45%,var(--color-surface));border-color:color-mix(in srgb,var(--logo-green) 25%,var(--color-line))}
.mm-ic svg{width:22px;height:22px}
.mm-t b{font-size:16px}
.mm-t span{font-size:14px;line-height:1.45}
.mm-side{padding:24px 22px 22px;background:var(--color-bg-subtle);border-left:1px solid var(--color-line-subtle);border-radius:0}
.mm-buyers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mm-buyers a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;margin:0 -12px;border-radius:10px;text-decoration:none;transition:background-color .25s cubic-bezier(.22,1,.36,1)}
.mm-buyers a:hover,.mm-buyers a:focus-visible{background:var(--color-surface)}
.mm-buyers .mm-buyer{margin:0}
.mm-buyers b{font-size:15px;font-weight:500;color:var(--color-ink)}
.mm-buyers span{font-size:13.5px;line-height:1.4;color:var(--color-ink-secondary)}
.mm-buyers a[aria-current] b{color:var(--logo-green)}
/* By buyer uses the same items as By industry (icon tile, name, question), one column, on the grey side (Brian) */
.mm-side.mm-list ul.mm-buyers{display:flex;flex-direction:column;gap:6px}
.mm-side.mm-list a{background:transparent}
.mm-side.mm-list a:hover,.mm-side.mm-list a:focus-visible{background:var(--color-surface);border-color:color-mix(in srgb,var(--logo-green) 25%,var(--color-line))}
.mm-side .mm-buyer{margin-left:6px}
.mm-side.mm-list .mm-buyers a{flex-direction:row;align-items:flex-start;gap:14px;padding:14px;margin:0;border:1px solid transparent}
/* the left column fills to the right column's height: roomier items, then a short guide to how each example reads */
.mm-main{display:flex;flex-direction:column}
.mm-main ul a{padding:16px 14px}
/* questions wrap naturally (pretty wrapping broke "What leaves with our account director?" too early); a lighter grey for By buyer */
.mm-t span{text-wrap:wrap}
.mm-side{background:color-mix(in srgb,var(--color-bg-subtle) 45%,var(--color-surface))}
.mm-panel{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr)} /* the industry questions fit without a lone word */
.mm-t span{text-wrap:pretty}
.mm-side{background:color-mix(in srgb,var(--color-bg-subtle) 22%,var(--color-surface))} /* barely off-white (Brian) */
.mm-panel{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)} /* right column a little wider (Brian) */
.mm-main ul a{padding:16px 10px;gap:12px}.mm-list.mm-main{padding-left:18px;padding-right:14px}
/* guide removed (Brian): the four industry items stretch to the column height instead */
.mm-main ul{flex:1;grid-auto-rows:1fr}.mm-main ul a{height:100%;box-sizing:border-box;align-items:center}
.mm-list a:hover,.mm-list a:focus-visible,.mm-side.mm-list a:hover{border-color:transparent} /* hover is the tint alone (Brian) */
.mm-side.mm-list .mm-buyers a:hover,.mm-side.mm-list .mm-buyers a:focus-visible{background:color-mix(in srgb,var(--color-brand-wash) 55%,var(--color-surface))} /* a touch more visible on the off-white column (Brian) */
/* industry items at their natural height, less vertical padding (Brian) */
.mm-main ul{flex:none;grid-auto-rows:auto}.mm-main ul a{height:auto;padding:12px 10px;align-items:flex-start}
/* the two industry rows spread to the column height, so the first and last rows line up with By buyer (Brian) */
.mm-main ul{flex:1;align-content:space-between;row-gap:12px}
/* undo the spread; instead the buyer items are a little tighter so both columns end up close in height (Brian) */
.mm-main ul{flex:none;align-content:start;row-gap:6px}
.mm-side.mm-list .mm-buyers{gap:2px}
.mm-side.mm-list .mm-buyers a{padding:9px 14px}
.mm-main ul{row-gap:14px}.mm-main ul a{padding:14px 10px}
/* all four industry links the same height (rows equal, each link fills its cell, a floor for one-line questions) */
.mm-main ul{grid-auto-rows:1fr}.mm-main ul li{display:flex}.mm-main ul a{flex:1;height:auto;min-height:86px}
/* a super subtle edge back on hover, just enough to hold the tint (Brian) */
.mm-list a:hover,.mm-list a:focus-visible,.mm-side.mm-list a:hover,.mm-side.mm-list .mm-buyers a:hover,.mm-side.mm-list .mm-buyers a:focus-visible{border-color:color-mix(in srgb,var(--logo-green) 6%,color-mix(in srgb,var(--color-line-subtle) 60%,transparent))}

/* Oct 22, Lindsey: the panel takes the bar's look. Under a light bar it is light glass (white at .94, blur); under a dark bar it is
   dark glass, the same layout, grouping and icons, with the panel's own tokens swapped so every rule above carries over. Both are
   near-opaque (.98, Lindsey: .94 was a touch too clear) so the page behind never competes with the text. */
.mm-panel{background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.bar:not(.light) .mm-panel{
  --color-surface:#1A1F1C;--color-ink:#F7F7F5;--color-ink-secondary:#B8BBB7;--color-line:rgba(247,247,245,.14);--color-line-subtle:rgba(247,247,245,.08);
  --color-bg-subtle:#232925;--color-brand-wash:rgba(176,225,182,.14);--color-brand-ink:#B0E1B6;
  background:rgba(26,31,28,.98);border-color:rgba(247,247,245,.12);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 28px 60px -28px rgba(0,0,0,.7)}
.bar:not(.light) .mm-side{background:rgba(247,247,245,.03)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mm-panel{background:#FFFFFF}.bar:not(.light) .mm-panel{background:#1A1F1C}}
/* Oct 22, Lindsey: every green in the menu is the nav's Request a Demo fill (--color-action, the mint). Icons, lines, hover edges and
   focus rings use it on both panels; text that was green (the current page, the buyer label) is mint on the dark panel and ink on
   the light one, where mint text would fail contrast. The Korravo logo keeps its own colours. */
.mm-ic,.mnav-uc .mm-ic{color:var(--color-action)}
.mm-list a:focus-visible{outline-color:var(--color-action)}
.mm-list a:hover,.mm-list a:focus-visible,.mm-side.mm-list a:hover,.mm-side.mm-list .mm-buyers a:hover,.mm-side.mm-list .mm-buyers a:focus-visible{border-color:color-mix(in srgb,var(--color-action) 40%,transparent)}
.mm-list a:hover,.mm-list a:focus-visible,.mm-side.mm-list .mm-buyers a:hover,.mm-side.mm-list .mm-buyers a:focus-visible{background:color-mix(in srgb,var(--color-action) 16%,var(--color-surface))}
.mm-list a[aria-current] b,.mm-buyers a[aria-current] b{color:var(--color-ink)}
.bar:not(.light) .mm-list a[aria-current] b,.bar:not(.light) .mm-buyers a[aria-current] b{color:var(--color-action)}
.mm-buyer{background:color-mix(in srgb,var(--color-action) 35%,var(--color-surface));color:var(--color-ink)}
.bar:not(.light) .mm-buyer{background:color-mix(in srgb,var(--color-action) 16%,transparent);color:var(--color-action)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mm-panel{background:#FFFFFF}.bar:not(.light) .mm-panel{background:#1A1F1C}}

/* Oct 22 (Brian): a background blur behind the menu panel only (not the page). The panel is a little see-through so the blur shows;
   the blur is strong enough that the page behind never competes with the text. */
.mm-panel{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
.bar:not(.light) .mm-panel{background:rgba(26,31,28,.82)}
/* the blur layer behind the panel (mega.js keeps it on the panel's box): under the bar (z 40), over the page */
.mm-glass{position:fixed;z-index:39;pointer-events:none;border-radius:12px;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.mm-glass.on{opacity:1;visibility:visible;transition:opacity .25s cubic-bezier(.22,1,.36,1),visibility 0s}
@media(max-width:1010px){.mm-glass{display:none}}
@media (prefers-reduced-transparency:reduce){.mm-glass{display:none}.mm-panel,.bar:not(.light) .mm-panel{background:var(--color-surface)}}