/* Accessibility rules shared by every page (WCAG 2.2 AA). Linked last by src/layouts/Base.astro,
   after the page's own sheets, so these win over the per-page copies of the same components. */

/* ---- footer (design 03.11) ----
   A dark block, like the AI section, with the brand glow rising from the bottom. It replaces
   the orange wash behind CTA + footer (.close-bg), on every page. White on #120C08 is 18:1;
   the glow only reaches the copy at the very bottom, where the © line sits on ~#7A3412. */
.close-bg{display:none !important;}
.ft{margin-top:150px;position:relative;overflow:hidden;background-color:#120C08 !important;background-image:
  linear-gradient(0deg, rgba(18,12,8,.36) 0px, rgba(18,12,8,.3) 40px, rgba(18,12,8,.2) 90px, rgba(18,12,8,.1) 140px, rgba(18,12,8,.03) 190px, rgba(18,12,8,0) 240px),
  radial-gradient(ellipse 34% 42% at 24% 102%, rgba(255,168,90,.5) 0%, rgba(255,144,64,.3) 32%, rgba(255,124,50,.12) 62%, rgba(255,124,50,0) 100%),
  radial-gradient(ellipse 30% 38% at 84% 106%, rgba(255,86,156,.4) 0%, rgba(250,62,140,.2) 40%, rgba(250,62,140,0) 100%),
  radial-gradient(ellipse 80% 85% at 20% 90%, rgba(252,98,16,1) 0%, rgba(253,102,20,.97) 16%, rgba(254,104,24,.8) 28%, rgba(255,106,28,.58) 42%, rgba(255,108,32,.36) 56%, rgba(255,110,36,.18) 70%, rgba(255,110,36,.07) 84%, rgba(255,110,36,0) 100%),
  radial-gradient(ellipse 70% 78% at 86% 104%, rgba(234,26,118,.96) 0%, rgba(235,30,114,.74) 16%, rgba(236,34,110,.48) 32%, rgba(237,38,106,.28) 50%, rgba(238,40,104,.12) 68%, rgba(238,40,104,.04) 84%, rgba(238,40,104,0) 100%),
  radial-gradient(ellipse 110% 55% at 50% 110%, rgba(255,110,40,.32) 0%, rgba(255,110,40,.15) 45%, rgba(255,110,40,0) 100%) !important;}
.ft-inner{position:static !important;padding-top:88px !important;padding-bottom:13vw !important;}
.ft-top{position:relative;z-index:1;}
.ft-legal{position:relative;z-index:1;border-top:0 !important;}
.ft-mark{position:absolute !important;display:block !important;line-height:0;height:auto !important;left:1.2%;right:1.2%;bottom:-3vw;margin:0 !important;padding:0 !important;z-index:0;pointer-events:none;}
.ft-mark svg{display:block;width:100%;height:auto;opacity:.2 !important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.2) 28%,rgba(0,0,0,.6) 55%,#000 82%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.2) 28%,rgba(0,0,0,.6) 55%,#000 82%);}
@media (max-width:820px){
  .ft{margin-top:96px;background-image:
    linear-gradient(0deg, rgba(18,12,8,.52) 0px, rgba(18,12,8,.46) 50px, rgba(18,12,8,.4) 100px, rgba(18,12,8,.2) 140px, rgba(18,12,8,0) 190px),
    radial-gradient(ellipse 80% 24% at 22% 102%, rgba(255,168,90,.44) 0%, rgba(255,144,64,.22) 45%, rgba(255,144,64,0) 100%),
    radial-gradient(ellipse 60% 20% at 90% 104%, rgba(255,86,156,.34) 0%, rgba(250,62,140,.14) 45%, rgba(250,62,140,0) 100%),
    radial-gradient(ellipse 120% 40% at 15% 98%, rgba(252,98,16,1) 0%, rgba(253,102,20,.94) 14%, rgba(254,104,24,.78) 28%, rgba(255,106,28,.56) 42%, rgba(255,108,32,.34) 56%, rgba(255,110,36,.16) 70%, rgba(255,110,36,.05) 85%, rgba(255,110,36,0) 100%),
    radial-gradient(ellipse 90% 30% at 92% 106%, rgba(234,26,118,.78) 0%, rgba(236,34,110,.46) 35%, rgba(238,40,104,.16) 65%, rgba(238,40,104,0) 100%) !important;}
  .ft-inner{padding-top:56px !important;padding-bottom:8px !important;}
  .ft-mark{bottom:-5.6vw;}
  .ft-legal{padding-bottom:calc(12.4vw + 36px) !important;}
}
.ft-legal > span{position:relative;}
.ft-lang{position:relative;background:transparent !important;}
/* the language switch: in the header on desktop, kept in the footer on phones */
@media (min-width:821px){ .ft-lang{display:none !important;} }
/* the header over the dark footer: the dark glass it has over the dark sections (/js/a11y.js) */
.nav-wrap.on-ft{background:rgba(18,12,7,.6) !important;-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border-color:rgba(255,255,255,.14) !important;box-shadow:0 14px 34px -18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1) inset !important;}
.nav-wrap.on-ft .nav-link, .nav-wrap.on-ft .nav-trigger{color:rgba(255,255,255,.88) !important;}
.nav-wrap.on-ft .nav-link:hover, .nav-wrap.on-ft .nav-trigger:hover{color:#fff !important;}
.nav-wrap.on-ft .btn-dark{background:#fff !important;color:#2A211B !important;}
.nav-wrap.on-ft .nav-burger span{background:#FFF6EE !important;}
.ft-social a{color:#fff;}
/* this page's own link in the footer */
.ft-col a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;}

/* the footer column titles were <h5>; as <h2> they keep the h5's spacing */
.ft-h{margin:1.67em 0;}

/* ---- contrast (design 03.11, a11y round 2) ---- */
.tbc, mark.tbc{color:#9A3412 !important;}
.mod-badge.green{color:#166534 !important;}
.ph, .mod-barlabels span{color:#75665B !important;}
.mod-sub{color:#75665B !important;}
.mod-tab{color:#6E6259 !important;}
.mod-tab.active{background:#94600F !important;color:#fff !important;}
.av{background:#B4460F !important;}

/* ---- structure ---- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* first stops for keyboard users: hidden until focused, then above the floating nav. The
   second one ("Skip to cookie settings") exists only while Cookiebot's banner is open. */
.skip-link{position:fixed;left:16px;top:12px;z-index:2147483647;padding:12px 18px;border-radius:12px;
  background:#2A211B;color:#fff !important;font:600 15px/1.2 'Jost',system-ui,sans-serif;text-decoration:none;
  transform:translateY(-220%);transition:transform .15s ease;}
.skip-link:focus, .skip-link:focus-visible{transform:none;}
.skip-link[hidden]{display:none !important;}
h1, h2{overflow-wrap:break-word;hyphens:auto;}
/* <main> sits inside the flex column .mp: as a flex column itself its sections keep the spacing
   they had as direct children (no margin collapsing) */
.mp > #main{display:flex;flex-direction:column;}
/* the comparison grid's rows exist for screen readers only; the cells stay grid items */
.cmp-row{display:contents;}

/* ---- language switchers: lists of links (they were buttons and listbox options) ---- */
.lang-menu li, .m-lang li, .ft-lang li{list-style:none;}
.m-lang{padding-left:0;margin-bottom:0;}
.ft-lang{margin-top:0;margin-bottom:0;}
.lang-menu a, .m-lang a, .ft-lang a{text-decoration:none;}
.m-lang a{display:inline-flex;align-items:center;box-sizing:border-box;}
.ft-lang a{display:inline-block;}
/* "Cookie settings" opens a dialog, so it is a button, drawn as the links around it */
.ft-linkbtn{padding:0;border:0;background:none;cursor:pointer;font-family:inherit;line-height:inherit;text-align:left;}

/* ---- homepage FAQ: the questions are buttons, drawn as the rows they were ---- */
button.faq-q{width:100%;margin:0;border:0;background:none;font-family:inherit;line-height:inherit;text-align:left;}

/* ---- Features mega menu: opens for keyboard focus as it does for the pointer; Esc closes it
   (.mega-off, /js/a11y.js) until focus or the pointer leaves. Kept apart from the :hover rules:
   a browser without :has() drops the whole rule it appears in. */
.nav-mega:has(:focus-visible) .nav-trigger{color:var(--ink);}
.nav-mega:has(:focus-visible) .nav-trigger svg{transform:rotate(180deg);}
.nav-mega:has(:focus-visible) .mega-drop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease 0s, visibility 0s linear 0s;}
.nav-mega:has(:focus-visible) .mega-panel{transform:none;}
.nav-mega.mega-off .mega-drop{opacity:0;visibility:hidden;pointer-events:none;transition:none;}
.nav-mega.mega-off .nav-trigger svg{transform:none;}
/* the skip link's target takes focus (tabindex=-1) without drawing a ring round the page */
#main:focus, [data-anchor-target]:focus{outline:none !important;box-shadow:none !important;}

/* ---- focus (design 03.11) ----
   One ring for every focusable element: 3px #2A211B with a white halo, so it shows on light,
   dark and gradient grounds alike; on the dark footer the two swap. Form fields get the
   orange ring. Pointer clicks do not draw it (:focus-visible). */
:focus-visible{outline:3px solid #2A211B !important;outline-offset:2px !important;box-shadow:0 0 0 2px #fff !important;}
:focus:not(:focus-visible){outline:none;}
.ft :focus-visible, .ft-legal :focus-visible{outline-color:#fff !important;box-shadow:0 0 0 2px #2A211B !important;}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid #C2410C !important;outline-offset:2px !important;box-shadow:0 0 0 2px #fff !important;}
/* the custom checkbox and chips hide the real input: the ring goes on what is drawn */
.ct-consent input:focus-visible + .box, .ct-chip input:focus-visible + span{outline:3px solid #C2410C !important;outline-offset:2px !important;}
/* a control reached by Tab never ends up under the floating nav (58-74px tall); scroll-margin
   rather than scroll-padding, which would move the homepage's snap points */
a[href], button, input, select, textarea, summary, [tabindex]{scroll-margin-top:96px;}

/* ---- motion (/js/a11y.js) ----
   "reduce motion" in the OS (html.rm): state changes land at once instead of easing. Looping
   animations are paused from JS, not here, so entrance animations still reach their end. */
html.rm *, html.rm *::before, html.rm *::after{transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
html.rm{scroll-behavior:auto !important;}
/* the OS asks for reduced motion: animations run once, at once (design 03.11) */
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} }
/* the pause/play button (/js/a11y.js): floating on the left edge, bottom-left on phones; shown
   only while something that loops is on screen; its label slides out on hover and focus */
.a11y-pause{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:120;display:inline-flex;align-items:center;gap:0;height:44px;min-width:44px;padding:0 15px;box-sizing:border-box;border-radius:999px;border:1px solid rgba(42,33,27,.22);background:rgba(255,255,255,.97);color:#2A211B;font:600 13px/1 'Jost',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 26px -12px rgba(42,33,27,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s,background-color .25s,color .25s,border-color .25s,gap .2s;}
@media (max-width:860px){ .a11y-pause{top:auto !important;bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--ck-h, 0px)) !important;left:16px !important;transform:none !important;} }
.a11y-pause.is-shown, .a11y-pause:focus-visible{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .25s,color .25s,border-color .25s,gap .2s;}
.a11y-pause-ic{display:inline-flex;}
.a11y-pause .a11y-pause-tx{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .25s ease,opacity .2s ease;}
.a11y-pause:hover, .a11y-pause:focus-visible{gap:8px;}
.a11y-pause:hover .a11y-pause-tx, .a11y-pause:focus-visible .a11y-pause-tx{max-width:170px;opacity:1;}
.a11y-pause.on-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 10px 26px -14px rgba(0,0,0,.6);}
.a11y-pause.on-dark:hover{background:rgba(255,255,255,.2);}
.a11y-pause:focus-visible{outline:3px solid #C2410C !important;outline-offset:3px !important;box-shadow:0 0 0 2px #fff !important;}
.a11y-pause.on-dark:focus-visible{outline-color:#FF8A3D !important;box-shadow:none !important;}
.a11y-pause.on-orange{background:rgba(70,20,0,.3);border-color:rgba(255,255,255,.5);color:#fff;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 10px 26px -14px rgba(90,20,0,.55);}
.a11y-pause.on-orange:hover{background:rgba(70,20,0,.42);}
.a11y-pause.on-orange:focus-visible{outline-color:#fff !important;box-shadow:0 0 0 2px #2A211B !important;}
/* the orbit stage (.ho-wrap) comes later and overlapped the hero copy's last 50px, CTA buttons included:
   the copy now sits above it, so those stay clickable */
#hero-copy{z-index:2;}

/* smooth scroll (Lenis, /js/smooth.js): nested scroll areas keep their own scroll */
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}

/* ---- contact form: required note, per-field errors (text + icon, not colour alone) ---- */
.ct-req{margin:0;font-size:13.5px;color:var(--muted,#74655A);}
.ct-req em{font-style:normal;font-weight:600;color:var(--primary-deep,#B5350A);}
.ct-ferr{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:500;line-height:1.35;color:#B3261E;}
.ct-ferr svg{flex-shrink:0;margin-top:1px;}
.ct-ferr[hidden]{display:none;}
/* the team-size chips are a <fieldset>: no frame, the legend placed as the other labels */
fieldset.ct-field{border:0;margin:0;padding:0;min-width:0;}
legend.ct-flabel{padding:0;margin-bottom:8px;}

/* ---- Windows high contrast (forced colours) ----
   Gradients and shadows are dropped there, so whatever they alone drew gets a system colour:
   button and chip edges, the chosen chip and checkbox, gradient text, the focus ring. */
@media (forced-colors: active){
  .btn-primary, .btn-dark, .btn-ghost, .btn-outline, .mp-btn, .lang-btn, .nav-burger, .to-top,
  .ct-chip span, .ct-consent .box, .faq-item, .ft-lang{border:1px solid ButtonText;}
  .ct-chip input:checked + span, .ct-consent input:checked + .box,
  .lang-menu a[aria-current="true"] .lang-code, .m-lang a[aria-current="true"], .ft-lang a[aria-current="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;}
  .grad-text, .cmp-cell.head.brand .mark, .hm-stats b, [style*="background-clip:text"]{-webkit-text-fill-color:currentColor;color:CanvasText;background:none;}
  a[class*="btn"], .pr-cta, .m-menu-cta, .ws-pub, .fx-btn{border:1px solid ButtonText !important;}
  .nav-wrap, .a11y-pause{border:1px solid CanvasText !important;}
  :focus-visible, .ft :focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline-color:Highlight !important;}
  .skip-link{border:2px solid ButtonText;}
  /* the footer logo is drawn in white: give it the text colour */
  .ft-logo svg path{fill:CanvasText;}
}