/* Berger BI v2 — page system (art direction). Loaded last. It owns the rules that make the page ONE system:
   ground + light + bands, shape (radius), the container, section rhythm, the eyebrow, section headers, the numbering,
   buttons, links, focus, the floating buttons, the mobile menu scrim, and bidi helpers. Section files keep their own
   layouts and use the tokens in base.css. If a section needs an exception, write it here with the reason, not in the
   section file.

   Shape: exactly three radii (base.css). PILL (--v2-r-pill, 999px): buttons, tabs, chips/tags, inputs, the language
   switch, the navbar shell, the floating buttons. CARD (--v2-r-card, 24px): cards, panels and frames (scheduler,
   dashboard frame, quote card, pillar lists, diagram board, about photo, video frame, the navy bcore panel, the menu
   sheet, cookie banner, a11y panel). INNER (--v2-r-inner, 16px): whatever sits inside a card (day cells, nested tiles,
   diagram nodes, the inspect card, textareas). Cards stay solid white with a hairline; only the navbar is glass.

   Ground + light (static, palette tints only; <html data-bg="a|b|c|d|e">, set by system.js from ?bg= / localStorage
   bbi_bg; with no attribute, before system.js runs, the CSS is already d):
     a  light ......... one large soft light from the top inline-end over the flat ground; white bands fade into the
                        ground at their edges instead of hairlines
     b  + blueprint ... (a) + the diagram's dot grid, faint and masked, behind the hero and the process band
     c  + grain ....... (b) + a ~3.5% print grain on the ground, the bands and the navy panels
     d  rhythm ........ (DEFAULT) no light, no dots, no grain: one flat ground. The life comes from the order of the
                        colours (two navy stages, one tint stage, white bands with straight edges) and from the logo's
                        three rising bars, used in exactly three places: beside the hero stats, at the start of the
                        hairline between two sections on the same ground, and large + ~7% white in the footer corner
     e  + glow ........ (d) + one static, very soft navy light behind the hero video. Nothing else.
   d/e band shape: every COLOURED band is the same rounded panel as bcore (inset from the viewport edges, a 24px ground
   gap above it), every WHITE band is full-bleed with straight edges. No fades anywhere.

   The scroll in d/e: hero + clients (ground) · 01 process WHITE band · 02 bcore NAVY panel · 03 spec ground ·
   04 cases NAVY panel (the dashboard stage) · 05 testimonials TINT panel · 06 about ground · 07 technologies WHITE
   band · careers ground · 08 booking ground, bars + hairline on top · footer NAVY, rounded top, bars in the corner.

   The scroll in a/b/c, top to bottom (one ground, --v2-bg, and deliberate bands only):
     hero + clients ....... ground, lit from the top inline-end (b/c: blueprint dots around the video)
     01 process ........... WHITE band (the diagram's canvas), edges fade into the ground (b/c: dots at the sides)
     02 bcore ............. NAVY rounded panel on the ground (inset from the viewport edges)
     03 spec .............. ground
     04 cases ............. ground, container hairline on top (same ground as the section above)
     05 testimonials ...... WHITE band, soft edges
     06 about ............. ground
     07 technologies ...... WHITE band, soft edges
        careers ........... ground (unlabelled, like the hero)
     08 booking ........... ground, container hairline on top
        footer ............ NAVY, rounded top corners
   Every section: padding-block var(--v2-sec-y); content on one container (1140 incl. 32px gutters = 1076 content). */

/* ------------------------------------------------------------------ ground + light */
/* All layers are static gradients; the grain is one 160px SVG tile. Variables default to "none" so a layer simply drops
   out in the variants that do not use it. Text contrast: the lightest point is white and the darkest ground is the
   flat --v2-bg, so every text colour keeps the AA ratio it had on the flat ground. */
:root {
  --v2-fade: 160px;                               /* white band -> ground transition */
  --v2-lx: 88%;                                   /* light source x: top inline-end (right in LTR) */
  --v2-dx: 70%;                                   /* hero dot field centre: behind the video (inline-end column) */
  --v2-dots: none;
  --v2-grain: none;
  --v2-panel-inset: max(16px, calc((100% - 1236px) / 2));   /* navy panels: 80px wider than the content each side */
}
#bbi-root[dir="rtl"] { --v2-lx: 12%; --v2-dx: 30%; }           /* inline-end = left in Hebrew */
@media (max-width: 639px) { :root { --v2-fade: 96px; --v2-panel-inset: 8px; } }
:root:is([data-bg="b"], [data-bg="c"]) {
  --v2-dots: radial-gradient(circle, rgba(31, 69, 112, .3) 0 .85px, transparent 1.25px);
}
:root[data-bg="c"] {
  --v2-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .043 0 0 0 0 .086 0 0 0 0 .149 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
}

html, body { background: var(--v2-bg); }
/* the light: a wide, very soft wash from the top inline-end, falling off well before the process band */
#bbi-root {
  background-color: var(--v2-bg) !important;
  background-image:
    var(--v2-grain),
    radial-gradient(70% 62% at var(--v2-lx) 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .6) 30%, rgba(255, 255, 255, .2) 58%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(to bottom, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 900px) !important;
  background-size: 160px 160px, 100% 1100px, 100% 900px !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
/* b/c: the blueprint behind the hero — the diagram's own dot grid, gathered around the video (inline-end) and fading
   out before the headline and the client grid */
#dc-root #main[data-top-hero]::before {
  content: ""; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background: var(--v2-dots) 50% 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(46% 50% at var(--v2-dx) 46%, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 100%);
  mask-image: radial-gradient(46% 50% at var(--v2-dx) 46%, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 100%);
}
:root[data-bg="a"] #dc-root #main[data-top-hero]::before { display: none; }
@media (max-width: 900px) {
  #dc-root #main[data-top-hero]::before {
    -webkit-mask-image: radial-gradient(90% 40% at 50% 62%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 100%);
    mask-image: radial-gradient(90% 40% at 50% 62%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 100%);
  }
}

/* ------------------------------------------------------------------ container: one width, one pair of edges */
#dc-root [data-v2-wrap],
#dc-root [data-xp-wrap],
#dc-root [data-top-wrap],
#dc-root [data-top-clients],
#booking [data-bk="wrap"],
footer[data-ft="footer"] [data-ft="wrap"] {
  max-width: var(--v2-wrap) !important; box-sizing: border-box !important;
  margin-inline: auto !important; padding-inline: var(--v2-gutter) !important;
}

/* ------------------------------------------------------------------ rhythm + bands */
#dc-root :is(#process, #bcore, #spec, #cases, #testimonials, #about, #technologies, #careers, #booking) {
  position: relative; padding-block: var(--v2-sec-y) !important; background: transparent;
}
/* white bands: no hairlines, the white rises out of the ground over --v2-fade and sinks back into it */
#dc-root :is(#process, #testimonials, #technologies) {
  border-block: 0 !important;
  background:
    var(--v2-grain),
    linear-gradient(to bottom, var(--v2-bg) 0, rgba(238, 241, 245, 0) var(--v2-fade), rgba(238, 241, 245, 0) calc(100% - var(--v2-fade)), var(--v2-bg) 100%),
    var(--v2-surface) !important;
  background-size: 160px 160px, auto, auto !important;
}
/* b/c: the process band is the diagram's table — its dot grid runs out under the board and fades at the sides */
#dc-root #process {
  background:
    var(--v2-grain),
    linear-gradient(to bottom, var(--v2-bg) 0, rgba(238, 241, 245, 0) var(--v2-fade), rgba(238, 241, 245, 0) calc(100% - var(--v2-fade)), var(--v2-bg) 100%),
    linear-gradient(to bottom, #fff calc(var(--v2-fade) * .5), rgba(255, 255, 255, 0) calc(var(--v2-fade) + 240px)),
    linear-gradient(to right, #fff 2%, rgba(255, 255, 255, .55) 16%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .55) 84%, #fff 98%),
    var(--v2-dots) 50% 0 / 24px 24px,
    var(--v2-surface) !important;
  background-size: 160px 160px, auto, auto, auto, 24px 24px, auto !important;
}
/* the navy band becomes a rounded panel on the ground (the content keeps at least 48px of navy around it) */
#dc-root #bcore { background: transparent !important; color: #fff; }
#dc-root #bcore::before {
  content: ""; position: absolute; inset-block: 0; inset-inline: var(--v2-panel-inset); z-index: -1; pointer-events: none;
  border-radius: var(--v2-r-card);
  background:
    var(--v2-grain),
    radial-gradient(80% 90% at var(--v2-lx) 0%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 70%),
    var(--v2-navy);
  background-size: 160px 160px, auto, auto;
}
#dc-root #bcore [data-xp-wrap] {
  max-width: none !important;
  padding-inline: max(calc(var(--v2-panel-inset) + 48px), calc((100% - 1076px) / 2)) !important;
}
@media (max-width: 639px) {
  #dc-root #bcore [data-xp-wrap] { padding-inline: calc(var(--v2-panel-inset) + 24px) !important; }
}
/* the footer: a navy sheet with rounded top corners */
#dc-root footer[data-ft="footer"] {
  border-radius: var(--v2-r-card) var(--v2-r-card) 0 0;
  background: var(--v2-grain), radial-gradient(60% 120% at var(--v2-lx) 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%), var(--v2-navy) !important;
  background-size: 160px 160px, auto, auto !important;
}
/* same ground as the section above: a hairline on the container, not a colour step */
#dc-root :is(#cases, #booking)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(var(--v2-wrap) - 2 * var(--v2-gutter)), calc(100% - 2 * var(--v2-gutter)));
  height: 1px; background: var(--v2-line-2); pointer-events: none;
}
/* anchors land just under the navbar (72px desktop, 66px phone) */
#dc-root :is(section, footer)[id], #dc-root [id="main"] { scroll-margin-top: 76px !important; }
@media (max-width: 639px) { #dc-root :is(section, footer)[id], #dc-root [id="main"] { scroll-margin-top: 68px !important; } }

/* bcore's own panel styling is flattened: the navy panel is the section's ::before (above), the value row sits inside it */
#dc-root #bcore [data-xp-panel] { background: transparent !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
#dc-root #bcore [data-xp-values] { margin: 56px 0 0 !important; }
#dc-root #bcore [data-xp-values] > li:first-child { padding-inline-start: 0 !important; }
#dc-root #bcore [data-xp-values] > li:last-child { padding-inline-end: 0 !important; }
@media (max-width: 900px) {
  #dc-root #bcore [data-xp-values] > li { padding-inline: 0 !important; }
}
@media (max-width: 639px) { #dc-root #bcore [data-xp-values] { margin-top: 32px !important; } }

/* cards on a white band step down to surface-2 so they still read as objects */
#dc-root #testimonials [data-proof-qpanel] { background: var(--v2-surface-2); border-color: var(--v2-line); }

/* the navbar pill carries the same two edges as the content below it */
#dc-root header[data-top-header] { padding-inline: calc(var(--v2-gutter) - 12px) !important; }
#bbi-navbar[data-top-nav] { max-width: calc(var(--v2-wrap) - 2 * var(--v2-gutter) + 24px); padding-inline: 12px 8px; }
@media (max-width: 1149px) { #bbi-navbar[data-top-nav] { padding-inline: 12px 5px; } }
@media (max-width: 639px) { #dc-root header[data-top-header] { padding-inline: 8px !important; } #bbi-navbar[data-top-nav] { padding-inline: 12px 5px; } }

/* ------------------------------------------------------------------ shape: the exceptions that need more than a token */
/* case tabs: a pill segmented control (the sliding underline and the rule under the bar go; the selected tab is the
   navy pill) */
#dc-root [data-proof-tabs-wrap] { border-bottom: 0; margin-bottom: 8px; }
#dc-root [data-proof-tabs] { gap: 6px; padding: 5px; margin-bottom: 0; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill);
  background: var(--v2-surface); width: max-content; max-width: 100%; box-sizing: border-box; }
#dc-root [data-proof-tab] { align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--v2-r-pill);
  transition: color 180ms var(--v2-ease), background-color 180ms var(--v2-ease); }
#dc-root [data-proof-tab][aria-selected="true"] { background: var(--v2-navy); color: #fff; }
#dc-root [data-proof-tab][aria-selected="true"] [data-proof-num] { color: rgba(255, 255, 255, .7); }
#dc-root [data-proof-tab]:focus-visible { outline-offset: 2px; }
#dc-root [data-proof-ind] { display: none !important; }
#dc-root [data-proof-tabs-wrap] { position: relative; }
/* a 44px hit area; the visible mark is the 28px circle drawn by ::before */
#dc-root [data-v2-tabs-more] {
  position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; margin-top: -22px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; pointer-events: none; color: var(--v2-navy);
  opacity: 0; visibility: hidden; transition: opacity 180ms var(--v2-ease), visibility 0s linear 180ms;
}
#dc-root [data-v2-tabs-more]::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--v2-surface); border: 1px solid var(--v2-line-2); box-shadow: 0 2px 8px -2px rgba(11, 22, 38, .18);
}
#dc-root [data-v2-tabs-more] svg { position: relative; }
#dc-root [data-v2-tabs-more="end"] { inset-inline-end: 0; }
#dc-root [data-v2-tabs-more="start"] { inset-inline-start: 0; }
@media (max-width: 639px) {   /* the strip sits 20px inside its wrap here (proof.css) */
  #dc-root [data-v2-tabs-more="end"] { inset-inline-end: 18px; }
  #dc-root [data-v2-tabs-more="start"] { inset-inline-start: 18px; }
}
#bbi-root[dir="ltr"] [data-v2-tabs-more="end"] svg, #bbi-root[dir="rtl"] [data-v2-tabs-more="start"] svg { transform: scaleX(-1); }
#dc-root [data-proof-tabs]:is([data-fade="end"], [data-fade="both"]) ~ [data-v2-tabs-more="end"],
#dc-root [data-proof-tabs]:is([data-fade="start"], [data-fade="both"]) ~ [data-v2-tabs-more="start"] {
  opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms var(--v2-ease), visibility 0s;
}
/* a tap on the chevron pages the strip (system.js) */
@media (hover: hover) and (pointer: fine) {
  #dc-root [data-proof-tab]:not([aria-selected="true"]):hover { background: var(--v2-surface-2); color: var(--v2-ink); }
}
@media (prefers-reduced-motion: reduce) { #dc-root [data-proof-tab] { transition: none; } }
html.a11y-no-motion #dc-root [data-proof-tab] { transition: none; }
/* testimonial list: rounded rows; the selected one is a soft inner tile with the navy mark */
#dc-root [data-proof-qlist] { gap: 4px; border-top: 0; }
#dc-root [data-proof-qtab] { border-bottom: 0; border-radius: var(--v2-r-inner); padding-inline: 20px 16px; transition: background-color 180ms var(--v2-ease); }
#dc-root [data-proof-qtab][aria-selected="true"] { background: var(--v2-surface-2); }
#dc-root [data-proof-qtab]::before { inset-inline-start: 8px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  #dc-root [data-proof-qtab]:not([aria-selected="true"]):hover { background: rgba(238, 241, 245, .6); }
}
/* the skip link */
#dc-root [data-v2-skip] { border-radius: var(--v2-r-pill) !important; }

/* ------------------------------------------------------------------ eyebrow: one component, "NN / LABEL" */
/* Numbered in DOM order 01-08 (process, bcore, spec, cases, testimonials, about, technologies, booking). Hero and careers
   carry none. The number and slash are mono in both languages; the label ([data-v2-ey]) is mono caps in English and
   Heebo in Hebrew (Plex Mono has no Hebrew glyphs, and an English label on a Hebrew page reads as a template). */
#dc-root [data-v2-eyebrow],
#dc-root [data-top-eyebrow] span {
  margin: 0; font-family: var(--v2-mono); font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; color: var(--v2-muted); text-align: start;
}
#dc-root [data-v2-eyebrow] > span { unicode-bidi: isolate; }
#dc-root [data-v2-eyebrow] b { font-weight: 500; color: var(--v2-navy); }
#dc-root [data-v2-eyebrow] i { font-style: normal; color: var(--v2-soft); padding: 0 .5em; }
#bbi-root[dir="rtl"] [data-v2-eyebrow] [data-v2-ey],
#bbi-story[dir="rtl"] [data-v2-ey] {   /* the diagram's pinned copy of the header */
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
#dc-root #bcore [data-v2-eyebrow] { color: rgba(255, 255, 255, .72); }
#dc-root #bcore [data-v2-eyebrow] b { color: #fff; }
#dc-root #bcore [data-v2-eyebrow] i { color: rgba(255, 255, 255, .45); }
@media (max-width: 639px) { #dc-root [data-top-eyebrow] span { letter-spacing: .06em; } }

/* ------------------------------------------------------------------ section headers */
/* eyebrow -> h2 16px, h2 -> subtitle 12px, start-aligned everywhere (process included) */
#dc-root section [data-v2-eyebrow] + h2 { margin-top: 16px !important; }
#dc-root section h2 { text-align: start; color: var(--v2-ink); }
#dc-root #bcore h2 { color: #fff !important; }
#dc-root [data-v2-head] { max-width: 760px; }
#dc-root [data-v2-head] h2 { margin-bottom: 0; text-wrap: balance; }
#dc-root #process #bbi-story { margin-top: 48px; }
@media (max-width: 639px) { #dc-root #process #bbi-story { margin-top: 32px; } }
/* the one allowed exception to the container: with the step rail beside it (>= 1224px) the diagram needs ~860px, so
   the figure alone bleeds into the END-side gutter; the header and the step text keep the grid's start edge */
@media (min-width: 1224px) {
  #dc-root #process > [data-v2-wrap] {
    max-width: none !important;
    padding-inline-start: calc((100% - 1076px) / 2) !important;
    padding-inline-end: max(24px, (100% - 1076px) / 2 - 96px) !important;
  }
}
#dc-root :is([data-proof-sub], #spec [data-xp-head] p, [data-v2c-sub], #booking [data-bk="sub"]) {
  margin-top: 12px !important; max-width: 56ch; font-size: var(--v2-lead); line-height: 1.6; color: var(--v2-muted);
}

/* ------------------------------------------------------------------ numbering: three schemes only */
/* sections (01-08), process steps (n / 06) and pillar codes (A. / B.), plus the two functional counters
   (testimonial "01 / 05", booking "1 / 3"). Case tabs, the testimonial index, tech columns, the call agenda and the
   bcore FIG captions lose their numbers. */
#dc-root [data-proof-tab] [data-proof-num],
#dc-root [data-proof-qtab] [data-proof-num],
#dc-root [data-v2c-idx],
#dc-root #bcore [data-xp-fig] { display: none !important; }
#dc-root [data-proof-qtab] { grid-template-columns: minmax(0, 1fr) !important; }
#booking [data-bk="call-list"] li { grid-template-columns: 28px minmax(0, 1fr) !important; column-gap: 12px; align-items: baseline; }
#dc-root [data-v2c-rail] { gap: 0; }
#dc-root [data-v2c-rail-line] { margin-inline-start: 0; }
#dc-root #bcore [data-xp-values] > li > :is([data-xp-scale], [data-xp-stack]) { margin-top: 0; }

/* ------------------------------------------------------------------ buttons: primary · secondary · text link */
/* one height (44 desktop / 48 phone), 16px/600, radius pill. Tool buttons inside frames and small icon
   controls use --v2-btn-h-sm (36 / 44 on phones). Arrows point in the reading direction (see the flip rules). */
#dc-root :is([data-top-btn], [data-proof-btn], [data-v2c-btn], [data-top-menu-cta]),
#booking :is([data-bk="primary"], [data-bk="ghost"]),
#dc-root #spec [data-xp-all] {
  height: var(--v2-btn-h); min-height: var(--v2-btn-h); padding: 0 20px; box-sizing: border-box;
  border-radius: var(--v2-r-pill); font-family: 'Heebo', sans-serif; font-size: var(--v2-body); font-weight: 600; line-height: 1.5;
  gap: 10px;
}
/* primary: navy fill */
#dc-root :is([data-top-btn="primary"], [data-proof-btn="primary"], [data-top-menu-cta], [data-top-cta]),
#booking [data-bk="primary"]:not([aria-disabled="true"]) {
  background: var(--v2-navy); border: 1px solid var(--v2-navy); color: #fff !important;
}
/* secondary: white, line-2 hairline, ink text */
#dc-root :is([data-top-btn="secondary"], [data-proof-btn="ghost"], [data-v2c-btn], [data-proof-fs], [data-proof-arrow]),
#booking :is([data-bk="ghost"], [data-bk="navbtn"]),
#dc-root #spec [data-xp-all] {
  background: var(--v2-surface); border: 1px solid var(--v2-line-2); color: var(--v2-ink) !important;
}
#dc-root [data-v2c-btn] { display: inline-flex; align-items: center; justify-content: center; }
/* tool buttons */
#dc-root [data-proof-fs] { height: var(--v2-btn-h-sm); font-size: 14px; }
#booking [data-bk="navbtn"], #dc-root [data-proof-arrow] { width: var(--v2-btn-h); height: var(--v2-btn-h); }
#booking [data-bk="back"] { height: var(--v2-btn-h); font-size: var(--v2-body); }
/* the navbar CTA is the one compact primary: it sits inside the 56px pill */
#dc-root [data-top-cta] { height: 40px; font-size: 14px; font-weight: 600; border-radius: var(--v2-r-pill); }
@media (max-width: 1149px) { #dc-root [data-top-cta] { height: 44px; } }
#dc-root [data-top-cta][aria-current="true"] { box-shadow: 0 0 0 3px rgba(31, 69, 112, .18); }
/* the fullscreen overlay bar keeps the same height as every other button */
#dc-root [data-proof-fsov] [data-proof-btn] { height: var(--v2-btn-h) !important; font-size: var(--v2-body) !important; }
@media (hover: hover) and (pointer: fine) {
  #dc-root :is([data-top-btn="primary"], [data-proof-btn="primary"], [data-top-menu-cta], [data-top-cta]):hover,
  #booking [data-bk="primary"]:not([aria-disabled="true"]):hover { background: var(--v2-ink); border-color: var(--v2-ink); }
  #dc-root :is([data-top-btn="secondary"], [data-proof-btn="ghost"], [data-v2c-btn], [data-proof-fs], [data-proof-arrow]):hover,
  #booking :is([data-bk="ghost"], [data-bk="navbtn"]:not([aria-disabled="true"])):hover,
  #dc-root #spec [data-xp-all]:hover { background: var(--v2-surface); border-color: var(--v2-navy); color: var(--v2-navy) !important; }
}
/* press feedback everywhere (scale, not transform, so inline transforms are untouched) */
#dc-root :is([data-top-btn], [data-proof-btn], [data-v2c-btn], [data-top-menu-cta], [data-top-cta], [data-proof-fs], [data-proof-arrow], [data-xp-all]):active,
#booking :is([data-bk="primary"], [data-bk="ghost"], [data-bk="navbtn"]):active { scale: .97; }

/* text link: navy, 600, arrow in the reading direction; underline on hover */
#dc-root :is([data-v2c-link], [data-proof-li], [data-v2c-mail]) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: 'Heebo', sans-serif; font-size: var(--v2-body); font-weight: 600; color: var(--v2-navy) !important;
  text-decoration: none !important;
}
#dc-root [data-v2c-mail] { word-break: normal; overflow-wrap: anywhere; unicode-bidi: isolate; }
@media (hover: hover) and (pointer: fine) {
  #dc-root :is([data-v2c-link], [data-proof-li], [data-v2c-mail]):hover { color: var(--v2-ink) !important; }
  #dc-root :is([data-v2c-link], [data-proof-li], [data-v2c-mail]):hover > span:not([data-v2c-arrow]),
  #dc-root [data-v2c-mail]:hover { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

/* ------------------------------------------------------------------ focus: one ring */
#dc-root :focus-visible, .bbi-x :focus-visible { outline: 2px solid var(--v2-navy); outline-offset: 3px; }
#dc-root :is(#bcore, footer) :focus-visible { outline-color: #fff; }
#dc-root iframe:focus-visible { outline: 2px solid var(--v2-navy); outline-offset: 3px; }
/* skip link: off-screen until focused */
html[dir="ltr"] #dc-root [data-v2-skip] { right: auto !important; left: 12px !important; }
#dc-root [data-v2-skip]:focus { top: 12px !important; outline: 2px solid #fff; outline-offset: -5px; }

/* ------------------------------------------------------------------ bidi + numbers */
/* Latin runs inside Hebrew are isolated in the strings themselves (index.html _bidiFix); these keep figures whole */
#dc-root bdi, #dc-root [data-num] { unicode-bidi: isolate; }
#dc-root [data-num] { white-space: nowrap; }
#dc-root :is(p, li, h2, h3, h4) { text-wrap: pretty; }

/* ------------------------------------------------------------------ mobile menu */
#dc-root [data-top-scrim] {
  position: fixed; inset: 0; z-index: -1; background: rgba(11, 22, 38, .28);
  animation: v2ScrimIn 200ms var(--v2-ease);
}
@keyframes v2ScrimIn { from { opacity: 0; } to { opacity: 1; } }
html.v2-menu-open { overflow: hidden; }
#dc-root #bbi-mobile-menu :focus-visible { outline-offset: -2px; }
html.v2-menu-open #bbi-navbar[data-top-nav] { background: var(--v2-surface) !important; }
html.v2-menu-open #dc-root [data-top-end] [data-top-cta] { visibility: hidden; }
#dc-root #bbi-mobile-menu[data-top-menu] { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { #dc-root [data-top-scrim] { animation: none; } }
html.a11y-no-motion #dc-root [data-top-scrim] { animation: none; }

/* ------------------------------------------------------------------ floating buttons */
/* One quiet cluster on the END side (left in Hebrew, right in English: line starts stay clear), 44px circles, one
   shadow. Bottom-up: WhatsApp (the one filled button, its own green), accessibility, back-to-top (after 600px; on
   phones only after ~1.5 screens, html.v2-top-far from system.js). The cluster lifts above the cookie banner and hides while something
   else owns the screen: the menu, the process inspect sheet, the pinned diagram on narrow screens, the dashboard
   overlay, the scheduler, and (under 1240px, where the gutter is narrower than the cluster) while scrolling down (system.js sets html.v2-fab-off / html.v2-fab-quiet). */
#dc-root [data-fab="wa-wrap"],
#dc-root button#bbi-top[data-fab="top"],
.bbi-a11y-btn {
  position: fixed !important; inset-inline-end: var(--v2-fab-edge) !important; inset-inline-start: auto !important;
  left: auto; right: auto; width: var(--v2-fab) !important; height: var(--v2-fab) !important; box-sizing: border-box;
}
html[dir="rtl"] .bbi-a11y-btn { left: var(--v2-fab-edge) !important; right: auto !important; }
html[dir="ltr"] .bbi-a11y-btn { right: var(--v2-fab-edge) !important; left: auto !important; }
#dc-root [data-fab="wa-wrap"] { bottom: var(--v2-fab-edge); z-index: 60; }
.bbi-a11y-btn { bottom: calc(var(--v2-fab-edge) + var(--v2-fab) + var(--v2-fab-gap) + var(--bbi-banner-offset, 0px)) !important; z-index: 60 !important; }
#dc-root button#bbi-top[data-fab="top"] { bottom: calc(var(--v2-fab-edge) + 2 * (var(--v2-fab) + var(--v2-fab-gap))); z-index: 60; }

#dc-root [data-fab="wa"],
#dc-root button#bbi-top[data-fab="top"],
.bbi-a11y-btn {
  border-radius: 50%; box-shadow: var(--v2-shadow-float) !important; display: grid; place-items: center; padding: 0; cursor: pointer;
}
#dc-root [data-fab="wa"] { position: absolute; inset: 0; background: #25D366; border: 0; }
#dc-root [data-fab="wa"] svg { width: 22px; height: 22px; }
#dc-root button#bbi-top[data-fab="top"], .bbi-a11y-btn {
  background: var(--v2-surface) !important; border: 1px solid var(--v2-line-2) !important; color: var(--v2-navy) !important;
}
.bbi-a11y-btn svg { width: 22px !important; height: 22px !important; }
#dc-root [data-fab="tip"] {
  position: absolute; top: 50%; inset-inline-end: calc(100% + 10px);
  padding: 7px 12px; border-radius: var(--v2-r-pill); background: var(--v2-ink); color: #fff;
  font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none;
  transform: translateY(-50%); transition: opacity 180ms var(--v2-ease);
}
@media (hover: none) { #dc-root [data-fab="tip"] { display: none; } }
@media (hover: hover) and (pointer: fine) {
  #dc-root button#bbi-top[data-fab="top"]:hover, .bbi-a11y-btn:hover { border-color: var(--v2-navy) !important; background: var(--v2-surface) !important; }
  #dc-root [data-fab="wa"]:hover { filter: brightness(.94); }
}
#dc-root [data-fab="wa-wrap"], #dc-root button#bbi-top[data-fab="top"], .bbi-a11y-btn {
  transition: opacity 200ms var(--v2-ease), translate 200ms var(--v2-ease), visibility 0s linear 0s !important;
}
html:is(.v2-fab-off, .v2-fab-quiet) #dc-root :is([data-fab="wa-wrap"], button#bbi-top[data-fab="top"]),
html:is(.v2-fab-off, .v2-fab-quiet) .bbi-a11y-btn[aria-expanded="false"] {
  opacity: 0 !important; pointer-events: none !important; visibility: hidden;
  transition: opacity 200ms var(--v2-ease), visibility 0s linear 200ms !important;
}
/* the a11y panel opens beside the cluster, inward */
.bbi-a11y-panel {
  bottom: calc(var(--v2-fab-edge) + var(--bbi-banner-offset, 0px)) !important;
  border-radius: var(--v2-r-card) !important; background: var(--v2-surface) !important; border: 1px solid var(--v2-line-2) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--v2-shadow) !important;
  max-height: calc(100vh - 2 * var(--v2-fab-edge) - var(--bbi-banner-offset, 0px)) !important;
}
html[dir="rtl"] .bbi-a11y-panel { left: calc(var(--v2-fab-edge) + var(--v2-fab) + 12px) !important; right: auto !important; }
html[dir="ltr"] .bbi-a11y-panel { right: calc(var(--v2-fab-edge) + var(--v2-fab) + 12px) !important; left: auto !important; }
@media (max-width: 639px) {
  html:not(.v2-top-far) #dc-root button#bbi-top[data-fab="top"] {
    opacity: 0 !important; pointer-events: none !important; visibility: hidden;
    transition: opacity 200ms var(--v2-ease), visibility 0s linear 200ms !important;
  }
  html[dir] .bbi-a11y-panel { left: var(--v2-fab-edge) !important; right: var(--v2-fab-edge) !important; width: auto !important; }
}
/* the last content never sits under the cluster */
@media (max-width: 1239px) {
  footer[data-ft="footer"] [data-ft="bar"] { padding-bottom: calc(var(--v2-fab-edge) + var(--v2-fab) + 24px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #dc-root [data-fab="wa-wrap"], #dc-root button#bbi-top[data-fab="top"], .bbi-a11y-btn { transition: none !important; }
}

/* ------------------------------------------------------------------ cookie banner + a11y panel: the same controls */
.bbi-cookie {
  border-radius: var(--v2-r-card) !important; background: var(--v2-surface) !important; border: 1px solid var(--v2-line-2) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--v2-shadow) !important;
  color: var(--v2-ink); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.bbi-cookie p { color: var(--v2-muted) !important; }
.bbi-x a { color: var(--v2-navy) !important; }
.bbi-btn {
  min-height: var(--v2-btn-h) !important; padding: 0 18px !important; border-radius: var(--v2-r-pill) !important;
  font-size: 15px !important; font-weight: 600 !important; font-family: 'Heebo', sans-serif;
}
.bbi-btn-primary { background: var(--v2-navy) !important; border: 1px solid var(--v2-navy) !important; color: #fff !important; }
.bbi-btn-ghost { background: var(--v2-surface) !important; border: 1px solid var(--v2-line-2) !important; color: var(--v2-ink) !important; }
@media (hover: hover) and (pointer: fine) {
  .bbi-btn-primary:hover { background: var(--v2-ink) !important; border-color: var(--v2-ink) !important; }
  .bbi-btn-ghost:hover { border-color: var(--v2-navy) !important; color: var(--v2-navy) !important; }
}
.bbi-a11y-head h2 { color: var(--v2-ink) !important; }
.bbi-a11y-close { width: 44px !important; height: 44px !important; border-radius: var(--v2-r-pill) !important; border: 1px solid var(--v2-line-2) !important; color: var(--v2-ink) !important; }
.bbi-a11y-row { flex-wrap: wrap; border-top-color: var(--v2-line) !important; }
.bbi-a11y-size button { min-width: 44px !important; height: 44px !important; border-radius: var(--v2-r-pill) !important; border-color: var(--v2-line-2) !important; color: var(--v2-ink) !important; direction: ltr; unicode-bidi: isolate; }
.bbi-a11y-toggle { min-height: 44px; border-radius: var(--v2-r-pill) !important; border-color: var(--v2-line-2) !important; color: var(--v2-ink) !important; }
.bbi-a11y-toggle[aria-pressed="true"] { background: var(--v2-navy) !important; color: #fff !important; border-color: var(--v2-navy) !important; }
.bbi-a11y-toggle .bbi-state { font-size: 13px !important; font-weight: 500 !important; }
.bbi-a11y-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------------ phones: container exceptions, header spacing */
@media (max-width: 639px) {
  /* the scheduler stays a card on the grid (8px into the gutter keeps 7 day columns >= 44px at 360) */
  #booking [data-bk="booker"] { margin-inline: -8px !important; border-radius: var(--v2-r-card) !important; border-inline: 1px solid var(--v2-line) !important; }
  #booking [data-bk="info"] { border-radius: 0 0 var(--v2-r-card) var(--v2-r-card) !important; }
  /* header controls: 6px apart so neither the tap nor the focus ring lands on a neighbour */
  #dc-root [data-top-end] { gap: 6px !important; }
  #dc-root [data-top-cta] { padding: 0 12px !important; }
}
@media (max-width: 389px) {
  #dc-root [data-top-end] { gap: 5px !important; }
}

/* Hebrew eyebrow: Heebo's taller ascenders overflow the mono line box by ~2px in Safari */
#bbi-root[dir="rtl"] [data-v2-eyebrow], #bbi-story[dir="rtl"] [data-v2-eyebrow] { line-height: 1.5; padding-block: 1px; }

/* hero line above the h1: in Hebrew it speaks Heebo at the eyebrow label size (Plex Mono has no Hebrew glyphs);
   English keeps the mono caps */
#bbi-root[dir="rtl"] [data-top-eyebrow] span {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  line-height: 1.5; word-spacing: .12em;
}

/* ================================================================== d / e: colour rhythm + the logo's rising bars */
/* D = :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) — d, e, and the page before system.js has run.
   Colours: the ground, white, the navy and one tint (--v2-tint, a navy-family blue-grey between #EEF1F5 and #E6EEF8).
   Bars: the logo's three bars (heights .30 / .51 / 1, two #B0BCC7 greys then the logo navy #063156), never mirrored:
   they rise left to right in both languages, like the logo in the header. Static: no animation anywhere. */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) {
  --v2-tint: #E6EDF6;
  --v2-panel-gap: 24px;
  --v2-bars-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M0 43.5h44' stroke='%230B1626' stroke-opacity='.14'/%3E%3Cpath fill='%23B0BCC7' d='M8 31h7v12H8zM19 22.5h7V43h-7z'/%3E%3Cpath fill='%23063156' d='M30 3h7v40h-7z'/%3E%3C/svg%3E");
  --v2-bars-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath fill='%23B0BCC7' d='M0 10h4v4H0zM7 7h4v7H7z'/%3E%3Cpath fill='%23063156' d='M14 0h4v14h-4z'/%3E%3C/svg%3E");
  --v2-bars-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='200' viewBox='0 0 178 200'%3E%3Cpath fill='%23fff' fill-opacity='.045' d='M0 140h46v60H0zM66 98h46v102H66z'/%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M132 0h46v200h-46z'/%3E%3C/svg%3E");
}
@media (max-width: 639px) { :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) { --v2-panel-gap: 12px; } }

/* one flat ground: no light, no dots, no grain */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #bbi-root { background-image: none !important; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #main[data-top-hero]::before { display: none; }

/* white bands: full-bleed, straight edges */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root :is(#process, #technologies) { background: var(--v2-surface) !important; }

/* coloured bands: the bcore panel, flat, and the same panel for the dashboards (navy) and testimonials (tint) */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root :is(#bcore, #cases, #testimonials) { margin-top: var(--v2-panel-gap); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #testimonials { background: transparent !important; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root :is(#bcore, #cases, #testimonials)::before {
  content: ""; position: absolute; inset: 0 var(--v2-panel-inset); width: auto; height: auto; transform: none;
  z-index: -1; pointer-events: none; border-radius: var(--v2-r-card); background: var(--v2-navy);
}
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #testimonials::before { background: var(--v2-tint); }
/* inside a panel the content keeps the page grid, and at least 48px (24px on phones) of panel around it */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root :is(#cases, #testimonials) > [data-v2-wrap] {
  max-width: none !important;
  padding-inline: max(calc(var(--v2-panel-inset) + 48px), calc((100% - 1076px) / 2)) !important;
}
@media (max-width: 639px) {
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root :is(#cases, #testimonials) > [data-v2-wrap] { padding-inline: calc(var(--v2-panel-inset) + 24px) !important; }
  /* the phone tab strip runs to the panel's edges */
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tabs-wrap] { margin-inline: -24px; padding-inline: 24px; }
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tabs] { scroll-padding-inline: 24px; }
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-v2-tabs-more="end"] { inset-inline-end: 22px; }
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-v2-tabs-more="start"] { inset-inline-start: 22px; }
}

/* 04 cases on the navy stage: text in white / white alphas, tabs as light pills, the frame stays white */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases { color: #fff; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-v2-eyebrow] { color: rgba(255, 255, 255, .72); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-v2-eyebrow] b { color: #fff; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-v2-eyebrow] i { color: rgba(255, 255, 255, .45); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases h2 { color: #fff !important; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-sub] { color: rgba(255, 255, 255, .78); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tabs] {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16);
}
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tab] { color: rgba(255, 255, 255, .82); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tab][aria-selected="true"] { background: #fff; color: var(--v2-navy); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tab]:focus-visible,
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cta] :focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-tab]:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .12); color: #fff; }
}
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-frame] {
  border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 56px -28px rgba(4, 12, 24, .55);
}
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-label] { color: rgba(255, 255, 255, .72); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cell] p { color: rgba(255, 255, 255, .82); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases :is([data-proof-cell="q"], [data-proof-cell="r"]) p { color: #fff; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases :is([data-proof-cell], [data-proof-cta]) { border-color: rgba(255, 255, 255, .16); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cta-title] { color: #fff; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cta-text] p { color: rgba(255, 255, 255, .78); }
/* the primary on navy inverts: white pill, navy text */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cta] [data-proof-btn="primary"] {
  background: #fff; border-color: #fff; color: var(--v2-navy) !important;
}
@media (hover: hover) and (pointer: fine) {
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #cases [data-proof-cta] [data-proof-btn="primary"]:hover {
    background: var(--v2-bg); border-color: var(--v2-bg); color: var(--v2-ink) !important;
  }
}

/* 05 testimonials on the tint: the quote card and the selected row are white again */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #testimonials [data-proof-qpanel] { background: var(--v2-surface); border-color: var(--v2-line-2); }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #testimonials [data-proof-qtab][aria-selected="true"] { background: var(--v2-surface); }
@media (hover: hover) and (pointer: fine) {
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #testimonials [data-proof-qtab]:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .55); }
}

/* bars 1/3, hero: a small chart beside the stats, standing on its own baseline at the row's end */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root [data-top-stats]::after {
  content: ""; flex: none; align-self: flex-end; width: 44px; height: 44px; margin-inline-start: auto; margin-bottom: 4px;
  background: var(--v2-bars-hero) no-repeat 0 0 / 44px 44px;
}

/* bars 2/3, the hairline between two sections on the same ground (careers -> booking) starts with the bars */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root #booking::before {
  top: -13px; height: 14px; background:
    var(--v2-bars-rule) no-repeat right bottom / 18px 14px,
    linear-gradient(var(--v2-line-2), var(--v2-line-2)) no-repeat left bottom / calc(100% - 26px) 1px;
}
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #bbi-root[dir="ltr"] #booking::before {
  background-position: left bottom, right bottom;
}

/* bars 3/3, footer: large, ~7% white, standing on the bottom edge in the inline-end corner, cropped by the edges */
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root footer[data-ft="footer"] { background: var(--v2-navy) !important; overflow: hidden; }
:root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root footer[data-ft="footer"]::after {
  content: ""; position: absolute; bottom: -36px; inset-inline-end: -20px; z-index: -1; width: 178px; height: 200px;
  pointer-events: none; background: var(--v2-bars-foot) no-repeat 0 0 / 178px 200px;
}
@media (max-width: 639px) {
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root footer[data-ft="footer"]::after { width: 134px; height: 150px; bottom: -24px; background-size: 134px 150px; }
}

/* e: one static, very soft navy light behind the hero video column. Nothing else moves or glows. */
:root[data-bg="e"] #dc-root #main[data-top-hero]::before {
  display: block; -webkit-mask-image: none; mask-image: none;
  background: radial-gradient(ellipse 36% 44% at var(--v2-dx) 44%, rgba(31, 69, 112, .10) 0%, rgba(31, 69, 112, .05) 45%, rgba(31, 69, 112, 0) 100%);
}
@media (max-width: 900px) {
  :root[data-bg="e"] #dc-root #main[data-top-hero]::before {
    background: radial-gradient(ellipse 80% 30% at 50% 64%, rgba(31, 69, 112, .10) 0%, rgba(31, 69, 112, .05) 45%, rgba(31, 69, 112, 0) 100%);
  }
}
@media (max-width: 639px) {   /* phones: a smaller chart, and the two stats size to their text so the captions keep one line */
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root [data-top-stats] [data-top-stat] { flex: 0 1 auto; }
  :root:not([data-bg="a"], [data-bg="b"], [data-bg="c"]) #dc-root [data-top-stats]::after { width: 32px; height: 32px; margin-inline-start: auto; padding-inline-start: 12px; background-origin: content-box; background-position: 0 0; background-size: 32px 32px; box-sizing: content-box; }
}