/* IGCN front end (www.igcn.mu above /forums/) - IP.Content pages and blocks front_head / front_header / front_footer */
:root {
	--fe-ink: #1d262b;
	--fe-muted: #5b676e;
	--fe-line: #e2e8e0;
	--fe-bg: #ffffff;
	--fe-soft: #f4f7f1;
	--fe-green-soft: #e8f3dc;
	--fe-dark: #1f282d;
	--fe-darker: #161c20;
	--fe-dark-line: rgba( 255, 255, 255, 0.1 );
	--fe-green: #6aa521;
	--fe-green-dark: #489306;
	--fe-green-light: #91ca38;
	--fe-blue: #337faa;
	--fe-orange: #ff9000;
	--fe-hot: #fa8144;
	--fe-radius: 12px;
	--fe-shadow: 0 1px 2px rgba( 16, 24, 28, 0.06 ), 0 8px 24px rgba( 16, 24, 28, 0.08 );
	--fe-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fe-header-h: 68px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc( var(--fe-header-h) + 16px ); }
body.fe-body { margin: 0; background: var(--fe-bg); color: var(--fe-ink); font: 16px/1.6 var(--fe-font); -webkit-font-smoothing: antialiased; }
.fe-body img { max-width: 100%; height: auto; }
.fe-body a { color: var(--fe-green-dark); text-decoration: none; }
.fe-body a:hover { text-decoration: underline; }
.fe-body h1, .fe-body h2, .fe-body h3, .fe-body h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.fe-body h1 { font-size: clamp( 28px, 3.4vw, 42px ); }
.fe-body h2 { font-size: clamp( 24px, 3vw, 34px ); }
.fe-body h3 { font-size: 20px; }
/* :where keeps these defaults below any class rule (they used to win over .fe-nav__list, .fe-check and others) */
.fe-body :where( p ) { margin: 0 0 1em; }
.fe-body :where( ul ) { margin: 0 0 1em; padding-left: 1.2em; }
.fe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; }
.fe-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media ( min-width: 768px ) { .fe-container { padding: 0 28px; } }
.fe-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; flex-shrink: 0; }
.fe-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 14px; border-radius: 8px; background: #fff; color: var(--fe-ink); }
.fe-skip:focus { top: 12px; }

/* buttons */
.fe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 10px; font: 600 15px/1.2 var(--fe-font); text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.fe-body a.fe-btn, .fe-body a.fe-btn:hover { text-decoration: none; }
.fe-btn:active { transform: translateY( 1px ); }
.fe-btn--green { background: linear-gradient( 180deg, var(--fe-green-light), var(--fe-green) ); border-color: var(--fe-green-dark); color: #fff !important; }
.fe-btn--green:hover { background: linear-gradient( 180deg, var(--fe-green), var(--fe-green-dark) ); }
.fe-btn--blue { background: var(--fe-blue); color: #fff !important; }
.fe-btn--blue:hover { background: #28688c; }
.fe-btn--light { background: #fff; border-color: var(--fe-line); color: var(--fe-ink) !important; }
.fe-btn--light:hover { border-color: var(--fe-green); color: var(--fe-green-dark) !important; }
.fe-btn--ghost { background: transparent; border-color: rgba( 255, 255, 255, 0.28 ); color: #fff !important; }
.fe-btn--ghost:hover { background: rgba( 255, 255, 255, 0.08 ); border-color: rgba( 255, 255, 255, 0.5 ); }
.fe-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 14px; border-radius: 8px; }
.fe-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.fe-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* header */
.fe-header { position: sticky; top: 0; z-index: 100; background: var(--fe-dark); color: #fff; border-bottom: 1px solid var(--fe-dark-line); }
.fe-header.fe-scrolled { box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.25 ); }
.fe-header__bar { display: flex; align-items: center; gap: 18px; height: var(--fe-header-h); }
.fe-logo { display: flex; align-items: center; flex-shrink: 0; }
.fe-logo img { display: block; width: auto; height: 44px; }
.fe-nav { flex: 1; min-width: 0; }
.fe-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fe-nav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: rgba( 255, 255, 255, 0.86 ) !important; font: 500 15px/1 var(--fe-font); cursor: pointer; white-space: nowrap; }
.fe-nav__link:hover, .fe-nav__drop.fe-open > .fe-nav__link { background: rgba( 255, 255, 255, 0.08 ); color: #fff !important; text-decoration: none !important; }
.fe-nav__link.fe-active { color: var(--fe-orange) !important; }
.fe-nav__link .fe-i { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; }
.fe-nav__drop { position: relative; }
.fe-nav__drop.fe-open > .fe-nav__link .fe-i { transform: rotate( 180deg ); }
.fe-menu { position: absolute; top: calc( 100% + 8px ); left: 0; z-index: 10; display: none; min-width: 300px; padding: 8px; border-radius: var(--fe-radius); background: #fff; box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.28 ); color: var(--fe-ink); }
.fe-nav__drop.fe-open > .fe-menu { display: block; }
.fe-menu a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; color: var(--fe-ink) !important; }
.fe-menu a:hover { background: var(--fe-soft); text-decoration: none !important; }
.fe-menu strong { display: block; font-size: 15px; }
.fe-menu small { display: block; color: var(--fe-muted); font-size: 13px; line-height: 1.35; }
.fe-menu .fe-i { width: 20px; height: 20px; margin-top: 2px; color: var(--fe-green); }
.fe-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--fe-orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5; text-transform: uppercase; vertical-align: 2px; }
.fe-tag--green { background: var(--fe-green); }
.fe-tag--muted { background: #8a979e; }
.fe-suite { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border: 1px solid rgba( 106, 165, 33, 0.4 ); border-radius: 999px; background: rgba( 145, 202, 56, 0.13 ); color: var(--fe-green-dark); font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: none; white-space: nowrap; }
.fe-suite .fe-i { width: 12px; height: 12px; }
.fe-band .fe-suite, .fe-client .fe-suite, .fe-nav .fe-suite { border-color: rgba( 145, 202, 56, 0.5 ); color: var(--fe-green-light); }
.fe-menu__label { display: block; margin: 8px 12px 2px; padding-top: 10px; border-top: 1px solid var(--fe-line); color: var(--fe-green-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media ( max-width: 959px ) { .fe-menu__label { border-top-color: var(--fe-dark-line); color: var(--fe-green-light); } }
.fe-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fe-user { position: relative; }
.fe-user__btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 999px; background: none; color: #fff; font: 500 15px/1 var(--fe-font); cursor: pointer; }
.fe-user__btn:hover, .fe-user.fe-open .fe-user__btn { background: rgba( 255, 255, 255, 0.08 ); }
.fe-user__btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fe-user__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-user__count { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--fe-orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.fe-user .fe-menu { right: 0; left: auto; min-width: 230px; }
.fe-user.fe-open .fe-menu { display: block; }
.fe-user .fe-menu a { align-items: center; padding: 9px 12px; font-size: 15px; }
.fe-user .fe-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--fe-line); }
/* header actions: one button (Store), the rest quiet links; a thin line parts the site from the account */
.fe-toplink { display: inline-flex; align-items: center; gap: 7px; padding: 7px 4px; color: rgba( 255, 255, 255, 0.82 ) !important; font-size: 15px; font-weight: 600; white-space: nowrap; }
.fe-toplink:hover { color: #fff !important; text-decoration: none !important; }
.fe-toplink .fe-i { width: 17px; height: 17px; opacity: 0.8; }
.fe-toplink--outline { padding: 6px 13px; border: 1px solid rgba( 255, 255, 255, 0.28 ); border-radius: 8px; color: #fff !important; }
.fe-toplink--outline:hover { border-color: rgba( 255, 255, 255, 0.6 ); }
.fe-header__sep { width: 1px; height: 24px; margin: 0 4px; background: var(--fe-dark-line); }
.fe-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
.fe-burger:hover { background: rgba( 255, 255, 255, 0.08 ); }
.fe-burger .fe-i { width: 24px; height: 24px; }
.fe-burger .fe-i-close, .fe-nav-open .fe-burger .fe-i-menu { display: none; }
.fe-nav-open .fe-burger .fe-i-close { display: block; }
.fe-nav__mobile { display: none; }
@media ( max-width: 1099px ) {
	.fe-header__actions .fe-hide-md { display: none; }
}
@media ( max-width: 959px ) {
	.fe-burger { display: inline-flex; }
	.fe-logo img { height: 38px; }
	.fe-nav { position: fixed; top: var(--fe-header-h); right: 0; bottom: 0; left: 0; z-index: 99; display: none; overflow-y: auto; padding: 12px 16px 32px; background: var(--fe-dark); }
	.fe-nav-open .fe-nav { display: block; }
	.fe-nav-open { overflow: hidden; }
	.fe-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.fe-nav__link { justify-content: space-between; width: 100%; height: 48px; font-size: 17px; }
	.fe-menu { position: static; display: none; min-width: 0; margin: 2px 0 8px; padding: 4px; background: rgba( 255, 255, 255, 0.04 ); box-shadow: none; }
	.fe-menu a { color: #fff !important; }
	.fe-menu a:hover { background: rgba( 255, 255, 255, 0.06 ); }
	.fe-menu small { color: rgba( 255, 255, 255, 0.6 ); }
	.fe-nav__mobile { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fe-dark-line); }
	.fe-header__actions .fe-hide-sm { display: none; }
	.fe-user__name { display: none; }
	.fe-user .fe-menu { position: absolute; top: calc( 100% + 8px ); background: #fff; box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.28 ); }
	.fe-user .fe-menu a { color: var(--fe-ink) !important; }
	.fe-user .fe-menu a:hover { background: var(--fe-soft); }
}

/* sections */
.fe-section { padding: clamp( 36px, 5vw, 64px ) 0; }
.fe-section--soft { background: var(--fe-soft); }
.fe-section--dark { background: var(--fe-dark); color: #fff; }
.fe-section--tight { padding: clamp( 24px, 3.5vw, 44px ) 0; }
.fe-section--flush { padding-top: 0; }
.fe-head { max-width: 760px; margin: 0 auto clamp( 20px, 3vw, 32px ); text-align: center; }
.fe-head p { margin: 0; color: var(--fe-muted); font-size: 18px; }
.fe-section--dark .fe-head p { color: rgba( 255, 255, 255, 0.72 ); }
.fe-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--fe-green-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fe-section--dark .fe-eyebrow, .fe-hero .fe-eyebrow, .fe-band .fe-eyebrow { color: var(--fe-green-light); }
.fe-lead { color: var(--fe-muted); font-size: 18px; }
.fe-note { color: var(--fe-muted); font-size: 14px; text-align: center; }

/* home hero: the slide's background has a 1 KB blurred placeholder under it (in the page), shown at once */
.fe-hero { position: relative; overflow: hidden; background-color: #2a2420; color: #fff; }
/* the slides: background layers and pictures cross-fade (front.js); the first one is in the page */
.fe-hero__bg { position: absolute; inset: 0; background-position: center top; background-size: cover; background-repeat: no-repeat; transition: opacity 1.2s ease; }
.fe-hero__bg.is-out, .fe-hero__pic.is-out { opacity: 0; }
.fe-hero__stage { position: relative; width: 100%; max-width: 760px; aspect-ratio: 1100 / 672; }
.fe-hero__pic { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.2s ease; }
/* under the picture, never over it (it covered the class names on phones) */
.fe-hero__dots { display: flex; justify-content: center; gap: 2px; margin: 2px 0 6px; }
.fe-hero__dots button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.fe-hero__dots button::before { width: 8px; height: 8px; border-radius: 999px; background: rgba( 255, 255, 255, 0.45 ); box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 ); content: ""; transition: width 0.3s, background 0.3s; }
.fe-hero__dots button:hover::before { background: rgba( 255, 255, 255, 0.85 ); }
.fe-hero__dots button[aria-current="true"]::before { width: 22px; background: var(--fe-green-light); }
@media ( prefers-reduced-motion: reduce ) { .fe-hero__bg, .fe-hero__pic, .fe-hero__dots button::before { transition: none; } }
.fe-hero::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba( 14, 10, 8, 0.86 ) 0%, rgba( 14, 10, 8, 0.55 ) 45%, rgba( 14, 10, 8, 0.1 ) 100% ); content: ""; }
.fe-hero::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 120px; background: linear-gradient( 0deg, rgba( 14, 10, 8, 0.6 ), transparent ); content: ""; }
.fe-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax( 0, 1fr ); align-items: center; gap: 8px; padding-top: clamp( 32px, 6vw, 72px ); }
.fe-hero__text { max-width: 600px; padding-bottom: 8px; }
.fe-hero h1 { margin-bottom: 18px; text-shadow: 0 2px 18px rgba( 0, 0, 0, 0.5 ); }
.fe-hero p { color: rgba( 255, 255, 255, 0.88 ); font-size: clamp( 16px, 1.6vw, 19px ); text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.6 ); }
.fe-hero .fe-actions { margin-top: 26px; }
.fe-hero__art { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; }
.fe-hero__pic { display: block; filter: drop-shadow( 0 20px 40px rgba( 0, 0, 0, 0.45 ) ); }
.fe-season { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 14px 6px 6px; border: 1px solid rgba( 255, 255, 255, 0.2 ); border-radius: 999px; background: rgba( 0, 0, 0, 0.35 ); color: #fff !important; font-size: 14px; font-weight: 600; backdrop-filter: blur( 6px ); }
.fe-season:hover { border-color: rgba( 255, 255, 255, 0.45 ); text-decoration: none !important; }
.fe-season b { padding: 3px 10px; border-radius: 999px; background: #c62828; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
/* the Season logo, the same on every slide, small in the bottom right corner of the hero (on phones: beside the dots) */
.fe-season-logo { position: absolute; right: 28px; bottom: 30px; z-index: 3; display: block; text-decoration: none !important; }
.fe-season-logo img { display: block; width: clamp( 136px, 10.5vw, 176px ); height: auto; filter: drop-shadow( 0 6px 16px rgba( 0, 0, 0, 0.6 ) ); transition: transform 0.2s; }
.fe-season-logo:hover img { transform: scale( 1.03 ); }
.fe-season-logo picture { display: block; }
/* phones and tablets (one column hero): no room beside the dots, the Season pill above the title says it */
@media ( max-width: 959px ) { .fe-season-logo { display: none; } }
@media ( min-width: 960px ) {
	.fe-hero__inner { grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr ); gap: 24px; min-height: 540px; padding-top: 24px; }
	.fe-hero__text { padding-bottom: 32px; }
	/* one width, side by side or stacked in a narrow column */
	.fe-hero .fe-actions .fe-btn--lg { min-width: 220px; }
	/* no negative margin: past the 28px container padding the hero's overflow cut the art at 960-1210px */
	.fe-hero__art { align-self: end; margin: 0; }
	.fe-hero__stage { max-width: none; }
}
@media ( max-width: 959px ) {
	.fe-hero::before { background: linear-gradient( 180deg, rgba( 14, 10, 8, 0.85 ) 0%, rgba( 14, 10, 8, 0.45 ) 55%, rgba( 14, 10, 8, 0.2 ) 100% ); }
	.fe-hero__text { margin: 0 auto; text-align: center; }
	.fe-hero .fe-actions { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); max-width: 460px; margin-right: auto; margin-left: auto; }
	/* smaller buttons of one width: the picture under them should be the big thing */
	.fe-hero .fe-actions .fe-btn--lg { justify-content: center; min-height: 46px; padding: 11px 14px; font-size: 15px; }
}
@media ( max-width: 479px ) {
	.fe-hero .fe-actions { grid-template-columns: minmax( 0, 1fr ); max-width: 300px; gap: 10px; }
}
/* a small strip right under the hero: the news, each linking to its announcement */
.fe-newsbar { border-bottom: 1px solid var(--fe-dark-line); background: var(--fe-dark); }
.fe-newsbar .fe-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; }
.fe-newsbar a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #fff !important; font-size: 14px; font-weight: 600; }
.fe-newsbar a:hover { color: var(--fe-green-light) !important; text-decoration: none !important; }
.fe-newsbar b { flex-shrink: 0; min-width: 70px; padding: 3px 10px; border-radius: 999px; background: var(--fe-green); color: #fff; font-size: 11px; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.fe-newsbar b.fe-newsbar__new { background: #d97a00; }
.fe-newsbar .fe-i { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.7; transition: transform 0.15s; }
.fe-newsbar a:hover .fe-i { opacity: 1; transform: translateX( 2px ); }
@media ( min-width: 960px ) {
	.fe-newsbar a + a { padding-left: 32px; border-left: 1px solid var(--fe-dark-line); }
}
@media ( max-width: 959px ) {
	.fe-newsbar .fe-container { flex-direction: column; flex-wrap: nowrap; }
	.fe-newsbar a + a { border-top: 1px solid var(--fe-dark-line); }
	.fe-newsbar .fe-i { margin-left: auto; }
}

/* page hero (app pages) */
.fe-band { position: relative; overflow: hidden; background: radial-gradient( 1200px 420px at 85% -10%, rgba( 145, 202, 56, 0.22 ), transparent 60% ), var(--fe-dark); color: #fff; }
/* the band lines up with the content below (same container); only the text keeps a readable width */
.fe-band__inner { display: grid; grid-template-columns: minmax( 0, 1fr ); align-items: center; gap: 32px; padding-top: clamp( 32px, 4.5vw, 56px ); padding-bottom: clamp( 32px, 4.5vw, 56px ); }
.fe-band--text .fe-band__inner > div { max-width: 860px; }
.fe-band h1 { margin-bottom: 14px; }
.fe-band p { color: rgba( 255, 255, 255, 0.78 ); font-size: 18px; }
.fe-band .fe-actions { margin-top: 22px; }
.fe-band__shot { justify-self: center; }
.fe-band .fe-band__note { display: flex; gap: 7px; align-items: center; margin: 24px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 13px; line-height: 1.4; }
.fe-band .fe-band__note .fe-i { flex-shrink: 0; width: 15px; height: 15px; color: var(--fe-green-light); }
.fe-band__shot img { display: block; border-radius: 10px; box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.45 ); }
/* product boxes: only their light floor at the bottom fades into the band, the box itself stays whole */
.fe-band__shot--box img { width: 340px; max-width: 100%; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient( 180deg, #000 80%, transparent 99% ); mask-image: linear-gradient( 180deg, #000 80%, transparent 99% ); }
.fe-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; color: rgba( 255, 255, 255, 0.6 ); font-size: 14px; list-style: none; }
.fe-crumbs a { color: rgba( 255, 255, 255, 0.75 ) !important; }
.fe-crumbs li + li::before { margin-right: 6px; content: "\203A"; }
@media ( min-width: 960px ) {
	.fe-band__inner { grid-template-columns: minmax( 0, 6fr ) minmax( 0, 5fr ); }
	.fe-band--text .fe-band__inner { grid-template-columns: minmax( 0, 1fr ); }
}

/* cards and grids */
.fe-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 260px ), 1fr ) ); gap: 20px; }
.fe-grid--2 { grid-template-columns: repeat( auto-fit, minmax( min( 100%, 380px ), 1fr ) ); gap: 28px; }
.fe-grid--4 { grid-template-columns: repeat( auto-fit, minmax( min( 100%, 220px ), 1fr ) ); }
/* five cards: 1 / 2 a row (the last one full width) / 3 + 2 wider */
.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) { grid-template-columns: minmax( 0, 1fr ); }
@media ( min-width: 560px ) {
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) > :last-child { grid-column: 1 / -1; }
}
@media ( min-width: 900px ) {
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) > * { grid-column: span 2; }
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 5 ):last-child ) > :nth-child( n + 4 ) { grid-column: span 3; }
}
/* card grids keep full rows: 4 or 8 cards go 4 / 2 / 1 a row, 6 go 3 / 2 / 1, 3 go 3 / 1 (never 3 + 1) */
.fe-grid--4, .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 4 ):last-child ), .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 8 ):last-child ),
.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 6 ):last-child ), .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 3 ):last-child ) { grid-template-columns: minmax( 0, 1fr ); }
@media ( min-width: 560px ) {
	.fe-grid--4, .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 4 ):last-child ), .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 8 ):last-child ),
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 6 ):last-child ) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( min-width: 760px ) {
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 3 ):last-child ) { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
@media ( min-width: 900px ) {
	.fe-grid:not( .fe-grid--2 ):has( > :nth-child( 6 ):last-child ) { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
@media ( min-width: 1100px ) {
	.fe-grid--4, .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 4 ):last-child ), .fe-grid:not( .fe-grid--2 ):has( > :nth-child( 8 ):last-child ) { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}
.fe-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius); background: #fff; box-shadow: var(--fe-shadow); }
.fe-card h3 { margin-bottom: 4px; }
.fe-card p { color: var(--fe-muted); font-size: 15px; }
.fe-card__sub { margin-bottom: 12px; color: var(--fe-green-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fe-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 12px; background: var(--fe-green-soft); }
.fe-card__icon img { width: 30px; height: 30px; }
.fe-card__icon .fe-i { width: 26px; height: 26px; color: var(--fe-green-dark); }
.fe-card__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; padding-top: 8px; }
/* product cards: the icon beside the name and its meta line, not on a row of its own */
.fe-page-apps .fe-card { display: grid; grid-template-columns: auto minmax( 0, 1fr ); grid-template-rows: auto auto auto 1fr; column-gap: 16px; }
.fe-page-apps .fe-card > * { grid-column: 1 / -1; }
.fe-page-apps .fe-card > .fe-card__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
.fe-page-apps .fe-card > h3 { grid-column: 2; grid-row: 1; align-self: end; }
.fe-page-apps .fe-card > .fe-meta { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; }
.fe-page-apps .fe-card > p { margin-top: 14px; }
.fe-page-apps .fe-card > .fe-card__foot { align-self: end; }
/* phones and small tablets: every other card with an icon puts it beside the title too */
@media ( max-width: 767px ) {
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) { display: grid; grid-template-columns: auto minmax( 0, 1fr ); align-content: start; column-gap: 14px; }
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) > * { grid-column: 1 / -1; }
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) > .fe-card__icon { grid-column: 1; grid-row: 1; align-self: center; width: 44px; height: 44px; margin: 0; }
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) > .fe-card__icon .fe-i { width: 24px; height: 24px; }
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) > h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
	body:not( .fe-page-apps ) .fe-card:has( > .fe-card__icon:first-child + h3 ):not( .fe-help__side .fe-card ) > h3 + * { margin-top: 14px; }
}
.fe-card--feature { border-color: var(--fe-green-light); background: linear-gradient( 180deg, #fbfdf8, #fff ); }
.fe-card--link { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.fe-card--link:hover { border-color: var(--fe-green-light); transform: translateY( -3px ); box-shadow: 0 2px 4px rgba( 16, 24, 28, 0.06 ), 0 16px 36px rgba( 16, 24, 28, 0.12 ); }
.fe-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fe-more .fe-i { transition: transform 0.15s; }
.fe-more:hover .fe-i { transform: translateX( 3px ); }
/* home: the apps as a bento grid (IGC.Server big, the premium tools beside it, the suite apps below) */
.fe-bento { display: grid; grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr ); grid-template-areas: "main a" "main b" "suite suite"; gap: 20px; }
.fe-bento a { color: var(--fe-ink) !important; text-decoration: none !important; }
.fe-bento h3 { margin: 0 0 4px; }
.fe-bento p { color: var(--fe-muted); font-size: 15px; }
.fe-bento__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--fe-green-soft); color: var(--fe-green-dark); }
.fe-bento__icon .fe-i { width: 26px; height: 26px; }
.fe-bento__main, .fe-bento__tile, .fe-bento__mini a { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.fe-bento__main { position: relative; grid-area: main; display: flex; flex-direction: column; overflow: hidden; padding: clamp( 24px, 3.2vw, 40px ); border-radius: 16px; background: radial-gradient( 110% 80% at 100% 0%, rgba( 145, 202, 56, 0.24 ), transparent 60% ), linear-gradient( 160deg, #27343b, var(--fe-darker) ); box-shadow: 0 18px 44px rgba( 16, 24, 28, 0.22 ); color: #fff !important; }
.fe-bento__main > * { position: relative; }
.fe-bento__main .fe-bento__icon { margin-bottom: 22px; background: rgba( 145, 202, 56, 0.16 ); color: var(--fe-green-light); }
.fe-bento__main h3 { color: #fff; font-size: clamp( 28px, 3.2vw, 36px ); }
.fe-bento__main .fe-card__sub { color: var(--fe-green-light); }
.fe-bento__main p { max-width: 480px; color: rgba( 255, 255, 255, 0.74 ); font-size: 17px; }
/* the two editions and the season each one runs */
.fe-bento .fe-bento__eds { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; margin: 8px 0 16px; }
.fe-bento__eds > div { padding: 12px 14px; border: 1px solid rgba( 255, 255, 255, 0.12 ); border-radius: 12px; background: rgba( 255, 255, 255, 0.05 ); }
.fe-bento__eds > div:last-child { border-color: rgba( 145, 202, 56, 0.45 ); background: rgba( 145, 202, 56, 0.1 ); }
.fe-bento__eds dt { margin: 0 0 2px; color: var(--fe-green-light); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.fe-bento__eds dd { margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
@media ( max-width: 599px ) {
	.fe-bento .fe-bento__eds { grid-template-columns: minmax( 0, 1fr ); }
	.fe-bento__eds > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
}
.fe-bento ul.fe-bento__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.fe-bento__chips li { padding: 6px 12px; border: 1px solid rgba( 255, 255, 255, 0.14 ); border-radius: 999px; background: rgba( 255, 255, 255, 0.06 ); color: rgba( 255, 255, 255, 0.9 ); font-size: 13px; font-weight: 600; }
.fe-bento__main .fe-more { margin-top: auto; color: var(--fe-green-light); }
.fe-bento__tile { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid var(--fe-line); border-radius: 16px; background: #fff; box-shadow: var(--fe-shadow); }
.fe-bento__tile:nth-of-type( 2 ) { grid-area: a; }
.fe-bento__tile:nth-of-type( 3 ) { grid-area: b; }
.fe-bento__tile > div { display: flex; flex-direction: column; align-self: stretch; }
.fe-bento__tile p { margin-bottom: 12px; }
.fe-bento__tile .fe-more { margin-top: auto; }
.fe-bento__tile .fe-more { color: var(--fe-green-dark); }
.fe-bento__main:hover, .fe-bento__tile:hover { transform: translateY( -3px ); box-shadow: 0 2px 4px rgba( 16, 24, 28, 0.06 ), 0 18px 40px rgba( 16, 24, 28, 0.16 ); }
.fe-bento__tile:hover { border-color: var(--fe-green-light); }
.fe-bento a:hover .fe-more .fe-i { transform: translateX( 3px ); }
.fe-bento__suite { grid-area: suite; padding: 20px; border: 1px solid var(--fe-line); border-radius: 16px; background: var(--fe-soft); }
.fe-bento__suite .fe-meta { margin-bottom: 14px; }
.fe-bento__mini { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) ); gap: 12px; }
.fe-bento__mini a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--fe-line); border-radius: 12px; background: #fff; }
.fe-bento__mini a:hover { border-color: var(--fe-green-light); transform: translateY( -2px ); }
.fe-bento__mini .fe-bento__icon { width: 42px; height: 42px; border-radius: 11px; }
.fe-bento__mini .fe-bento__icon .fe-i { width: 21px; height: 21px; }
.fe-bento__mini strong { display: block; }
.fe-bento__mini small { display: block; color: var(--fe-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fe-bento__go { margin-left: auto; color: var(--fe-green-dark); transition: transform 0.15s; }
.fe-bento__mini a:hover .fe-bento__go { transform: translateX( 3px ); }
@media ( max-width: 859px ) {
	.fe-bento { grid-template-columns: minmax( 0, 1fr ); grid-template-areas: "main" "a" "b" "suite"; }
}
@media ( max-width: 479px ) {
	.fe-bento__tile { flex-direction: column; gap: 14px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.fe-bento__main, .fe-bento__tile, .fe-bento__mini a, .fe-bento__go { transition: none; }
}
.fe-included { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) ); gap: 12px; margin-top: 20px; }
.fe-included a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--fe-line); border-radius: 10px; background: var(--fe-green-soft); color: var(--fe-ink) !important; }
.fe-included a:hover { border-color: var(--fe-green-light); text-decoration: none !important; }
.fe-included strong { display: block; }
.fe-included small { display: block; color: var(--fe-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fe-included .fe-i { margin-left: auto; color: var(--fe-green-dark); }
/* screenshots keep their own size (never blown up and blurred), the galleries fill their cells */
.fe-shot { display: block; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--fe-line); border-radius: 10px; background: #fff; }
.fe-shot img { display: block; max-width: 100%; }
.fe-gallery .fe-shot { width: auto; margin: 0; }
.fe-gallery .fe-shot img { width: 100%; }
a.fe-shot { cursor: zoom-in; }
a.fe-shot:hover { border-color: var(--fe-green-light); }
.fe-highlight .fe-shot { margin-bottom: 18px; }
.fe-highlight h3 { font-size: 21px; }
.fe-highlight p { color: var(--fe-muted); font-size: 15px; }

/* feature rows (text beside a picture) */
.fe-rows { display: flex; flex-direction: column; gap: clamp( 32px, 4.5vw, 52px ); }
.fe-row { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 24px; align-items: center; }
.fe-row h3 { font-size: 22px; }
.fe-row p, .fe-row li { color: var(--fe-muted); }
.fe-row__media { display: flex; flex-direction: column; gap: 14px; }
@media ( min-width: 900px ) {
	.fe-row { grid-template-columns: minmax( 0, 5fr ) minmax( 0, 6fr ); gap: 56px; }
	.fe-row--flip .fe-row__text { order: 2; }
}
.fe-points { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 280px ), 1fr ) ); gap: 22px 32px; }
.fe-point h3 { display: flex; gap: 10px; align-items: center; font-size: 18px; }
.fe-point h3 .fe-i { color: var(--fe-green); }
.fe-point p { color: var(--fe-muted); font-size: 15px; }

/* lists */
.fe-check { margin: 0 0 1em; padding: 0; list-style: none; }
.fe-check li { position: relative; padding: 4px 0 4px 28px; }
.fe-check li::before { position: absolute; top: 9px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fe-green) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 16px no-repeat; content: ""; }
.fe-check li ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.fe-check li ul li { padding-left: 0; }
.fe-check li ul li::before { display: none; }
.fe-section--dark .fe-check li { color: rgba( 255, 255, 255, 0.85 ); }
/* masonry: the cards stack in columns, each only as tall as its content, so no gaps and no lonely last row */
.fe-lists { columns: 3 270px; column-gap: 20px; }
.fe-lists--2 { columns: 2 380px; }
.fe-lists > * { display: block; margin: 0 0 20px; break-inside: avoid; page-break-inside: avoid; }
.fe-lists .fe-card h3 { margin-bottom: 12px; font-size: 17px; }
.fe-lists--2 .fe-card h3 { font-size: 20px; }
.fe-lists .fe-check li { padding-top: 3px; padding-bottom: 3px; font-size: 15px; }
.fe-lists .fe-check:last-child { margin-bottom: 0; }
.fe-feats { margin: 0; }
.fe-feats dt { margin-top: 12px; font-size: 15px; font-weight: 700; }
.fe-feats dt:first-child { margin-top: 0; }
.fe-feats dd { margin: 2px 0 0; color: var(--fe-muted); font-size: 14px; line-height: 1.5; }

/* tabs */
.fe-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 clamp( 28px, 4vw, 44px ); padding: 0; list-style: none; }
.fe-tabs button { min-height: 42px; padding: 8px 18px; border: 1px solid var(--fe-line); border-radius: 999px; background: #fff; color: var(--fe-ink); font: 600 15px/1 var(--fe-font); cursor: pointer; }
.fe-tabs button:hover { border-color: var(--fe-green-light); }
.fe-tabs button[aria-selected="true"] { border-color: var(--fe-green-dark); background: var(--fe-green); color: #fff; }
/* link under the tabs: dark text so it reads on the grey band */
.fe-tabs-more { margin: -14px 0 36px; text-align: center; font-size: 16px; }
.fe-tabs-more a { color: var(--fe-ink) !important; text-decoration: underline; text-decoration-color: var(--fe-green-light); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fe-tabs-more a:hover { text-decoration-color: var(--fe-green-dark); }
.fe-tabs-more .fe-i { color: var(--fe-green-dark); }
.fe-pane[hidden] { display: none; }
.fe-js .fe-pane:not( .fe-pane-on ) { display: none; }

/* specs */
.fe-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.fe-specs th, .fe-specs td { padding: 10px 12px; border-bottom: 1px solid var(--fe-line); text-align: left; vertical-align: top; }
.fe-specs thead th { background: var(--fe-soft); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.fe-specs tbody th { width: 120px; color: var(--fe-ink); }
.fe-scroll { overflow-x: auto; border: 1px solid var(--fe-line); border-radius: var(--fe-radius); background: #fff; -webkit-overflow-scrolling: touch; }
.fe-scroll > .fe-specs tr:last-child > * { border-bottom: 0; }
.fe-reqs { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 260px ), 1fr ) ); gap: 16px; }
.fe-req { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius); background: #fff; }
.fe-req img { width: 40px; height: 40px; object-fit: contain; }
.fe-req strong { display: block; margin-bottom: 2px; }
.fe-req span { color: var(--fe-muted); font-size: 15px; }
.fe-callout { padding: 18px 20px; border: 1px solid #f3d38a; border-left: 4px solid var(--fe-orange); border-radius: 10px; background: #fff8e8; }
.fe-callout p:last-child { margin-bottom: 0; }
.fe-code { padding: 1px 6px; border-radius: 5px; background: rgba( 29, 38, 43, 0.08 ); font: 0.9em/1.4 Consolas, "SFMono-Regular", Menlo, monospace; }
.fe-section--dark .fe-code { background: rgba( 255, 255, 255, 0.12 ); }
.fe-steps { margin: 0; padding: 0; list-style: none; counter-reset: fe-step; }
.fe-steps li { position: relative; padding: 0 0 18px 48px; color: var(--fe-muted); counter-increment: fe-step; }
.fe-steps strong { display: block; color: var(--fe-ink); font-size: 18px; line-height: 1.5; }
.fe-card > .fe-check:last-child { margin-bottom: 0; }
.fe-card > .fe-check li { font-size: 15px; }
.fe-steps li::before { position: absolute; top: -2px; left: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fe-green); color: #fff; font-weight: 700; content: counter( fe-step ); }

/* feature list intro: supported seasons and distributions */
.fe-intro { margin: 0 0 clamp( 28px, 4vw, 44px ); }
.fe-intro__head { max-width: 820px; margin-bottom: 20px; }
.fe-intro__head h2 { margin-bottom: 6px; font-size: 24px; }
.fe-intro__head p { margin: 0; color: var(--fe-muted); }
.fe-seasons { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 420px ), 1fr ) ); gap: 16px; align-items: start; }
.fe-seasons__table th { width: 46%; white-space: nowrap; }
.fe-seasons__table td { color: var(--fe-muted); }
.fe-seasons__region { margin-left: 4px; color: #8a979e; font-size: 12px; font-weight: 600; }
.fe-dist { position: relative; }
.fe-dist h3 { font-size: 22px; }
.fe-dist__tag { position: absolute; top: 24px; right: 24px; margin: 0; }

/* comparison tables (feature lists) */
.fe-compare-tools { position: sticky; top: var(--fe-header-h); z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 24px; padding: 12px 0; background: rgba( 255, 255, 255, 0.94 ); backdrop-filter: blur( 8px ); }
.fe-search { position: relative; display: block; flex: 1 1 260px; }
.fe-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--fe-line); border-radius: 10px; background: #fff; color: var(--fe-ink); font: 15px var(--fe-font); }
.fe-search input:focus { border-color: var(--fe-green); outline: 3px solid rgba( 106, 165, 33, 0.18 ); }
.fe-search .fe-i { position: absolute; top: 50%; left: 14px; color: var(--fe-muted); transform: translateY( -50% ); pointer-events: none; }
.fe-jump { flex: 0 1 260px; height: 44px; padding: 0 12px; border: 1px solid var(--fe-line); border-radius: 10px; background: #fff; color: var(--fe-ink); font: 15px var(--fe-font); }
.fe-compare { margin-bottom: 36px; }
.fe-compare > h2 { margin-bottom: 12px; font-size: 22px; }
.fe-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.fe-table th, .fe-table td { padding: 11px 14px; border-bottom: 1px solid var(--fe-line); text-align: left; vertical-align: middle; }
.fe-table thead th { background: var(--fe-dark); color: #fff; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.fe-table thead th:first-child { border-top-left-radius: var(--fe-radius); }
.fe-table thead th:last-child { border-top-right-radius: var(--fe-radius); }
.fe-table thead th + th, .fe-table td + td { width: 18%; min-width: 92px; text-align: center; }
.fe-table tbody tr:nth-child( even ) td { background: #fafbf8; }
.fe-table tbody tr:hover td { background: var(--fe-green-soft); }
.fe-table td.fe-sub { padding-left: 34px; color: var(--fe-muted); }
.fe-table tfoot td { padding: 12px 14px; background: var(--fe-soft); color: var(--fe-muted); font-size: 14px; }
.fe-table tfoot td:first-child { border-bottom-left-radius: var(--fe-radius); }
.fe-table tfoot td:last-child { border-bottom-right-radius: var(--fe-radius); }
.fe-table .fe-row-hidden { display: none; }
.fe-yes, .fe-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.fe-yes { background: var(--fe-green); color: #fff; }
.fe-no { background: #e6eaec; color: #8a979e; }
.fe-yes .fe-i, .fe-no .fe-i { width: 14px; height: 14px; stroke-width: 3; }
.fe-val { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.fe-val > .fe-tip { position: absolute; top: 50%; left: 100%; margin: -10px 0 0 6px; }
.fe-hot { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba( 250, 129, 68, 0.12 ); color: var(--fe-hot); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.fe-hot .fe-i { width: 11px; height: 11px; }
.fe-empty { display: none; padding: 32px; color: var(--fe-muted); text-align: center; }
.fe-order { margin-top: 12px; scroll-margin-top: calc( var(--fe-header-h) + 16px ); }
/* compact "Choose your version" pinned to the bottom until the full block is in view */
.fe-orderbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; background: rgba( 31, 40, 45, 0.96 ); backdrop-filter: blur( 8px ); box-shadow: 0 -8px 28px rgba( 0, 0, 0, 0.22 ); color: #fff; transform: translateY( 110% ); visibility: hidden; transition: transform 0.25s, visibility 0s 0.25s; }
.fe-orderbar.is-shown { transform: none; visibility: visible; transition: transform 0.25s; }
.fe-orderbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.fe-orderbar__label { color: #fff !important; font-weight: 700; }
.fe-orderbar__label::after { display: inline-block; margin-left: 6px; color: rgba( 255, 255, 255, 0.7 ); content: "\2193"; }
.fe-orderbar__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media ( max-width: 599px ) {
	.fe-orderbar__label { display: none; }
	.fe-orderbar__btns { flex: 1; flex-wrap: nowrap; }
	.fe-orderbar__btns .fe-btn { flex: 1; justify-content: center; padding: 7px 8px; }
}
@media ( prefers-reduced-motion: reduce ) { .fe-orderbar, .fe-orderbar.is-shown { transition: none; } }
@media ( max-width: 599px ) {
	.fe-table { font-size: 14px; }
	.fe-table th, .fe-table td { padding: 10px 8px; }
	.fe-table thead th + th, .fe-table td + td { width: 72px; min-width: 72px; }
	.fe-table thead th { font-size: 11px; white-space: normal; }
	.fe-table td.fe-sub { padding-left: 20px; }
	.fe-table .fe-btn { width: 38px; min-height: 34px; padding: 0; }
	.fe-table .fe-btn__label { display: none; }
	.fe-table td .fe-tip { margin-left: 2px; }
	.fe-val > .fe-tip { margin-left: 3px; }
}

/* tooltips */
.fe-tip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #a4aeb3; cursor: help; vertical-align: -4px; transition: color 0.15s, background 0.15s; }
.fe-tip .fe-i { width: 13px; height: 13px; stroke-width: 2.4; }
.fe-tip:hover, .fe-tip:focus-visible { background: var(--fe-green-soft); color: var(--fe-green-dark); outline: none; }
.fe-pop { position: absolute; z-index: 300; max-width: min( 340px, calc( 100vw - 24px ) ); padding: 10px 14px; border-radius: 10px; background: var(--fe-darker); box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.3 ); color: #fff; font-size: 14px; line-height: 1.45; pointer-events: none; }

/* video */
.fe-video { position: relative; overflow: hidden; max-width: 960px; margin: 0 auto; border-radius: var(--fe-radius); background: #000; box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.35 ); aspect-ratio: 16 / 9; }
.fe-video iframe, .fe-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* IGC.Client highlight */
.fe-client { background: radial-gradient( 900px 400px at 10% 0%, rgba( 255, 144, 0, 0.18 ), transparent 60% ), radial-gradient( 900px 500px at 100% 100%, rgba( 145, 202, 56, 0.16 ), transparent 60% ), var(--fe-darker); }
.fe-client .fe-card { border-color: var(--fe-dark-line); background: rgba( 255, 255, 255, 0.04 ); box-shadow: none; color: #fff; }
.fe-client .fe-card p, .fe-client .fe-card li { color: rgba( 255, 255, 255, 0.75 ); }
.fe-client .fe-card__icon { background: rgba( 145, 202, 56, 0.16 ); }
.fe-client .fe-card__icon .fe-i { color: var(--fe-green-light); }

/* key facts beside a page title, short highlights */
.fe-facts { display: grid; margin: 0; padding: 6px; border: 1px solid var(--fe-dark-line); border-radius: 14px; background: rgba( 255, 255, 255, 0.04 ); }
.fe-facts > div { display: grid; grid-template-columns: 130px minmax( 0, 1fr ); gap: 12px; padding: 12px 14px; }
.fe-facts > div + div { border-top: 1px solid var(--fe-dark-line); }
.fe-facts dt { display: flex; gap: 8px; align-items: center; align-self: start; color: var(--fe-green-light); font-size: 14px; font-weight: 700; }
.fe-facts dd { margin: 0; color: rgba( 255, 255, 255, 0.85 ); font-size: 15px; }
@media ( max-width: 520px ) { .fe-facts > div { grid-template-columns: minmax( 0, 1fr ); gap: 4px; } }
/* at most 3 columns (5 items: 3 + 2, never 4 + 1), one row from 1100px */
.fe-stats { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, max( 210px, calc( ( 100% - 48px ) / 3 ) ) ), 1fr ) ); gap: 16px 24px; }
.fe-stats > div { padding: 4px 0 4px 16px; border-left: 3px solid var(--fe-green); }
.fe-stats strong { display: block; font-size: 20px; line-height: 1.3; }
.fe-stats span { color: var(--fe-muted); font-size: 14px; }
@media ( min-width: 1100px ) {
	.fe-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax( 0, 1fr ); gap: 16px 20px; }
	.fe-stats strong { font-size: 18px; }
}
@media ( min-width: 1200px ) { .fe-stats strong { font-size: 20px; } }

/* call to action strip */
.fe-cta { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; padding: clamp( 24px, 4vw, 40px ); border-radius: 18px; background: linear-gradient( 120deg, var(--fe-dark), #26343b ); color: #fff; }
.fe-cta h2 { margin: 0 0 4px; font-size: clamp( 22px, 2.6vw, 30px ); }
.fe-cta p { margin: 0; color: rgba( 255, 255, 255, 0.75 ); }

/* footer */
.fe-footer { padding: 56px 0 28px; background: var(--fe-darker); color: rgba( 255, 255, 255, 0.7 ); font-size: 15px; }
.fe-footer a { color: rgba( 255, 255, 255, 0.78 ) !important; }
.fe-footer a:hover { color: #fff !important; }
.fe-footer__grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 28px; }
.fe-footer h4 { margin: 0 0 12px; color: #fff; font-size: 15px; }
.fe-footer ul { margin: 0; padding: 0; list-style: none; }
.fe-footer li { padding: 4px 0; }
.fe-footer__brand { grid-column: 1 / -1; }
.fe-footer__brand img { display: block; width: auto; height: 40px; margin-bottom: 12px; }
.fe-footer__brand p { max-width: 320px; margin-bottom: 14px; }
.fe-social { display: flex; gap: 10px; }
.fe-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba( 255, 255, 255, 0.08 ); }
.fe-social a:hover { background: rgba( 255, 255, 255, 0.16 ); }
.fe-social .fe-i { width: 18px; height: 18px; }
.fe-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--fe-dark-line); font-size: 14px; }
@media ( min-width: 860px ) {
	.fe-footer__grid { grid-template-columns: minmax( 0, 1.6fr ) repeat( 4, minmax( 0, 1fr ) ); }
	.fe-footer__brand { grid-column: auto; }
}

/* lightbox */
.fe-lightbox { position: fixed; inset: 0; z-index: 400; margin: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; background: rgba( 10, 14, 16, 0.92 ); cursor: zoom-out; }
.fe-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.5 ); }
.fe-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba( 255, 255, 255, 0.12 ); color: #fff; cursor: pointer; }
.fe-lightbox__close .fe-i { width: 24px; height: 24px; }
.fe-lightbox figcaption { position: absolute; right: 16px; bottom: 10px; left: 16px; color: rgba( 255, 255, 255, 0.8 ); font-size: 14px; text-align: center; }

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.fe-body *, .fe-body *::before { transition: none !important; }
}

/* screenshot galleries */
.fe-gallery { display: grid; grid-template-columns: repeat( auto-fill, minmax( min( 100%, 250px ), 1fr ) ); gap: 14px; }
.fe-gallery .fe-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.fe-gallery--tall { grid-template-columns: repeat( auto-fill, minmax( min( 100%, 220px ), 1fr ) ); max-width: 800px; margin: 0 auto; }

/* lightbox: arrows, counter */
.fe-lightbox__nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 64px; margin-top: -32px; border: 0; border-radius: 10px; background: rgba( 255, 255, 255, 0.1 ); color: #fff; cursor: pointer; }
.fe-lightbox__nav:hover { background: rgba( 255, 255, 255, 0.2 ); }
.fe-lightbox__nav .fe-i { width: 26px; height: 26px; }
.fe-lightbox__prev { left: 10px; }
.fe-lightbox__next { right: 10px; }
.fe-lightbox__prev .fe-i { transform: rotate( 90deg ); }
.fe-lightbox__next .fe-i { transform: rotate( -90deg ); }
.fe-lightbox__count { position: absolute; top: 18px; left: 18px; color: rgba( 255, 255, 255, 0.75 ); font-size: 14px; }
@media ( max-width: 599px ) { .fe-lightbox__nav { width: 40px; height: 52px; margin-top: -26px; } }

/* plugin cards */
.fe-plugins { display: grid; grid-template-columns: repeat( auto-fill, minmax( min( 100%, 270px ), 1fr ) ); gap: 16px; }
.fe-plugin { padding: 20px; }
.fe-plugin h3 { margin-bottom: 6px; font-size: 18px; }
.fe-plugin p { flex: 1; margin-bottom: 14px; font-size: 14px; }
.fe-plugin__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fe-plugin__price { font-size: 15px; font-weight: 700; }

/* one subtle line under a card title: what the app is (Server Suite, premium, new) */
.fe-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--fe-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; text-transform: uppercase; }
.fe-meta::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; flex-shrink: 0; }
.fe-meta--suite { color: var(--fe-green-dark); }
.fe-meta--premium { color: #9a7b2c; }
.fe-meta--new { color: #d97a00; }
.fe-client .fe-meta--suite { color: var(--fe-green-light); }

/* help page: FAQ */
.fe-faq-tools { max-width: 860px; margin: 0 auto 24px; }
.fe-faq { max-width: 860px; margin: 0 auto; }
.fe-faq__group { margin-bottom: 28px; }
.fe-faq__group > h3 { margin: 0 0 10px; color: var(--fe-green-dark); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.fe-faq__item { margin-bottom: 8px; border: 1px solid var(--fe-line); border-radius: 10px; background: #fff; }
.fe-faq__item[hidden] { display: none; }
.fe-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.fe-faq__item summary::-webkit-details-marker { display: none; }
.fe-faq__item summary::after { width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid var(--fe-muted); border-bottom: 2px solid var(--fe-muted); content: ""; transform: rotate( 45deg ); transition: transform 0.15s; flex-shrink: 0; }
.fe-faq__item[open] summary::after { margin-top: 4px; transform: rotate( -135deg ); }
.fe-faq__item[open] { border-color: var(--fe-green-light); }
.fe-faq__item .fe-prose { padding: 0 18px 16px; }
/* rich text from the editor (FAQ answers) */
.fe-prose { color: var(--fe-ink); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.fe-prose p { margin: 0 0 0.8em; }
.fe-prose ul, .fe-prose ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.fe-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.fe-prose pre, .fe-prose code { font-family: Consolas, Menlo, monospace; font-size: 13px; }
.fe-prose pre { overflow-x: auto; padding: 12px; border-radius: 8px; background: #f2f4f1; }
.fe-prose table { width: 100%; margin: 0 0 1em; border-collapse: collapse; font-size: 14px; }
.fe-prose td, .fe-prose th { padding: 6px 8px; border: 1px solid var(--fe-line); vertical-align: top; }
.fe-prose blockquote { margin: 0 0 1em; padding: 10px 14px; border-left: 3px solid var(--fe-green-light); background: var(--fe-soft); }
.fe-prose > :last-child { margin-bottom: 0; }

/* help page: contact */
.fe-help { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 28px; }
/* the form and the side cards start and end on the same lines: the cards share the height of the form */
.fe-help__main, .fe-help__main .fe-contact { display: flex; flex-direction: column; }
.fe-help__main .fe-contact, .fe-help__main .fe-form, .fe-help__main .fe-contact__done { flex: 1; }
.fe-help__side { display: flex; flex-direction: column; gap: 14px; }
.fe-help__side .fe-card { flex: 1; display: grid; grid-template-columns: auto minmax( 0, 1fr ); column-gap: 16px; align-content: center; padding: 18px 20px; }
.fe-help__side .fe-card__icon { grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; margin: 0; }
.fe-help__side .fe-card h3 { grid-column: 2; margin: 0 0 2px; font-size: 18px; }
.fe-help__side .fe-card p { grid-column: 2; margin: 0; }
@media ( min-width: 960px ) { .fe-help { grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr ); gap: 44px; } }
.fe-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius); background: #fff; box-shadow: var(--fe-shadow); }
.fe-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.fe-form input[type="text"], .fe-form input[type="email"], .fe-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #cfd8cc; border-radius: 9px; background: #fff; color: var(--fe-ink); font: 15px/1.5 var(--fe-font); }
.fe-form textarea { min-height: 150px; resize: vertical; }
.fe-form input:focus, .fe-form textarea:focus { border-color: var(--fe-green); outline: 3px solid rgba( 106, 165, 33, 0.18 ); }
.fe-form__row--2 { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, 220px ), 1fr ) ); gap: 16px; }
.fe-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fe-form__as { margin: 0; color: var(--fe-muted); font-size: 14px; }
.fe-form__error { margin: 0; padding: 10px 14px; border-radius: 9px; background: #fdecea; color: #a12a1f; font-size: 14px; font-weight: 600; }
.fe-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fe-contact__done { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--fe-green-light); border-radius: var(--fe-radius); background: var(--fe-green-soft); }
.fe-contact__done > .fe-i { width: 30px; height: 30px; color: var(--fe-green-dark); }
.fe-contact__done h3 { margin: 0 0 4px; }
.fe-contact__done p { margin: 0; color: var(--fe-muted); }

/* a muted looping video behind a dark section (home_client_bg) */
.fe-client { position: relative; overflow: hidden; }
.fe-bgvideo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s; }
.fe-bgvideo.fe-playing { opacity: 1; }
.fe-has-video::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba( 22, 28, 32, 0.78 ), rgba( 22, 28, 32, 0.88 ) ); content: ""; pointer-events: none; }
.fe-has-video > .fe-container { position: relative; z-index: 2; }

/* details window (plugins) */
.fe-modal { position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba( 10, 14, 16, 0.72 ); }
.fe-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 860px; max-height: calc( 100vh - 48px ); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.4 ); }
.fe-modal__head { padding: 24px 64px 14px 28px; border-bottom: 1px solid var(--fe-line); }
.fe-modal__head h2 { margin: 0 0 6px; font-size: 24px; }
.fe-modal__head .fe-meta { margin: 0; }
.fe-modal__body { flex: 1; overflow-y: auto; padding: 20px 28px; -webkit-overflow-scrolling: touch; }
.fe-modal__body iframe { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.fe-modal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 28px; border-top: 1px solid var(--fe-line); background: var(--fe-soft); }
.fe-modal__foot .fe-note { margin: 0; text-align: left; }
.fe-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--fe-soft); color: var(--fe-ink); cursor: pointer; }
.fe-modal__close:hover { background: var(--fe-green-soft); }
.fe-modal__close .fe-i { width: 22px; height: 22px; }
@media ( max-width: 599px ) {
	.fe-modal { padding: 0; align-items: stretch; }
	.fe-modal__panel { max-height: none; border-radius: 0; }
	.fe-modal__head { padding: 20px 60px 12px 18px; }
	.fe-modal__body { padding: 16px 18px; }
	.fe-modal__foot { padding: 14px 18px; }
}