/* Styles the Framer runtime used to apply as inline styles.
   Paired with assets/js/site.js. The desktop scrolled nav is already
   covered by the per-page <style id="nav-scrolled"> block. */

/* nav, scrolled past #scroll — tablet and mobile */
.framer-2BqcN.framer-v-1h3d53s {
  background-color: rgba(0, 0, 0, .85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* nav, mobile menu open */
.framer-2BqcN.framer-v-xqjeaw {
  width: 100% !important;
  background-color: var(--token-259d8c78-fccd-4e6b-bbb0-32a9dcab750e, rgba(6, 5, 3, .75)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  --border-color: var(--token-aecd04de-bd30-4743-90e2-2b56d3d58e1b, rgba(255, 255, 255, .1)) !important;
}

.framer-2BqcN.framer-v-xqjeaw .framer-9t1ray {
  opacity: 1 !important;
}

/* burger turns into a cross */
.framer-oG402 .framer-xwg8km,
.framer-oG402 .framer-1e0yqhx {
  transition: transform .25s ease, top .25s ease;
}

.framer-oG402.framer-v-2rnmh5 .framer-xwg8km {
  transform: rotate(45deg) !important;
}

.framer-oG402.framer-v-2rnmh5 .framer-1e0yqhx {
  transform: rotate(-45deg) !important;
}

/* intro blocks: dimmed in the markup, staggered fade-in once the group
   reaches the middle of the viewport (the runtime drove this off a scroll variant) */
.framer-5Nig4 .framer-lang,
.framer-5Nig4 .framer-1amyo5f,
.framer-5Nig4 .framer-1es08lj,
.framer-5Nig4 .framer-sch1r2,
.framer-5Nig4 .vs-origin {
  transition: opacity .5s ease;
}

.framer-5Nig4.vs-intro-in .framer-lang,
.framer-5Nig4.vs-intro-in .framer-1amyo5f,
.framer-5Nig4.vs-intro-in .framer-1es08lj,
.framer-5Nig4.vs-intro-in .framer-sch1r2,
.framer-5Nig4.vs-intro-in .vs-origin {
  opacity: 1 !important;
}

.framer-5Nig4.vs-intro-in .framer-1amyo5f { transition-delay: .14s; }
.framer-5Nig4.vs-intro-in .framer-1es08lj { transition-delay: .28s; }
.framer-5Nig4.vs-intro-in .framer-sch1r2 { transition-delay: .42s; }
.framer-5Nig4.vs-intro-in .vs-origin { transition-delay: .56s; }

/* contact form status message */
form[hidden] {
  display: none !important;
}

.vs-form-status {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--token-c6de8ea4-3684-4c2f-917e-fc3d1879d6b0, rgba(255, 255, 255, .65));
}

.vs-form-status-success {
  color: var(--token-090acfc6-f7ee-4bf4-9b69-0b15cf2cb187, rgb(255, 243, 240));
  font-size: 16px;
}

.vs-form-status-error {
  color: #ff9a8a;
}

/* cookie banner */
.vs-cookie {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  width: calc(100% - 64px);
  max-width: 360px;
  padding: 20px;
  border-radius: 14px;
  background: var(--token-feab5ab7-d914-42dd-ad2d-73b5c8596806, rgba(23, 23, 23, .85));
  box-shadow: rgba(255, 255, 255, .05) 0 0 0 1px inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.vs-cookie p {
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--token-c6de8ea4-3684-4c2f-917e-fc3d1879d6b0, rgba(255, 255, 255, .65));
}

.vs-cookie a {
  color: var(--token-090acfc6-f7ee-4bf4-9b69-0b15cf2cb187, rgb(255, 243, 240));
  text-decoration: none;
}

.vs-cookie button {
  flex: none;
  appearance: none;
  border: none;
  padding: 10px;
  border-radius: 8px;
  background: #eee;
  color: #5e5e5e;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* scroll-enter reveal (was driven by the runtime's enter animations) */
.vs-enter {
  transition: opacity .6s ease, transform .6s ease;
}

.vs-enter-in {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .vs-enter { transition: none; }
}

/* ---- CTA panel contact form -------------------------------------------
   The homepage "Your next slab sale starts here" mockup holds a real form
   in its main panel. Self-contained: the Framer --framer-input-* token set
   that dresses the /contact form is defined on that page only. */

.vs-panel-formwrap { width: 100%; }

.vs-panel-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.vs-panel-form .vs-pf-row { display: flex; flex-direction: row; gap: 16px; width: 100%; }
.vs-panel-form .vs-pf-row > .vs-pf-field { flex: 1 1 0; min-width: 0; }

.vs-panel-form .vs-pf-field { display: flex; flex-direction: column; gap: 8px; }

.vs-panel-form .vs-pf-label {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 12px; line-height: 1.5; letter-spacing: .01em;
  color: rgba(255, 255, 255, .6);
}

.vs-panel-form input:not(.vs-pf-trap):not([aria-hidden="true"]),
.vs-panel-form textarea {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 13px; line-height: 1.5; color: var(--token-090acfc6-f7ee-4bf4-9b69-0b15cf2cb187, #fff3f0);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; width: 100%; padding: 0 12px; height: 40px;
  transition: border-color .18s ease, background-color .18s ease;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}

.vs-panel-form textarea {
  height: 88px; padding: 10px 12px; line-height: 1.45;
  resize: none; overflow-y: auto; white-space: break-spaces;
}

.vs-panel-form input::placeholder,
.vs-panel-form textarea::placeholder { color: rgba(255, 255, 255, .35); }

.vs-panel-form input:focus,
.vs-panel-form textarea:focus {
  outline: none; background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .38);
}

/* Chromium paints its own near-white autofill background; keep the dark fill. */
.vs-panel-form input:-webkit-autofill,
.vs-panel-form input:-webkit-autofill:hover,
.vs-panel-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--token-090acfc6-f7ee-4bf4-9b69-0b15cf2cb187, #fff3f0);
  -webkit-box-shadow: 0 0 0 1000px #191f25 inset;
  caret-color: #fff3f0;
}

/* Pill, matching the button language the mockup already uses. */
.vs-panel-form .vs-pf-submit {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--token-ef8ecd6d-5204-4f29-b3b7-2d4dc011513a, rgb(1, 16, 29));
  background: var(--token-792af9ed-53d8-45b2-94fd-014e7edc8f44, rgba(255, 255, 255, .8));
  border: 1px solid var(--token-090acfc6-f7ee-4bf4-9b69-0b15cf2cb187, rgb(255, 243, 240));
  border-radius: 768px; height: 40px; width: 100%; cursor: pointer;
  transition: opacity .18s ease;
}
.vs-panel-form .vs-pf-submit:hover { opacity: .88; }
.vs-panel-form .vs-pf-submit:disabled { opacity: .55; cursor: default; }

.vs-panel-form .vs-pf-trap { position: absolute; transform: scale(0); }

/* .vs-form-status inherits the Framer reset's sans-serif otherwise. */
.vs-panel-formwrap .vs-form-status {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  margin: 0; text-align: left;
}

/* The window is 30% shorter than Framer drew it (aspect 1.42105 / 0.7). Width is
   set by left/right, so the ratio is what moves the height: 676px -> 473px on
   desktop, 434px -> 303px on tablet. */
.framer-i9bx2u > .framer-wk89vv { aspect-ratio: 2.0301; }

/* The mockup bleeds past the page edge by design (.framer-wk89vv right:-272px),
   so the panel's right side is off-screen. Reserve that off-screen slice as
   padding, then centre the form in what is left, rather than moving the window.
   The wrap's right edge sits at 50vw + 806px, so the slice is 806px - 50vw. */
/* Doubled class: .framer-izj4da centres its children and is equally specific. */
.framer-izj4da.vs-panel-formwrap {
  place-content: center; align-items: center;
  padding-right: max(0px, 806px - 50vw); padding-bottom: 16px;
}
.vs-panel-form { max-width: 520px; }

/* The panel shrinks to 378px and shows only ~264px of that, so the form goes
   single-column and the labels go screen-reader-only to buy vertical room. */
@media (min-width: 810px) and (max-width: 1279.98px) {
  /* The wrap's right edge sits at 50vw + 610px here, so the slice is smaller. */
  .framer-izj4da.vs-panel-formwrap {
    padding-right: max(0px, 610px - 50vw); padding-bottom: 8px;
  }
  /* Visible panel width measures 0.5vw - 248px across this band, so track it. */
  .vs-panel-form { max-width: calc(50vw - 288px); gap: 10px; }
  .vs-panel-form .vs-pf-row { flex-direction: column; gap: 10px; }
  .vs-panel-form .vs-pf-field { gap: 0; }
  .vs-panel-form .vs-pf-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .vs-panel-form input:not(.vs-pf-trap):not([aria-hidden="true"]) { height: 34px; }
  .vs-panel-form textarea { height: 48px; }
  .vs-panel-form .vs-pf-submit { height: 34px; }
}

/* the two priorities: paired cards instead of a numbered list */
.vs-priorities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin: 34px auto 0;
  font-family: Inter, "Inter Placeholder", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #141414;
}

.vs-priority {
  --vs-accent: #6f9ee0;
  --vs-accent-ink: #a9c6ef;
  --vs-accent-soft: rgba(111, 158, 224, .14);
  --vs-accent-ring: rgba(111, 158, 224, .38);
  --vs-accent-glow: rgba(111, 158, 224, .55);
  position: relative;
  flex: 1 1 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 26px 32px;
  overflow: hidden;
  isolation: isolate;
  color: #f5f2ea;
  /* dark glass body inside an accent-tinted gradient border */
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--vs-accent-soft), transparent 60%) padding-box,
    linear-gradient(165deg, #1c2436 0%, #111725 100%) padding-box,
    linear-gradient(150deg, var(--vs-accent-ring), rgba(255, 255, 255, .06) 45%, var(--vs-accent-ring)) border-box;
  box-shadow: 0 30px 60px -32px rgba(8, 12, 22, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
}

.vs-priority-sell {
  --vs-accent: #e3b23c;
  --vs-accent-ink: #f0cd78;
  --vs-accent-soft: rgba(227, 178, 60, .16);
  --vs-accent-ring: rgba(227, 178, 60, .5);
  --vs-accent-glow: rgba(227, 178, 60, .55);
}

/* accent hairline along the top edge */
.vs-priority::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vs-accent), transparent);
}

/* one light sweep across each card when the intro block reveals */
.vs-priority::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

.vs-intro-in .vs-priority::after {
  animation: vs-priority-sheen 1.4s cubic-bezier(.4, 0, .2, 1) .55s both;
}

.vs-intro-in .vs-priority-sell::after { animation-delay: .75s; }

@keyframes vs-priority-sheen {
  to { transform: translateX(340%) skewX(-18deg); }
}

.vs-priority:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 64px -30px rgba(8, 12, 22, .75), 0 18px 50px -28px var(--vs-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.vs-priority-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: var(--vs-accent-ink);
  background: var(--vs-accent-soft);
  box-shadow: inset 0 0 0 1px var(--vs-accent-ring), 0 0 30px -6px var(--vs-accent-glow);
}

.vs-priority-mark svg {
  width: 24px;
  height: 24px;
}

.vs-priority-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vs-accent-ink);
}

.vs-priority-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media (max-width: 540px) {
  .vs-priority {
    flex-basis: 100%;
    max-width: 360px;
    padding: 26px 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-priority { transition: none; }
  .vs-priority:hover { transform: none; }
  .vs-intro-in .vs-priority::after { animation: none; }
}

/* ---- FAQ tab rail ------------------------------------------------------
   The rail's sticky wrapper ships 1px tall and relies on a definite parent
   height that the static column never gets, so the rail overlapped the
   Contact us card beneath it. Give the wrapper the rail's own height, the
   way the tablet breakpoint already does. */

.framer-4uFQz .framer-12xmfwf { flex: none; height: min-content; }

/* ---- full-bleed sections on very wide screens --------------------------
   Framer caps each section at 1600px (1920px for the hero), so past that
   width the page background showed as bands down both sides. Drop the cap
   so section backgrounds reach the viewport edges; the content inside each
   section keeps its own 1080px cap and stays centred. */

@media (min-width: 1601px) {
  #main section { max-width: none; }
}

/* ---- card-stack images at the tablet breakpoint ------------------------
   Framer pins the "what you get" cards to 720x480 on tablet, which leaves
   the image column at 352x464 (0.759) while every card screenshot is
   1092x1256 (0.869). object-fit: cover then shaved ~13% off both sides of
   the UI in the shot. Let the column's width follow the screenshot ratio
   and give the remaining width to the text. */

@media (min-width: 810px) and (max-width: 1279.98px) {
  #sell-more .framer-1r491ug,
  #sell-more .framer-rk65ng {
    flex: none;
    width: auto;
    height: 100%;
    aspect-ratio: 1092 / 1256;
  }
}

/* ---- nav language picker ------------------------------------------------
   A flag pill in the right-hand nav cluster that opens a flag list and drives
   the Google Translate element. Built by initLangPicker() in site.js. */

.vs-lang {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

.vs-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  background: rgba(23, 32, 48, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}

.vs-lang-pill:hover,
.vs-lang.is-open .vs-lang-pill {
  background: rgba(35, 48, 70, .92);
  border-color: rgba(255, 255, 255, .26);
}

.vs-lang-flag {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

.vs-lang-caret {
  width: 12px;
  height: 12px;
  opacity: .7;
  transition: transform .2s ease;
}

.vs-lang.is-open .vs-lang-caret { transform: rotate(180deg); }

.vs-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #1b2436;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8);
  max-height: min(78vh, 660px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.vs-lang.is-open .vs-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.vs-lang-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
}

.vs-lang-item:hover { background: rgba(255, 255, 255, .07); }

.vs-lang-item.is-active {
  color: #6f9ee0;
  font-weight: 600;
  background: rgba(111, 158, 224, .14);
}

/* The mobile nav cluster is tight; drop the code there. */
@media (max-width: 809.98px) {
  .vs-lang-code { display: none; }
}

/* Below 1280 the pill sits close to the right edge, so a left-aligned menu
   hangs past the nav -- it is visibility:hidden until opened, but it still
   widens the nav's scrollWidth. Anchor it to the right instead. */
@media (max-width: 1279.98px) {
  .vs-lang-menu { left: auto; right: 0; }
}

/* Google's widget injects a top banner and shifts <body>; neither is wanted. */
.skiptranslate,
#vs-translate-host { display: none !important; }
body { top: 0 !important; }

/* The nav's inner wrapper clips; lift it only while the menu is open. */
.framer-tk7xlw.vs-lang-open { overflow: visible; }

/* ---- nav CTA under translation ----------------------------------------
   Framer pins the "Book a Demo" container to 109px, which fits the English
   label exactly. Translated labels run to ~180px and were clipped by the
   link's overflow. Let the pill size to its own text; English is unchanged
   because 109px is what the label plus its padding already measures. */

.translated-ltr .framer-2BqcN .framer-vsguht-container,
.translated-rtl .framer-2BqcN .framer-vsguht-container {
  width: auto;
  min-width: 109px;
}

.translated-ltr .framer-2BqcN .framer-vsguht-container > a,
.translated-rtl .framer-2BqcN .framer-vsguht-container > a {
  width: auto !important;
  white-space: nowrap;
}

/* Caveat is a Latin-only handwriting face; Chinese, Arabic and Thai would
   fall back to whatever the system offers mid-sentence. Let those scripts run
   in the page face instead. */

html[lang="zh-CN"] .hero-caveat,
html[lang="ar"] .hero-caveat,
html[lang="fa"] .hero-caveat,
html[lang="hi"] .hero-caveat,
html[lang="th"] .hero-caveat {
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  padding-top: 0;
}

/* ---- nav right cluster ------------------------------------------------
   Framer pins the Login + CTA cluster to 244px. The language pill pushes it
   past that, and because the cluster is flex-end it spilled leftwards over
   the nav links. Let it size to its contents; the link row is flex:1 and
   gives way. */

.framer-2BqcN .framer-1gy7y3o { width: auto; }

/* Translated nav labels run longer than the English ones; tighten the link
   gap below 1440px so the row stops clipping (Turkish is the worst case). */

@media (min-width: 810px) and (max-width: 1439.98px) {
  .translated-ltr .framer-2BqcN .framer-13utme7,
  .translated-rtl .framer-2BqcN .framer-13utme7 { gap: 26px; }
}

/* ---- CRM cards: landscape screenshots in a portrait slot ---------------
   The stack's image slot is portrait (~0.869). The four CRM shots are
   landscape (1.20-1.53), so object-fit: cover would shave a third off
   their sides. Let the slot take the shot's own ratio and centre it. */

#sell-more .vs-wide .framer-1r491ug,
#sell-more .vs-wide .framer-rk65ng {
  background-color: transparent;
}

#sell-more .vs-wide .framer-1r491ug > .ssr-variant,
#sell-more .vs-wide .framer-rk65ng > .ssr-variant {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
}

#sell-more .vs-wide .framer-1aovpg7,
#sell-more .vs-wide .framer-1m0pk4b {
  flex: 1 0 0;
  height: auto;
  aspect-ratio: var(--vs-shot);
}

@media (min-width: 810px) and (max-width: 1279.98px) {
  #sell-more .vs-wide .framer-1r491ug,
  #sell-more .vs-wide .framer-rk65ng {
    flex: 1 0 0;
    width: 1px;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ---- hero language strip ----------------------------------------------
   A fixed 6-column grid left-aligns whatever is left over on the final row
   (17 flags = 6/6/5). Lay the flags out as a centring flex row instead and
   keep the sixths sizing, so full rows look identical and any short row
   centres itself however many languages there are. */

.framer-5Nig4 .framer-lang-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.framer-5Nig4 .framer-lang-flags img {
  width: calc((100% - 60px) / 6 - 0.02px);
  flex: none;
}

/* ---- footer link columns ----------------------------------------------
   The column heading sat 24px above the first link while the links sit
   16px apart, so the first gap read as larger than the rest. */

.framer-zbagcq.framer-zbagcq,
.framer-1rraqux.framer-1rraqux,
.framer-1lkirva.framer-1lkirva {
  row-gap: 16px;
}

/* ---- About: American-company provenance -------------------------------
   Last intro block: a US-flag locality badge above the SDSharp lines. */

.framer-5Nig4 .vs-origin {
  flex: none;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 32px 36px 28px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  color: #f5f2ea;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(227, 178, 60, .12), transparent 60%) padding-box,
    linear-gradient(165deg, #1c2436 0%, #111725 100%) padding-box,
    linear-gradient(150deg, rgba(227, 178, 60, .42), rgba(255, 255, 255, .06) 45%, rgba(227, 178, 60, .42)) border-box;
  box-shadow: 0 30px 60px -32px rgba(8, 12, 22, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* the same accent hairline the priority cards carry */
.vs-origin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e3b23c, transparent);
}

.vs-origin-copy {
  width: 100%;
}

/* smaller than the two paragraphs above: this is provenance, not a claim */
.framer-5Nig4 .vs-origin-copy h4.framer-text {
  --framer-font-size: 18px;
  --framer-line-height: 1.65em;
  --framer-text-color: rgba(245, 242, 234, .74);
}

/* the forced break only helps where the line actually fits */
@media (max-width: 1023px) {
  .vs-origin-copy br { display: none; }
}

.vs-origin-copy a.vs-origin-link {
  --framer-link-text-color: #f0cd78;
  --framer-link-text-decoration: none;
  font-weight: 500;
}

/* closing line, set off by two accent rules */
.vs-origin-standard {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  color: #e3b23c;
  font-family: Inter, "Inter Placeholder", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

.vs-origin-standard::before,
.vs-origin-standard::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 178, 60, .5));
}

.vs-origin-standard::after {
  background: linear-gradient(90deg, rgba(227, 178, 60, .5), transparent);
}

.vs-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: rgba(245, 242, 234, .82);
  font-family: Inter, "Inter Placeholder", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vs-origin-badge img {
  width: 24px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -1px;
}

@media (max-width: 479px) {
  .framer-5Nig4 .vs-origin {
    padding: 26px 20px 22px;
  }

  .vs-origin-badge {
    font-size: 11px;
    letter-spacing: .06em;
  }

  /* too narrow for rules either side; the line stands on its own */
  .vs-origin-standard {
    justify-content: center;
    font-size: 11px;
    letter-spacing: .08em;
  }

  .vs-origin-standard::before,
  .vs-origin-standard::after {
    display: none;
  }
}

/* ---- let translated text wrap -----------------------------------------
   Framer marks a text block either white-space: pre + width: auto (a
   single-line label, its box grows to the string) or white-space: pre-wrap +
   width: 100% (a paragraph that wraps). A longer translation therefore fits
   on its own, except where the label sits in a box of fixed width -- the
   mock-up rails below. Forcing pre-wrap on every block instead turned each
   label into a wrapping one, and because their boxes are shrink-to-fit they
   collapsed to the longest word, or for Chinese and Thai to one character.
   So leave white-space alone and only allow a long word to break. */

.translated-ltr .framer-text,
.translated-rtl .framer-text {
  overflow-wrap: break-word;
}

.translated-ltr [data-framer-component-type="RichTextContainer"],
.translated-rtl [data-framer-component-type="RichTextContainer"] {
  width: auto !important;
  max-width: 100%;
  min-width: 0;
}

/* The hero mock-up sits on a fixed 132px rail, so a long translated word
   ("Ausstellungsraum") cannot wrap inside it. Let those labels break mid-word
   rather than lose characters; widening the rail would distort the mock-up.
   Scoped to the mock-up: overflow-wrap: anywhere drops a box's min-content
   width to one character, which collapsed every pill and footer column on the
   page into a one-letter-per-line column. */

.translated-ltr .framer-g2WkH .framer-text,
.translated-rtl .framer-g2WkH .framer-text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}

/* Those label blocks are flex: 0 0 auto, so they never narrow and the wrap
   above never gets a chance to fire. Let text shrink inside its rail. Scripts
   without spaces (Thai) depend on this too. */

.translated-ltr [data-framer-component-type="RichTextContainer"],
.translated-rtl [data-framer-component-type="RichTextContainer"] {
  flex-shrink: 1;
}

/* ---- boxes Framer sized with width: min-content -----------------------
   Framer pins the eyebrow pills, the gold CTA and the footer columns to
   width: min-content, which equals the whole English string only because
   white-space: pre keeps it on one line. Once the text may wrap, min-content
   drops to the longest word and the box collapses -- "Agende uma Demo" came
   out one letter per line in a 12px button. Size them to their content
   instead. min-width leaves each breakpoint's own width rule in charge.
   Below 810px there is no room to grow, so the pills wrap and grow taller. */

@media (min-width: 810px) {
  .translated-ltr :is(.framer-1gbackj, .framer-1oszaj3, .framer-1n35c0f,
                      .framer-1uiucns, .framer-efr9v5, .framer-1lkirva,
                      .framer-2gawpk, .framer-vcnomg, .framer-gaqks3,
                      .framer-3ttqtb, .framer-1hcjtho, .framer-1imisdn,
                      .framer-wherim, .framer-z1s5bh, .framer-z7yhdb),
  .translated-rtl :is(.framer-1gbackj, .framer-1oszaj3, .framer-1n35c0f,
                      .framer-1uiucns, .framer-efr9v5, .framer-1lkirva,
                      .framer-2gawpk, .framer-vcnomg, .framer-gaqks3,
                      .framer-3ttqtb, .framer-1hcjtho, .framer-1imisdn,
                      .framer-wherim, .framer-z1s5bh, .framer-z7yhdb) {
    min-width: fit-content;
  }
}

/* The closing CTA heading is pinned to text-wrap: nowrap and sized to the
   English string, so "Ihr nachster Plattenverkauf" ran past its 344px column
   and was clipped. Let it balance across lines like every other heading. */

.translated-ltr #main .framer-jq8apq .framer-text,
.translated-rtl #main .framer-jq8apq .framer-text {
  --framer-text-wrap-override: balance;
  text-wrap: balance;
}

/* Both pills clip at a fixed height, so a translation that still needs two
   lines lost the second one. Let them grow instead. */

.translated-ltr :is(.framer-1uiucns, .framer-efr9v5),
.translated-rtl :is(.framer-1uiucns, .framer-efr9v5) { height: auto; }
.translated-ltr .framer-1uiucns,
.translated-rtl .framer-1uiucns { min-height: 30px; }
.translated-ltr .framer-efr9v5,
.translated-rtl .framer-efr9v5 { min-height: 48px; }

/* ...but the pill has 36px variants too -- the nav CTA is one. The 48px
   floor pushed it 12px out of its 36px slot, so the nav clipped its bottom
   edge and its label sat low against the rest of the cluster. */
.translated-ltr :is(.framer-v-ycy7bl, .framer-v-1vqtwt6).framer-efr9v5,
.translated-rtl :is(.framer-v-ycy7bl, .framer-v-1vqtwt6).framer-efr9v5 { min-height: 36px; }

/* ---- phone breakpoint (below 810) ------------------------------------
   The hero badge is a single-line pill sized by width: min-content, which is
   the whole English string. Portuguese measures 478px in a 342px column, so
   it bled off both edges of the screen. Let the pill take the column and wrap
   inside it -- centred, because a two-line pill otherwise reads ragged.
   Scoped to the hero badge's own wrapper, so the eight short section eyebrows
   keep shrink-wrapping to their label. */

@media (max-width: 809.98px) {
  .translated-ltr :is(.framer-1gbackj, .framer-1oszaj3),
  .translated-rtl :is(.framer-1gbackj, .framer-1oszaj3) {
    width: 100%;
  }

  .translated-ltr .framer-1gbackj :is(.framer-1wreg0p-container, .framer-1uiucns, .framer-1n35c0f),
  .translated-rtl .framer-1gbackj :is(.framer-1wreg0p-container, .framer-1uiucns, .framer-1n35c0f) {
    width: 100%;
    min-width: 0;
  }

  .translated-ltr .framer-1gbackj .framer-text,
  .translated-rtl .framer-1gbackj .framer-text {
    white-space: pre-wrap !important;
    --framer-text-alignment: center;
  }
}

/* The phone nav puts the wordmark, the language pill, the Login link and the
   hamburger in 342px. "Login" is 34px and fits; every translation is 75-110px
   and the label ran straight over the hamburger -- Turkish hid it almost
   entirely. Nothing here can give way: the wordmark is a fixed-width image
   that clips rather than scales, and the pill and hamburger are already at
   their minimum. Drop the label on phones instead; the hamburger menu carries
   Login as its last item, so the link is one tap away, and English keeps it
   because English fits. */

@media (max-width: 809.98px) {
  .translated-ltr .framer-2BqcN .framer-12wzvw3,
  .translated-rtl .framer-2BqcN .framer-12wzvw3 {
    display: none;
  }
}

/* ---- tablet breakpoint (810-1279) ------------------------------------
   Three boxes in this band are sized to the English string and clip what a
   translation adds. */

/* The "Sell More" cards are pinned to height: 480px here and their body block
   is flex: 1 0 0 with overflow: hidden, so it gets the leftover height and
   cuts the rest -- Italian lost its whole paragraph, German and Dutch ended
   mid-sentence. The card cannot size to its content instead: every box down
   to the text is flex-basis: 0, so height: auto collapses the card to 16px,
   and content-sizing the chain gives the four cards different heights, which
   breaks the sticky stack (they share top: 120px, so a shorter card stops
   covering the one beneath). A taller fixed card, the same for all four, is
   what is left. Italian is the worst of the sixteen and needs 566px. */

@media (min-width: 810px) and (max-width: 1279.98px) {
  .translated-ltr .framer-Xutvu :is(.framer-d07aw3, .framer-1wb6mxc, .framer-1nlqg8s),
  .translated-rtl .framer-Xutvu :is(.framer-d07aw3, .framer-1wb6mxc, .framer-1nlqg8s) {
    height: 600px;
  }
}

/* The footer's first column (logo + blurb) is flex: 1 0 0 beside the three
   link columns, which are flex: none and 120px apart in a row fixed at 720px.
   Every pixel a translated label gains comes out of that column: it fell to
   99px in German and 22px in Tagalog, clipping the 132px wordmark and slicing
   the paragraph into a one-word ribbon. The gap is whitespace tuned to the
   English labels, so hand some back -- 48px is what Framer's own phone
   breakpoint gives this group. From 1280px the row is 1080px and never runs
   short. */

@media (min-width: 810px) and (max-width: 1279.98px) {
  .translated-ltr .framer-2gawpk,
  .translated-rtl .framer-2gawpk {
    column-gap: 48px;
  }
}

/* The FAQ category pills are a sticky column, 224px wide here -- 176px of
   content between the 24px paddings -- and their label is white-space: pre
   inside an overflow: clip pill, so "Implementatie en ondersteuning" (239px)
   was sliced mid-word. Let the label wrap: the pill is height: min-content
   and the dark panel behind the group is inset -8px, so both follow a
   two-line pill, and the accordion beside it is taller either way. Widening
   the pill was the alternative, but the column is flex: 1 against the
   accordion's flex: 2, so it can only widen by stealing from the answers in
   every language. Centre the wrapped lines; the one-line labels already read
   as centred because their box shrink-wraps inside a centred pill. Scoped to
   the FAQ rail, not the pill component -- the same component is the "What you
   get" tab strip, whose 126px label box would only break words apart. */

@media (min-width: 810px) and (max-width: 1279.98px) {
  .translated-ltr .framer-12gfigy .framer-1hp9gbb .framer-text,
  .translated-rtl .framer-12gfigy .framer-1hp9gbb .framer-text {
    white-space: pre-wrap;
    --framer-text-alignment: center;
  }
}

/* The Core Features rail splits into four equal columns here, so each label
   gets a 126px box it cannot wrap in. The two right-to-left languages spell
   the acronym out -- Persian renders "Sales CRM" as 228px -- and because the
   fourth pill ends 45px from the edge, the overspill pushed the page itself
   33px wider than the viewport. Only the RTL pair: the Latin labels are single
   long words ("Vermoegensschutz") with nowhere to wrap, so letting them wrap
   would only break them mid-word. */

@media (min-width: 810px) and (max-width: 1279.98px) {
  .translated-rtl #features .framer-1hp9gbb {
    white-space: pre-wrap;
  }
}

/* The origin badge is a single-line pill sized for "SAN DIEGO, CALIFORNIA ·
   USA"; Turkish runs to 409px in a 382px column. Let it wrap at narrow
   widths once translated. */

.translated-ltr .vs-origin-badge,
.translated-rtl .vs-origin-badge {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* ---- "What you get": show only the four CRM cards ----------------------
   The original nine yard/ops cards stay in the markup but are hidden. */

#sell-more > div:not(.vs-wide):not(.framer-1jhm9fe) {
  display: none;
}

/* ---- FAQ category pills: phone backdrop -------------------------------
   The desktop and tablet copies wrap the three pills in a dark panel
   (.framer-13qvw2d-container, absolute, inset -8px). The phone copy omits
   that element, so the two inactive labels were white text on the light
   section background. Paint the same panel behind the group instead. */

@media (max-width: 809.98px) {
  .framer-12gfigy {
    position: relative;
  }

  .framer-12gfigy::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: 0;
    border-radius: 28px;
    background: var(--token-259d8c78-fccd-4e6b-bbb0-32a9dcab750e, rgba(0, 0, 0, 0.85));
    box-shadow: inset 0 0 0 1px var(--token-ef8ecd6d-5204-4f29-b3b7-2d4dc011513a, rgb(0, 0, 0));
  }

  .framer-12gfigy > * {
    position: relative;
    z-index: 1;
  }
}