/* Site navigation (nav.js, 15 Oct): the Guides drop-down on desktop and the menu on mobile.
   The bar itself (.fdc-nav) is styled in fdc.css; this adds the drop-down, link buttons and the
   mobile menu. */
.fdc-nav a.fdc-nav__cta { display: inline-block; text-decoration: none; }
.fdc-nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #FF6B18; text-decoration-thickness: 2px; }
.fdc-nav__in { position: relative; }
.fdc-dd { position: static; } /* the panel centres on the whole bar, so it never runs off screen */
.fdc-dd__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: #0E1614; font: 500 16px Roboto, system-ui, sans-serif; opacity: .8; transition: opacity 150ms; }
.fdc-dd__btn:hover, .fdc-dd.is-open .fdc-dd__btn { opacity: 1; }
.fdc-dd__caret { width: 12px; height: 12px; transition: transform 200ms; }
.fdc-dd.is-open .fdc-dd__caret { transform: rotate(180deg); }
.fdc-mega { position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 48px)); padding: 26px 28px 20px; background: #FFFFFF; border: 1px solid rgba(14, 22, 20, .08); border-radius: 16px; box-shadow: 0 24px 60px rgba(14, 22, 20, .14), 0 2px 8px rgba(14, 22, 20, .05); z-index: 60; font-family: Roboto, system-ui, sans-serif; animation: fdc-mega-in 180ms cubic-bezier(.22, 1, .36, 1) both; }
.fdc-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* thin hover bridge; it must not cover the nav buttons above */
/* 16 Oct (Harry): with 30 guides the panel is taller than a laptop screen and the nav is sticky, so it
   fits the screen and scrolls inside itself; the page behind does not move while the pointer is on it. */
/* 16 Oct (Harry): four even groups of 7-8, title plus a short one-line description. If a short screen
   cuts it off, the list (not the panel, so the hover bridge above is not clipped) scrolls inside itself. */
.fdc-mega__grid { grid-template-columns: repeat(4, 1fr); gap: 26px; max-height: calc(100vh - 210px); overflow-y: auto; overscroll-behavior: contain; }
.fdc-mega li { margin: 0 0 2px; }
.fdc-nav .fdc-mega li a { padding: 7px 10px; }
.fdc-nav .fdc-mega li a span, .fdc-mega li span { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.fdc-mega__head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(14, 22, 20, .08); }
.fdc-mega[hidden] { display: none; }
@keyframes fdc-mega-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fdc-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fdc-mega__head { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FF6B18; }
.fdc-mega ul { list-style: none; margin: 0; padding: 0; }
.fdc-mega li { margin: 0 0 4px; }
.fdc-nav .fdc-mega li a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; white-space: normal; text-decoration: none; opacity: 1; transition: background-color 150ms; }
.fdc-nav .fdc-mega li a:hover, .fdc-nav .fdc-mega li a[aria-current="page"] { background: #FAF6EF; text-decoration: none; }
.fdc-mega li b { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; color: #0E1614; }
.fdc-mega li span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; font-weight: 400; color: #5B6461; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fdc-mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(14, 22, 20, .08); }
/* Compensation Calculator (Harry, 16 Oct): same spec as the gold referral pill, in FDC orange, with the
   same shimmer and no glow. */
.fdc-nav a.fdc-mega__calc { flex: 1; display: block; padding: 12px 18px; border-radius: 10px; border: 1px solid #E85A0C; text-decoration: none; opacity: 1; white-space: normal;
  background: linear-gradient(115deg, #FF6B18 0%, #FF6B18 38%, #FFB27A 48%, #FF9150 54%, #FF6B18 64%, #FF6B18 100%);
  background-size: 300% 100%; animation: fdc-gold 3.4s ease-in-out infinite; box-shadow: none; }
.fdc-nav a.fdc-mega__calc:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .fdc-nav a.fdc-mega__calc { animation: none; } }
.fdc-mega__calc b { display: block; font-size: 15px; color: #FFFFFF; }
.fdc-mega__calc span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .92); }
.fdc-nav a.fdc-mega__all { white-space: nowrap; font-weight: 700; font-size: 15px; color: #0E1614; opacity: 1; }

/* Mobile menu: a button at the top right of the page, a full-screen list. Desktop has the bar. */
.fdc-mnav__btn { position: absolute; top: 8px; right: 16px; z-index: 40; width: 44px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid rgba(14, 22, 20, .12); border-radius: 10px; background: #FFFFFF; cursor: pointer; box-shadow: 0 1px 2px rgba(14, 22, 20, .06); }
.fdc-mnav__btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0E1614; }
.fdc-msheet { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; padding: 14px 20px 40px; background: #FAF6EF; font-family: Roboto, system-ui, sans-serif; animation: fdc-sheet-in 220ms cubic-bezier(.22, 1, .36, 1) both; }
.fdc-msheet[hidden] { display: none; }
@keyframes fdc-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.fdc-menu-open, html.fdc-menu-open body { overflow: hidden; }
.fdc-msheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fdc-msheet__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #0E1614; font-weight: 700; font-size: 17px; }
.fdc-msheet__logo img { height: 30px; width: auto; }
.fdc-msheet__x { width: 44px; height: 44px; border: 0; background: none; font-size: 32px; line-height: 1; color: #0E1614; cursor: pointer; }
.fdc-msheet__cta { display: block; margin: 4px 0 14px; padding: 15px; border-radius: 10px; background: #FF6B18; color: #FFFFFF; text-align: center; text-decoration: none; font-weight: 700; font-size: 17px; }
.fdc-msheet ul { list-style: none; margin: 0; padding: 0; }
.fdc-msheet__main a { display: block; padding: 13px 2px; border-bottom: 1px solid rgba(14, 22, 20, .08); color: #0E1614; text-decoration: none; font-size: 18px; font-weight: 700; }
.fdc-msheet__head { margin: 22px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FF6B18; }
.fdc-msheet__list a { display: block; padding: 11px 2px; border-bottom: 1px solid rgba(14, 22, 20, .06); color: #0E1614; text-decoration: none; font-size: 16px; line-height: 1.35; }
.fdc-msheet a[aria-current="page"] { color: #FF6B18; }
@media (min-width: 1024px) { .fdc-mnav { display: none; } }

/* Home page sections: a quiet "read more" link under each (build.py). */
.fdc-sec-more { margin: 18px auto 0; text-align: center; font: 500 15px/1.5 Roboto, system-ui, sans-serif; color: #5B6461; }
.fdc-sec-more a { color: #0E1614; text-decoration: underline; text-decoration-color: #FF6B18; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fdc-sec-more a:hover { color: #FF6B18; }
.fdc-sec-more .fdc-foot-sep { opacity: .5; margin: 0 6px; }

/* Funnel steps: the logo top centre, linking home. */
.fdc-step [role="banner"] { display: none !important; }
.fdc-steplogo { display: block; width: max-content; margin: 14px auto 18px; line-height: 0; position: relative; z-index: 30; }
.fdc-steplogo img { height: 46px; width: auto; }
@media (min-width: 1024px) { .fdc-steplogo { margin-top: 18px; margin-bottom: 24px; } .fdc-steplogo img { height: 52px; } }

/* Desktop bar fits every width (Harry, 15 Oct): wider content area, flexible gaps, and items
   step out as the screen narrows: rating, then How it works / FAQs (also in Guides and on the
   page), then the Join button, then the logo's name. Below 1024px the mobile menu takes over. */
@media (min-width: 1024px) {
  .fdc-nav .fdc-nav__in { padding: 0 max(20px, calc((100vw - 1600px) / 2)); gap: clamp(14px, 1.4vw, 28px); }
  .fdc-nav .fdc-nav__logo, .fdc-nav .fdc-nav__join, .fdc-nav .fdc-nav__cta, .fdc-nav .fdc-nav__right { flex: none; }
  .fdc-nav .fdc-nav__links { flex: none; gap: clamp(16px, 1.6vw, 30px); margin-left: auto; margin-right: 0; flex-wrap: nowrap; }
  .fdc-nav .fdc-nav__links a, .fdc-nav .fdc-dd__btn { font-size: 15.5px; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1679px) { .fdc-nav .fdc-nav__rating { display: none; } }
@media (min-width: 1024px) and (max-width: 1379px) { .fdc-nav .fdc-nav__opt { display: none; } }
@media (min-width: 1024px) and (max-width: 1199px) { .fdc-nav .fdc-nav__join { display: none; } }
@media (min-width: 1024px) and (max-width: 1099px) { .fdc-nav .fdc-nav__logo span { display: none; } }
@media (min-width: 1100px) and (max-width: 1199px) { .fdc-nav .fdc-nav__logo span { display: inline; } }

/* Every call-to-action button we added matches the original funnel button (Harry, 15 Oct):
   flat #FF6B18, #F5F5F5 text, 8px corners, hairline inset edge, darker on hover, presses in.
   No glow or gradient. Each keeps its own size. */
.g-btn, .dc-start, .fdc-g-btn, .fdc-nav .fdc-nav__cta, .fdc-msheet__cta, .fdc-calc .ai-btn--primary, .fdc-calc-see, .fdc-guide a.fdc-g-btn {
  background: #FF6B18 !important; background-image: none !important; color: #F5F5F5 !important; border: 0 !important;
  border-radius: 8px !important; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5) !important; filter: none !important;
  font-weight: 700; text-decoration: none !important; transition: background-color 150ms, transform 200ms !important; }
.g-btn:hover, .dc-start:hover, .fdc-g-btn:hover, .fdc-nav .fdc-nav__cta:hover, .fdc-msheet__cta:hover, .fdc-calc .ai-btn--primary:hover, .fdc-calc-see:hover {
  background: hsl(21.6, 100%, 49.2%) !important; color: #F5F5F5 !important; transform: none; filter: none !important; }
.g-btn:active, .dc-start:active, .fdc-g-btn:active, .fdc-nav .fdc-nav__cta:active, .fdc-msheet__cta:active, .fdc-calc .ai-btn--primary:active, .fdc-calc-see:active { transform: scale(.9); }

/* Mobile menu, second pass (Harry, 15 Oct): centred, CTA pinned at the bottom, link animation,
   a cleaner menu button. */
.fdc-mnav__btn { border: 0 !important; background: transparent !important; box-shadow: none !important; width: 46px; height: 46px; border-radius: 50%; gap: 6px; align-items: flex-end; padding: 0 11px; box-sizing: border-box; transition: background-color 150ms; }
.fdc-mnav__btn:active, .fdc-mnav__btn:hover { background: rgba(14, 22, 20, .06) !important; }
.fdc-mnav__btn span { height: 2.5px; border-radius: 3px; background: #0E1614; transition: width 200ms; }
.fdc-mnav__btn span:nth-child(1) { width: 24px; }
.fdc-mnav__btn span:nth-child(2) { width: 16px; }
.fdc-mnav__btn span:nth-child(3) { width: 24px; }
.fdc-mnav__btn:hover span:nth-child(2) { width: 24px; }
.fdc-msheet { text-align: center; display: flex; flex-direction: column; padding-bottom: 0; }
.fdc-msheet__top { justify-content: center; position: relative; }
.fdc-msheet__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.fdc-msheet__main a, .fdc-msheet__list a { display: flex !important; align-items: center; justify-content: center; gap: 0; }
.fdc-msheet__t { display: inline-block; transition: transform 220ms cubic-bezier(.22, 1, .36, 1), color 150ms; }
.fdc-msheet__arr { display: inline-block; width: 0; overflow: hidden; opacity: 0; color: #FF6B18; font-weight: 700; transform: translateX(-8px); transition: width 220ms cubic-bezier(.22, 1, .36, 1), opacity 180ms, transform 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms; }
.fdc-msheet__main a:hover .fdc-msheet__t, .fdc-msheet__list a:hover .fdc-msheet__t,
.fdc-msheet__main a:active .fdc-msheet__t, .fdc-msheet__list a:active .fdc-msheet__t,
.fdc-msheet__main a:focus-visible .fdc-msheet__t, .fdc-msheet__list a:focus-visible .fdc-msheet__t { transform: translateX(-4px); color: #FF6B18; }
.fdc-msheet__main a:hover .fdc-msheet__arr, .fdc-msheet__list a:hover .fdc-msheet__arr,
.fdc-msheet__main a:active .fdc-msheet__arr, .fdc-msheet__list a:active .fdc-msheet__arr,
.fdc-msheet__main a:focus-visible .fdc-msheet__arr, .fdc-msheet__list a:focus-visible .fdc-msheet__arr { width: 1.2em; opacity: 1; transform: translateX(0); margin-left: 8px; }
.fdc-msheet li { animation: fdc-mitem-in 360ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
@keyframes fdc-mitem-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fdc-msheet li { animation: none; } .fdc-msheet__t, .fdc-msheet__arr { transition: none; } }
.fdc-msheet__foot { position: sticky; bottom: 0; margin: 18px -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #FAF6EF 75%, rgba(250, 246, 239, 0)); }
.fdc-msheet__foot .fdc-msheet__cta { margin: 0; }
/* Refer a friend: a gold shimmering pill in the guides drop-down (Harry, 15 Oct). */
.fdc-nav a.fdc-mega__refer { padding: 10px 16px; border-radius: 10px; color: #4A3200; border: 1px solid #D9A520;
  background: linear-gradient(115deg, #F6C744 0%, #F6C744 38%, #FFF3C4 48%, #FBE08A 54%, #F6C744 64%, #F6C744 100%);
  background-size: 300% 100%; animation: fdc-gold 3.4s ease-in-out infinite; box-shadow: 0 4px 12px rgba(217, 165, 32, .25); }
@keyframes fdc-gold { 0%, 20% { background-position: 100% 0; } 80%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .fdc-nav a.fdc-mega__refer { animation: none; } }
.fdc-nav a.fdc-mega__refer { align-self: stretch; display: inline-flex; align-items: center; padding: 0 22px; }
/* Mobile menu: the referral row in gold with the same shimmer as the desktop drop-down (Harry, 15 Oct). */
.fdc-msheet__main a.fdc-msheet__refer { margin: 10px 0 4px; padding: 14px 12px; border: 1px solid #D9A520; border-radius: 10px; color: #4A3200;
  background: linear-gradient(115deg, #F6C744 0%, #F6C744 38%, #FFF3C4 48%, #FBE08A 54%, #F6C744 64%, #F6C744 100%);
  background-size: 300% 100%; animation: fdc-gold 3.4s ease-in-out infinite; box-shadow: 0 4px 12px rgba(217, 165, 32, .25); }
.fdc-msheet__main a.fdc-msheet__refer .fdc-msheet__arr, .fdc-msheet__main a.fdc-msheet__refer:hover .fdc-msheet__t, .fdc-msheet__main a.fdc-msheet__refer:active .fdc-msheet__t { color: #4A3200; }
@media (prefers-reduced-motion: reduce) { .fdc-msheet__main a.fdc-msheet__refer { animation: none; } }
/* Harry, 15 Oct: not a boxed button; a normal menu row with its dividers, filled gold. */
.fdc-msheet__main a.fdc-msheet__refer { margin: 0; padding: 13px 2px; border: 0; border-bottom: 1px solid rgba(14, 22, 20, .08); border-radius: 0; box-shadow: none; }
/* Second pass: no fill at all, the words themselves are gold and shimmer. */
.fdc-msheet__main a.fdc-msheet__refer { background: none; animation: none; }
.fdc-msheet__main a.fdc-msheet__refer .fdc-msheet__t { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(115deg, #B8860B 0%, #C99A1E 38%, #FFE27A 48%, #F6C744 54%, #C99A1E 64%, #B8860B 100%);
  background-size: 300% 100%; animation: fdc-gold 3.4s ease-in-out infinite; }
.fdc-msheet__main a.fdc-msheet__refer .fdc-msheet__arr { color: #C99A1E; }
@media (prefers-reduced-motion: reduce) { .fdc-msheet__main a.fdc-msheet__refer .fdc-msheet__t { animation: none; } }

/* Cookie consent pop-up (Harry, 22 Oct), built by nav.js on every page. Centred on desktop,
   a bottom sheet over a dimmed page on phones. Until a choice is made the page behind can't scroll. */
html.fdc-ck-open, html.fdc-ck-open body { overflow: hidden; }
#fdc-cookies { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14, 22, 20, .55); font: 400 15px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: #0E1614; animation: fdc-ck-fade .2s ease-out; }
#fdc-cookies[hidden] { display: none; }
.fdc-ck__card { box-sizing: border-box; text-align: center; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 24px 18px; background: #FFFFFF; border-radius: 18px; box-shadow: 0 24px 60px rgba(14, 22, 20, .28); animation: fdc-ck-pop .22s ease-out; }
.fdc-ck__ico { display: block; width: 56px; height: 56px; margin: 0 auto 12px; }
.fdc-ck__t { margin: 0 0 10px; font: 700 22px/1.25 Roboto, system-ui, sans-serif; letter-spacing: -.01em; color: #0E1614; }
.fdc-ck__b { margin: 0 0 20px; color: #3B4542; }
.fdc-ck__main, .fdc-ck__more { display: flex; flex-direction: column; gap: 10px; }
.fdc-ck__btn { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; border: 2px solid #0E1614; background: #FFFFFF; color: #0E1614; font: 700 16px/1.2 Roboto, system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.fdc-ck__btn:hover { background: #F4F1EC; }
.fdc-ck__btn.is-accept { background: #FF6B18; border-color: #FF6B18; color: #FFFFFF; }
.fdc-ck__btn.is-accept:hover { background: #F05E0C; border-color: #F05E0C; }
.fdc-ck__btn:focus-visible, .fdc-ck__link:focus-visible, .fdc-ck__sw:focus-visible { outline: 3px solid rgba(255, 107, 24, .45); outline-offset: 2px; }
.fdc-ck__more { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(14, 22, 20, .1); }
.fdc-ck__more[hidden] { display: none; }
.fdc-ck__row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.fdc-ck__row-t { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.fdc-ck__row-t b { font-weight: 700; font-size: 15px; }
.fdc-ck__row-t span { font-size: 13px; line-height: 1.4; color: #5B6461; }
.fdc-ck__sw { position: relative; flex: none; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: #C9CFCD; cursor: pointer; transition: background .15s; }
.fdc-ck__sw span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.fdc-ck__sw[aria-checked="true"] { background: #FF6B18; }
.fdc-ck__sw[aria-checked="true"] span { transform: translateX(20px); }
.fdc-ck__links { margin: 14px 0 0; text-align: center; font-size: 13px; color: #5B6461; }
.fdc-ck__link { padding: 4px 2px; border: 0; background: none; color: #3B4542; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@keyframes fdc-ck-fade { from { opacity: 0; } }
@keyframes fdc-ck-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fdc-ck-up { from { transform: translateY(100%); } }
@media (max-width: 640px) {
  #fdc-cookies { align-items: flex-end; padding: 0; }
  .fdc-ck__card { max-width: none; max-height: 88vh; padding: 24px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; animation: fdc-ck-up .25s ease-out; }
  .fdc-ck__t { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #fdc-cookies, .fdc-ck__card { animation: none; }
}

/* Slim cookie bar, 48-hour test from 24 Oct 22:25 (the 14 Oct bar from fdc.css, own id so the pop-up is untouched). */
#fdc-cookiebar { position: fixed; z-index: 100; left: 12px; right: 12px; bottom: 14px; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 44px 10px 16px; background: #FFFFFF; color: #0E1614; border: 1px solid rgba(14, 22, 20, .1); border-radius: 12px; box-shadow: 0 10px 30px rgba(14, 22, 20, .14); font: 400 14px/1.4 Roboto, system-ui, sans-serif; }
#fdc-cookiebar[hidden] { display: none; }
#fdc-cookiebar p { margin: 0; flex: 1; }
#fdc-cookiebar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fdc-cookiebar__btns { display: flex; gap: 8px; flex: none; }
.fdc-cookiebar__btns button { font: 700 14px/1 Roboto, system-ui, sans-serif; padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(14, 22, 20, .3); background: transparent; color: #0E1614; cursor: pointer; }
.fdc-cookiebar__btns .is-accept { background: #FF6B18; border-color: #FF6B18; color: #fff; }
.fdc-cookiebar__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: #5B6461; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; }
.fdc-cookiebar__x:hover { opacity: 1; }
@media (max-width: 759px) {
  #fdc-cookiebar { flex-wrap: nowrap; gap: 8px; padding: 8px 34px 8px 12px; font-size: 12px; line-height: 1.3; bottom: 8px; left: 8px; right: 8px; }
  #fdc-cookiebar p { flex: 1 1 auto; min-width: 0; }
  .fdc-cookiebar__btns { width: auto; gap: 6px; flex: none; }
  .fdc-cookiebar__btns button { flex: none; padding: 8px 10px; font-size: 13px; }
  .fdc-cookiebar__x { right: 4px; width: 28px; top: 50%; transform: translateY(-50%); }
}