/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/35bbf239-d644bf6d-ad6f-48b3-9696-4843360a9525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b1aaf991-7b9916ff-e87a-4bc7-96f7-952f785f7996.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/35bbf239-d644bf6d-ad6f-48b3-9696-4843360a9525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b1aaf991-7b9916ff-e87a-4bc7-96f7-952f785f7996.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/35bbf239-d644bf6d-ad6f-48b3-9696-4843360a9525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b1aaf991-7b9916ff-e87a-4bc7-96f7-952f785f7996.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PriceShape Design System — Foundations */
/* Colors and type tokens pulled from the live Chakra theme (portal/src/theme.ts)
   and the Figma Colors & Shadows + Typography sections. */

/* ── Webfont: Open Sans ─────────────────────────────────────
   Local brand files for Medium (500), Bold (700) and ExtraBold (800).
   Regular (400) and Semibold (600) still fall back to Google Fonts
   until the user uploads those weights too. */
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ce5b963f-cce58da3-cf28-42e6-88c9-d0a83ac1de68.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/3fedc482-6feb4a37-d048-439d-821e-5dd04978a885.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans";font-style:italic;font-weight:700;font-display:swap;
  src:url("fonts/3342672b-a7f70c6a-9c7f-4ba5-87b8-32f451ab9fbd.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/312514e4-172725d9-6bd4-4155-9984-ee2158036f54.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans";font-style:italic;font-weight:800;font-display:swap;
  src:url("fonts/8d1b559e-bb632ad8-abd7-4809-aa4b-8dc97cf5a687.woff2") format("woff2");
}
/* Google fallback ONLY for weights we don't have locally (400, 600). */
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/fb62eda1-bd98c3f2-1863-4acc-90e4-d2731a70f20e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/e86d0274-77a61427-5ac2-4021-9494-2f65ba00f85d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/fb62eda1-bd98c3f2-1863-4acc-90e4-d2731a70f20e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/e86d0274-77a61427-5ac2-4021-9494-2f65ba00f85d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/35bbf239-d644bf6d-ad6f-48b3-9696-4843360a9525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b1aaf991-7b9916ff-e87a-4bc7-96f7-952f785f7996.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/35bbf239-d644bf6d-ad6f-48b3-9696-4843360a9525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b1aaf991-7b9916ff-e87a-4bc7-96f7-952f785f7996.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.marketmap-page{
  /* ── Brand · Primary scale ─────────────────────────────── */
  /* Named by step — 300 is THE brand colour. Use tokens (primary-300) */
  /* or the aliases on the next line for readability in CSS. */
  --primary-500: #AB2E21;   /* darkest — pressed / on-brand text on light */
  --primary-400: #D0392B;   /* hover */
  --primary-300: #E94F38;   /* ★ Brand — PriceShape Red */
  --primary-200: #F29688;   /* tint · disabled primary */
  --primary-100: #FEEDEC;   /* soft red bg · badges, active nav */
  --primary-32:  rgba(254,237,236,0.32);  /* whisper-tint · row selected */

  /* Legacy aliases — keep existing components working */
  --ps-red:        var(--primary-300);
  --ps-red-hover:  var(--primary-400);
  --ps-red-dark:   var(--primary-500);
  --ps-red-light-l:var(--primary-200);
  --ps-red-light-m:var(--primary-100);
  --ps-red-light-s:var(--primary-32);

  /* ── Semantic · Green (success) ────────────────────────── */
  --green-500: #15C69A;
  --green-400: #6ADDC2;
  --green-300: #DAF7EF;
  --green-200: #F0FCF9;

  /* ── Semantic · Blue (info) ────────────────────────────── */
  --blue-500:  #1667F9;
  --blue-400:  #6DB7E8;
  --blue-300:  #CDDEFD;

  /* ── Semantic · Yellow (warning) ───────────────────────── */
  --yellow-500: #FDC830;
  --yellow-50:  rgba(255, 245, 217, 0.5);

  /* Legacy aliases — keep existing components working */
  --ps-green:       var(--green-500);
  --ps-green-light: var(--green-400);
  --ps-green-bg:    var(--green-300);
  --ps-yellow:      var(--yellow-500);
  --ps-blue:        var(--blue-500);
  --ps-blue-info:   var(--blue-500);

  /* ── Neutrals (Grey scale) ─────────────────────────────── */
  --white:    #FFFFFF;
  --gray-25:  #FCFCFC;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;

  /* ── Semantic foreground / background ──────────────────── */
  --fg-1: var(--gray-800);    /* primary text, headings */
  --fg-2: var(--gray-600);    /* secondary text / form labels */
  --fg-3: var(--gray-500);    /* help text */
  --fg-4: var(--gray-400);    /* placeholder / disabled-ish */
  --fg-inverse: #FFFFFF;

  --bg-app:      var(--gray-50);   /* body background */
  --bg-surface:  #FFFFFF;          /* cards, drawers */
  --bg-muted:    var(--gray-50);   /* subtle surface */
  --bg-accent:   var(--ps-red-light-m);
  --border:      var(--gray-200);
  --border-strong: var(--gray-300);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale from Figma Typography page */
  --h1-size: 30px;  --h1-lh: 40px;
  --h2-size: 24px;  --h2-lh: 32px;
  --h3-size: 20px;  --h3-lh: 26px;
  --h4-size: 18px;  --h4-lh: 24px;
  --h5-size: 16px;  --h5-lh: 22px;
  --h6-size: 14px;  --h6-lh: 20px;
  --body-l: 16px;   --body-l-lh: 22px;
  --body-m: 14px;   --body-m-lh: 20px;  /* default app text */
  --body-s: 12px;   --body-s-lh: 16px;
  --body-xs: 10px;  --body-xs-lh: 14px;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;    /* buttons, inputs, cards */
  --radius-lg: 12px;   /* drawers, modals */
  --radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs: 0px 4px 3px 0px rgba(16,24,40,0.0314);
  --shadow-sm: 0 0 0 4px var(--gray-25);            /* hover halo */
  --shadow-md: 0px 4px 16px rgba(43,46,61,0.12);
  --shadow-lg: 0px 4px 24px rgba(43,46,61,0.12);
  --shadow-flat: 0px 0px 12px rgba(43,46,61,0.12);
  --shadow-brand-circles: 0px 0px 0px 3px #FEEDECba, 0px 0px 0px 9px #FFF5F4ba;
  --shadow-grey-circles:  0px 0px 0px 3px var(--gray-200), 0px 0px 0px 9px var(--gray-50);
  --focus-ring: 0 0 0 3px #E0EAFF;

  /* ── Spacing scale (Chakra-ish) ────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Control sizes ─────────────────────────────────────── */
  --control-md: 44px;  /* default inputs + buttons */
  --control-sm: 36px;
  --control-xs: 28px;
}

/* ── Semantic element helpers ─────────────────────────────── */
.marketmap-page{
  font-family: var(--font-sans);
  font-size: var(--body-m);
  line-height: var(--body-m-lh);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.marketmap-page) h1, :where(.marketmap-page) .h1{ font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: 700; color: var(--fg-1); }
:where(.marketmap-page) h2, :where(.marketmap-page) .h2{ font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: 600; color: var(--fg-1); }
:where(.marketmap-page) h3, :where(.marketmap-page) .h3{ font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 600; color: var(--fg-1); }
:where(.marketmap-page) h4, :where(.marketmap-page) .h4{ font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: 600; color: var(--fg-1); }
:where(.marketmap-page) h5, :where(.marketmap-page) .h5{ font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: 700; color: var(--fg-1); }
:where(.marketmap-page) h6, :where(.marketmap-page) .h6{ font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 700; color: var(--fg-1); }

.body-l{ font-size: var(--body-l);  line-height: var(--body-l-lh); }
.body-m{ font-size: var(--body-m);  line-height: var(--body-m-lh); }
.body-s{ font-size: var(--body-s);  line-height: var(--body-s-lh); }
.body-xs{ font-size: var(--body-xs); line-height: var(--body-xs-lh); }

.help{ color: var(--fg-3); }
.form-label{ color: var(--fg-2); font-weight: 600; font-size: var(--body-m); }
code, .mono{ font-family: var(--font-mono); }

/* Animated gradient used for indeterminate progress */
@keyframes ps-gradient {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* PriceShape MarketMap — global design tokens
   Loaded by every section component. Only custom properties, font loading
   and shared keyframes live here; all component styling is inline. */

/* Open Sans is loaded via <link> in each component's <helmet> — a remote
   @import inside a linked stylesheet blocks rendering until it resolves. */

.marketmap-page{
  /* Typography */
  --font-family-body: "Open Sans", sans-serif;
  --font-family-heading: "Open Sans", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Core colors */
  --color-white: #FFFFFF;
  --color-grey-900: #101828;
  --color-grey-800: #1D2939;
  --color-grey-600: #475467;
  --color-grey-500: #667085;
  --color-grey-400: #98A2B3;
  --color-grey-200: #EAECF0;

  /* Page grounds — one token per surface, shared across sections */
  --surface-page: #F9FAFB;
  --surface-header: #F9FAFB;
  --surface-band: #F2F4F7;
  --marketmap-dark: #080C19;
  --marketmap-card: #080B19;
  --marketmap-line: #344054;

  --color-priceshape-coral: #E94F38;
  --color-priceshape-coral-hover: #D9432F;

  --color-map-dot: #AAB9CE;
  --color-map-outline: #E3E8EF;
  --color-shadow: rgba(16, 24, 40, 0.12);

  /* Layout */
  --container-max: 1530px;
  --container-gutter: clamp(20px, 10.46vw, 160px);

  /* Radii + control sizes */
  --radius-sm: 8px;
  --radius-md: 12px;
  --control-height: 44px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
}

/* The bundler's unpack splash must never paint — the real page ground is the
   first frame. Defensive: the template is also kept out of the DC body. */
#__bundler_thumbnail, #__bundler_loading, #__bundler_placeholder{ display: none !important; }

/* ── Scoping ───────────────────────────────────────────────────────────
   Everything this page styles lives under .marketmap-page, so the content can
   be dropped beneath the production navigation without overriding it. Only
   the page ground colour is set globally, and only so the first painted frame
   is already correct. */
.marketmap-page, .marketmap-page{ margin: 0; padding: 0; background: var(--surface-page); }
.marketmap-page{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-600);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Link defaults are wrapped in :where() so they carry zero specificity: every
   authored component rule (nav links, filled CTAs) wins without needing to be
   re-qualified, and a bare a:hover can never repaint a button. */
:where(.marketmap-page) :where(a){ color: var(--color-grey-800); text-decoration: none; }
:where(.marketmap-page) :where(a:hover){ color: var(--color-priceshape-coral); }
.marketmap-page, .marketmap-page *, .marketmap-page *::before, .marketmap-page *::after{ box-sizing: border-box; }

@keyframes ps-marker-ring {
  0%   { transform: scale(0.35); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── Layout + hero typography ─────────────────────────────────
   Explicit Figma values. These are the single source of truth for the hero
   left column and the statistics row; nothing overrides them inline. */

.ps-container{
  width: min(1210px, calc(100% - 48px));
  margin-inline: auto;
}

/* ── Site header ──────────────────────────────────────────── */
.ps-header{ position: relative; width: 100%; height: 88px; background: var(--surface-header); }
.ps-header-inner{
  width: min(1210px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 48px;
}
.ps-header-logo{ display: inline-flex; align-items: center;   min-height: 44px;
  align-items: center;
}
.ps-header-logo img{ display: block; width: auto; height: 32px; }

.ps-nav-links{ display: flex; justify-content: center; align-items: center; gap: 32px; }
.ps-nav-link{
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #344054;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease;
}
.ps-nav-link:hover{ color: #E94F38; }
.ps-nav-actions{ display: flex; align-items: center; gap: 20px; }
.ps-nav-login{
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #344054;
  text-decoration: none;
  white-space: nowrap;
}
.ps-nav-login:hover{ color: #E94F38; }
.ps-nav-trial{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 16px;
  border-radius: 8px;
  background: #E94F38;
  color: #FFFFFF;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease;
}
.ps-nav-trial:hover{ background: #D0392B; color: #EAECF0; }
.ps-nav-lang{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #344054;
}
.ps-nav-lang:hover{ color: #E94F38; }
.ps-nav-lang svg{ display: block; border-radius: 2px; flex: 0 0 auto; }

.ps-nav-burger{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #344054;
  cursor: pointer;
}
.ps-nav-burger:hover{ background: #F9FAFB; }

.ps-nav-link:focus-visible, .ps-nav-login:focus-visible, .ps-nav-trial:focus-visible, .ps-nav-lang:focus-visible, .ps-nav-burger:focus-visible, .ps-header-logo:focus-visible{
  outline: 2px solid #E94F38;
  outline-offset: 3px;
  border-radius: 4px;
}

.ps-mobile-menu{
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface-header);
  border-top: 1px solid #EAECF0;
  box-shadow: 0px 4px 16px #2B2E3D1F;
}
.ps-mobile-menu-inner{
  width: min(1210px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 24px;
}
.ps-mobile-menu .ps-nav-link{ font-size: 16px; line-height: 24px; padding: 12px 0; }
.ps-mobile-menu-divider{ height: 1px; background: #EAECF0; margin: 12px 0; }
.ps-mobile-menu .ps-nav-login{ font-size: 16px; line-height: 24px; padding: 12px 0; }
.ps-mobile-menu .ps-nav-trial{ height: 44px; margin-top: 4px; }
.ps-mobile-menu .ps-nav-lang{ justify-content: flex-start; }

.ps-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 507px);
  grid-template-areas: "copy globe" "stats globe";
  justify-content: space-between;
  column-gap: 64px;
  align-items: start;
}
.ps-hero-copy{ grid-area: copy; width: min(620px, 100%); }
.ps-hero-globe{ grid-area: globe; margin-top: 12px; }
.ps-hero-stats{ grid-area: stats; }

/* ISO certification — quiet metadata, no silhouette of any kind. */
.ps-iso{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  width: fit-content;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-grey-500);
}
/* icon is optically centred on the cap height, not the line box */
.ps-iso svg{ width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.4; display: block; margin-top: -1px; }

.ps-hero-h1{
  max-width: 635px;
  margin: 0 0 24px;
  font-family: "Open Sans", sans-serif;
  font-size: 72px;
  line-height: 82px;
  font-weight: 700;
  letter-spacing: -2.78px;
  color: #101828;
}

.ps-hero-desc{
  max-width: 597px;
  margin: 0 0 32px;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: #475467;
  text-wrap: pretty;
}

.ps-cta-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 56px; }

.ps-cta{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.ps-cta-primary{ background: #E94F38; color: #FFFFFF; border: 0; }
.ps-cta-primary:hover{ background: #D9432F; color: #EAECF0; }
.ps-cta-secondary{ min-width: 146px; background: #FFFFFF; color: #1D2939; border: 1px solid #EAECF0; }
.ps-cta-secondary:hover{ color: #1D2939; box-shadow: 0 0 0 4px #FCFCFC; }
.ps-cta-secondary svg{ flex: 0 0 16px; transition: transform 180ms ease; }
.ps-cta-secondary:hover svg{ transform: translateX(3px); }

/* ── Filled coral CTAs ─────────────────────────────────────────────────
   Explicit in every link state so the global a:visited / a:hover colours can
   never repaint the label. Hover lightens the text; it never darkens it. */
.marketmap-page .ps-cta-primary, .marketmap-page .ps-cta-primary:link, .marketmap-page .ps-cta-primary:visited, .marketmap-page .ps-cta-primary:focus, .marketmap-page .ps-cta-primary:focus-visible, .marketmap-page .ps-cta-primary:active, .marketmap-page .ps-nav-trial, .marketmap-page .ps-nav-trial:link, .marketmap-page .ps-nav-trial:visited, .marketmap-page .ps-nav-trial:focus, .marketmap-page .ps-nav-trial:focus-visible, .marketmap-page .ps-nav-trial:active{ color: #FFFFFF; }
.marketmap-page .ps-cta-primary:hover, .marketmap-page .ps-nav-trial:hover{ color: #EAECF0; }

/* ── Statistics ───────────────────────────────────────────── */
.ps-hero-stats{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  width: 648px;
  max-width: 100%;
  min-height: 110px;
  margin: 0;
}
.ps-stat{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 20px;
}
.ps-stat:first-child{ padding-left: 0; }
.ps-stat:last-child{ padding-right: 0; }
.ps-stat + .ps-stat::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #EAECF0;
}
.ps-stat-value{
  margin: 0 0 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 39px;
  line-height: 46px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: #1D2939;
  white-space: nowrap;
}
.ps-stat-label{
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: #475467;
}

.ps-globe{ position: relative; width: 100%; max-width: 507px; aspect-ratio: 1 / 1; margin-inline: auto; }

/* ── Trust section — heading in the gutter, marquee full-bleed ── */
.ps-trust-section{
  width: 100%;
  margin: clamp(120px, 11vw, 168px) 0 0;
  padding: clamp(56px, 5vw, 80px) 0;
  overflow: hidden;
  background: #F2F4F7;
  border-top: 1px solid #EAECF0;
}
.ps-trust-head{ width: min(1210px, calc(100% - 48px)); margin-inline: auto; }
.ps-trust-heading{
  margin: 0;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #98A2B3;
}
.ps-trust-marquee{ margin-top: 48px; width: 100%; overflow: hidden; }
.ps-trust-track{ display: flex; width: max-content; animation: psTrustScroll 42s linear infinite; }
html.ps-paused .ps-trust-track{ animation-play-state: paused; }
.ps-trust-seq{ display: flex; align-items: center; gap: 56px; padding-right: 56px; }
/* consistent-height bounding boxes normalise badge vs logo weight */
.ps-trust-item{ height: 76px; display: grid; place-items: center; flex: 0 0 auto; }
.ps-trust-item--badge{ width: 66px; }
.ps-trust-item--logo{ width: 132px; }
.ps-trust-item img{ display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.ps-trust-item--badge img{ height: 76px; }
.ps-trust-item--logo img{ max-height: 38px; }
@keyframes psTrustScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* Desktop and tablet: one static, balanced composition — no motion, no
   duplicate items, no track overflowing the viewport. */
@media (min-width: 768px) {
  .ps-trust-marquee{ overflow: visible; }
  .ps-trust-track{ width: 100%; animation: none; justify-content: center; }
  .ps-trust-seq[aria-hidden="true"]{ display: none; }
  .ps-trust-seq{ width: 100%; flex-wrap: wrap; justify-content: center; gap: 40px 56px; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ps-trust-track{ animation: none; } }

/* ── Tablet landscape ─────────────────────────────────────── */
@media (max-width: 1199px) {
  .ps-header-inner{ column-gap: 24px; }
  .ps-nav-links{ gap: 20px; }
  .ps-nav-link--optional{ display: none; }
  .ps-nav-actions{ gap: 16px; }
  .ps-trust-seq{ gap: 48px; padding-right: 48px; }
}

@media (max-width: 1023px) {
  .ps-header-inner{ grid-template-columns: auto 1fr; column-gap: 16px; }
  .ps-nav-links, .ps-nav-actions{ display: none; }
  .ps-nav-burger{ display: inline-flex; justify-self: end; }

  .ps-trust-section{ margin-top: clamp(96px, 12vw, 128px); }
  .ps-trust-marquee{ margin-top: 40px; }
}

@media (max-width: 767px) {
  .ps-trust-section{ margin-top: clamp(80px, 16vw, 112px); padding: clamp(48px, 10vw, 64px) 0; }
  .ps-trust-head{ width: calc(100% - 48px); }
  .ps-trust-seq{ gap: 40px; padding-right: 40px; }
  .ps-trust-item{ height: 60px; }
  .ps-trust-item--badge{ width: 52px; }
  .ps-trust-item--badge img{ height: 60px; }
  .ps-trust-item--logo{ width: 104px; }
  .ps-trust-item--logo img{ max-height: 30px; }
}



@media (max-width: 1279px) {
  .ps-hero-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 430px); column-gap: 40px; }
  .ps-globe{ max-width: 430px; }
  .ps-hero-h1{ font-size: 58px; line-height: 66px; letter-spacing: -2.2px; }
}

/* ── Tablet portrait — stacked ────────────────────────────── */
@media (max-width: 1023px) {
  .ps-hero-grid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "globe" "stats";
    row-gap: 0;
  }
  .ps-hero-globe{ margin: 32px 0 0; }
  .ps-cta-row{ margin-bottom: 0; }
  .ps-globe{ max-width: 480px; margin-inline: auto; }
  .ps-hero-h1{ font-size: 50px; line-height: 58px; letter-spacing: -1.8px; }

  /* Statistics: the whitespace above and below the complete grid is one
     token on both sides, measured from the grid itself — the globe above
     contributes nothing and the band below starts flush. */
  .ps-hero-stats{
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    row-gap: 24px;
    padding-block: var(--space-12);
    min-height: 0;
  }
  .ps-trust-section{ margin-top: 0; }
  .ps-stat{ padding: 0 20px; }
  .ps-stat:nth-child(odd){ padding-left: 0; }
  .ps-stat:nth-child(even){ padding-right: 0; }
  .ps-stat:nth-child(odd)::before{ display: none; }
  .ps-stat:nth-child(n + 3){ border-top: 1px solid #EAECF0; padding-top: 24px; }
}

/* ── Phone ────────────────────────────────────────────────────
   Reference order: header → ISO eyebrow → headline → paragraph → globe →
   CTAs → statistics. `display: contents` lets the copy block's children
   join the hero's flex flow so the CTAs can follow the globe without any
   duplication of markup. */
@media (max-width: 767px) {
  .ps-hero-grid{ display: flex; flex-direction: column; gap: 0; }
  .ps-hero-copy{ display: contents; }
  .ps-iso{ order: 1; margin-bottom: 20px; }
  .ps-hero-h1{ order: 2; margin-bottom: 16px; }
  .ps-hero-desc{ order: 3; margin-bottom: 0; }
  .ps-hero-globe{ order: 4; margin: 32px 0; }
  .ps-cta-row{ order: 5; margin: 0; }
  .ps-hero-stats{ order: 6; }

  .ps-hero-h1{
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.1;
    letter-spacing: -1.4px;
    max-width: 15ch;
    text-wrap: balance;
  }
  .ps-hero-desc{ max-width: 42ch; }
  /* Phone: the whole globe stays on screen — no crop, no upscale. */
  .ps-globe{ width: min(88vw, 380px); max-width: none; margin-inline: auto; }
  .ps-stat-value{ font-size: 32px; line-height: 40px; }
}

@media (max-width: 399px) {
  .ps-cta-row{ gap: 12px; }
  .ps-cta{ min-height: 44px; flex: 1 1 auto; }
}

@media (max-width: 339px) {
  .ps-cta-row{ flex-direction: column; align-items: stretch; }
  .ps-cta{ min-height: 44px; width: 100%; }
}

@media (max-width: 379px) {
  .ps-hero-stats{ grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ps-stat{ padding: 0; }
  .ps-stat::before{ display: none; }
  .ps-stat + .ps-stat{ border-top: 1px solid #EAECF0; padding-top: 20px; }
}


/* ── "Discover the e-commerce market" introduction ─────────────────────
   Centred on desktop, left-aligned on phones (mobile-first alignment rule).
   Line lengths are capped in ch so wrapping stays balanced. */
.mm-intro{ max-width: 900px; margin: 0 auto; text-align: center; }
.mm-intro-eyebrow{
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #98A2B3;
}
.mm-intro-title{
  margin: 0 0 24px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}
.mm-intro-lede{
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: #F2F4F7;
  text-wrap: pretty;
}
@media (max-width: 767px) {
  .mm-intro{ text-align: left; margin-inline: 0; }
  .mm-intro-title{ max-width: 18ch; font-size: clamp(28px, 8vw, 36px); }
  .mm-intro-lede{ max-width: 46ch; font-size: 15px; line-height: 1.65; }
}

/* ── Phone section rhythm ───────────────────────────────────────────────
   One token drives the vertical padding at every section boundary on phones,
   so the transitions in and out of each band read as a single system. */
@media (max-width: 599.98px) {
  .marketmap-page{ --section-pad-phone: 72px; }
  .mm-section-root{ --mm-pad-y: var(--section-pad-phone); --mm-pad-x: 20px; }
  .ms-section-root{ --ms-pad-y: var(--section-pad-phone); }
  .ps-trust-section{ padding: var(--section-pad-phone) 0; }
}

/* ── MarketMap section (legacy rules, retained for the offline build) ── */
.mm-section{
  --mm-product: #15C69A;
  --mm-seller: #558EFF;
  --mm-price: #8055FF;
  --mm-stock: #2E7B8D;
  --mm-market: #249896;
  --mm-border: rgba(255,255,255,0.10);
  --mm-surface: #0B1020;
  --mm-g: 32px;
  --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  background: #080C19;
  padding: clamp(120px, 10vw, 176px) 0 clamp(128px, 11vw, 192px);
  font-family: "Open Sans", sans-serif;
  overflow-x: clip;
}

.mm-copy{ width: min(780px, calc(100% - 48px)); margin-inline: auto; }
.mm-eyebrow{
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #98A2B3;
}
.mm-title{
  margin: 0 0 26px;
  text-align: center;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.mm-lede{
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: #D0D5DD;
  text-wrap: pretty;
}

.mm-vis{
  position: relative;
  width: min(1530px, calc(100% - 96px));
  margin: 96px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mm-g);
  align-items: stretch;
}

/* Curved dashed connectors: spans the left column plus the gap */
.mm-conn{
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: calc((100% - 2 * var(--mm-g)) * 0.35484 + var(--mm-g));
  pointer-events: none;
  z-index: 1;
}
.mm-conn path{
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  opacity: 0.28;
  transition: opacity 900ms var(--mm-ease);
  vector-effect: non-scaling-stroke;
}
.mm-section.is-matching .mm-conn path{ opacity: 0.85; }
.mm-input{
  position: absolute;
  left: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  opacity: 0.35;
  transition: opacity 900ms var(--mm-ease);
}
.mm-section.is-matching .mm-input{ opacity: 1; }

/* Left: floating data field */
.mm-cloud{ position: relative; height: 100%; min-height: 0; }
.mm-tag{
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(8,12,25,0.72);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  animation: mm-float 9s ease-in-out infinite;
}
.mm-tag::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.mm-tag:nth-of-type(3n){ animation-duration: 11s; animation-delay: -3s; }
.mm-tag:nth-of-type(3n+1){ animation-duration: 13s; animation-delay: -7s; }
.mm-tag:nth-of-type(4n){ animation-duration: 10s; animation-delay: -5s; }
@keyframes mm-float {
  0%, 100% { translate: 0 0; }
  33% { translate: 3px -4px; }
  66% { translate: -3px 3px; }
}
.mm-tag--product{ color: var(--mm-product); }
.mm-tag--seller{ color: var(--mm-seller); }
.mm-tag--price{ color: var(--mm-price); }
.mm-tag--stock{ color: var(--mm-stock); }
.mm-tag--market{ color: var(--mm-market); }
.mm-tag--dim70{ opacity: 0.7; }
.mm-tag--dim40{ opacity: 0.4; }
.mm-tag--dim22{ opacity: 0.22; }

.mm-catalogue{
  position: absolute;
  left: 50%; top: 49%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 46%;
  min-width: 196px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: #0B1020;
}
.mm-catalogue-eyebrow{
  margin: 0 0 12px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mm-product);
}
.mm-catalogue-shot{ display: flex; align-items: center; justify-content: center; padding: 2px 0 14px; }
.mm-catalogue-shot img{ display: block; width: 88%; height: auto; object-fit: contain; }
.mm-catalogue-name{ margin: 0 0 3px; font-size: 13px; line-height: 18px; font-weight: 700; color: #FFFFFF; }
.mm-catalogue-meta{ margin: 0; font-size: 11px; line-height: 16px; color: #98A2B3; }

/* Middle: the MarketMap square */
.mm-map-col{ display: flex; align-items: flex-start; }
.mm-map{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: var(--mm-surface);
}
.mm-map-title{
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  color: #FFFFFF;
}
.mm-field{ position: relative; flex: 1; margin: 22px 0 16px; }
.mm-dot{ position: absolute; width: 5px; height: 5px; border-radius: 50%; will-change: transform; }
.mm-dot--product{ background: var(--mm-product); }
.mm-dot--seller{ background: var(--mm-seller); }
.mm-dot--price{ background: var(--mm-price); }
.mm-dot--stock{ background: var(--mm-stock); }
.mm-dot--market{ background: var(--mm-market); }

.mm-legend{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.mm-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #98A2B3;
}
.mm-legend-item::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; }
.mm-legend-item--product::before{ background: var(--mm-product); }
.mm-legend-item--seller::before{ background: var(--mm-seller); }
.mm-legend-item--price::before{ background: var(--mm-price); }
.mm-legend-item--stock::before{ background: var(--mm-stock); }
.mm-legend-item--market::before{ background: var(--mm-market); }

/* Right: structured result — same width and height as the square */
.mm-out{ display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; }
.mm-kpi{
  flex: 0 0 auto;
  padding: 18px 22px 20px;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: var(--mm-surface);
}
.mm-kpi-name{ margin: 0 0 3px; font-size: 13px; line-height: 18px; font-weight: 700; color: #FFFFFF; }
.mm-kpi-meta{ margin: 0 0 18px; font-size: 11px; line-height: 16px; color: #98A2B3; }
.mm-kpi-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mm-kpi-value{ display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.mm-kpi-label{ display: block; margin-top: 6px; font-size: 9px; line-height: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #98A2B3; }

.mm-cards{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; transition: gap 380ms var(--mm-ease); }
.mm-card{
  flex: 1 1 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface);
  transition: flex 380ms var(--mm-ease), opacity 300ms var(--mm-ease), border-color 380ms var(--mm-ease);
}
.mm-cards.has-open{ gap: 0; }
.mm-cards.has-open .mm-card:not(.is-open){ flex: 0 0 0; min-height: 0; opacity: 0; border-color: transparent; }
.mm-card.is-open{ flex: 1 1 auto; border-color: rgba(255,255,255,0.18); }
.mm-card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 18px;
  min-height: 40px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
}
.mm-card.is-open .mm-card-head{ min-height: 56px; }
.mm-card-head:focus-visible{ outline: 2px solid var(--mm-seller); outline-offset: -3px; border-radius: 10px; }
.mm-card-head img{ display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.mm-card-body{
  margin: 0;
  padding: 0 26px 0 50px;
  list-style: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 320ms var(--mm-ease);
}
.mm-card.is-open .mm-card-body{ opacity: 1; padding-bottom: 26px; }
.mm-card-body li{ position: relative; font-size: 13px; line-height: 20px; font-weight: 400; color: #D0D5DD; padding-left: 14px; }
.mm-card-body li + li{ margin-top: 14px; }
.mm-card-body li::before{
  content: "·";
  position: absolute;
  left: 0; top: 0;
  color: #98A2B3;
}

/* Mobile connectors (shown when the layout stacks) */
.mm-mconn{ display: none; }

@media (min-width: 1200px) and (max-width: 1399px) {
  .mm-vis{ --mm-g: 24px; }
  .mm-out{ gap: 12px; }
  .mm-cards{ gap: 6px; }
  .mm-card{ min-height: 36px; }
  .mm-card-head{ min-height: 36px; }
  .mm-kpi-meta{ margin-bottom: 12px; }
  .mm-map{ padding: 20px; }
  .mm-tag{ font-size: 10px; padding: 4px 8px; gap: 6px; }
  .mm-kpi{ padding: 16px 18px 18px; }
  .mm-card-head{ font-size: 14px; padding: 0 14px; gap: 10px; }
  .mm-card-body{ padding-left: 44px; padding-right: 18px; }
  .mm-card-body li + li{ margin-top: 10px; }
  .mm-card-body li{ font-size: 12px; line-height: 18px; }
}

@media (max-width: 1199px) {
  .mm-section{ padding: clamp(96px, 14vw, 132px) 0 clamp(104px, 15vw, 140px); }
  .mm-vis{ grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 64px; width: min(560px, calc(100% - 48px)); }
  .mm-conn{ display: none; }
  .mm-input{ display: none; }
  .mm-cloud{ height: auto; min-height: 360px; }
  .mm-map{ aspect-ratio: auto; min-height: 400px; }
  .mm-out{ height: auto; }
  .mm-cards{ min-height: 264px; }
  .mm-mconn{ display: block; position: absolute; top: -46px; left: 50%; width: 0; height: 34px; border-left: 1px dashed currentColor; opacity: 0.5; }
  .mm-mconn--product{ color: var(--mm-product); margin-left: -60px; }
  .mm-mconn--price{ color: var(--mm-price); margin-left: 0; }
  .mm-mconn--seller{ color: var(--mm-seller); margin-left: 60px; }
}

@media (max-width: 599px) {
  .mm-lede{ font-size: 15px; line-height: 25px; }
  .mm-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mm-cloud{ min-height: 320px; }
  .mm-catalogue{ width: 62%; }
  .mm-tag--dim22{ display: none; }
  .mm-cards{ min-height: 0; }
  .mm-card, .mm-card.is-open{ flex: 0 0 auto; }
  .mm-cards.has-open{ gap: 8px; }
  .mm-cards.has-open .mm-card:not(.is-open){ flex: 0 0 auto; min-height: 40px; opacity: 1; border-color: var(--mm-border); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-tag{ animation: none; }
  .mm-conn path{ opacity: 0.85; }
  .mm-input{ opacity: 1; }
}

/* Touch devices get a 44px minimum hit area on every control; pointer-based
   desktop keeps the approved compact navigation. */
@media (pointer: coarse) {
  .ps-nav-link, .ps-nav-login, .ps-nav-trial, .ps-nav-lang, .ps-nav-burger, .ps-cta, .ps-header-logo{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .ps-mobile-menu .ps-nav-link{ width: 100%; }
}

/* Data collection journey + Penny — transferred from the approved
   standalone implementation. Scoped to #jr-section / #ai-section.
   Colour and spacing tokens live in styles/tokens.css. */
#jr-section{position:relative;z-index:60;background:var(--marketmap-dark,#080C19);font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#jr-outer{position:relative;width:min(94vw,1530px);margin:0 auto;}
#jr-stem{display:none;}
#jr-stage{position:relative;padding:clamp(120px,12vw,200px) 0 clamp(144px,15vw,232px);}
#jr-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
#jr-head{position:relative;z-index:2;padding-left:12.1%;width:min(700px,80%);}
#jr-head .eyebrow{font-size:16px;line-height:22.4px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:#D0D5DD;}
#jr-head h2{margin:8px 0 0;font-size:clamp(38px,3.2vw,48px);line-height:1.12;font-weight:600;letter-spacing:-.015em;color:#FFFFFF;}
.jr-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;column-gap:7.2%;align-items:center;padding:0 12.1%;margin-top:clamp(200px,26vh,340px);}
#jr-head + .jr-row{margin-top:clamp(40px,3.4vw,64px);}
.jr-gfx{justify-self:center;width:100%;}
.jr-copy{justify-self:center;width:100%;max-width:330px;}
.jr-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:clamp(16px,1.4vw,21px) clamp(22px,2.1vw,31px);border-radius:8px;font-size:16px;line-height:22px;font-weight:600;color:#FFFFFF;}
.jr-chip svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.jr-chip span{position:relative;will-change:opacity,transform;}
.jr-copy p{margin:21px 0 0;font-size:16px;line-height:1.5;font-weight:400;color:#EAECF0;will-change:opacity,transform;text-wrap:pretty;}
.jr-cta{margin-top:30px;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:8px;background:#E94F38;color:#FFFFFF;font-size:14px;font-weight:600;transition:background-color 180ms ease,transform 180ms ease;}
.jr-cta, .jr-cta:link, .jr-cta:visited, .jr-cta:focus, .jr-cta:focus-visible, .jr-cta:active{color:#FFFFFF;}
.jr-cta:hover, .jr-cta:link:hover{background:#D0392B;color:#EAECF0;transform:translateY(-1px);}
.jr-cta:active, .jr-cta:link:active{background:#B93124;color:#FFFFFF;transform:translateY(0);}
.jr-cta:focus-visible{outline:3px solid rgba(233,79,56,.25);outline-offset:2px;}
/* Data collection: nothing of a stage is visible before the signal arrives.
   Hidden in CSS so there is no flash before the first measured paint. */
#jr-section .jr-copy, #jr-section .jr-gfx{opacity:0;visibility:hidden;}
#jr-section .jr-chip span, #jr-section .jr-copy p, #jr-section .jr-cta{opacity:0;}
#jr-section [data-jr-guide], #jr-section [data-jr-chipbase]{opacity:0;}
#jr-section .jr-gfx{will-change:opacity,transform;}
#jr-section .jr-gfx img{display:block;width:100%;height:auto;}
@media (prefers-reduced-motion:reduce){
  #jr-section .jr-copy, #jr-section .jr-gfx, #jr-section .jr-chip span, #jr-section .jr-copy p, #jr-section .jr-cta{opacity:1 !important;visibility:visible !important;transform:none !important;}
  #jr-section [data-jr-chipbase]{opacity:1 !important;}
  #jr-section [data-jr-chipdraw]{stroke-dashoffset:0 !important;}
}
/* Tablet portrait and below: one narrative column, and every stage reads
   line → image → title → text → continuing line. */
@media (max-width:900px){
  #jr-stage{padding:clamp(96px,16vw,132px) 0 clamp(96px,16vw,132px);}
  .jr-row{grid-template-columns:minmax(0,1fr);padding:0 48px;margin-top:clamp(140px,22vw,180px);row-gap:40px;}
  .jr-copy, .jr-gfx{max-width:none;justify-self:stretch;}
  .jr-row .jr-gfx{order:0}
  .jr-row .jr-copy{order:1}
  .jr-copy p{margin-top:20px;}
  /* the heading keeps its own breathing room; the line starts inside this gap */
  #jr-head + .jr-row{margin-top:clamp(160px,26vw,200px);row-gap:40px;}
  #jr-head{padding-left:48px;padding-right:48px;width:auto}
}

/* ── Phone section rhythm ──────────────────────────────────────────────
   One token drives the vertical padding at every section boundary on
   phones, so the transitions read as a consistent system. */
@media (max-width:599.98px){
  .marketmap-page{--section-pad-phone:72px;}
  #ai-section{padding:var(--section-pad-phone) 0;}
  #cta-section{padding:var(--section-pad-phone) 0;}
}
@media (max-width:599.98px){
  /* Phone: the simplified composition. Content sits in a single left-aligned
     column with a 56px left inset; the journey route runs as one straight
     vertical rail in the left gutter (x=24) and reaches each stage with a
     short horizontal stub that stops on the title's left border. Nothing is
     drawn through the content, and no stage carries a graphic. */
  #jr-stage{padding:var(--section-pad-phone,72px) 0;}
  #jr-head{padding-left:56px;padding-right:24px;}
  #jr-head .eyebrow{font-size:14px;line-height:20px;}
  #jr-head h2{font-size:clamp(28px,8vw,34px);}
  .jr-row{
    grid-template-columns:minmax(0,1fr);
    padding:0 24px 0 56px;
    margin-top:56px;
    row-gap:0;
    justify-items:stretch;
  }
  #jr-head + .jr-row{margin-top:56px;row-gap:0;}
  .jr-row .jr-copy{order:0;display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:none;}
  .jr-chip{padding:12px 16px;font-size:15px;line-height:20px;background:transparent;text-align:left;}
  /* 32px between a stage title and its paragraph */
  .jr-copy p{margin-top:32px;font-size:15px;line-height:1.55;text-align:left;width:100%;}
  .jr-cta{margin-top:24px;align-self:flex-start;}
  /* Phones are a text-led sequence: every stage graphic is dropped, along
     with its box, margins and grid row — no reserved height, no empty gap.
     All four are untouched at 600px and above. */
  .jr-row .jr-gfx{display:none;margin:0;padding:0;border:0;}
}

/* Stage one's Europe globe: a slow ambient breath, never a spin. */
@keyframes jrGlobeBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.018);}}
#jr-section .jr-gfx[data-jr-gfx="0"] img{
  transform-origin:50% 50%;
  animation:jrGlobeBreathe 9s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  #jr-section .jr-gfx[data-jr-gfx="0"] img{animation:none;}
}
/* Directional mask that reveals a graphic as the signal lands on it, plus a
   thin leading edge that travels with the reveal front. */
#jr-section .jr-gfx{position:relative;}
#jr-section .jr-gfx img{clip-path:inset(0 0 var(--jr-mask,0%) 0);transition:clip-path 90ms linear;}
#jr-section .jr-gfx::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - var(--jr-mask,0%));
  height:1.5px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,198,154,0),var(--jr-edge,#558EFF),rgba(128,85,255,0));
  opacity:var(--jr-edge-o,0);
}
@media (prefers-reduced-motion:reduce){
  #jr-section .jr-gfx img{clip-path:none !important;}
  #jr-section .jr-gfx::after{display:none;}
}
html.jr-safe #jr-section .jr-gfx img{clip-path:none !important;}
html.jr-safe #jr-section .jr-gfx::after{display:none;}
#ai-section{position:relative;z-index:60;background:var(--surface-page,#F9FAFB);padding:clamp(120px,11vw,184px) 0;font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#ai-stage{position:relative;width:min(92vw,1530px);margin:0 auto;aspect-ratio:1530/428;}
#ai-copy{position:absolute;left:12.1%;top:0;width:35.3%;}
#ai-copy .eyebrow{font-size:16px;line-height:22.4px;letter-spacing:.02em;text-transform:uppercase;color:#475467;}
#ai-copy h2{margin:8px 0 0;font-size:clamp(32px,3vw,46px);line-height:1.15;font-weight:600;color:#101828;}
#ai-copy p{margin:44px 0 0;font-size:16px;line-height:1.74;color:#475467;}
#ai-copy p + p{margin-top:28px;}
#ai-copy .ai-cta{margin-top:32px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:8px;background:#E94F38;color:#FFFFFF;font-size:16px;font-weight:600;transition:background-color 180ms ease,transform 180ms ease;}
#ai-copy .ai-cta, #ai-copy .ai-cta:link, #ai-copy .ai-cta:visited, #ai-copy .ai-cta:focus, #ai-copy .ai-cta:focus-visible, #ai-copy .ai-cta:active{color:#FFFFFF;}
#ai-copy .ai-cta:hover{background:#D0392B;color:#EAECF0;transform:translateY(-1px);}
#ai-copy .ai-cta:active{background:#B93124;color:#FFFFFF;transform:translateY(0);}
#ai-copy .ai-cta:focus-visible{outline:3px solid rgba(233,79,56,.25);outline-offset:2px;}
#ai-penny{position:absolute;left:56.9%;top:32.2%;width:34.7%;}
#ai-penny svg{display:block;width:100%;height:auto;}
@media (max-width:1100px){
  /* heading → body copy → complete graphic, in document flow */
  #ai-section{padding:clamp(80px,12vw,112px) 0;}
  #ai-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:56px;width:calc(100% - 96px);}
  #ai-copy, #ai-penny{position:static;width:100%;max-width:640px;}
  /* the glass card is positioned against the illustration, not the section —
     a static host detached it from the table on phones. `inset:auto` is
     required: relative re-activates the desktop left/top offsets. */
  #ai-penny{position:relative;inset:auto;}
  #ai-copy{position:static;inset:auto;}
  #ai-copy p{margin-top:24px;}
  /* phone and table scale together as one composition */
  #ai-penny{max-width:min(560px,100%);margin-inline:auto;}
  /* phone, message and table scale as one illustration, never over the copy */
  #ai-penny svg{width:100%;height:auto;}
}
@media (max-width:599.98px){
  #ai-stage{width:calc(100% - 48px);gap:32px;}
  #ai-copy h2{font-size:clamp(28px,8vw,36px);}
  #ai-copy p{font-size:15px;line-height:1.7;margin-top:20px;}
  #ai-copy p + p{margin-top:16px;}
  #ai-copy .eyebrow{font-size:14px;line-height:20px;}
  #ai-copy .ai-cta{margin-top:24px;font-size:15px;}
  #ai-penny{max-width:100%;}
}

[data-reveal-up]{opacity:0;transform:translateY(12px);transition:opacity 460ms cubic-bezier(.22,.61,.36,1),transform 460ms cubic-bezier(.22,.61,.36,1);}
[data-reveal-up].on{opacity:1;transform:none;}
@keyframes mmStarPulse{0%,100%{transform:scale(.97);opacity:.84}50%{transform:scale(1.05);opacity:1}}
@media (prefers-reduced-motion:reduce){[data-mm-star]{animation:none !important}[data-reveal-up]{opacity:1 !important;transform:none !important}}

/* ── Final CTA: one horizontal signal line, card revealed by it ── */
#cta-section{position:relative;z-index:60;background:var(--marketmap-dark,#080C19);padding:clamp(104px,11vw,168px) 0;overflow:hidden;font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#cta-stage{position:relative;width:min(94vw,1530px);margin:0 auto;display:flex;align-items:center;justify-content:center;}
#cta-card{position:relative;z-index:2;width:min(741px,calc(100% - 48px));min-height:464px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);border:1px solid transparent;border-radius:8px;background:var(--marketmap-dark,#080C19);}
#cta-card > *{opacity:0;will-change:opacity,transform;}
#cta-card .cta-eyebrow{margin:0;font-size:14px;line-height:20px;font-weight:400;letter-spacing:.04em;color:#D0D5DD;}
#cta-card h2{margin:4px 0 0;font-size:clamp(30px,3.4vw,46px);line-height:1.15;font-weight:600;letter-spacing:-.015em;color:#FFFFFF;text-wrap:pretty;}
#cta-card .cta-body{margin:16px 0 0;max-width:560px;font-size:16px;line-height:28px;color:#EAECF0;text-wrap:pretty;}
#cta-card .cta-btn{margin-top:37px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:8px;background:#E94F38;color:#FFFFFF;font-size:16px;font-weight:600;transition:background-color 180ms ease,transform 180ms ease;}
#cta-card .cta-btn, #cta-card .cta-btn:link, #cta-card .cta-btn:visited, #cta-card .cta-btn:focus, #cta-card .cta-btn:focus-visible, #cta-card .cta-btn:active{color:#FFFFFF;}
#cta-card .cta-btn:hover{background:#D0392B;color:#EAECF0;transform:translateY(-1px);}
#cta-card .cta-btn:active{background:#B93124;color:#FFFFFF;transform:translateY(0);}
#cta-card .cta-btn:focus-visible{outline:3px solid rgba(233,79,56,.25);outline-offset:2px;}
@media (max-width:640px){
  #cta-section{padding:var(--section-pad-phone,72px) 0;}
  #cta-stage{min-height:0;}
  /* phone: the card reads as left-aligned copy, not a centred poster */
  #cta-card{width:calc(100% - 40px);min-height:0;padding:40px 24px;align-items:flex-start;text-align:left;}
  #cta-card h2{font-size:clamp(30px,8.6vw,36px);}
  #cta-card .cta-btn{align-self:flex-start;width:auto;}
}
@media (prefers-reduced-motion:reduce){
  #cta-card{border-color:#344054 !important;}
  #cta-card > *{opacity:1 !important;transform:none !important;}
}

/* Fail-safe: if the scroll engine never initializes, everything is visible. */
html.jr-safe #jr-section .jr-copy, html.jr-safe #jr-section .jr-gfx, html.jr-safe #jr-section .jr-chip span, html.jr-safe #jr-section .jr-copy p, html.jr-safe #jr-section .jr-cta, html.jr-safe [data-reveal-up]{opacity:1 !important;visibility:visible !important;transform:none !important;}
html.jr-safe #jr-section [data-jr-chipbase]{opacity:1 !important;}
html.jr-safe #jr-section [data-jr-chipdraw]{stroke-dashoffset:0 !important;}
html.jr-safe #cta-card{border-color:#344054 !important;}
html.jr-safe #cta-card > *{opacity:1 !important;transform:none !important;}



/* ── Embedding ─────────────────────────────────────────────────────
   The page is dropped into a theme layout we do not control. Elementor
   containers are flex, so a widget in a row-direction container becomes a
   flex item and shrinks to its content width instead of filling. The chain
   below asserts its own width at every level rather than inheriting
   whatever the builder happens to hand it. */

.ps-marketmap-embed,
.ps-marketmap-embed > #dc-root,
.ps-marketmap-embed > #dc-root > .sc-host,
.ps-marketmap-embed .marketmap-page {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
	flex: 1 1 100%;
}

/* Elementor wraps shortcode output in its own widget markup; both levels
   need the same treatment or the block is constrained before it reaches us. */
.elementor-widget-container:has(> .ps-marketmap-embed) {
	width: 100%;
	max-width: none;
	flex: 1 1 100%;
}

.elementor-element:has(> .elementor-widget-container > .ps-marketmap-embed) {
	width: 100%;
	max-width: none;
	flex: 1 1 100%;
	align-self: stretch;
}

/* ── Optional full bleed ───────────────────────────────────────────
   [ps_marketmap fullbleed="yes"] — for a boxed container, where the
   section backgrounds would otherwise stop at the content width. The
   negative margins pull the block out to the viewport edges.

   Prefer setting the Elementor container to full width with zero padding
   where you can: this uses vw units, which include the scrollbar, so on
   Windows it can overhang by the width of the scrollbar. */

.ps-marketmap-embed--bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}