/*
 * Hand-authored layout fixes for Framer sections whose SSR markup relies on
 * Framer's runtime .mjs JS to compute heights / swap responsive variants.
 * Loaded AFTER framer.css (see index.html) so equal-or-higher specificity wins.
 * This file is NOT generated — scripts/gen-sections.cjs never touches it.
 *
 * Each block is scoped under its section's unique root class so an override
 * cannot leak into other sections.
 */

/* --- header (mobile menu) ---------------------------------------------------
 * The live site's mobile header is NOT sticky (it scrolls away with the page)
 * and shows logo + hamburger; the open state is a full-viewport purple menu.
 * HeaderSection.vue swaps the export's own variant classes (.framer-v-kh4ri0 /
 * .framer-v-14cx1gu) on the 768px breakpoint, so framer.css does the layout.
 * Only the pieces the export never shipped are authored here. */
@media (max-width: 767.98px) {
  /* Close button of the open menu: 48px circle, translucent white, hairline
   * border — matches the live .framer-tW8wI component the export lacks. */
  .framer-1pc4rne-container .header-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 90px;
    cursor: pointer;
  }
  /* Open menu shows the white logo variant; the sprite only ships the purple
   * one, so recolor it. */
  .framer-1pc4rne-container .framer-v-14cx1gu .framer-1qz7x42 svg {
    filter: brightness(0) invert(1);
  }
  /* Menu items are links wrapping an h6 (preset vcakk2 = 40px/1.4 underline). */
  .framer-1pc4rne-container .framer-v-14cx1gu .framer-tt89ig a {
    display: flex;
    text-decoration: none;
  }

  /* Menu open/close animation. On tap the live site instantly swaps to the
   * open layout (the panel takes 100vh IN FLOW, shoving the page below the
   * fold — the area under the expanding panel is blank white, the page never
   * visibly slides) and then plays a ~420ms transform-only spring: the purple
   * panel grows down out of the 76px header bar with its background
   * crossfading from transparent, the logo row glides 8px up (closed padding
   * 32px -> open 24px), the item list unclips top-to-bottom, and once the
   * panel settles the close button's translucent circle fades in over ~400ms.
   * The spring is monotonic (48% / 90% / 99% at t=0.15 / 0.39 / 0.67 — a
   * quart-out). We reproduce it with clip-path so layout is never animated. */
  .framer-1pc4rne-container .framer-v-14cx1gu .framer-16ufx3u {
    animation: po-menu-expand 0.42s cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  .framer-1pc4rne-container .framer-v-14cx1gu .framer-h6k8hq {
    animation: po-menu-rise 0.42s cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  /* The item list (overflow:clip) expands with the layout, revealing the
   * links top-to-bottom — About first, Contact last. framer.css centers the
   * list content (place-content:...center), which would clip the growing box
   * from both ends and make About slide down into view — pin it to the top
   * (a no-op at rest, where the box is min-content). */
  .framer-1pc4rne-container .framer-v-14cx1gu .framer-tt89ig {
    justify-content: flex-start;
    animation: po-menu-items 0.42s cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  .framer-1pc4rne-container .framer-v-14cx1gu .header-menu-close {
    animation: po-menu-close-bg 0.4s ease 0.42s both;
  }
  /* Close: the live site restores the page layout instantly; all that remains
   * of the menu is a header-bar-high purple residue that fades out in ~200ms
   * while the white logo and burger recolor to their dark closed look.
   * HeaderSection.vue puts .menu-closing on the CLOSED variant for 250ms. */
  .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-16ufx3u {
    animation: po-menu-fadeout 0.15s ease-out both;
  }
  .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-1qz7x42 svg,
  .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-1kgzvb4 {
    animation: po-menu-recolor 0.15s ease-out both;
  }
  @media (prefers-reduced-motion: reduce) {
    .framer-1pc4rne-container .framer-v-14cx1gu .framer-16ufx3u,
    .framer-1pc4rne-container .framer-v-14cx1gu .framer-h6k8hq,
    .framer-1pc4rne-container .framer-v-14cx1gu .framer-tt89ig,
    .framer-1pc4rne-container .framer-v-14cx1gu .header-menu-close,
    .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-16ufx3u,
    .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-1qz7x42 svg,
    .framer-1pc4rne-container .framer-v-kh4ri0.menu-closing .framer-1kgzvb4 {
      animation: none;
    }
  }
}

@keyframes po-menu-expand {
  from {
    clip-path: inset(0 0 calc(100% - 76px) 0);
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    background-color: var(--token-e0584275-6559-4ab3-9a52-b34e7ad7c8ef, rgb(101, 42, 192));
  }
}
@keyframes po-menu-fadeout {
  from {
    background-color: var(--token-e0584275-6559-4ab3-9a52-b34e7ad7c8ef, rgb(101, 42, 192));
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}
/* White (open-menu) logo/burger crossfading back to the dark closed colors. */
@keyframes po-menu-recolor {
  from {
    filter: brightness(0) invert(1);
  }
  to {
    filter: brightness(1) invert(0);
  }
}
/* Closed bar pads the logo row 32px from the top, the open menu 24px — the
 * logo (and the whole top block) glides up those 8px. */
@keyframes po-menu-rise {
  from {
    transform: translateY(8px);
  }
  to {
    transform: none;
  }
}
@keyframes po-menu-items {
  from {
    max-height: 0;
  }
  to {
    /* >= the list's real height (3 × 56px links + 2 × 16px gaps = 200px). */
    max-height: 240px;
  }
}
@keyframes po-menu-close-bg {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

/* --- hero (mobile) -----------------------------------------------------------
 * The shipped hero description is the desktop text block, which hard-wraps its
 * three lines with <br>. The live site's phone variant has no breaks — the
 * 11px copy wraps naturally at the 358px column. */
@media (max-width: 767.98px) {
  .framer-uc94zq .framer-a1563c br {
    display: none;
  }
}

/* --- map section ("Global payments, done right") ---------------------------
 * Framer's `.ssr-variant{display:contents}` + `.ssr-variant>:first-child{
 * position:absolute;width/height:100%!important}` absolutely-position the map
 * content inside `.framer-1p6zmki`. That section is `height:min-content`, and an
 * absolutely-positioned child contributes nothing to it, so the section
 * collapses to ~0px and the abs child's `height:100%` resolves to ~0 — the map
 * parks far below its heading. Framer's runtime JS normally sets an explicit
 * pixel height here. We re-author it: pin the section to the variant's design
 * height (1000px) and return the inner container to normal flow at that height,
 * after which `.framer-zjud1e` lays out its flex-row (text column + tall Europe
 * map, object-fit:cover) — matching the JS-rendered original at 1440.
 *
 * The selector must out-specify Framer's `.ssr-variant>:first-child` (0,2,0 with
 * !important), hence the full (0,3,0) descendant chain below.
 *
 * Scoped to >=768px: the shipped variant frame (.framer-zjud1e) is a hardcoded
 * 1440px-wide / 1000px-tall flex-row, which on a phone overflows badly. The
 * phone column layout is re-authored in the max-width:767.98px block further
 * down, so we must NOT force the 1000px desktop height there. */
@media (min-width: 768px) {
  .framer-1p6zmki {
    min-height: 1000px;
  }
  .framer-1p6zmki > .ssr-variant > .framer-1in3ctk-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 1000px !important;
  }
  /* Both carousel arrows cluster at the map's bottom-right, vertically level
   * with the bottom of the text column to the left of the map (bottom:35px ==
   * the original section-relative placement: right:30px / bottom:83px from the
   * section). The next-arrow is the outer (rightmost) one; its 75px circle,
   * centred in the 100px container, overhangs the map's right edge as designed.
   * z-index:2 keeps the pair above the map: when the viewport is short and wide
   * the tall (aspect-locked) map grows up under this corner and would otherwise
   * cover the arrows. */
  .framer-1p6zmki .framer-6IFr0 .framer-1malavw-container > .framer-1fp3p6z-container {
    right: -50px;
    bottom: 35px;
    z-index: 2;
  }
  /* Prev-arrow: 20px to the LEFT of the next-arrow (gap measured between the two
   * 75px circles). right:45px puts its container centre at map_right-95 — i.e.
   * 95px (75px circle + 20px gap) left of the next-arrow's centre at map_right. */
  .framer-1p6zmki .framer-6IFr0 .framer-1malavw-container > .framer-1fp3p6z-container.map-arrow-prev {
    left: auto;
    right: 45px;
    bottom: 35px;
    z-index: 2;
  }
  /* Pin the whole Countries carousel (title + list + dots) to the bottom of the
   * text column with the heading at the top — same mechanism as the live site,
   * where .framer-804ru1 is a full-height flex column with space-between. The
   * list height is animated per slide (MapSection.vue), so the block grows and
   * shrinks from the bottom: the dots stay put and the title rides up/down with
   * the list, instead of the list reflowing everything below it. */
  .framer-1p6zmki .framer-6IFr0 .framer-804ru1 {
    align-self: stretch;
    height: auto;
    justify-content: space-between;
  }
}

/* --- map section (mobile) --------------------------------------------------
 * The map component only ships its "Big Desktop" variant (.framer-v-19tso0q):
 * a fixed 1440x1000 flex-row (text column + tall map) that Framer's runtime
 * would swap for a phone variant below 768px. Without the runtime the desktop
 * frame sticks and the 1440px content crushes the heading into a 1-word-wide
 * column. We re-author the phone layout the live site shows: a single column
 * of heading+subtitle -> map (with the carousel "next" arrow on its top-right)
 * -> carousel title -> country list -> dots.
 *
 * The map (.framer-1malavw-container) and arrow (.framer-1fp3p6z-container) are
 * DOM siblings of the text block (.framer-804ru1), while the heading
 * (.framer-53jku5) and carousel (.framer-1vx8cuz) are nested inside it. To
 * interleave the map between heading and carousel we flatten .framer-804ru1
 * with display:contents and reorder all four with flexbox `order`. The arrow
 * is taken out of its absolute desktop placement and floated right in-flow
 * with a negative bottom margin so it overlaps the map's top-right corner. */
@media (max-width: 767.98px) {
  .framer-1p6zmki > .ssr-variant > .framer-1in3ctk-container {
    position: relative;
    width: 100%;
    height: auto;
  }
  .framer-1p6zmki .framer-6IFr0.framer-zjud1e {
    flex-direction: column;
    align-items: flex-start;
    place-content: flex-start;
    gap: 0;
    width: 100%;
    height: min-content;
    padding: 0 0 72px;
    overflow: visible;
  }
  .framer-1p6zmki .framer-6IFr0 .framer-804ru1 {
    display: contents;
  }
  /* framer.css pins the heading sticky (top:0) for the desktop scroll effect;
   * on the phone column layout it must scroll away with the page. */
  .framer-1p6zmki .framer-6IFr0 .framer-53jku5 {
    order: 1;
    width: 100%;
    gap: 12px;
    position: static;
  }
  /* Live phone variant frames the 358x300 map inside a 316px-tall wrapper
   * with 8px top/bottom insets (no column gap around it). */
  .framer-1p6zmki .framer-6IFr0 .framer-1malavw-container {
    order: 3;
    flex: none;
    width: 100%;
    height: 316px;
    padding: 8px 0;
    position: relative;
  }
  /* Arrow now lives INSIDE .framer-1malavw-container (see MapSection.vue), so it
   * positions relative to the square map. Vertically center it on the map and
   * inset it from the right edge. */
  .framer-1p6zmki .framer-6IFr0 .framer-1malavw-container > .framer-1fp3p6z-container {
    position: absolute;
    inset: auto;
    /* The live site centers the arrow on the whole component (50.07% of 721px),
     * which lands 161px into this 316px wrapper — 3px below its midpoint. */
    top: calc(50% + 3px);
    right: 8px;
    bottom: auto;
    width: 60px;
    height: 60px;
    z-index: 2;
  }
  /* The shipped (desktop) arrow variant nests a 75px circle + 100px-tall svg in
   * the button; in the 60px mobile frame (overflow:clip) that crops to a square.
   * Shrink them to the phone-variant sizes so the button reads as a round pill. */
  .framer-1p6zmki .framer-6IFr0 .framer-1fp3p6z-container .framer-1rsuxg9 {
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
  }
  .framer-1p6zmki .framer-6IFr0 .framer-1fp3p6z-container .framer-1w3uz9h {
    height: 60px;
  }
  /* Prev-arrow: same vertical placement as the next-arrow, on the left edge. */
  .framer-1p6zmki .framer-6IFr0 .framer-1malavw-container > .framer-1fp3p6z-container.map-arrow-prev {
    right: auto;
    left: 8px;
  }
  .framer-1p6zmki .framer-6IFr0 .framer-1vx8cuz {
    order: 4;
    width: 100%;
    gap: 16px;
  }
  .framer-1p6zmki .framer-6IFr0 .framer-jpn5ux {
    width: 100%;
  }
  /* The live phone variant pins the list wrapper to 96px on every slide, so
   * the dots below never move vertically on slide change. */
  .framer-1p6zmki .framer-6IFr0 .framer-920obc {
    width: 100%;
    height: 96px;
  }
}

/* Prev-arrow chevron (all breakpoints): same sprite as the next-arrow,
 * mirrored so it points back. (The live site mounts the prev arrow with
 * rotate(-180deg) — identical look for this symmetric chevron.) */
.framer-1p6zmki .map-arrow-prev .framer-1w3uz9h {
  transform: scaleX(-1);
}

/* --- map carousel slide-change motion (all breakpoints) ---------------------
 * On slide change the live site swaps title/list/map instantly and animates:
 *  - the dots: the active pill stretches sideways over ~400ms (Framer plays a
 *    horizontal FLIP, scaleX 3<->1/3). framer.css widens the active icon to
 *    18px (.framer-v-1jd0w04 .framer-1fki7e2), so a width transition on the
 *    icon reproduces the stretch and lets the neighbouring dots glide.
 *  - the country list text color, crossfading black <-> gray over ~600ms
 *    (slide 1 is black, all others rgb(76,76,76); MapSection.vue swaps the
 *    color var).
 */
.framer-1p6zmki .framer-NOfdE .framer-1fki7e2 {
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.framer-1p6zmki .framer-920obc .framer-text {
  transition: color 0.6s ease;
}

/* --- opera-club / why-opera / ai-banner (mobile) ----------------------------
 * These sections now swap to the export's own Mobile variant classes below
 * 768px in their Vue components (.framer-v-5acfj7 / .framer-v-bjwtpu +
 * .framer-v-1ygk752 / .framer-v-164eqkw), so framer.css lays them out exactly
 * like Framer's runtime would. Only text styles the runtime applies as inline
 * styles (not present in framer.css) are re-authored below. */
@media (max-width: 767.98px) {
  /* AI banner heading: live phone variant renders it 32px/1.1 wrapped to two
   * lines ("AI that knows" / "your numbers"); the shipped inline styles are the
   * desktop 48px single-line ones. max-width forces the same break point. */
  .framer-5aw6gk .framer-bmEEo.framer-v-164eqkw .framer-h0hw11 .framer-text {
    --framer-font-size: 32px;
    --framer-line-height: 35.2px;
    white-space: normal;
  }
  .framer-5aw6gk .framer-bmEEo.framer-v-164eqkw .framer-h0hw11 {
    max-width: 230px;
    white-space: normal;
  }
  /* AI banner copy: 15px/22px on the live phone variant. The shipped markup
   * carries the desktop 20px as an inline --framer-font-size, so the var can't
   * be overridden from a stylesheet — set the properties directly. */
  .framer-5aw6gk .framer-bmEEo.framer-v-164eqkw .framer-wd0yo2 .framer-text {
    font-size: 15px !important;
    line-height: 22px !important;
  }
  /* Coming-soon cards: the variant pins them to 168px, but the shipped inline
   * height:100% wins over it — pin it back. */
  .framer-11r43d7 .framer-Fwalw.framer-v-1rod1tp.framer-o7pl5d {
    height: 168px !important;
  }
  /* Contact form: framer.css pins the form element to its desktop 430px; the
   * live phone layout stretches it to the 358px column (runtime inline style). */
  .framer-1ejexds .framer-JOTDf.framer-1wxj4w3 {
    width: 100%;
  }
}

/* --- coming-soon section (mobile) ------------------------------------------
 * Each feature-card slot ships two stacked copies: the live card plus a
 * transparent placeholder (data-framer-name="hidden", .framer-v-1atctsg) that
 * Framer's runtime would display:none below its breakpoint. Our build never
 * implements the .hidden-* breakpoint utilities, so on mobile the placeholders
 * stay in the column flow at full card height, opening large empty gaps
 * between the visible cards. The placeholder containers (and only those) carry
 * both a "-container" class and .hidden-4vmoj5; the .ssr-variant wrappers and
 * the live containers do not, so this hides exactly the 5 placeholders and
 * restores the intended 8px inter-card gap. */
@media (max-width: 767.98px) {
  .framer-11r43d7 [class*="-container"].hidden-4vmoj5 {
    display: none !important;
  }
}