/* Adapted from Globalmeta/hubui 1.33.6, integrations/globalmeta-site.
   Native portal and compact typography belong to the Globalmeta website. */
.product-menu-panel.gm-hubapps__panel{
 background:linear-gradient(135deg,#252e36a8,#090d13c9);
 backdrop-filter:blur(32px) saturate(1.2);-webkit-backdrop-filter:blur(32px) saturate(1.2);
 box-shadow:inset 0 1px 0 #ffffff14,0 14px 38px #0004;
}
.gm-hubapps__panel>.gm-glass-pane{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .28s ease}
.gm-hubapps__panel>.gm-glass-pane.is-ready{opacity:1}
.gm-hubapps__panel>:not(.gm-glass-pane){position:relative;z-index:1}
.product-menu-panel.gm-hubapps__panel>.hub-apps__card{gap:11px;padding:12px 0!important}
.gm-hubapps__panel>.hub-apps__card>span:not(.hub-apps__mark){min-width:0}
.gm-hubapps__panel .hub-apps__mark{flex:0 0 28px}
/* ─── Marks ───
 * 28px, the size every mark's gesture was measured at (≥ 4 px rule). The slot
 * lets a mark breathe past its box (helloHub's nod drops 40 units). */
.gm-hubapps__panel .hub-apps__mark {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: currentColor;
  transition: color .32s ease;
}
.gm-hubapps__panel .hub-apps__mark > svg { display: block; width: 28px; height: 28px; overflow: visible; }
.gm-hubapps__panel .hub-apps__mark svg * { transition: fill .32s ease; }

/* Colour on hover (fine pointers) and on keyboard focus: the mark's parts take
 * the product's own tints, top to bottom, from the row's --gm-c1..3. Products
 * with one colour set only --gm-c1 and the whole mark takes it. */
.gm-hubapps__panel .hub-apps__card:focus-visible .hub-apps__mark { color: var(--gm-c1, currentColor); }
.gm-hubapps__panel .hub-apps__card:focus-visible .hub-apps__sh-bar:nth-of-type(2) { fill: var(--gm-c2, var(--gm-c1)); }
.gm-hubapps__panel .hub-apps__card:focus-visible .hub-apps__sh-bar:nth-of-type(3) { fill: var(--gm-c3, var(--gm-c1)); }
.gm-hubapps__panel .hub-apps__card:focus-visible .hub-apps__ch:nth-of-type(2) { fill: var(--gm-c2, var(--gm-c1)); }
.gm-hubapps__panel .hub-apps__card:focus-visible .hub-apps__bubble { fill: var(--gm-c3, var(--gm-c1)); }
@media (hover: hover) {
  .gm-hubapps__panel .hub-apps__card:hover .hub-apps__mark { color: var(--gm-c1, currentColor); }
  .gm-hubapps__panel .hub-apps__card:hover .hub-apps__sh-bar:nth-of-type(2) { fill: var(--gm-c2, var(--gm-c1)); }
  .gm-hubapps__panel .hub-apps__card:hover .hub-apps__sh-bar:nth-of-type(3) { fill: var(--gm-c3, var(--gm-c1)); }
  .gm-hubapps__panel .hub-apps__card:hover .hub-apps__ch:nth-of-type(2) { fill: var(--gm-c2, var(--gm-c1)); }
  .gm-hubapps__panel .hub-apps__card:hover .hub-apps__bubble { fill: var(--gm-c3, var(--gm-c1)); }
}

/* ═══ From @globalmeta/hubui src/react/apps.css ══════════════════════════ */

/* ─── Motion policy for marks ──────────────────────────────────────────────
 * Onur: "animasyonlar önemli, atlama." Two products ship an animated mark
 * (workHub's bars fill, HubAI's channels draw into the bubble); two do not. So
 * animation is a CAPABILITY, never a requirement — a product without one is not
 * broken, its card is simply still.
 *
 * The division of labour: the MARK owns its motion, this component owns the
 * POLICY. That is the only split that works, because the package cannot author
 * keyframes for artwork it has not seen.
 *
 * The contract for mark authors, in full — and it is a wrapper, not just a
 * selector, because the selector alone is a trap (workHub caught this):
 *
 *     @media (hover: hover) and (prefers-reduced-motion: no-preference) {
 *       .hub-apps__card:hover .hub-apps__mark <your selector> { animation: ... }
 *     }
 *
 * An earlier version of this comment said "one selector, nothing else" while the
 * component's own binding lived inside that media query. Someone following it
 * literally would ship an animation that fires on a touch TAP — at the moment
 * the user is leaving for another product.
 *
 * and nothing else — and hang it on a CLASS, never on a position. `:nth-child`
 * counts a <style> element as a child, so in a single-file SVG the artwork is
 * children 2, 3, 4 and the stagger silently comes out in the wrong order while
 * every property still animates (workHub hit exactly this). Hover, not autoplay: at 24-32px three marks animating at
 * once on open is noise, and something that loops forever makes a menu restless.
 * Hover is one at a time and the reader asks for it.
 *
 * Scoped to (hover: hover) on purpose — a touch device would otherwise fire it
 * on tap, at the exact moment the user is leaving for another product.
 *
 * The kill switch is deliberately blunt and deliberately last: it stops
 * EVERYTHING inside the slot, whatever a mark shipped, because a mark author
 * cannot be relied upon to remember reduced-motion and the package can.
 *
 * And one rule that is about READING, not running, learned the expensive way
 * on helloHub's first wink (v1.32.0): the primary gesture must move at least
 * ~4 px at 28px, measured as absolute pixels per moving part, and judged on a
 * strip of frames taken with one global clock, not on the numbers alone.
 * That wink measured 1.65 px of eye, 1.77 px of squint, 0.87 px of smile; it
 * passed every rule above, matched its author's measurement to the hundredth
 * in two harnesses, and Onur could not see it. "Does it animate" and "can it
 * be read" are different questions, and the gate had only asked the first.
 * shareHub's bars move 4.62 / 6.16 / 4.63 px; that is the floor to aim for.
 * Corollaries from shareHub's own round: opacity alone does not carry a
 * gesture at this size (floor it, move geometry), and a ratio says nothing
 * until you know the box it scales: write the motion in px. */
@media (hover: hover) {
  .hub-apps__mark {
    --ha-mark-hover: 0;
  }

  .hub-apps__card:hover .hub-apps__mark {
    --ha-mark-hover: 1;
  }
}

/* workHub's bars, from their own loader: each fills bottom-up in turn. Their
 * export shipped this as `infinite` inside the SVG; it runs on hover here
 * instead, per the policy above, so the values are theirs and the trigger ours.
 *
 * :nth-of-type, NOT :nth-child — their finding, and it would have bitten me too.
 * In their standalone file the <style> element is the SVG's first child, so the
 * bars are children 2, 3 and 4 and a :nth-child(2) rule lands on the FIRST bar:
 * the stagger comes out 3-1-2 while every opacity still changes, so a probe
 * reports "animating" and only the ORDER is wrong. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hub-apps__card:hover .hub-apps__bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: hub-apps-bar 1.4s ease-in-out;
  }

  .hub-apps__card:hover .hub-apps__bar:nth-of-type(2) {
    animation-delay: 0.16s;
  }

  .hub-apps__card:hover .hub-apps__bar:nth-of-type(3) {
    animation-delay: 0.32s;
  }
}

@keyframes hub-apps-bar {
  0%,
  100% {
    opacity: 0.18;
    transform: scaleY(0.62);
  }
  45% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* HubAI's mark, from their team. Frames verbatim; the trigger and the class
 * names are ours (`.ch` / `.bubble` were too collidable to put in a consumer's
 * page). Their file loops forever — it runs once on hover here.
 *
 * 2.6s is not a compression I invented: their own panel component runs these
 * exact percentages at DUR = "2.6s" in production.
 *
 * The bubble reaching rest at 68% is NOT idle time, and this is written down
 * because the idea of "fixing" it will occur to someone again — it occurred to
 * its own author, who proposed shortening .bubble to 1.8s and then withdrew it
 * after rereading the frames. The channels start releasing at 72% and land at
 * 96%: the body settles FIRST so they have something to snap back into. Those
 * four percentage points are the handoff. Shorten the bubble and you do not
 * tighten the choreography, you break it — the channels would return to a mark
 * that finished 0.65s earlier, arriving at no moment in particular.
 *
 * Needs SVG2 geometry properties (d/y/width from CSS): Chrome, Safari,
 * Firefox 128+. Older browsers simply do not animate and the mark stays put,
 * which is the right direction to fail in. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hub-apps__card:hover .hub-apps__ch {
    animation: hubai-channel 2.6s both, hubai-fade 2.6s both;
  }

  .hub-apps__card:hover .hub-apps__bubble {
    animation: hubai-bubble 2.6s both;
  }
}

@keyframes hubai-bubble {
  0% { d: path("M13 24 h22 a4 4 0 0 1 4 4 v8 a4 4 0 0 1 -4 4 h-13 l-7 5.5 v-5.5 h-2 a4 4 0 0 1 -4 -4 v-8 a4 4 0 0 1 4 -4 Z"); animation-timing-function: linear; }
  6% { d: path("M13 24 h22 a4 4 0 0 1 4 4 v8 a4 4 0 0 1 -4 4 h-13 l-7 5.5 v-5.5 h-2 a4 4 0 0 1 -4 -4 v-8 a4 4 0 0 1 4 -4 Z"); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  40% { d: path("M11.50 24 h25.00 a2.50 2.50 0 0 1 2.50 2.50 v0.00 a2.50 2.50 0 0 1 -2.50 2.50 h-16.00 l-7 0.00 v-0.00 h-2 a2.50 2.50 0 0 1 -2.50 -2.50 v-0.00 a2.50 2.50 0 0 1 2.50 -2.50 Z"); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  62% { d: path("M13.20 24 h21.60 a4.20 4.20 0 0 1 4.20 4.20 v8.60 a4.20 4.20 0 0 1 -4.20 4.20 h-12.60 l-7 5.80 v-5.80 h-2 a4.20 4.20 0 0 1 -4.20 -4.20 v-8.60 a4.20 4.20 0 0 1 4.20 -4.20 Z"); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  68% { d: path("M13 24 h22 a4 4 0 0 1 4 4 v8 a4 4 0 0 1 -4 4 h-13 l-7 5.5 v-5.5 h-2 a4 4 0 0 1 -4 -4 v-8 a4 4 0 0 1 4 -4 Z"); animation-timing-function: linear; }
  100% { d: path("M13 24 h22 a4 4 0 0 1 4 4 v8 a4 4 0 0 1 -4 4 h-13 l-7 5.5 v-5.5 h-2 a4 4 0 0 1 -4 -4 v-8 a4 4 0 0 1 4 -4 Z"); }
}

@keyframes hubai-channel {
  0% { y: var(--y); width: 30px; animation-timing-function: linear; }
  6% { y: var(--y); width: 30px; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  40% { y: 24px; width: 6px; animation-timing-function: linear; }
  72% { y: 24px; width: 6px; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  92% { y: calc(var(--y) - 0.6px); width: 31px; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  96% { y: var(--y); width: 30px; animation-timing-function: linear; }
  100% { y: var(--y); width: 30px; }
}

@keyframes hubai-fade {
  0%,
  30% { opacity: 1; }
  42%,
  72% { opacity: 0; }
  88%,
  100% { opacity: 1; }
}

/* shareHub's mark, from their team (2026-09-04): each bar folds at its own
 * centre in turn, top to bottom, like a shutter closing and opening. Their
 * auth-page motion carried the gesture on opacity; here it is carried on
 * geometry, with opacity floored at 0.55 so the mark never vanishes in any
 * frame at 28px. Values are theirs, measured in headless Chrome with a real
 * pointer and a real clock: animationend at 883 / 1116 / 1350 ms, one
 * iteration per bar, rest state identical to start while hover is still held.
 *
 * `transform-box: fill-box` is the one real dependency, and without help it
 * fails in the WRONG direction: where unsupported the bars still animate but
 * fold from the SVG origin, measured -2.47 / -7.08 / -11.68 px off centre.
 * The @supports wrapper turns that into "still, not broken", which is the
 * package's policy — so the condition lives here, not in their delivery. */
.hub-apps__sh-bar {
  transform-box: fill-box;
  transform-origin: center;
}

@supports (transform-box: fill-box) {
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hub-apps__card:hover .hub-apps__sh-bar {
      animation: hub-apps-sh-fold 900ms ease-in-out;
    }

    .hub-apps__card:hover .hub-apps__sh-bar:nth-of-type(2) {
      animation-delay: 230ms;
    }

    .hub-apps__card:hover .hub-apps__sh-bar:nth-of-type(3) {
      animation-delay: 460ms;
    }
  }
}

@keyframes hub-apps-sh-fold {
  0%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
  36% {
    opacity: 0.55;
    transform: scaleY(0.5);
  }
}

/* helloHub's mark, from their team · v2 (2026-09-05): a nod and a wink. The
 * closed eye opens to the size of the other eye, looks for a beat, then the
 * whole bubble lifts and drops in a small nod, and at the bottom of the drop
 * the eye winks shut while the bubble squashes on landing; it straightens and
 * settles into the logo. 1.6s, once. The right eye has no gesture of its own,
 * it only rides the nod. One eye, one "hey".
 *
 * v1 (v1.32.0) opened the eye by a `d` morph to 3.6 px at 28px and Onur could
 * not see it: 1.65 px of eye, 1.77 px of squint, 0.87 px of smile. It passed
 * every rule, matched its author's numbers in two harnesses, and was
 * invisible. v2 carries the wink on TRANSFORM (scaleY 1 to 3.2, works in every
 * browser, Safari before 17.4 included) and keeps the `d` morph only as the
 * almond shape of the open eye; the face parts follow the bubble's squash
 * from their own centres with precomputed offsets so nothing detaches.
 * Measured by them at 28px, transforms included: eye +4.27 px (1.95 to 6.22,
 * the other eye is 6.31), bubble top +4.68 px at the bottom of the drop,
 * height -1.58 px from the squash, smile +1.15 px; at 100% all four rects
 * identical to rest. The drop was 24 units in their design note and 40 in the
 * delivery: they raised it before being asked, because the strip did not
 * read the nod at 24.
 *
 * The rest-state `d` override stays outside the wrapper and always on, same
 * reason as before: one skeleton for the morph, identical geometry to the
 * attribute path. The hover binding sits in @supports like shareHub's,
 * because a squint or a squash from the wrong origin is the broken direction. */
.hub-apps__hh-bubble,
.hub-apps__hh-eye,
.hub-apps__hh-wink,
.hub-apps__hh-smile {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hub-apps__hh-wink {
  d: path("M136.709 138.940C131.180 138.940 126.661 143.406 126.661 148.988C126.661 154.570 131.180 159.035 136.709 159.035C142.111 159.035 147.513 159.035 152.915 159.035C158.316 159.035 163.718 159.035 169.120 159.035C174.649 159.035 179.168 154.570 179.168 148.988C179.168 143.406 174.649 138.940 169.120 138.940C166.419 138.940 163.718 138.940 161.017 138.940C158.316 138.940 155.615 138.940 152.915 138.940C150.214 138.940 147.513 138.940 144.812 138.940C142.111 138.940 139.410 138.940 136.709 138.940Z");
}

@supports (transform-box: fill-box) {
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hub-apps__card:hover .hub-apps__hh-bubble {
      animation: hub-apps-hh-bubble 1.6s both;
    }

    .hub-apps__card:hover .hub-apps__hh-wink {
      animation: hub-apps-hh-wink 1.6s both;
    }

    .hub-apps__card:hover .hub-apps__hh-eye {
      animation: hub-apps-hh-eye 1.6s both;
    }

    .hub-apps__card:hover .hub-apps__hh-smile {
      animation: hub-apps-hh-smile 1.6s both;
    }
  }
}

@keyframes hub-apps-hh-bubble {
  0%, 28%   { transform: translate(0px, 0px) scale(1, 1); animation-timing-function: ease-in-out; }
  50%       { transform: translate(0px, -8.00px) scale(1, 1); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  64%, 76%  { transform: translate(0px, 40.00px) scale(1.03, 0.94); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  88%       { transform: translate(0px, -4.00px) scale(1, 1); animation-timing-function: ease-out; }
  100%      { transform: translate(0px, 0px) scale(1, 1); }
}

@keyframes hub-apps-hh-wink {
  0%, 12%   { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); d: path("M136.709 138.940C131.180 138.940 126.661 143.406 126.661 148.988C126.661 154.570 131.180 159.035 136.709 159.035C142.111 159.035 147.513 159.035 152.915 159.035C158.316 159.035 163.718 159.035 169.120 159.035C174.649 159.035 179.168 154.570 179.168 148.988C179.168 143.406 174.649 138.940 169.120 138.940C166.419 138.940 163.718 138.940 161.017 138.940C158.316 138.940 155.615 138.940 152.915 138.940C150.214 138.940 147.513 138.940 144.812 138.940C142.111 138.940 139.410 138.940 136.709 138.940Z"); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  28%       { transform: translate(0px, 0px) rotate(0deg) scale(0.92, 3.2); d: path("M136.709 142.798C133.360 144.373 130.161 148.988 126.661 148.988C130.161 148.988 133.360 153.602 136.709 155.177C142.111 157.717 147.513 158.988 152.915 158.988C158.316 158.988 163.718 157.717 169.120 155.177C172.469 153.602 175.668 148.988 179.168 148.988C175.668 148.988 172.469 144.373 169.120 142.798C166.419 141.528 163.718 140.575 161.017 139.940C158.316 139.305 155.615 138.988 152.915 138.988C150.214 138.988 147.513 139.305 144.812 139.940C142.111 140.575 139.410 141.528 136.709 142.798Z"); animation-timing-function: ease-in-out; }
  50%       { transform: translate(0px, -8.00px) rotate(0deg) scale(0.92, 3.2); d: path("M136.709 142.798C133.360 144.373 130.161 148.988 126.661 148.988C130.161 148.988 133.360 153.602 136.709 155.177C142.111 157.717 147.513 158.988 152.915 158.988C158.316 158.988 163.718 157.717 169.120 155.177C172.469 153.602 175.668 148.988 179.168 148.988C175.668 148.988 172.469 144.373 169.120 142.798C166.419 141.528 163.718 140.575 161.017 139.940C158.316 139.305 155.615 138.988 152.915 138.988C150.214 138.988 147.513 139.305 144.812 139.940C142.111 140.575 139.410 141.528 136.709 142.798Z"); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  64%, 76%  { transform: translate(-1.06px, 37.34px) rotate(8deg) scale(1.03, 0.94); d: path("M136.709 138.940C131.180 138.940 126.661 143.406 126.661 148.988C126.661 154.570 131.180 159.035 136.709 159.035C142.111 159.035 147.513 159.035 152.915 159.035C158.316 159.035 163.718 159.035 169.120 159.035C174.649 159.035 179.168 154.570 179.168 148.988C179.168 143.406 174.649 138.940 169.120 138.940C166.419 138.940 163.718 138.940 161.017 138.940C158.316 138.940 155.615 138.940 152.915 138.940C150.214 138.940 147.513 138.940 144.812 138.940C142.111 138.940 139.410 138.940 136.709 138.940Z"); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  88%       { transform: translate(0px, -4.00px) rotate(0deg) scale(1, 1); d: path("M136.709 138.940C131.180 138.940 126.661 143.406 126.661 148.988C126.661 154.570 131.180 159.035 136.709 159.035C142.111 159.035 147.513 159.035 152.915 159.035C158.316 159.035 163.718 159.035 169.120 159.035C174.649 159.035 179.168 154.570 179.168 148.988C179.168 143.406 174.649 138.940 169.120 138.940C166.419 138.940 163.718 138.940 161.017 138.940C158.316 138.940 155.615 138.940 152.915 138.940C150.214 138.940 147.513 138.940 144.812 138.940C142.111 138.940 139.410 138.940 136.709 138.940Z"); animation-timing-function: ease-out; }
  100%      { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); d: path("M136.709 138.940C131.180 138.940 126.661 143.406 126.661 148.988C126.661 154.570 131.180 159.035 136.709 159.035C142.111 159.035 147.513 159.035 152.915 159.035C158.316 159.035 163.718 159.035 169.120 159.035C174.649 159.035 179.168 154.570 179.168 148.988C179.168 143.406 174.649 138.940 169.120 138.940C166.419 138.940 163.718 138.940 161.017 138.940C158.316 138.940 155.615 138.940 152.915 138.940C150.214 138.940 147.513 138.940 144.812 138.940C142.111 138.940 139.410 138.940 136.709 138.940Z"); }
}

@keyframes hub-apps-hh-eye {
  0%, 28%   { transform: translate(0px, 0px) scale(1, 1); animation-timing-function: ease-in-out; }
  50%       { transform: translate(0px, -8.00px) scale(1, 1); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  64%, 76%  { transform: translate(1.24px, 42.38px) scale(1.03, 0.94); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  88%       { transform: translate(0px, -4.00px) scale(1, 1); animation-timing-function: ease-out; }
  100%      { transform: translate(0px, 0px) scale(1, 1); }
}

@keyframes hub-apps-hh-smile {
  0%, 28%   { transform: translate(0px, 0px) scale(1, 1); animation-timing-function: ease-in-out; }
  50%       { transform: translate(0px, -8.00px) scale(1, 1); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  64%, 76%  { transform: translate(0.12px, 40.73px) scale(1.092, 0.94); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  88%       { transform: translate(0px, -4.00px) scale(1, 1); animation-timing-function: ease-out; }
  100%      { transform: translate(0px, 0px) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-apps__mark,
  .hub-apps__mark * {
    animation: none !important;
    transition: none !important;
  }
}

@media(max-width:760px){.gm-hubapps__panel .hub-apps__mark,.gm-hubapps__panel .hub-apps__mark>svg{width:25px;height:25px}.gm-hubapps__panel .hub-apps__mark{flex-basis:25px}}

/* The hubUI font is local and scoped to the product disclosure. */
@font-face{font-family:'Geist Sans';src:url('fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.product-menu-panel.gm-hubapps__panel{width:304px;font-family:'Geist Sans',sans-serif}
.product-menu-panel.gm-hubapps__panel strong{font:700 16px/1.3 'Geist Sans',sans-serif;letter-spacing:-.025em}
.product-menu-panel.gm-hubapps__panel small{font:400 11px/1.45 'Geist Sans',sans-serif;white-space:normal;color:#c8cdd3;max-width:215px}
.product-menu-panel.gm-hubapps__panel .product-menu-all{font-family:'Geist Sans',sans-serif!important}
.product-menu-panel.gm-hubapps__panel a[data-menu-product]::after{flex:none}

@font-face{font-family:'Geist Sans';src:url('fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}