/*
 * Mega-menu navigation, ported from the new-design mockup.
 * Every selector is scoped under .fc-header so generic class names
 * (.item, .items, .btn, .panel, .chev, .ext, .wrap ...) never leak onto
 * the rest of the site, which already reuses several of those names.
 */

.fc-header{
	--ink:#0b0b28;
	--ink-2:#3c415c;
	--muted:#6b7288;
	--line:#e6e8ef;
	--tint:#f6f7fb;
	--indigo:#5b2fb0;
	--indigo-hover:#4a2494;
	--indigo-soft:#f2eaff;
	--wp-tint:#f5efff;
	--teal:#20c9a5;
	--teal-2:#12b3ba;
	--amber:#8a6314;
	--amber-bg:#fdf4e2;

	position:sticky;top:0;background:#fff;
	border-bottom:1px solid var(--line);z-index:60;
}
.fc-header *{box-sizing:border-box}
.fc-header a{text-decoration:none;color:inherit}
.fc-header button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fc-header ul{list-style:none;margin:0;padding:0}
.fc-header img,.fc-header svg{display:block;max-width:100%}

.fc-header .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:9px;font-size:14.5px;font-weight:700;white-space:nowrap;transition:transform .12s ease,filter .12s ease,background .12s ease}
.fc-header .btn--solid{background:linear-gradient(100deg,var(--teal),var(--teal-2));color:#fff;box-shadow:0 8px 20px -10px rgba(18,179,186,.9)}
.fc-header .btn--solid:hover{filter:brightness(1.06);transform:translateY(-1px)}
.fc-header .btn--sm{padding:10px 22px;font-size:14px;border-radius:999px}

/* ============================== bar =============================== */
.fc-header .fc-bar{display:flex;align-items:center;gap:22px;max-width:1360px;margin:0 auto;padding:0 54px;height:64px}
.fc-header .fc-logo-wrap{flex:0 0 auto}
.fc-header .fc-logo{display:flex;align-items:center;flex:0 0 auto}
.fc-header .fc-logo img{height:24px;width:auto;aspect-ratio:735/115;margin-top:3px;margin-right:15px;filter:brightness(0)}

.fc-header .fc-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto}
.fc-header .fc-nav__link{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;font-size:15px;font-weight:700;color:var(--ink);transition:color .13s ease}
.fc-header .fc-nav__link:hover{color:var(--indigo)}
.fc-header .fc-nav__link:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.fc-header .fc-nav__item[data-open="true"] .fc-nav__link{color:var(--ink)}
.fc-header .chev{flex:0 0 auto;position:relative;top:2px;width:11px;height:11px;opacity:.75;transition:transform .18s ease}
.fc-header .fc-nav__item[data-open="true"] .chev{transform:rotate(180deg)}

.fc-header .fc-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.fc-header .link-signin{padding:8px 12px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.fc-header .link-signin:hover{color:var(--indigo)}

/* ============================= panels =============================== */
/* .fc-menu spans the full header width (anchored to .fc-header, not the
   triggering item), so .panel's fixed left offset below means the same
   thing for every menu: a consistent distance from the header's own left
   edge, not from whichever button happens to be open. */
.fc-header .fc-menu{position:absolute;left:0;right:0;top:100%;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.fc-header .fc-nav__item[data-open="true"] .fc-menu{opacity:1;visibility:visible;transform:translateY(0)}
.fc-header .fc-menu__wrap{max-width:1360px}

.fc-header .panel{
	position:absolute;left:254px;top:100%;margin-top:8px;
	display:flex;align-items:flex-start;gap:40px;
	width:max-content;max-width:calc(100vw - 274px);
	background-color:#ffffff;border-radius:18px;padding:18px 30px 30px;
	box-shadow:0 26px 60px -22px rgba(11,11,40,.3), 0 2px 10px rgba(11,11,40,.06);
}

.fc-header .eyebrow-sm{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8b90a8}

.fc-header .items{display:grid;grid-template-columns:repeat(2,minmax(172px,205px));gap:2px 20px}
.fc-header .items--1{grid-template-columns:minmax(172px,215px)}
/* fills column by column, so related items stay grouped on the left */
.fc-header .items--flow{grid-auto-flow:column;grid-template-rows:repeat(3,auto)}

.fc-header .items > li{display:block}
.fc-header .item{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:10px;transition:background .14s ease}
.fc-header .item:hover{background:#f5f6fb}
.fc-header .item__icon{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--indigo-soft);color:var(--indigo);display:grid;place-items:center}
.fc-header .item__icon svg{width:18px;height:18px}
.fc-header .item__icon--plain{background:transparent}
.fc-header .item__icon--plain svg{width:22px;height:22px}
.fc-header .item__t{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--ink)}
.fc-header .item:hover .item__t{color:var(--indigo)}
.fc-header .ext{display:inline-block;width:11px;height:11px;margin-left:6px;vertical-align:-1px;opacity:.45}
.fc-header .item:hover .ext{opacity:.75}

.fc-header .badge{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;vertical-align:1px}
.fc-header .badge--new{background:var(--indigo)}
.fc-header .badge--popular{background:#e2632f}
.fc-header .badge--updated{background:#12b3ba}

/* ---------------------- panel rail (testimonial) ---------------------- */
.fc-header .panel__aside{
	align-self:stretch;margin:-18px -30px -30px 0;padding:26px 26px 30px;
	background:var(--wp-tint);border-left:1px solid #e8e4fa;border-radius:0 18px 18px 0;
}
.fc-header .panel__aside--quote{display:flex;flex-direction:column;justify-content:space-between;width:252px;background:#ded9fb;border-left-color:#cec6f7}
.fc-header .quote-rail{margin:0}
.fc-header .quote-rail__mark{display:block;font-family:Georgia,"Times New Roman",serif;font-size:36px;font-weight:700;line-height:.5;color:#2a2360}
.fc-header .quote-rail__mark--end{text-align:right;margin-top:16px}
.fc-header .quote-rail blockquote{margin:16px 0 0;font-size:15px;font-style:italic;line-height:1.55;color:#1d1750}
.fc-header .quote-rail figcaption{margin-top:16px;text-align:right;font-size:11px;font-style:italic;color:#4b4489}
.fc-header .panel__aside--quote .panel-more{align-self:flex-end;margin-top:20px;color:#2a2360}

.fc-header .panel-more{display:inline-flex;align-items:center;gap:6px;margin-top:15px;padding-left:2px;font-size:13px;font-weight:700;color:var(--indigo)}
.fc-header .panel-more:hover{text-decoration:underline}
.fc-header .panel-more--quiet{font-size:11.5px;font-weight:600;color:var(--muted)}
.fc-header .panel-more--quiet:hover{color:var(--indigo)}

.fc-header .fc-burger{display:none;padding:8px;border-radius:7px;margin-left:auto}
.fc-header .fc-burger:hover{background:var(--tint)}

/* =============================== banner ================================
   Sits outside .fc-header (it's a separate bar below it), so its base rules
   must come before the mobile media queries below — same specificity, and
   an unconditional rule placed after a media-query rule would always win
   the cascade and silently cancel the responsive overrides. ==================== */
.release-bar{background:#0b0b28;color:#a6abc6}
.release-bar__in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1360px;margin:0 auto;padding:11px 54px;font-size:13.5px}
.release-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(32,201,165,.13);color:#79dcc4;border:1px solid rgba(32,201,165,.26);font-weight:600;font-size:12.5px;letter-spacing:.01em;padding:3px 11px;border-radius:99px;white-space:nowrap}
.release-bar a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.release-bar a:hover{color:#20c9a5}
.release-close{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
	border-radius:7px;color:rgba(255,255,255,.5);transition:background .14s ease,color .14s ease;border:0;background:none;cursor:pointer}
.release-close:hover{background:rgba(255,255,255,.1);color:#fff}
.release-close svg{width:15px;height:15px;display:block}
.release-bar[hidden]{display:none}

/* ============================ mid-desktop ============================
   Between the 1024px mobile cutover and the panel's ~1360px design width
   there isn't enough room for the item columns plus the testimonial rail
   on one row at the panel's normal left:254px offset (under "Products").
   Trimming the rail's width keeps that offset — and the one-row, full-size
   column layout — all the way down to 1190px. Below that, there just
   isn't enough room left of the panel even with the rail trimmed, so the
   panel itself shifts closer to the header's left edge instead. */
@media (max-width:1360px){
	.fc-header .panel{gap:36px}
	.fc-header .panel__aside--quote{width:220px;min-width:0}
}
@media (max-width:1190px){
	.fc-header .panel{left:40px;max-width:calc(100vw - 80px);gap:32px}
}
/* The top bar itself (logo + 5 links + Buy Now + Try button) needs roughly
   1100px at full size; tighten it so nothing overflows or gets its chevron
   squeezed out between the 1024px mobile cutover and 1200px. */
@media (max-width:1200px) and (min-width:1025px){
	.fc-header .fc-bar{padding:0 24px;gap:12px}
	.fc-header .fc-logo img{margin-right:0}
	.fc-header .fc-nav{gap:0}
	.fc-header .fc-nav__link{padding:8px 9px;font-size:14px;gap:4px}
	.fc-header .link-signin{padding:8px;font-size:14px}
	.fc-header .btn--sm{padding:9px 16px;font-size:13px}
}
/* =============================== mobile =============================== */
@media (max-width:1024px){
	.fc-header .fc-burger{display:block;order:1}
	.fc-header .fc-bar{flex-wrap:wrap;height:auto;min-height:58px;gap:0 12px}
	.fc-header .fc-logo-wrap,.fc-header .fc-burger{min-height:58px;display:flex;align-items:center}
	.fc-header .fc-logo-wrap{order:0}
	/* .fc-burger comes last in the markup, after .fc-nav and .fc-actions; without
	   an explicit order it wraps to a new row below them once those go full-width
	   for the open drawer, instead of staying pinned next to the logo. */
	.fc-header .fc-nav{order:2}
	.fc-header .fc-actions{order:3}
	.fc-header .fc-nav,.fc-header .fc-actions{display:none;flex:0 0 100%;width:100%}
	body[data-drawer="open"] .fc-header .fc-nav{display:block;padding:4px 0 10px;border-top:1px solid var(--line);max-height:calc(100vh - 190px);overflow-y:auto}
	body[data-drawer="open"] .fc-header .fc-actions{display:flex;gap:10px;padding:0 0 18px}
	body[data-drawer="open"] .fc-header .fc-actions .link-signin{flex:1;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--indigo);border-radius:999px;color:var(--indigo);padding:11px 18px;font-size:14px;font-weight:700}
	body[data-drawer="open"] .fc-header .fc-actions .btn--sm{flex:1;padding:12px 18px}
	.fc-header .fc-nav__link{width:100%;padding:12px;font-size:16px}
	.fc-header .fc-nav__item[data-menu] .fc-nav__link{justify-content:space-between}
	.fc-header .fc-menu{position:static;opacity:1;visibility:visible;transform:none;display:none}
	.fc-header .fc-nav__item[data-open="true"] .fc-menu{display:block}
	.fc-header .panel{position:static;left:auto;top:auto;margin-top:0;display:block;width:auto;max-width:none;max-height:none;overflow:visible;border-radius:0;box-shadow:none;padding:4px 10px 16px;gap:0}
	.fc-header .items,.fc-header .items--1{grid-template-columns:1fr}
	.fc-header .items--flow{grid-auto-flow:row;grid-template-rows:auto}
	.fc-header .panel__aside{margin:24px -10px 0;padding:20px 14px 22px;border-left:0;border-top:1px solid #e8e4fa;border-radius:0}
	.fc-header .panel__aside--quote{width:auto;max-width:none;border-top-color:#cec6f7}
	.release-bar__in{padding:11px 24px}
}
@media (max-width:760px){
	.fc-header .fc-bar{padding:0 20px}
	.release-bar__in{position:relative;padding:10px 44px 10px 20px;gap:8px;font-size:13px}
	.release-close{position:absolute;top:6px;right:10px;margin-left:0}
}
@media (max-width:480px){
	.fc-header .fc-bar{padding:0 16px}
	.release-bar__in{padding:10px 16px}
}