/* Backlink.nl — all styling lives here, shared by every page.
   Values are measured from the Framer site (computed styles at 1440px and 390px).
   Sections: base · buttons · header (bar, nav, mega menus, mobile menu) · footer ·
   shared blocks · home · linkbuilding-uitbesteden · phone. */

@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("/fonts/fragment-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #1d1d1f;          /* headings */
  --muted: #757575;        /* hero subtitle, labels */
  --green: #12715b;        /* primary CTA, accents */
  --teal: #12766c;         /* "50+ merken", case subtitles */
  --green-deep: #0e3a29;   /* deep green accents */
  --navy: #1e2937;         /* secondary CTA, nav button */
  --forest: #1b3b37;       /* menu card copy */
  --yellow: #ffd706;       /* brand mentions accent */
  --dark: #212020;         /* dark sections */
  --red: #c2281d;          /* cross icons */
  --badge-bg: rgba(211, 227, 224, 0.63);
  --radius: 8px;
  --header-h: 72px;        /* nav */

  /* Page accent. Green by default; .theme-yellow (brand mentions pages) swaps it. */
  --accent: var(--green);
  --accent-ink: #fff;                     /* text on an accent button */
  --accent-icon: #dcfce5;                 /* arrow on an accent button */
  --accent-text: var(--green);            /* accent words in headings */
  --accent-hero: radial-gradient(54% 50% at 18.2% 45.9%, var(--green) 0%, #fff 100%);
  --accent-media: radial-gradient(100% 100% at 20.7% 79.8%, #a8cac2 0%, var(--green) 100%);
  --accent-shot: radial-gradient(109% 119% at 20.7% 76.9%, #b4d1ce 0%, rgba(18, 112, 90, 0.61) 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: "Satoshi", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; }

/* Accessibility: keyboard focus is always visible, the skip link appears on focus,
   and motion is switched off for visitors who ask for that. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: #fff; color: #000; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.3) 0 8px 24px -8px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.green { color: var(--accent-text); }
/* Accent green on the dark bands, lifted from #12715b to WCAG AA for large text (3:1). */
main:not(.theme-yellow) .dark .green { color: #137860; }
.teal { color: var(--teal); }

.icon {
  display: block;
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
  white-space: nowrap;
}
.btn-sm { height: 34px; font-size: 18px; }
/* Framer's hover state for every button: white fill, dark label and icon. */
.btn { transition: background-color .2s, color .2s; }
.btn:hover, .btn:hover .icon { background-color: #fff; color: #1d1d1f; }
.btn:hover .icon { background-color: transparent; }
.btn-green { background: var(--accent); color: var(--accent-ink); }
.btn-dark { background: var(--navy); }
.btn-black { background: #131313; }
.btn-green .icon { color: var(--accent-icon); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 27px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
  white-space: nowrap;
}
.pill-green { background: var(--green); color: #fff; }
.pill-yellow { background: var(--yellow); color: var(--navy); }

/* ---------- Header: nav, fixed to the top like Framer's ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
  padding: 0 20px;
  background: #fff;
}
.nav-logo { padding: 6px 10px; }
.nav-logo img { width: 36px; height: 33px; object-fit: cover; }
.nav-links { display: flex; gap: 30px; margin-left: -10px; list-style: none; }
.nav-link {
  display: block;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.nav-link:hover,
.has-mega:hover > .nav-link,
.has-mega:focus-within > .nav-link { text-decoration: underline; }
.nav-cta { margin-left: auto; }
.nav-toggle, .nav-burger, .mnav { display: none; }

/* Mega menus: positioned against the nav, open on hover or keyboard focus. */
.mega {
  position: absolute;
  left: 20px;
  top: 63px;
  display: flex;
  border-radius: 20px;
  background: #fafafa;
  box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
.mega-label {
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
}
.mega-title {
  display: block;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
}
.mega-list { display: flex; flex-direction: column; }
.mega-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.65px;
}
.mega-list .icon { width: 22px; height: 22px; }
.mega-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #fff;
}
.mega-card-media { position: relative; display: block; }
.mega-card-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.mega-card-media .pill { position: absolute; }
.mega-card-media .icon { width: 20px; height: 20px; }

/* Platform: two product cards + a link list. Panel 1148 wide. */
.mega-platform { width: 1148px; padding: 20px 20px 20px; gap: 40px; }
.mega-platform .mega-col { width: 361px; }
.mega-platform .mega-title { margin: 20px 0 28px; }
.mega-platform .mega-card { height: 313px; padding: 22px 20px 21px; }
.mega-card-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.65px; color: #000; }
.mega-card-text { margin-top: 14px; color: var(--forest); font-size: 16px; line-height: 17.6px; letter-spacing: -0.32px; }
.mega-platform .mega-card-media { height: 170px; margin-top: auto; }
.mega-platform .mega-card-media .pill { right: 21px; bottom: 16px; }
.mega-platform .mega-list { margin-left: 9px; padding-top: 10px; gap: 24px; }
.mega-platform .mega-label-gap { margin-top: 42px; }

/* Diensten: two service cards + two link lists. Panel 1284 wide. */
.mega-diensten { width: 1284px; top: 70px; padding: 20px 23px 89px; }
.mega-uitbesteden { padding-top: 6px; }
.mega-cards { display: flex; gap: 39px; margin-top: 25px; }
.mega-card-svc { width: 317px; padding: 20px; }
.mega-card-svc .mega-title { margin-top: 3px; }
.mega-card-svc .mega-card-media { width: 266px; height: 179px; margin-top: 21px; }
.mega-card-svc .mega-card-media .pill { right: 14px; bottom: 10px; }
.mega-card-caption { margin-top: 17px; white-space: nowrap; color: var(--forest); font-size: 18px; font-weight: 500; line-height: 26.08px; letter-spacing: -0.65px; }
.mega-diensten .mega-list { gap: 24px; }
.mega-diensten .mega-list .mega-label { margin-bottom: -2px; }
.mega-diensten .mega-list:nth-child(2) { margin-left: 56px; width: 303px; }

/* Resources: small list panel under its trigger. */
.has-mega-small { position: relative; }
.mega-resources { left: -110px; top: 43px; width: 300px; padding: 42px 40px 41px; }
.mega-resources .mega-list { gap: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: #000; color: #fff; }
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 60px 80px 40px;
}
.footer-cta > div { width: calc(50% - 5px); }   /* Framer: two equal halves, button right-aligned and centred */
.footer-kicker { font-size: 14.8px; font-weight: 700; line-height: 19px; letter-spacing: -0.24px; }
.footer-cta h2 { margin-top: 10px; font-size: 55.4px; font-weight: 700; line-height: 66.5px; letter-spacing: -1.62px; }
.footer-cols {
  display: grid;
  grid-template-columns: calc((100% - 100px) * 0.4 + 40px) repeat(3, minmax(0, 1fr));   /* Framer: about = 2 columns + 40, at every width */
  gap: 20px;
  padding: 80px;
}
.site-footer .footer-h { font-size: 22px; font-weight: 700; line-height: 34px; letter-spacing: -0.65px; }
.footer-about p { margin-top: 32px; color: #808089; font-size: 13.2px; font-weight: 500; line-height: 30.8px; }
.footer-links { margin-top: 32px; list-style: none; display: flex; flex-direction: column; gap: 10px; line-height: 21px; }
.footer-links a { color: #999; font-size: 15px; font-weight: 500; line-height: 21px; }
.footer-links:not(.footer-links-help) a { white-space: nowrap; }   /* Framer lets 'Linkbuilding uitbesteden' overflow at 810 */
.footer-links-help { gap: 16px; line-height: 18.4px; }
.footer-links-help a { font-size: 15.3px; line-height: 18.4px; }
.footer-contact { margin-top: 32px; font-style: normal; display: flex; flex-direction: column; gap: 10px; }
.footer-contact p { color: #808089; font-size: 15px; font-weight: 500; line-height: 35.2px; }
.footer-contact p:last-child { line-height: 35.2px; }
.footer-bottom { margin: 0 80px; padding: 34px 0 35px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.footer-bottom p { color: #808089; font-size: 15.3px; font-weight: 500; line-height: 30px; }
@media (min-width: 1441px) {   /* Framer keeps the footer in a 1280px container, centred, on wide screens */
  .footer-cta, .footer-cols { padding-right: calc(50% - 640px); padding-left: calc(50% - 640px); }
  .footer-bottom { margin: 0 calc(50% - 640px); }
}
.footer-bottom .footer-consent-bottom { display: none; }   /* phone only (≤809); larger screens keep it in the Help list */
/* Breakpoint-specific line breaks (Framer variants): br-ph only on phone, br-nph everywhere but phone */
@media (min-width: 810px) { .br-ph { display: none; } }
@media (max-width: 809px) { .br-nph { display: none; } }
@media (max-width: 1439px) {   /* Framer's footer below 1440: 20px sides, 4px more under the CTA */
  .br-xl { display: none; }   /* line breaks Framer only has in its 1440 variant */
  .footer-cta { padding: 60px 20px 44px; }
  .footer-cols { padding: 80px 20px; }
  .footer-bottom { margin: 0 20px; }
}

/* ---------- Shared blocks ---------- */
.icon-box {
  display: grid;
  place-items: center;
  width: 43px; height: 43px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
}
.icon-box .icon { width: 33px; height: 33px; }

.dark { position: relative; background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; }
.dark h2, .steps-sec h2, .faq h2, .lu-start h2, .lu-costs h2 {
  font-size: 36px;
  font-weight: 900;
  line-height: 36px;
}
.dark h2 { text-align: center; }
.dark-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- Home ---------- */
.top {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: -72px;         /* background starts at the top of the nav, as in Framer */
  padding-top: 72px;
  background: #fff;
}
.top::before,
.top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.top::before {
  background:
    radial-gradient(50% 50% at 91.4% 95.5%, rgba(255, 217, 3, 0.14) 0%, rgba(255, 255, 255, 0.15) 100%),
    linear-gradient(#fff 0%, rgba(18, 112, 90, 0.37) 100%);
}
.top::after {
  background: url("/media/hero-grid.webp") center / cover no-repeat;
  opacity: 0.38;
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 78px 20px 0;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--badge-bg);
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
  line-height: 26.08px;
  letter-spacing: -0.65px;
}
.hero h1 {
  max-width: 973px;
  margin-top: 32px;
  color: var(--ink);
  font-size: 60px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2.32px;
}
.hero-sub {
  max-width: 681px;
  margin-top: 32px;
  color: var(--muted);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.88px;
}
.hero-cta { display: flex; gap: 10px; margin-top: 32px; }
.hero-shot {
  width: 907px;
  max-width: 100%;
  height: 409px;
  margin-top: 107px;
  padding: 7px 9px 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.hero-shot video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

/* ---------- Linkbuilding uitbesteden ---------- */
.split-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 776px;
  padding: 40px 20px;
  overflow: hidden;
  background: var(--accent-hero);
}
.split-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/media/lu-hero-grid.webp") center / cover no-repeat;
  opacity: 0.89;
}
.split-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 7px;
}
.split-hero-copy { width: 511px; }
.split-hero h1 {
  font-size: 60px;
  font-weight: 900;
  line-height: 54px;
  letter-spacing: -2.32px;
}
.split-hero-copy p {
  max-width: 505px;
  margin: 16px 0 18px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.72px;
}
.split-hero-visual {
  position: relative;
  width: 456px;
  margin: 0 35px 0 0;
  aspect-ratio: 491 / 519;
}
.split-hero-visual img,
.split-stack {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow:
    rgba(18, 118, 108, 0.41) 0 0.6px 0.84px -0.67px,
    rgba(18, 118, 108, 0.45) 0 2.29px 3.2px -1.33px,
    rgba(18, 118, 108, 0.6) 0 10px 14px -2px;
}
.split-hero-visual img { width: 100%; height: 100%; object-fit: cover; transform: rotate(3deg); }
.split-stack-1 { background: var(--ink); transform: translate(-6px, 8px) rotate(-1deg) scale(0.97, 1); }
.split-stack-2 { background: var(--forest); transform: translate(-10px, -6px) rotate(-2deg) scale(0.9, 0.97); }

.brandline { padding: 23px 20px 48px; text-align: center; }
.brandline p { font-size: 24px; font-weight: 900; line-height: 28.8px; letter-spacing: -0.96px; }

/* Pains */
.lu-pains { padding: 96px 20px 123px; }
.lu-pains .dark-glow { background: radial-gradient(50% 50% at 38.8% 61.6%, var(--green) 0%, var(--dark) 100%); }
.dark-sub {
  max-width: 721px;
  margin: 16px auto 0;
  color: #f5eded;
  font-size: 18px;
  line-height: 21.6px;
  text-align: center;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 605px);
  justify-content: center;
  gap: 20px 15px;
  margin-top: 42px;
}
.pain {
  min-height: 256px;
  padding: 38px 32px;
  border-radius: 10px;
  background: rgba(28, 28, 28, 0.3);
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 15px -7px;
}
.pain h3 { margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; }
.pain p { margin-top: 9px; color: #ababab; font-size: 20px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; }

/* 6 steps: sticky stacking cards */
.steps-sec { padding: 120px 20px 120px; }
.steps-sec h2 { text-align: center; }
.steps { width: 1292px; max-width: 100%; margin: 42px auto 0; }
.step {
  position: sticky;
  top: 150px;
  display: grid;
  grid-template-columns: 666px 1fr;
  height: 499px;
  margin-bottom: 150px;
  border-radius: 12px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 19px -11px;
  overflow: hidden;
}
.step:nth-child(3), .step:nth-child(4) { top: 100px; }   /* Framer uses 150/150/100/100/150 */
.step:last-child { position: relative; top: 0; margin-bottom: 0; }
.step-flip { grid-template-columns: 626px 1fr; }
.step-flip .step-media { order: -1; }
.step-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 20px;
}
.step-head { display: flex; align-items: flex-start; gap: 25px; padding: 0 20px; }
.step-no { flex: none; display: flex; gap: 4px; font-size: 24px; line-height: 28.8px; }
.step-no i { font-style: normal; color: #999; }
.step-head h3 { font-size: 24px; font-weight: 900; line-height: 28.8px; }
.step-body { padding: 20px; }
.step-body p, .step-body li { font-size: 20px; line-height: 24px; }
.step-body p + p { margin-top: 24px; }
.step-body ul { margin-top: 24px; padding-left: 27px; }
.step-body .btn { margin-top: 25px; }
.step-media {
  display: grid;
  place-items: center;
  background: var(--accent-media);
}
.step-media img { object-fit: cover; }
.r20 { border-radius: 20px; }
.r10 { border-radius: 10px; }
.r10t { border-radius: 10px 10px 0 0; }

/* Comparison */
.lu-compare { padding-top: 92px; }
.compare-wrap { position: relative; isolation: isolate; margin-top: 32px; padding: 60px 20px; }
.compare-wrap .dark-glow { background: radial-gradient(50% 50% at 32.9% 50%, var(--green) 0%, var(--dark) 100%); }
.compare-grid { display: grid; grid-template-columns: repeat(2, 575px); justify-content: center; gap: 10px; }
.compare {
  padding: 33px 32px 46px;
  border-radius: 10px;
  background: rgba(18, 18, 18, 0.58);
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.compare h3 { font-size: 26px; font-weight: 700; line-height: 26px; letter-spacing: -1.04px; }
.compare dl { margin-top: 38px; }
.compare dt, .compare dd { font-size: 18px; font-weight: 700; line-height: 21.6px; letter-spacing: -0.72px; }
.compare dt { color: #828282; }   /* Framer's #757575, lifted to WCAG AA (4.5:1) on #181818 */
.compare dd {
  position: relative;
  min-height: 24px;
  margin: 10px 0 30px;
  padding-top: 1px;
  padding-left: 34px;
}
.compare dd:last-child { margin-bottom: 0; }
.compare dd::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 24px; height: 24px;
  margin-top: -12px;
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.compare-bad dd::before { background: var(--red); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.25'/%3E%3Cpath d='M9.75 9.75l4.5 4.5M14.25 9.75l-4.5 4.5'/%3E%3C/svg%3E"); }
.compare-good dd::before { background: var(--green); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.25'/%3E%3Cpath d='M9.75 12.75l.43.92c.35.74 1.37.78 1.77.08l2.3-4'/%3E%3C/svg%3E"); }

/* Start in 3 steps */
.lu-start { padding: 150px 20px; }
.start-card {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 40px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 18px -8px;
}
.start-list { list-style: none; margin-top: 73px; display: flex; flex-direction: column; gap: 50px; }
.start-list li { display: flex; gap: 40px; }
.start-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.38px;
}
.start-list :is(h3, h4) { color: var(--ink); font-size: 22px; font-weight: 700; line-height: 27px; letter-spacing: -0.65px; }
.start-list p { margin-top: 10px; color: var(--muted); font-size: 18px; line-height: 21.6px; }

/* Cases */
.lu-cases { padding-top: 68px; }
.cases-wrap { position: relative; isolation: isolate; margin-top: 23px; padding: 71px 20px 85px; }
.cases-wrap .dark-glow { background: radial-gradient(65% 50% at 32.4% 50%, #10614e 0%, var(--dark) 100%); }
.case-grid { display: grid; grid-template-columns: repeat(3, 323px); justify-content: center; gap: 15px; }
.case {
  min-height: 502px;
  padding: 32px;
  border-radius: 10px;
  background: rgba(41, 41, 41, 0.3);
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.case h3 { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; }
.case-sub { min-height: 41.6px; margin-top: 12px; color: var(--teal); font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.case-block { margin-top: 15px; font-size: 16px; line-height: 17.6px; }
.case-block:first-of-type { min-height: 123px; }
.case-block strong { display: block; font-weight: 700; }
.cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1000px;
  max-width: 100%;
  min-height: 67px;
  margin: 10px auto 0;
  padding: 0 32px;
  border-radius: 10px;
  background: #000;
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.cta-bar p { font-size: 18px; font-weight: 700; line-height: 18px; letter-spacing: -0.72px; }

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: 312px 1fr;
  width: 957px;
  max-width: 100%;
  margin: 0 auto;
  padding: 89px 0;
}
.faq-list { display: flex; flex-direction: column; gap: 16px; padding: 0 36px; }
.faq details { border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; background: #fff; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: -0.18px;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: transform .2s;
}
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p { padding: 6px 18px 14px; font-size: 16px; font-weight: 500; line-height: 20.8px; letter-spacing: -0.16px; }

/* Costs */
.lu-costs { padding: 40px 20px; }
.costs-card {
  display: grid;
  grid-template-columns: 582px 1fr;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 18px -8px;
}
.costs-intro { padding: 60px; }
.costs-intro h2 { max-width: 462px; }
.costs-intro p { max-width: 462px; margin: 31px 0; font-size: 18px; line-height: 21.6px; }
.costs-tiles {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-radius: 0 10px 10px 0;
  background: radial-gradient(75% 86% at 70.3% 78.2%, var(--teal) 0%, #88b8ac 100%);
}
.costs-col { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.costs-col-offset { padding-top: 50px; }
.tile {
  padding: 30px;
  border-radius: 10px;
  background: #fff;
  box-shadow: rgba(29, 25, 122, 0.1) 0 6px 30px 0;
}
.tile h3 { margin-top: 25px; color: var(--ink); font-size: 19.4px; font-weight: 700; line-height: 29.8px; letter-spacing: -0.57px; }
.tile p { margin-top: 15px; color: #616161; font-size: 14px; line-height: 16.8px; }

/* SEO text */
.seo-text {
  display: grid;
  grid-template-columns: repeat(2, 544px);
  justify-content: center;
  gap: 65px;
  padding: 202px 20px 200px;
}
.prose h3 { font-size: 20px; font-weight: 900; line-height: 24px; }
.prose h3 + p { margin-top: 10px; }
.prose p, .prose li { font-size: 18px; line-height: 21.6px; }
.prose p + p { margin-top: 21.6px; }
.prose p + h3 { margin-top: 29px; }
.prose ul { margin: 21px 0 21.6px; padding-left: 24px; }
.prose a { color: var(--green); text-decoration: underline; }

/* ---------- Tablet: let the fixed desktop widths breathe ---------- */
@media (max-width: 1360px) {
  .mega-platform, .mega-diensten { width: calc(100vw - 40px); }
  .step { grid-template-columns: 1.06fr 1fr; }
  .step-flip { grid-template-columns: 1fr 1.06fr; }
  .step-media img { max-width: 85%; height: auto !important; }
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 605px)); }
}
@media (max-width: 1250px) {
  .compare-grid { grid-template-columns: repeat(2, minmax(0, 575px)); }
  .costs-card { grid-template-columns: 1fr 1fr; }
  .seo-text { grid-template-columns: repeat(2, minmax(0, 544px)); }
  .split-hero-inner { gap: 40px; }
  .split-hero-copy { flex: 1; width: auto; }
}

/* ---------- Phone (Framer breakpoint < 810px) ---------- */
/* Framer swaps the header to its compact variant (burger menu, stacked bar) below 1200px,
   while page sections keep their tablet layout until 810px. */
@media (max-width: 1199px) {
  :root { --header-h: 52px; }

  /* Nav + mobile menu */
  .nav { height: 52px; padding: 0 16px; justify-content: space-between; }
  .nav-logo { padding: 6px 8px; margin-left: 0; }
  .nav-logo img { width: 30px; height: 28px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px; height: 40px;
    padding: 0 12px;
    cursor: pointer;
  }
  .nav-burger span { height: 2px; background: #000; border-radius: 10px; transition: transform .2s; }
  .nav-toggle:checked + .nav-burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .mnav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 12px 36px 24px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  }
  .nav-toggle:checked ~ .mnav { display: block; }
  .mnav a, .mnav summary { display: flex; align-items: center; min-height: 49.5px; }
  .mnav-top { font-size: 18px; font-weight: 700; letter-spacing: -0.65px; }
  .mnav summary { justify-content: space-between; list-style: none; cursor: pointer; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after {
    content: "";
    width: 16px; height: 16px;
    margin-right: 4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s;
  }
  .mnav details[open] > summary::after { transform: rotate(180deg); }
  .mnav-sub > summary { color: var(--muted); font-size: 18px; font-weight: 500; letter-spacing: -0.65px; }
  .mnav-sub > a, .mnav-plain > a { min-height: 40px; padding-left: 16px; color: #000; font-size: 17px; font-weight: 500; letter-spacing: -0.5px; }
  .mnav .mnav-cta { display: inline-flex; min-height: 0; height: 34px; margin-top: 12px; padding: 0 20px; font-size: 18px; }
}
@media (max-width: 809px) {
  :root { --header-h: 52px; }

  /* Buttons scale down like Framer's phone variant */
  .btn-sm { height: 27px; padding: 0 14px; font-size: 16px; }

  /* Footer */
  .footer-cta { flex-direction: column; gap: 20px; padding: 60px 20px 40px; text-align: center; }
  .footer-cta > div { width: 100%; }
  .footer-cols { grid-template-columns: 1fr; gap: 33px; padding: 48px 20px 41px; }   /* Framer's phone footer is one column */
  .footer-about { margin-bottom: -13px; }
  .footer-consent-help { display: none; }   /* moves to the bottom line, see .footer-consent-bottom */
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; }
  .footer-bottom .footer-consent-bottom { display: block; color: #808089; line-height: 30px; }

  /* Home */
  .hero { padding: 59px 39px 0; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 15px; letter-spacing: -0.6px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { height: 34px; font-size: 18px; }
  .hero-shot { width: 246px; margin-top: 33px; padding: 12px 10px 0; }
  .hero-shot video { aspect-ratio: 9 / 16; }

  /* Linkbuilding uitbesteden */
  .split-hero { display: block; min-height: 0; padding: 150px 40px 127px; }
  .split-hero-inner { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .split-hero h1 { font-size: 34px; line-height: 32.3px; }
  .split-hero-copy p { margin: 36px 0 14px; }
  .split-hero-visual { width: 263px; margin: 64px auto 0; }

  .brandline { padding: 4px 15px 48px; }
  .brandline p { font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }

  .dark h2, .steps-sec h2 { font-size: 36px; line-height: 36px; }
  .lu-pains { padding: 38px 29px 50px; }
  .lu-pains .dark-glow { background: radial-gradient(56% 50% at 50% 54.8%, #073d30 0%, var(--dark) 100%); }
  .pain-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 67px; }
  .pain { min-height: 0; padding: 0 32px 30px; background: rgba(28, 28, 28, 0.3); }
  .pain p { font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }

  .steps-sec { padding: 64px 33px 64px; }
  .steps { margin-top: 42px; }
  .step, .step:nth-child(n) { display: block; top: 190px; height: auto; margin-bottom: 120px; }
  .steps .step:last-child { top: 0; margin-bottom: 0; }
  .step-media { display: none; }
  .step-text { padding: 40px 20px; gap: 40px; }
  .step-head { padding: 0; gap: 18px; }
  .step-no { font-size: 18px; line-height: 21.6px; }
  .step-head h3 { font-size: 18px; line-height: 21.6px; }
  .step-body { padding: 0; }

  .lu-compare { padding-top: 117px; }
  .lu-compare h2 { padding: 0 31px; font-size: 24px; font-weight: 700; line-height: 24px; }
  .compare-wrap { margin-top: 10px; padding: 60px 29px; }
  .compare-wrap .dark-glow { background: radial-gradient(100% 50% at 0 49.3%, #104237 0%, var(--dark) 100%); }
  .compare-grid { grid-template-columns: 1fr; gap: 10px; }
  .compare h3 { font-size: 24px; line-height: 24px; letter-spacing: 0; }
  .compare dd { margin-bottom: 26px; }

  .lu-start { padding: 80px 29px; }
  .lu-start h2 { font-size: 28px; line-height: 28px; }
  .start-list p { font-size: 16px; line-height: 20px; }
  .start-card { padding: 40px 29px; }
  .start-list { margin-top: 48px; gap: 40px; }
  .start-list li { gap: 18px; }

  .lu-cases { padding-top: 100px; }
  .lu-cases h2 { padding: 0 40px; text-align: left; font-size: 24px; line-height: 26px; }
  .cases-wrap { padding: 60px 29px 90px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .case { min-height: 0; }
  .case h3 { font-size: 16px; line-height: 20px; letter-spacing: -0.3px; }
  .case-block:first-of-type { min-height: 0; }
  .case-block + .case-block { margin-top: 32px; }
  .cta-bar { flex-direction: column; justify-content: center; gap: 16px; padding: 24px 32px; text-align: center; }
  .cta-bar p { font-size: 16px; line-height: 17px; }

  .faq { grid-template-columns: 1fr; padding: 120px 0 60px; }
  .faq h2 { text-align: center; font-size: 24px; line-height: 26px; margin-bottom: 48px; }
  .faq-list { padding: 0 36px; gap: 16px; }
  .faq summary { min-height: 74px; font-size: 16px; font-weight: 500; line-height: 22px; }

  .lu-costs { padding: 60px 29px; }
  .costs-card { grid-template-columns: 1fr; }
  .costs-intro { padding: 50px 21px 60px; }
  .costs-intro h2 { font-size: 28px; line-height: 26px; }
  .costs-intro p { font-size: 18px; margin: 30px 0; }
  .costs-tiles { flex-direction: column; padding: 20px 39px; border-radius: 0 0 10px 10px; }
  .costs-col-offset { padding-top: 0; }

  .seo-text { grid-template-columns: 1fr; gap: 40px; padding: 60px 39px 80px; }
  .prose h3 { font-size: 24px; line-height: 24px; }
  .prose h3 + p { margin-top: 24px; }
}

/* ================================================================
   Shared page components (used by the home and the landing pages)
   ================================================================ */
.d-only { display: inline; }
.m-only { display: none; }
/* Tablet-only copy (Framer's 810-1199 variant): .t-only is aria-hidden and shown on tablet;
   .nt-only stays readable for screen readers there but is visually hidden. */
.t-only { display: none; }
@media (min-width: 810px) and (max-width: 1199px) {
  .t-only { display: inline; }
  .nt-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
img.contain { object-fit: contain; }
.btn-yellow { background: #ffd802; color: #000; }
.btn-forest { background: var(--forest); color: #d3e4e1; }
.sec-sub { max-width: 960px; margin: 30px auto 0; font-size: 18px; line-height: 21.6px; text-align: center; }
.prose a.plain { text-decoration: none; }
.prose h3.gap-lg { margin-top: 52px; }

/* A dark band whose lower part carries a radial green glow. */
.glow-wrap { position: relative; isolation: isolate; }

/* Brand logos with an endless marquee. */
.brands { padding: 42px 0 48px; text-align: center; }
.brands-title { padding: 0 20px; font-size: 24px; font-weight: 900; line-height: 28.8px; letter-spacing: -0.96px; }
.marquee {
  margin-top: 49px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-set { display: flex; align-items: center; gap: 100px; height: 77px; padding: 0 50px; list-style: none; }
.marquee-set img { display: block; object-fit: cover; }
.marquee-set img.contain { object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Offer: intro card + backlinks + brand mentions. */
.home-offer { padding-top: 102px; }
.home-offer h2 { max-width: 723px; margin: 0 auto; }
.home-offer .dark-sub { margin-top: 18px; }
.home-offer .glow-wrap { margin-top: 5px; padding: 59px 20px 58px; }
.home-offer .dark-glow { background: radial-gradient(50% 50% at 32.9% 50%, var(--green) 0%, var(--dark) 100%); }
.offer-grid { display: grid; grid-template-columns: 278px 426px 426px; justify-content: center; gap: 10px; }
.offer {
  display: flex;
  flex-direction: column;
  min-height: 449px;
  padding: 32px;
  border-radius: 10px;
  background: rgba(18, 18, 18, 0.58);
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.offer h3 { font-size: 26px; font-weight: 700; line-height: 26px; letter-spacing: -1.04px; }
.offer p { margin-top: 70px; font-size: 18px; line-height: 19.8px; }
.offer .btn { align-self: flex-start; margin-top: auto; }
.offer-intro { background: rgba(18, 18, 18, 0.56); }
.offer-intro h3 { margin-top: -3px; font-weight: 900; }
.offer-intro p { margin-top: 30px; }
.check-list { margin-top: 33px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.check-list li {
  position: relative;
  min-height: 24px;
  padding: 1px 0 0 34px;
  font-size: 18px;
  font-weight: 700;
  line-height: 21.6px;
  letter-spacing: -0.72px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 12.867l2.59 3.547c.812 1.112 2.478 1.09 3.261-.042L18.25 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 12.867l2.59 3.547c.812 1.112 2.478 1.09 3.261-.042L18.25 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offer-yellow .check-list li::before { background: #ffd802; }
.cta-bar-wide { width: 1150px; margin-top: 10px; background: rgba(0, 0, 0, 0.6); }

/* Steps: variants on top of the .steps component. */
.home-steps { padding-top: 133px; }
.home-steps .steps { margin-top: 120px; }
.step-media-bottom { place-items: end center; }

/* "Een stuk makkelijker": feature cards with stacked screenshots. */
.home-easy { padding-top: 82px; }
.home-easy .dark-sub { margin-top: 26px; }
.home-easy .glow-wrap { margin-top: 51px; padding: 17px 20px 85px; }
.home-easy .dark-glow { background: radial-gradient(50% 50% at 65.8% 62.2%, var(--green) 0%, var(--dark) 100%); }
.easy-grid {
  display: grid;
  grid-template-columns: 388px 388px 345px;
  grid-template-rows: 414px 334px;
  justify-content: center;
  gap: 14px 15px;
}
.easy {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 33px;
  border-radius: 10px;
  background: rgba(82, 82, 82, 0.3);
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.easy h3 { font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; }
.easy p { margin-top: 9px; font-size: 16px; line-height: 17.6px; }
.easy-wide { grid-column: 1 / 3; }
.easy-side { grid-column: 3; grid-row: 1 / 3; background: rgba(18, 18, 18, 0.58); }
.easy-side-media { display: grid; place-items: center; height: 479px; }
.easy-side-media img { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px; }
.easy-side h3 { margin-top: 30px; line-height: 24px; }
.easy-side p { margin-top: 23px; }
.easy-side .btn { align-self: flex-start; margin-top: 31px; }
.shot {
  position: relative;
  height: 163px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 10px;
  background: var(--accent-shot);
  box-shadow: rgba(0, 0, 0, 0.14) 0 1px 2px;
}
.shot > * { position: absolute; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px; }
.shot-back { background: #000; }
.shot-mid { background: var(--green); }
.shot-aanbod > * { left: 39px; width: 245px; height: 113px; border-radius: 10px 10px 0 0; }
.shot-aanbod .shot-back { top: 29px; }
.shot-aanbod .shot-mid { top: 38px; background: linear-gradient(var(--green) 0%, #ababab 100%); }
.shot-aanbod img { top: 48px; object-fit: cover; }
.shot-bestellen .shot-back { left: 99px; top: 30px; width: 151px; height: 132px; }
.shot-bestellen .shot-mid { left: 95px; top: 35px; width: 151px; height: 132px; }
.shot-bestellen img { left: 85px; top: 40px; }
.shot-performance { height: 165px; }
.shot-performance .shot-back { left: 182px; top: 26px; width: 363px; height: 180px; }
.shot-performance .shot-mid { left: 193px; top: 38px; width: 363px; height: 180px; }
.shot-performance img { left: 200px; top: 49px; object-fit: cover; }

/* AI search case teaser. */
.ai-case { padding: 111px 20px 87px; text-align: center; }
.ai-case h2 { font-size: 36px; font-weight: 900; line-height: 36px; }
.ai-case .sec-sub { max-width: 754px; margin-top: 10px; }
.case-teaser {
  display: grid;
  grid-template-columns: 542px 394px;
  width: 936px;
  max-width: 100%;
  height: 449px;
  margin: 50px auto 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.13) 0 1px 22px -12px;
  text-align: left;
}
.case-teaser-text { padding: 32px; border-radius: 10px 0 0 10px; box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px; }
.case-teaser h3 { font-size: 30px; font-weight: 700; line-height: 30px; letter-spacing: -1.2px; }
.case-teaser-text img { width: 182px; height: 96px; }
.case-teaser-text p { margin-top: 20px; font-size: 16px; line-height: 17.6px; }
.case-teaser-text .btn { margin-top: 63px; }
.case-teaser-img { width: 100%; height: 449px; object-fit: cover; border-radius: 0 10px 10px 0; }

/* Popular categories. */
.cats { padding: 119px 20px; }
.cats .dark-glow { background: radial-gradient(50% 50% at 38.8% 61.6%, var(--green) 0%, var(--dark) 100%); }
.cats-head { display: flex; align-items: center; justify-content: space-between; width: 1224px; max-width: 100%; margin: 0 auto; }
.cats-head h2 { font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; text-align: left; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 295px);
  justify-content: center;
  gap: 10px 15px;
  margin-top: 42px;
  list-style: none;
}
.cat-grid li {
  height: 173px;
  padding: 32px;
  border-radius: 10px;
  background: rgba(28, 28, 28, 0.3);
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 15px -7px;
}
/* Framer hover on linked tiles (countries): darker tile, grey link. */
.cat-grid li { transition: background-color .2s; }
.cat-grid li:has(a):hover { background: rgba(3, 3, 3, 0.21); }
.cat-grid li:has(a):hover a { color: #757575; }
.cat-grid h3 { margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; }
.cat-grid p { margin-top: 9px; color: #ababab; font-size: 16px; font-weight: 500; line-height: 17.6px; letter-spacing: -0.32px; }

.home-seo { padding: 120px 20px; }
.home-faq { padding: 100px 0; }

@media (max-width: 1360px) {
  .easy-grid { grid-template-columns: minmax(0, 388px) minmax(0, 388px) minmax(0, 345px); }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 295px)); }
  .offer-grid { grid-template-columns: minmax(0, 278px) minmax(0, 426px) minmax(0, 426px); }
  .cta-bar-wide { width: auto; }
  .shot-performance > * { left: 50%; margin-left: -182px; }
}

/* Tablet (Framer's 810px variant of these pages runs up to 1199px). */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero { padding-top: 63px; }
  .hero-sub { max-width: none; font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }
  .hero-shot { width: 93%; margin-top: 135px; padding: 8px 9px 0; }
  .top + .brands { padding: 103px 0 10px; }
  .top + .brands .marquee { margin-top: 10px; }
  .top + .brands .marquee-set { height: 154px; }

  .home-offer .glow-wrap { margin-top: 4px; padding: 21px 5%; }
  .offer-grid { grid-template-columns: 1fr 251px 251px; }
  .offer-intro h3 { margin-top: 0; }
  .offer-intro p { margin-top: 33px; }
  .offer p { font-size: 14px; line-height: 15.4px; }
  .offer .check-list { height: 92px; }   /* Framer pins the text below the list at the same y in both cards */
  .offer .check-list li { display: flex; align-items: center; padding-top: 0; font-size: 14px; line-height: 16.8px; }

  /* Steps, cats, ai-case, faq: home (.top) and backlinks/brand mentions (.feat-sec) only. */
  :is(.top, .feat-sec) ~ .home-steps .step { top: 150px; height: 400px; grid-template-columns: 468fr 428fr; }
  :is(.top, .feat-sec) ~ .home-steps .step-flip { grid-template-columns: 428fr 468fr; }
  :is(.top, .feat-sec) ~ .home-steps .step:last-child { top: 0; }
  :is(.top, .feat-sec) ~ .home-steps .step-head { gap: 12px; }
  :is(.top, .feat-sec) ~ .home-steps .step-no { font-size: 20px; line-height: 24px; }
  :is(.top, .feat-sec) ~ .home-steps .step-head h3 { font-size: 18px; line-height: 21.6px; }
  :is(.top, .feat-sec) ~ .home-steps .step-body { display: flex; flex-direction: column; gap: 25px; }
  :is(.top, .feat-sec) ~ .home-steps .step-body .btn { align-self: flex-start; margin-top: 0; }
  :is(.top, .feat-sec) ~ .home-steps { padding-top: 136px; }
  :is(.top, .feat-sec) ~ .home-steps h2 { max-width: 382px; margin: 0 auto; font-size: 40px; line-height: 48px; }
  :is(.top, .feat-sec) ~ .home-steps .sec-sub { max-width: 704px; }
  :is(.top, .feat-sec) ~ .home-steps .steps { width: auto; margin: 121px 42px 0; }
  :is(.top, .feat-sec) ~ .home-steps .step-media img { max-width: none; height: auto !important; }
  :is(.top, .feat-sec) ~ .home-steps .step:nth-child(1) .step-media img { width: 75%; }
  :is(.top, .feat-sec) ~ .home-steps .step:nth-child(2n) .step-media img { width: 50%; }
  :is(.top, .feat-sec) ~ .home-steps .step:nth-child(3) .step-media img { width: 85%; }

  .top ~ .home-easy h2 { max-width: 677px; margin: 0 auto; }
  .top ~ .home-easy .glow-wrap { margin-top: 46px; padding: 35px 15px 120px; }
  .top ~ .home-easy .easy-grid { grid-template-columns: 242.5px 242.5px 1fr; grid-template-rows: 516px 364px; gap: 15px; }
  .top ~ .home-easy .easy h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }
  .top ~ .home-easy .easy:not(.easy-side) p { margin-top: 10px; }
  .shot-aanbod > * { width: 169px; height: 78px; }
  .shot-aanbod .shot-back { left: -40px; top: 74px; width: 191px; height: 88px; }
  .shot-aanbod .shot-mid { left: -5px; top: 81px; width: 162px; height: 75px; }
  .shot-aanbod img { left: 2px; top: 87px; }
  .shot-bestellen .shot-back { left: 21px; top: 30px; }
  .shot-bestellen .shot-mid { left: 19px; top: 35px; }
  .shot-bestellen img { left: 12px; top: 40px; }
  .shot-performance > * { margin-left: 0; }
  .shot-performance .shot-back { left: 37px; } .shot-performance .shot-mid { left: 48px; } .shot-performance img { left: 55px; }
  .top ~ .home-easy .easy-side-media { height: 653px; place-items: center end; }
  .top ~ .home-easy .easy-side-media img { width: 206px; height: auto; }
  .top ~ .home-easy .easy-side h3 { margin-top: 31px; font-size: 24px; }

  :is(.top, .feat-sec) ~ .ai-case:not(.ai-case-dark) { padding: 151px 0 109px; }
  :is(.top, .feat-sec) ~ .ai-case .case-teaser { grid-template-columns: 1fr 281px; width: 81%; margin: 105px 0 0 11.5%; }

  :is(.top, .feat-sec) ~ .cats { padding: 126px 7.5%; }
  :is(.top, .feat-sec) ~ .cats .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.top, .feat-sec) ~ .cats .cat-grid li { height: 166px; }
  :is(.top, .feat-sec) ~ .cats .cat-grid h3 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }

  .home-seo { padding: 221px 10%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.top, .feat-sec) ~ .home-faq { width: 626px; grid-template-columns: 233px 393px; }
  :is(.top, .feat-sec) ~ .home-faq .faq-list { padding: 0 36px; }
  :is(.top, .feat-sec) ~ .home-faq summary { min-height: 78px; }
}
/* 1200–1439: Framer keeps the SEO band 708px tall and 80% wide, content centred. */
@media (min-width: 1200px) and (max-width: 1439px), (min-width: 1441px) {
  .home-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; min-height: 708px; padding: 0 10%; }
}

@media (max-width: 809px) {
  .d-only { display: none; }
  .m-only { display: inline; }
  .sec-sub { font-size: 16px; line-height: 19.2px; }

  .brands { padding: 60px 0 40px; }
  .brands-title { padding: 0 15px; font-size: 20px; font-weight: 700; line-height: 20px; letter-spacing: -0.8px; }
  .marquee { margin-top: 50px; }
  .marquee-set { gap: 44px; padding: 0 22px; }
  .marquee-set img { transform: scale(.8); }

  .home-offer { padding-top: 106px; }
  .home-offer h2 { padding: 0 31px; font-size: 24px; font-weight: 700; line-height: 24px; }
  .home-offer .dark-sub { padding: 0 31px; font-size: 16px; line-height: 19.2px; }
  .top + .brands { padding-bottom: 34px; }
  .top + .brands .marquee { margin-top: 34px; }
  .top + .brands .marquee-set { gap: 25px; padding: 0 12.5px; }
  .top + .brands .marquee-set img { transform: none; }
  .home-offer .glow-wrap { padding: 104px 29px 37px; }
  .home-offer .dark-glow { background: radial-gradient(100% 50% at 0 49.3%, #104237 0%, var(--dark) 100%); }
  .offer-grid { grid-template-columns: 1fr; }
  .offer { min-height: 0; }
  .offer-intro { min-height: 230px; }
  .offer h3 { font-size: 24px; line-height: 24px; letter-spacing: 0; }
  .offer p { margin-top: 30px; font-size: 16px; line-height: 19.2px; }
  .offer .btn { order: 2; margin-top: 50px; }
  .offer p { order: 3; margin-top: 50px; }
  .offer-yellow .btn { margin-top: 40px; }
  .offer-yellow p { margin-top: 41px; }
  .offer-intro p { margin-top: 33px; }
  .check-list li { padding-left: 34px; font-size: 16px; line-height: 19.2px; letter-spacing: -0.64px; }
  .cta-bar-wide { padding: 22px 32px 42px; }
  .home-offer .cta-bar-wide { gap: 29px; padding: 22px 32px 23px; }
  .home-offer .cta-bar-wide p { font-size: 18px; line-height: 18px; }
  .cta-bar-wide .btn { height: 34px; font-size: 18px; padding: 0 20px; }

  .home-steps { padding: 188px 40px 70px; }
  .home-steps h2 { font-size: 26px; line-height: 26px; text-align: left; }
  .home-steps .sec-sub { margin-top: 30px; text-align: left; }
  .home-steps .steps { margin: 73px -7px 0; }
  :is(.top, .feat-sec) ~ .home-steps .steps { width: auto; max-width: none; margin: 73px -8px 0 -7px; }
  :is(.top, .feat-sec) ~ .home-steps .step:not(:last-child) { margin-bottom: 150px; }
  .steps.show-media .step { display: flex; flex-direction: column; }
  .steps.show-media .step-media { display: grid; order: -1; height: 300px; }
  .steps.show-media .step-media img { max-width: 75%; height: auto; }
  .steps.show-media .step-media-bottom img { max-width: 75%; }
  .steps.show-media .step-text { min-height: 300px; }
  .home-steps .step-body p { font-size: 15px; line-height: 18px; }
  .home-steps .step-body br { display: none; }

  .home-easy { padding-top: 82px; }
  .home-easy h2 { padding: 0 40px; text-align: left; }
  .home-easy .dark-sub { padding: 0 40px; text-align: left; }
  .home-easy .glow-wrap { margin-top: 50px; padding: 41px 19px 83px; }
  .easy-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 15px; }
  .easy-wide, .easy-side { grid-column: auto; grid-row: auto; }
  .easy h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }
  .shot { margin-top: 60px; }
  .top ~ .home-easy .easy:not(.easy-side) p { margin-top: 10px; }
  .top ~ .home-easy .shot { margin-top: 31px; }
  .top ~ .home-easy .easy:first-child { min-height: 400px; }
  .top ~ .home-easy .easy:first-child .shot { margin-top: auto; }
  .shot-aanbod > * { left: 21px; }
  .shot-bestellen .shot-back { left: 79px; } .shot-bestellen .shot-mid { left: 76px; } .shot-bestellen img { left: 66px; }
  .shot-performance > * { left: 5px; margin-left: 0; }
  .shot-performance img { left: 25px; width: 259px; height: 129px; }
  .easy-side-media { height: auto; padding: 40px 0 30px; }
  .easy-side h3 { font-size: 24px; }
  .top ~ .home-easy .easy-side-media { height: 400px; padding: 0; }
  .top ~ .home-easy .easy-side .btn { height: 34px; padding: 0 20px; font-size: 18px; }

  .ai-case { padding: 64px 31px 52px; text-align: left; }
  .ai-case h2, .ai-case .sec-sub { padding: 0 8px; }
  .ai-case .sec-sub { margin-top: 26px; font-size: 18px; line-height: 21.6px; text-align: left; }
  .case-teaser { grid-template-columns: 1fr; height: auto; margin-top: 70px; }
  .ai-case .case-teaser { margin-top: 81px; }
  .case-teaser-img { order: -1; height: 310px; border-radius: 10px 10px 0 0; }
  .case-teaser-text { border-radius: 0 0 10px 10px; }
  .case-teaser h3 { font-size: 20px; line-height: 20px; letter-spacing: -0.8px; }
  .case-teaser-text .btn { margin-top: 40px; }

  .cats { padding: 49px 29px 80px; }
  .top ~ .cats { padding-bottom: 48px; }
  .cats .dark-glow { background: radial-gradient(56% 50% at 50% 54.8%, #073d30 0%, var(--dark) 100%); }
  .cats-head { flex-direction: column; align-items: flex-start; gap: 19px; }
  .top ~ .cats .cats-head { gap: 20px; }
  .cats-head .btn { height: 34px; padding: 0 20px; font-size: 18px; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 15px 16px; }
  .cat-grid li { height: 164px; }
  .cat-grid h3 { font-size: 16px; line-height: 19.2px; letter-spacing: -0.64px; }
  .cats:has(+ .home-seo) .cat-grid li:is(:nth-child(5), :nth-child(6)) { margin-top: -5px; }   /* home: Framer has a 10px gap between rows 2 and 3 only */

  .home-seo { padding: 103px 39px 102px; gap: 65px; }
  .home-seo .prose h3 + p { margin-top: 26px; }
  .home-seo .prose p { font-size: 16px; line-height: 19.2px; }
  .home-seo .prose:first-child h3:first-child + p { font-size: 18px; line-height: 21.6px; }
  .home-faq { padding: 60px 0; }
  :is(.top, .feat-sec) ~ .home-faq { padding: 169px 0; }
  :is(.top, .feat-sec) ~ .home-faq h2 { margin-bottom: 38px; }
  :is(.top, .feat-sec) ~ .home-faq summary { min-height: 70px; }
}

/* Split hero variants. */
.hero-compact { min-height: 707px; }
.hero-compact h1 { max-width: 505px; }
.hero-compact .split-hero-copy p { margin: 34px 0 0; }
.hero-bm .split-hero-copy p { margin-top: 43px; }
.hero-cta-left { justify-content: flex-start; margin-top: 34px; }
.split-hero-copy .hero-cta { margin-top: 34px; }

/* Brands right after a split hero (landing pages). */
.brands-after-hero { padding: 20px 0 118px; }
.brands-after-hero .marquee { margin-top: 89px; }

/* Three feature cards with screenshot stacks, on a dark band. */
.feat-sec { padding-top: 83px; }
.feat-sec .dark-sub { margin-top: 10px; }
.feat-sec .glow-wrap { margin-top: 21px; padding: 104px 20px 119px; }
.feat-sec .dark-glow { background: radial-gradient(65% 50% at 32.4% 50%, #10614e 0%, var(--dark) 100%); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 323px); justify-content: center; gap: 15px; }
.feat {
  display: flex;
  flex-direction: column;
  min-height: 385px;
  padding: 32px;
  border-radius: 10px;
  background: rgba(41, 41, 41, 0.3);
  box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px;
}
.feat h3 { font-size: 24px; font-weight: 700; line-height: 28.8px; letter-spacing: -0.96px; }
.feat p { margin-top: 10px; font-size: 16px; line-height: 17.6px; }
.feat .shot { margin-top: 31px; }
.feat-sec .cta-bar { margin-top: 10px; }
.shot-bl-aanbod > * { left: 34px; width: 196px; height: 90px; border-radius: 10px 10px 0 0; }
.shot-bl-aanbod .shot-back { top: 62px; }
.shot-bl-aanbod .shot-mid { top: 66px; background: linear-gradient(var(--green) 0%, #ababab 100%); }
.shot-bl-aanbod img { top: 73px; object-fit: cover; }
.shot-bl-bestellen .shot-back { left: 17px; top: 52px; width: 151px; height: 132px; }
.shot-bl-bestellen .shot-mid { left: 60px; top: 62px; width: 151px; height: 132px; }
.shot-bl-bestellen img { left: -11px; top: 37px; }
.shot-bl-bestellen .shot-front { left: 145px; top: 71px; box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px; }
.shot-bl-perf .shot-back { left: 20px; top: 62px; width: 145px; height: 127px; }
.shot-bl-perf .shot-mid { left: 70px; top: 71px; width: 135px; height: 118px; }
.shot-bl-perf img { left: 39px; top: 87px; object-fit: cover; }

.bl-steps { padding-top: 126px; }
.bl-steps .sec-sub { margin-top: 17px; }
.bl-steps .steps { margin-top: 140px; }
@media (min-width: 1200px) {
  .bl-steps + .ai-case:not(.ai-case-dark) { padding: 51px 20px 118px; }
  .bl-steps + .ai-case:not(.ai-case-dark) h2 { line-height: 43.2px; }
  .bl-steps + .ai-case:not(.ai-case-dark) .case-teaser { margin-top: 40px; }
}

@media (max-width: 1360px) {
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 323px)); }
}
/* Tablet: backlinks + brand mentions (the only pages with .feat-sec). */
@media (min-width: 810px) and (max-width: 1199px) {
  main:has(.feat-sec) .split-hero { margin-top: 16px; }   /* Framer leaves a white strip under the header here */
  main:has(.feat-sec) .split-hero-inner { justify-content: center; gap: 92px; padding-left: 0; }
  main:has(.feat-sec) .split-hero-copy { flex: none; width: 351px; }
  main:has(.feat-sec) .split-hero h1 { font-size: 50px; line-height: 45px; }
  main:has(.feat-sec) .split-hero-copy .hero-cta { margin-top: 33px; }
  main:has(.feat-sec) .split-hero-visual { flex: none; width: 278px; margin: 0; }
  .brands-after-hero:has(+ .feat-sec:not(.bm-feat)) { padding: 8px 0 132px; }
  .brands-after-hero:has(+ .feat-sec:not(.bm-feat)) .marquee { margin-top: 66px; }
  .feat-sec:not(.bm-feat) h2 { max-width: 382px; margin: 0 auto; font-size: 40px; line-height: 48px; }
  .feat-sec .glow-wrap { padding: 108px 15px 66px; }
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat-sec .cta-bar { width: auto; }
  .feat-sec ~ .bl-steps { padding-top: 129px; }
  .feat-sec ~ .bl-steps .steps { margin-top: 140px; }
  .feat-sec ~ .bl-steps .step-head h3 { font-size: 24px; line-height: 28.8px; }
  main:has(.feat-sec) .cats { padding: 126px 5% 137px; }
  main:has(.feat-sec) .ai-case h2 { line-height: 43.2px; }
  main:has(.feat-sec) .ai-case .case-teaser { margin-top: 95px; }
  main:has(.feat-sec) .cats-head, main:has(.feat-sec) .cat-grid { width: auto; }
}
@media (max-width: 809px) {
  .hero-compact { min-height: 0; padding: 59px 40px 120px; }
  .hero-compact h1 { font-size: 36px; line-height: 32.4px; }
  .hero-compact .split-hero-copy p { margin: 34px 0 0; }
  .hero-compact .hero-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-compact .hero-cta .btn { height: 34px; font-size: 18px; padding: 0 20px; }
  .hero-compact .split-hero-visual { margin-top: 73px; }
  .brands-after-hero { padding: 0 0 60px; }
  .brands-after-hero .brands-title { font-size: 18px; line-height: 18px; letter-spacing: -0.72px; }
  .brands-after-hero .brands-title br { display: none; }
  .feat-sec { padding: 100px 0 0; }
  .feat-sec h2 { padding: 0 40px; font-size: 26px; line-height: 26px; text-align: left; }
  .feat-sec .dark-sub { padding: 0 40px; font-size: 16px; line-height: 19.2px; text-align: left; }
  .feat-sec .glow-wrap { margin-top: 47px; padding: 4px 33px 28px; }
  .feat-grid { grid-template-columns: 1fr; gap: 14px; }
  .feat { min-height: 0; padding: 24px; }
  .feat h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }
  .feat p { margin-top: 30px; }
  .feat .shot { height: 130px; margin-top: 26px; }
  /* Framer's phone screenshots are larger and the boxes lower (104/120px, bottom-aligned); measured */
  .feat .shot:is(.shot-bl-aanbod, .shot-bm-aanbod) { height: 104px; }
  .feat .shot:is(.shot-bl-bestellen, .shot-bl-perf, .shot-bm-tijd, .shot-bm-ahrefs) { height: 120px; }
  .shot-bl-aanbod > * { width: 250px; height: 115px; transform: rotate(3deg); }
  .shot-bl-aanbod .shot-back { left: 53px; top: 7px; }
  .shot-bl-aanbod .shot-mid { left: 33px; top: 15px; }
  .shot-bl-aanbod img { left: 19px; top: 22px; }
  .shot-bl-bestellen .shot-back { left: 127px; top: 21px; width: 133px; height: 117px; }
  .shot-bl-bestellen .shot-mid { left: 39px; top: 31px; width: 133px; height: 117px; }
  .shot-bl-bestellen img { left: 140px; top: 25px; width: 133px; height: 117px; object-fit: cover; }
  .shot-bl-bestellen .shot-front { left: 27px; top: 40px; width: 124px; height: 87px; }
  .shot-bl-perf .shot-back { left: 72px; top: 22px; width: 189px; height: 130px; }
  .shot-bl-perf .shot-mid { left: 54px; top: 28px; width: 208px; height: 110px; }
  .shot-bl-perf img { left: 26px; top: 33px; width: 236px; height: 117px; }
  .bl-steps { padding-top: 180px; }
}

/* ---------- Yellow theme (brand mentions) ---------- */
.theme-yellow {
  --accent: #ffd802;
  --accent-ink: #000;
  --accent-icon: #000;
  --accent-text: #ffd706;
  --accent-hero: radial-gradient(50% 50% at 23.8% 50%, #ffd706 0%, #fff 100%);
  --accent-media: radial-gradient(100% 100% at 20.7% 79.8%, #f7fffd 0%, rgba(255, 213, 5, 0.78) 100%);
  --accent-shot: radial-gradient(109% 119% at 20.7% 76.9%, #fff 0%, #ffd802 100%);
}
.theme-yellow .btn-dark { background: #000; }
.theme-yellow .shot-mid { background: #ffd802; }

/* ---------- Brand mentions ---------- */
.hero-bm .split-hero-visual { width: 443px; aspect-ratio: 443 / 405; margin-right: 46px; }
.hero-bm .split-hero-visual img,
.hero-bm .split-stack { transform: none; box-shadow: rgba(0, 0, 0, 0.07) 0 0.6px 0.84px -0.67px, rgba(0, 0, 0, 0.08) 0 2.29px 3.2px -1.33px, rgba(0, 0, 0, 0.1) 0 10px 14px -2px; }
.hero-bm .split-hero-visual img { transform: rotate(3deg); }
.hero-bm .split-stack-1 { inset: -11px -24px 12px 3px; background: #fffadb; transform: rotate(1deg); }
.hero-bm .split-stack-2 { inset: 7px -1px 19px 14px; background: #ffd802; transform: rotate(2deg); }
.bm-brands { padding: 13px 0 30px; }
.bm-feat { padding-top: 116px; }
.bm-feat .glow-wrap { margin-top: 11px; padding: 106px 20px 121px; }
.bm-feat .dark-glow { background: radial-gradient(50% 50% at 36.5% 55.9%, #968320 0%, var(--dark) 100%); }
.bm-feat .feat-grid { grid-template-columns: repeat(3, 373px); }
.bm-feat .cta-bar-wide { background: #000; }
.shot-bm-aanbod .shot-mid { left: 27px; top: 52px; width: 237px; height: 109px; border-radius: 10px 10px 0 0; }
.shot-bm-aanbod img { left: 33px; top: 58px; width: 238px; height: 110px; border-radius: 10px 10px 0 0; object-fit: cover; }
.shot-bm-tijd .shot-mid { left: 62px; top: 38px; width: 180px; height: 158px; }
.shot-bm-tijd img { left: 69px; top: 42px; width: 175px; height: 139px; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.25) 0 1px 2px; }
.shot-bm-ahrefs .shot-mid { left: 81px; top: 61px; width: 185px; height: 119px; }
.shot-bm-ahrefs img { left: 26px; top: 70px; width: 222px; height: 110px; }

/* AI case on a dark band. */
.ai-case-dark { padding: 110px 0 0; background: #1d1d1f; }
.ai-case-dark h2 { line-height: 43.2px; }
.ai-case-dark .sec-sub { margin-top: 10px; color: #fff; }
.ai-case-dark .glow-wrap { margin-top: 0; padding: 41px 20px 123px; }
.ai-case-dark .case-teaser { color: #000; }
.ai-case-dark .dark-glow { background: radial-gradient(50% 50% at 50% 57.1%, #695b18 0%, var(--dark) 100%); }
.ai-case-dark .case-teaser { margin-top: 0; }

/* Praktijkvoorbeelden: costs card with tiles on the left. */
.bm-examples { padding: 112px 20px 113px; }
.examples-card { grid-template-columns: 618px 1fr; width: 1080px; box-shadow: rgba(0, 0, 0, 0.16) 0 1px 18px -8px; }
.examples-tiles { padding: 69px 20px; border-radius: 10px 0 0 10px; background: radial-gradient(79% 86% at 28.9% 36.2%, #fff 0%, #ffd706 100%); box-shadow: rgba(0, 0, 0, 0.13) 0 1px 21px -13px; }
.examples-intro { padding: 40px; }
.examples-intro h2 { font-size: 36px; font-weight: 900; line-height: 36px; }
.examples-intro p { margin: 58px 0 0; }
.examples-intro p + p { margin-top: 20px; }
.logo-tile { min-height: 145px; }
.logo-tile img { object-fit: cover; }
.bm-faq { padding: 130px 0 129px; }
.logo-tile h3 { margin-top: 5px; font-size: 19.4px; font-weight: 700; line-height: 29.8px; letter-spacing: -0.57px; color: var(--ink); }

@media (max-width: 1360px) {
  .bm-feat .feat-grid { grid-template-columns: repeat(3, minmax(0, 373px)); }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .bm-brands { padding: 30px 0 60px; }
  .bm-brands .marquee { margin-top: 59px; }
  .bm-feat { padding-top: 63px; }
  .bm-feat .glow-wrap { margin-top: 11px; padding: 112px 15px 58px; }
  .bm-feat .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .bm-feat ~ .bl-steps { padding-top: 128px; }
  .bm-feat ~ .bl-steps .step-no, .bm-feat ~ .bl-steps .step-head h3, .bm-feat ~ .bl-steps .step-body p { font-size: 16px; line-height: 19.2px; }
  .bm-feat ~ .bl-steps .step-head h3 { white-space: nowrap; }   /* Framer (white-space: pre) lets "Zoek tussen 750 brand mentions" run on instead of wrapping */
  .bm-feat ~ .bl-steps .step:nth-child(1) .step-media img { width: 80%; }
  .bm-feat ~ .bl-steps .step:nth-child(2) .step-media img { width: 70%; }
  .bm-feat ~ .bl-steps .step:nth-child(3) .step-media img { width: 90%; }
  .feat-sec ~ .ai-case-dark { padding-top: 144px; }
  .ai-case-dark .glow-wrap { padding: 95px 0 109px; }
  main:has(.feat-sec) .ai-case-dark .case-teaser { margin-top: 0; }
  .bm-feat ~ .bl-steps h2 { max-width: 560px; }   /* our copy is longer than Framer's tablet text; keep it to two lines */
  .bm-examples { padding: 192px 0; }
  .bm-examples .examples-card { width: 93%; grid-template-columns: minmax(0, 449fr) minmax(0, 503fr); }
  .bm-faq { width: 734px; grid-template-columns: 233px 501px; }
  .bm-faq summary { min-height: 78px; }
  .examples-intro { padding: 33px; }
  .examples-tiles { padding: 69px 20px; }
}
/* Phone: backlinks + brand mentions. */
@media (max-width: 809px) {
  main:has(.feat-sec) .split-hero { margin-top: 16px; }
  main:has(.feat-sec) .hero-compact:not(.hero-bm) { padding-bottom: 115px; }
  main:has(.feat-sec) .hero-compact:not(.hero-bm) .split-hero-copy p { min-height: 86px; }   /* Framer's copy ends in a run of &nbsp; that wraps to a 4th line */
  .brands-after-hero:has(+ .feat-sec:not(.bm-feat)) { padding-bottom: 130px; }
  .brands-after-hero:has(+ .feat-sec:not(.bm-feat)) .marquee { margin-top: 56px; }
  .brands-after-hero:has(+ .feat-sec) .brands-title { padding: 0 25px; }
  .brands-after-hero:has(+ .feat-sec) .marquee-set { gap: 25px; padding: 0 12.5px; }
  .brands-after-hero:has(+ .feat-sec) .marquee-set img { transform: none; }
  .feat-sec:not(.bm-feat) { padding-top: 97px; }
  .feat-sec .feat p { margin-top: 34px; }
  .feat-sec .feat .shot { margin-top: auto; }
  .feat-sec:not(.bm-feat) .feat { height: 345px; }
  .feat-sec:not(.bm-feat) .feat:first-child { height: 334px; }
  .feat-sec:not(.bm-feat) .feat:first-child h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .feat-sec .cta-bar { gap: 14px; padding: 26px 32px 16px; }
  .feat-sec .cta-bar p { line-height: 16px; letter-spacing: -0.64px; }
  .feat-sec ~ .bl-steps .steps { margin-top: 93px; }
  :is(.top, .feat-sec) ~ .home-steps .step:nth-child(n+3) .step-body p { font-size: 16px; line-height: 19.2px; }
  .bl-steps + .ai-case:not(.ai-case-dark) { padding: 82px 31px 109px; }
  .bl-steps + .ai-case:not(.ai-case-dark) h2 { font-size: 25px; line-height: 27.5px; }
  .bl-steps + .ai-case:not(.ai-case-dark) .case-teaser { margin-top: 71px; }
  main:has(.feat-sec) .cats { padding-bottom: 100px; }
  main:has(.feat-sec) .home-faq { padding-bottom: 180px; }
  main:has(.feat-sec) .cats-head { gap: 20px; }
  main:has(.feat-sec) .cats-head h2, main:has(.feat-sec) .cat-grid h3 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }
  main:has(.feat-sec) .cats-head .btn { height: 27px; padding: 0 14px; font-size: 16px; }
  main:has(.feat-sec) .cat-grid p { font-size: 14px; line-height: 15.4px; }
  main:has(.feat-sec) .home-faq h2 { font-size: 26px; line-height: 26px; }
}
@media (max-width: 809px) {
  .hero-bm { padding: 50px 40px 65px; }
  .hero-bm .split-hero-copy p { margin-top: 42px; }
  .hero-bm .split-hero-visual { width: 262px; aspect-ratio: 262 / 230; margin: 71px auto 0; }
  .bm-feat .feat-grid { grid-template-columns: 1fr; }
  .examples-tiles { flex-direction: row; gap: 11px; padding: 69px 20px; }
  .examples-tiles .tile { padding: 20px; }
  .examples-tiles .costs-col-offset { padding-top: 45px; }
  .examples-tiles .logo-tile h3 { font-size: 16px; line-height: 19px; }
  .bm-brands { padding: 0 0 86px; }
  .bm-brands .marquee { margin-top: 96px; }
  .bm-feat { padding-top: 86px; }
  .bm-feat .glow-wrap { margin-top: 47px; padding: 52px 33px 28px; }
  .bm-feat .feat { height: 350px; }
  .bm-feat .feat:first-child { height: 334px; }
  .bm-feat .feat h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .shot-bm-aanbod .shot-mid { left: 33px; top: 15px; width: 250px; height: 115px; transform: rotate(3deg); }
  .shot-bm-aanbod img { left: 19px; top: 22px; width: 250px; height: 115px; transform: rotate(3deg); }
  .shot-bm-tijd .shot-mid { left: 54px; top: 27px; width: 133px; height: 117px; }
  .shot-bm-tijd img { left: 78px; top: 13px; width: 132px; height: 155px; }
  .shot-bm-ahrefs .shot-mid { left: 54px; top: 28px; width: 208px; height: 110px; }
  .shot-bm-ahrefs img { left: 26px; top: 33px; width: 236px; height: 117px; }
  .bm-feat .cta-bar { gap: 21px; padding: 13px 32px 2px; }
  .bm-feat .cta-bar p { font-size: 16px; }
  .bm-feat .cta-bar-wide .btn { height: 27px; padding: 0 14px; font-size: 16px; }
  .bm-feat ~ .bl-steps { padding-top: 164px; }
  .bm-feat ~ .bl-steps h2 { max-width: 262px; }
  .ai-case-dark { padding: 85px 0 0; }
  .ai-case-dark h2 { font-size: 26px; line-height: 26px; }
  .ai-case-dark .sec-sub { margin-top: 26px; }
  .examples-tiles .logo-tile { min-height: 0; }
  .ai-case-dark h2, .ai-case-dark .sec-sub { padding: 0 39px; }
  .ai-case-dark .glow-wrap { padding: 66px 31px 46px; }
  .bm-examples { padding: 116px 20px 100px; }
  .examples-card { grid-template-columns: 1fr; }
  .examples-tiles { margin: 0 -3px; border-radius: 10px 10px 0 0; }
  .examples-intro { padding: 30px; }
  .examples-intro h2 { font-size: 26px; line-height: 26px; }
  .examples-intro p { margin-top: 58px; }
  .bm-faq { padding: 106px 0 114px; }
  .bm-faq h2 { font-size: 26px; line-height: 26px; margin-bottom: 38px; }
}

/* ---------- Adverteerders ---------- */
.hero-adv { background: radial-gradient(37% 37% at 14.3% 46.2%, rgba(222, 222, 222, 0.8) 0%, #fff 100%), var(--green); }
.hero-adv::after { opacity: 0.91; mix-blend-mode: multiply; }   /* Framer multiplies the grid over the glow */
.hero-adv .split-hero-inner { padding-left: 0; }
.hero-adv .split-hero-copy { width: 520px; }
.hero-adv h1 { max-width: 520px; }
.hero-adv .split-hero-copy p { max-width: 520px; margin-top: 29px; font-size: 19px; line-height: 22.8px; letter-spacing: -0.76px; }
.hero-adv .hero-cta { margin-top: 30px; }
.rating { display: flex; align-items: center; gap: 32px; margin-top: 36px; color: #808089; font-size: 17.3px; line-height: 33.75px; }
.stars { display: flex; gap: 10px; color: var(--green); }
.stars .star { width: 20px; height: 19px; }
.adv-visual { position: relative; flex: none; width: 520px; height: 525px; margin-right: 12px; }
.adv-visual > * { position: absolute; }
.av-dots { left: 188px; top: 0; }
.av-list { left: 0; top: 40px; border-radius: 8px; box-shadow: rgba(87, 84, 255, 0.11) 0 16px 32px; }
.av-sites { left: 239px; top: 40px; border-radius: 8px; object-fit: contain; }
.av-lines { left: 39px; top: 272px; }
.av-diamond { left: 0; top: 365px; }
.av-dash { left: 81px; top: 383px; }
.av-tile { display: grid; place-items: center; border-radius: 8px; background: var(--green); color: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0 8px 8px; }
.av-link { left: 146px; top: 358px; width: 54px; height: 54px; }
.av-link svg { width: 20px; height: 20px; }
.av-cart { left: 11px; top: 471px; width: 51px; height: 54px; }
.av-cart svg { width: 23px; height: 20px; }

.adv-easy { padding-top: 83px; }
.adv-easy .dark-sub { margin-top: 16px; }
.adv-easy .glow-wrap { margin-top: 39px; padding: 44px 20px 112px; }
.adv-easy .dark-glow { background: radial-gradient(50% 50% at 22.3% 58.1%, #0a5745 0%, var(--dark) 100%); }
.easy-grid-2 { grid-template-columns: 568px 568px; grid-template-rows: 335px 337px; gap: 15px; }
.easy-full { grid-column: 1 / -1; }
.shot-adv-1 > * { left: 95px; width: 314px; height: 157px; top: 22px; border-radius: 10px 10px 0 0; }
.shot-adv-1 .shot-mid { left: 107px; width: 309px; height: 147px; }
.shot-adv-1 img { left: 118px; top: 30px; width: 307px; height: 141px; object-fit: cover; }
.shot-adv-2 { margin-top: 34px; }
.shot-adv-2 .shot-back { left: 174px; top: 6px; width: 179px; height: 180px; }
.shot-adv-2 .shot-mid { left: 171px; top: 19px; width: 166px; height: 148px; }
.shot-adv-2 img { left: 157px; top: 32px; object-fit: cover; }
.shot-adv-3 { height: 165px; }
.shot-adv-3 .shot-back { left: 358px; top: 19px; width: 369px; height: 193px; }
.shot-adv-3 .shot-mid { left: 371px; top: 31px; width: 366px; height: 187px; }
.shot-adv-3 img { left: 382px; top: 36px; object-fit: cover; }

.adv-steps { padding-top: 97px; }
.adv-steps .sec-sub { margin-top: 18px; }
.adv-steps .steps { margin-top: 140px; }

.adv-save { padding: 238px 20px 237px; }
.save-card {
  display: grid;
  grid-template-columns: 640px 560px;
  width: 1200px;
  max-width: 100%;
  min-height: 530px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 18px -8px;
}
.save-card .start-card { width: auto; box-shadow: none; }
.save-media {
  display: grid;
  place-items: center;
  border-radius: 0 10px 10px 0;
  background: radial-gradient(75% 86% at 70.3% 78.2%, #12766c 0%, #88b8ac 100%);
  box-shadow: rgba(0, 0, 0, 0.13) 0 1px 21px -13px;
}
.save-media img { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px; }

@media (max-width: 1360px) {
  .easy-grid-2 { grid-template-columns: repeat(2, minmax(0, 568px)); }
  .shot-adv-1 > *, .shot-adv-3 > * { margin-left: -60px; }
}
@media (max-width: 1250px) {
  .adv-visual { zoom: 0.8; }
  .save-card { grid-template-columns: 1fr 1fr; }
}
/* Desktop below 1440: Framer keeps the section 1005 high and the card at 85% width. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .adv-save { display: grid; align-content: center; min-height: 1005px; padding: 0; }
  .save-card { width: 85%; grid-template-columns: 53.7% 1fr; }
}
/* Tablet (Framer's 810 variant, up to 1199px on this page). */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero-adv { min-height: 0; padding: 23px 0 45px; background: radial-gradient(38.85% 38.1% at 20.45% 41.4%, rgba(18, 112, 90, 0.2) 0%, #fff 100%), var(--green); }
  .hero-adv .split-hero-inner { justify-content: center; width: 729px; height: 679px; gap: 9px; padding: 0; }
  .hero-adv .split-hero-copy { flex: none; width: 360px; padding: 20px; }
  .hero-adv h1 { font-size: 50px; line-height: 45px; }
  .hero-adv .hero-cta { margin-top: 29px; }
  .hero-adv .rating { flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 29px; }
  .adv-visual { zoom: 1; width: 320px; height: 445px; margin: 0 20px; }
  .av-dots { left: 88px; }
  .av-list { width: 127px; height: 129px; }
  .av-sites { left: 147px; width: 173px; height: 292px; }
  .av-lines { left: -53px; top: 179px; }
  .av-diamond { top: 272px; } .av-dash { left: 112px; top: 290px; } .av-link { left: 54px; top: 265px; } .av-cart { display: none; }
  .hero-adv + .brands { padding: 29px 0 60px; }
  .hero-adv + .brands .marquee { margin-top: 60px; }

  .adv-page .adv-easy h2 { max-width: 677px; margin: 0 auto; }
  .adv-page .adv-easy .dark-sub { margin-top: 16px; }
  .adv-page .adv-easy .glow-wrap { margin-top: 39px; padding: 141px 20px 89px; }
  .adv-easy .easy-grid-2 { grid-template-columns: 361px 361px; grid-template-rows: 364px 337px; gap: 15px; }
  .adv-easy .easy h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .adv-easy .easy p { margin-top: 10px; }
  .adv-page .adv-easy .easy p { height: 38px; }
  .shot-adv-1 { margin-top: 24px; }
  .shot-adv-1 > *, .shot-adv-3 > * { margin-left: 0; }
  .shot-adv-1 .shot-back { left: -9px; } .shot-adv-1 .shot-mid { left: -1px; } .shot-adv-1 img { left: 7px; }
  .shot-adv-2 { margin-top: auto; }
  .shot-adv-2 .shot-back { left: 66px; } .shot-adv-2 .shot-mid { left: 66px; } .shot-adv-2 img { left: 52px; }
  .shot-adv-3 .shot-back { left: 151px; } .shot-adv-3 .shot-mid { left: 160px; top: 30px; } .shot-adv-3 img { left: 170px; }

  .adv-page .adv-steps { padding-top: 85px; }
  .adv-page .adv-steps .sec-sub { margin-top: 18px; }
  .adv-page .adv-steps .steps { width: auto; margin: 141px 44px 0; }
  .adv-page .step-head h3 { font-size: 24px; line-height: 28.8px; }
  /* Framer's tablet step cards (the shared tablet rules are scoped to the home page). */
  .adv-steps h2 { max-width: 382px; margin: 0 auto; font-size: 40px; line-height: 48px; }
  .adv-steps .sec-sub { max-width: 704px; }
  .adv-steps .step, .adv-steps .step:nth-child(n) { top: 150px; height: 400px; grid-template-columns: 468fr 428fr; }
  .adv-steps .step-flip, .adv-steps .step-flip:nth-child(n) { grid-template-columns: 428fr 468fr; }
  .adv-steps .step:last-child { top: 0; }
  .adv-steps .step-head { gap: 12px; }
  .adv-steps .step-no { font-size: 20px; line-height: 24px; }
  .pub-page .adv-steps .step-head h3 { font-size: 18px; line-height: 21.6px; }
  .adv-steps .step-body { display: flex; flex-direction: column; gap: 25px; }
  .adv-steps .step-body .btn { align-self: flex-start; margin-top: 0; }
  .adv-steps .step-media img { max-width: none; height: auto !important; }
  .adv-steps .step:nth-child(1) .step-media img { width: 75%; }
  .adv-steps .step:nth-child(2n) .step-media img { width: 50%; }
  .adv-steps .step:nth-child(3) .step-media img { width: 85%; }

  .adv-cats { padding: 134px 5%; }
  .adv-cats .cat-grid { gap: 10px 15px; }
  .adv-cats .cat-grid li { height: 169px; }
  .adv-cats .cat-grid h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.8px; }

  .adv-save { padding: 173px 20px 174px; }
  .save-card { width: 870px; grid-template-columns: 475px 395px; min-height: 733px; }
  .save-media img { width: 287px; height: auto; }
}
@media (max-width: 809px) {
  .hero-adv .split-hero-copy { width: auto; }
  .hero-adv .split-hero-copy p { font-size: 16px; line-height: 19.2px; }
  .rating { flex-wrap: wrap; gap: 0 16px; font-size: 14px; line-height: 24px; }
  .adv-visual { zoom: 0.6; margin: 60px auto 0; }
  .easy-grid-2 { grid-template-columns: 1fr; grid-template-rows: none; }
  .easy-full { grid-column: auto; }
  .shot-adv-1 > *, .shot-adv-2 > *, .shot-adv-3 > * { margin-left: -90px; }
  .shot-adv-3 > * { margin-left: -330px; }
  .adv-save { padding: 80px 29px; }
  .save-card { grid-template-columns: 1fr; }
  .save-media { padding: 40px 20px; border-radius: 0 0 10px 10px; }
  .save-media img { width: 100%; height: auto; }

  /* Adverteerders phone, measured at 390. */
  .hero-adv { padding: 37px 27px 62px; background: radial-gradient(86% 40.9% at 105.2% 47.4%, rgba(222, 222, 222, 0.8) 0%, #fff 100%), var(--green); }
  .hero-adv .split-hero-copy { padding: 20px; }
  .hero-adv .split-hero-copy p { margin-top: 40px; font-size: 19px; line-height: 22.8px; }
  .hero-adv .hero-cta { margin-top: 40px; }
  .hero-adv .rating { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 40px; font-size: 16px; line-height: 33.75px; }
  .hero-adv .adv-visual { zoom: 1; width: 295px; height: 393px; margin: -10px 20px 0; }
  .hero-adv .av-dots { left: 76px; }
  .hero-adv .av-list { width: 116px; height: 117px; }
  .hero-adv .av-sites { left: 136px; width: 159px; height: 269px; }
  .hero-adv .av-lines { left: -64px; top: 167px; }
  .hero-adv .av-diamond { top: 260px; } .hero-adv .av-dash { left: 112px; top: 278px; } .hero-adv .av-link { left: 54px; top: 253px; } .hero-adv .av-cart { display: none; }
  .hero-adv + .brands { padding: 61px 0 37px; }
  .hero-adv + .brands .brands-title { font-size: 16px; line-height: 16px; letter-spacing: -0.64px; }
  .hero-adv + .brands .marquee { margin-top: 37px; }
  .hero-adv + .brands .marquee-set { gap: 25px; padding: 0 12.5px; }
  .hero-adv + .brands .marquee-set img { transform: none; }
  .adv-page .adv-easy .easy p { height: 38px; }

  .adv-page .adv-easy { padding-top: 77px; }
  .adv-page .adv-easy h2 { padding: 0 63px 0 40px; font-size: 26px; line-height: 26px; text-align: left; }
  .adv-page .adv-easy .dark-sub { margin-top: 25px; padding: 0 39px 0 40px; font-size: 16px; line-height: 19.2px; text-align: left; }
  .adv-page .adv-easy .glow-wrap { margin-top: 39px; padding: 79px 29px 113px; }
  .adv-page .easy-grid-2 { grid-template-rows: 422px 364px 366px; }
  .adv-page .adv-easy .easy h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .adv-page .adv-easy .easy .shot-adv-1 { margin-top: 24px; } .adv-page .shot-adv-2, .adv-page .shot-adv-3 { margin-top: 31px; }
  .adv-page .shot > * { margin-left: 0; }
  .adv-page .shot-adv-1 .shot-back { left: -22px; top: 48px; width: 261px; height: 131px; }
  .adv-page .shot-adv-1 .shot-mid { left: 7px; top: 53px; width: 239px; height: 113px; }
  .adv-page .shot-adv-1 img { left: 16px; top: 58px; width: 252px; height: 119px; }
  .adv-page .shot-adv-2 .shot-back { left: 51px; } .adv-page .shot-adv-2 .shot-mid { left: 52px; } .adv-page .shot-adv-2 img { left: 38px; }
  .adv-page .shot-adv-3 .shot-back { left: -46px; top: 24px; width: 359px; height: 188px; }
  .adv-page .shot-adv-3 .shot-mid { left: 9px; top: 33px; width: 307px; height: 156px; }
  .adv-page .shot-adv-3 img { left: 19px; top: 42px; width: 264px; height: 131px; }

  .adv-steps { padding: 122px 40px 48px; }   /* adverteerders + publishers */
  .adv-steps .steps { width: auto; max-width: none; margin: 93px -8px 0 -7px; }
  .adv-steps .step:not(:last-child) { margin-bottom: 150px; }
  .adv-steps .step:last-child .step-text { min-height: 322px; }

  .adv-cats { padding: 108px 39px; }
  .adv-cats .cats-head { gap: 20px; }
  .adv-cats .cats-head h2 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }
  .adv-cats .cats-head .btn { height: 27px; padding: 0 14px; font-size: 16px; }
  .adv-cats .cat-grid { gap: 15px; }
  .adv-cats .cat-grid li { height: 162px; }

  .adv-save { padding: 232px 29px 233px; }
  .adv-save .start-card { padding: 40px; }
  .adv-save h2 { font-size: 26px; line-height: 26px; }
  .adv-save .start-list { margin-top: 73px; gap: 50px; }
  .adv-save .start-list li { gap: 16px; }
  .adv-save .start-no { width: 30px; height: 30px; }
  .adv-save .start-list :is(h3, h4) { font-size: 20px; line-height: 23.08px; }
  .adv-save .start-list p { margin-top: 11px; font-size: 16px; line-height: 19.2px; }
  .adv-save .save-media { height: 290px; padding: 0; }
  .adv-save .save-media img { width: 245px; }
}

/* ---------- Publishers ---------- */
.hero-pub { background: radial-gradient(33% 41% at 67.9% 50%, rgba(104, 158, 146, 0.57) 0%, #fff 100%); }
.hero-pub::after { opacity: 1; mix-blend-mode: multiply; }
.hero-pub .split-hero-inner { padding-left: 0; }
.hero-pub .split-hero-copy { width: 520px; padding-left: 10px; }
.hero-pub h1 { max-width: 500px; }
.tick-list { margin: 39px 0 0 -10px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tick-list li { position: relative; padding-left: 34px; font-size: 18px; line-height: 21.6px; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; background: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z' transform='translate(3.205 5.295)'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z' transform='translate(3.205 5.295)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-pub .hero-cta { margin: 30px 0 0 -10px; }
.hero-note { margin: 29px 0 0 -10px; font-size: 12px; line-height: 14.4px; color: #000; }
.split-hero-copy p.hero-note { margin: 29px 0 0 -10px; color: #000; font-size: 12px; font-weight: 400; line-height: 14.4px; letter-spacing: 0; }
.pub-visual { position: relative; flex: none; width: 520px; height: 446px; margin-right: 12px; }
.pub-visual > * { position: absolute; border-radius: 7px; }
.pv-stats { left: 0; top: 0; }
.pv-block { left: 137px; top: 117px; width: 344px; height: 257px; background: var(--green); }
.pv-profile { left: 106px; top: 98px; filter: grayscale(0.51) hue-rotate(287deg); }

.pub-brands { padding-bottom: 57px; }
@media (min-width: 1200px) {   /* Framer wraps this title in a 754px box: two lines on desktop */
  .pub-brands { padding-top: 1px; padding-bottom: 59px; }
  .pub-brands .brands-title { max-width: 754px; margin: 0 auto; padding: 0; }
  .pub-brands .marquee { margin-top: 70px; }
}
.pub-easy { padding-top: 73px; }
.pub-easy h2 { font-size: 40px; line-height: 48px; }
.pub-easy .dark-sub { margin-top: 14px; }
.pub-easy .glow-wrap { margin-top: 33px; padding: 24px 20px 92px; }
.pub-easy .easy-grid-2 { grid-template-rows: 378px 334px; }
.pub-easy .easy h3 { max-width: 504px; }
.pub-easy .shot-adv-1, .pub-easy .shot-adv-2 { margin-top: auto; }

.pub-terms { padding: 125px 20px 102px; }
.pub-terms .costs-card { grid-template-columns: 582px 1fr; min-height: 615px; }
.tile-icon { display: block; }
.pub-terms .tile h3 { margin-top: 25px; font-weight: 400; }
.pub-faq { padding: 100px 0; }

@media (max-width: 1250px) {
  .pub-visual { zoom: 0.8; }
}
/* Desktop below 1440: card at 85% width, tile column fixed at 618. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .pub-terms { padding: 118px 0; }
  .pub-terms .costs-card { width: 85%; grid-template-columns: 1fr 618px; }
}
/* Tablet (Framer's 810 variant, up to 1199px on this page). */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero-pub { min-height: 0; padding: 113px 0 85px; }
  /* Framer insets the glow + grid box here: 68px down, 20px in from the sides, 851px tall */
  .hero-pub { background: #fff; }
  .hero-pub::after { inset: 68px 20px auto; height: 851px; mix-blend-mode: normal; background: url("/media/lu-hero-grid.webp") center / cover no-repeat, radial-gradient(33% 41% at 67.9% 50%, rgba(104, 158, 146, 0.57) 0%, #fff 100%); background-blend-mode: multiply; }
  .hero-pub .split-hero-inner { justify-content: center; width: 729px; height: 679px; gap: 9px; padding: 0; }
  .hero-pub .split-hero-copy { flex: none; width: 360px; padding: 20px 20px 20px 30px; }
  .hero-pub h1 { max-width: 300px; margin-top: 10px; font-size: 50px; line-height: 45px; }
  .hero-pub .tick-list { gap: 5px; }
  .pub-visual { zoom: 1; width: 320px; height: 274px; margin: 0 20px; }
  .pv-stats { left: 0; top: 0; width: 320px; height: 274px; }   /* Framer: the profile covers all but a 17px strip */
  .pv-block { left: 13px; top: 54px; width: 307px; height: 184px; }
  .pv-profile { left: 13px; top: 17px; width: 331px; height: 322px; object-fit: cover; }
  .hero-pub + .brands { padding: 0 0 60px; }
  .hero-pub + .brands .brands-title { max-width: 754px; margin: 0 auto; padding: 0; }
  .hero-pub + .brands .marquee { margin-top: 70px; }

  .pub-page .pub-easy h2 { max-width: 677px; margin: 0 auto; }
  .pub-page .pub-easy .glow-wrap { margin-top: 33px; padding: 75px 20px 50px; }
  .pub-easy .easy-grid-2 { grid-template-columns: 352px 352px; grid-template-rows: 460px 352px; }
  .pub-page .shot-adv-1 .shot-back { left: -26px; top: 26px; width: 291px; height: 150px; }
  .pub-page .shot-adv-1 .shot-mid { left: 8px; top: 36px; width: 259px; height: 129px; }
  .pub-page .shot-adv-1 img { left: 16px; top: 46px; width: 261px; height: 120px; }
  .pub-page .shot-adv-2 .shot-back { left: 62px; top: 7px; width: 181px; height: 182px; }
  .pub-page .shot-adv-2 .shot-mid { left: 62px; top: 20px; } .pub-page .shot-adv-2 img { left: 48px; top: 33px; }
  .pub-page .shot-adv-3 .shot-back { left: 142px; top: 13px; width: 371px; height: 208px; }
  .pub-page .shot-adv-3 .shot-mid { left: 150px; top: 27px; width: 369px; height: 193px; }
  .pub-page .shot-adv-3 img { left: 162px; top: 35px; }

  .pub-page .adv-steps { padding-top: 85px; }
  .pub-page .adv-steps .sec-sub { margin-top: 18px; }
  .pub-page .adv-steps .steps { width: auto; margin: 141px 44px 0; }
  .pub-page .step:first-child .step-head h3 { font-size: 24px; line-height: 28.8px; }

  .pub-terms { padding: 38px 5px; }
  .pub-terms .costs-card { width: auto; grid-template-columns: 416px 1fr; min-height: 688px; }
  .pub-terms .costs-intro h2 { max-width: 296px; }
  .pub-terms .costs-intro p { max-width: 296px; }
  .pub-terms .costs-tiles { align-items: flex-start; justify-content: center; padding-top: 65px; }
  .pub-terms .costs-col { flex: none; width: 269px; }
  .pub-terms .tile h3 { min-height: 30px; font-size: 16px; font-weight: 700; line-height: 18.82px; }
  .pub-terms .tile p { font-size: 13px; line-height: 15.6px; }

  .pub-page .adv-cats { padding: 130px 5% 129px; }
  .pub-page .adv-cats .cat-grid li { height: 173px; }
  .pub-page .adv-cats .cat-grid h3 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }

  .pub-faq { width: 626px; grid-template-columns: 233px 393px; }
  .pub-faq .faq-list { padding: 0 36px; }
  .pub-faq summary { min-height: 78px; }
  .pub-faq details:first-child summary { min-height: 70px; }
}
@media (max-width: 809px) {
  .hero-pub .split-hero-copy { width: auto; }
  .pub-terms .costs-card { grid-template-columns: 1fr; }

  /* Publishers phone, measured at 390. */
  .hero-pub { padding: 37px 27px 0; background: radial-gradient(50% 26.7% at 94.3% 46.65%, rgba(104, 158, 146, 0.57) 0%, #fff 100%); }
  .hero-pub .split-hero-copy { padding: 20px; }
  .hero-pub .tick-list { gap: 18px; margin: 44px 0 0; }
  .hero-pub .tick-list li { font-size: 16px; line-height: 19.2px; }
  .hero-pub .hero-cta { margin: 34px 0 0; }
  .hero-pub .hero-cta .btn { height: 40px; }
  .hero-pub .split-hero-copy p.hero-note { margin: 34px 0 0; }
  .pub-visual { zoom: 1; width: 310px; height: 266px; margin: 20px 0 -35px; }
  .pv-stats { width: 310px; height: 266px; }
  .pv-block { left: 65px; top: 44px; width: 204px; height: 116px; }
  .pv-profile { left: 8px; top: -24px; width: 339px; max-width: none; height: 224px; object-fit: contain; }
  .hero-pub + .brands { padding: 71px 0 36px; }
  .hero-pub + .brands .marquee { margin-top: 47px; }
  .hero-pub + .brands .marquee-set { gap: 25px; padding: 0 12.5px; }
  .hero-pub + .brands .marquee-set img { transform: none; }

  .pub-easy { padding-top: 87px; }
  .pub-page .pub-easy h2 { padding: 0 63px 0 40px; font-size: 40px; line-height: 48px; text-align: left; }
  .pub-page .pub-easy .dark-sub { margin-top: 20px; padding: 0 39px 0 40px; font-size: 18px; line-height: 21.6px; text-align: left; }
  .pub-page .pub-easy .glow-wrap { margin-top: 0; padding: 46px 39px 32px; }
  .pub-page .pub-easy .easy-grid-2 { grid-template-rows: 338px 392px 435px; }
  .pub-page .pub-easy .easy { padding: 24px; }
  .pub-page .pub-easy .easy h3 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }
  .pub-page .pub-easy .easy p { height: auto; margin-top: 34px; font-size: 16px; line-height: 19.2px; }
  .pub-page .pub-easy .shot { margin-top: 32px; }
  .pub-page .pub-easy .easy .shot-adv-1 { height: 122px; margin-top: 22px; }
  .pub-page .shot > * { margin-left: 0; }
  .pub-page .pub-easy .easy:first-child { min-height: 0; }
  .pub-page .shot-adv-1 .shot-back { left: 31px; top: 29px; width: 209px; height: 105px; }
  .pub-page .shot-adv-1 .shot-mid { left: 27px; top: 26px; width: 204px; height: 102px; }
  .pub-page .shot-adv-1 img { left: 17px; top: 35px; width: 207px; height: 97px; }
  .pub-page .pub-easy .shot-adv-2 { height: 120px; }
  .pub-page .shot-adv-2 .shot-back { left: 64px; top: 10px; width: 152px; height: 147px; }
  .pub-page .shot-adv-2 .shot-mid { left: 73px; top: 12px; width: 141px; height: 114px; }
  .pub-page .shot-adv-2 img { left: 73px; top: 12px; width: 141px; height: 114px; }
  .pub-page .shot-adv-3 .shot-back { left: 35px; top: 50px; width: 218px; height: 123px; }
  .pub-page .shot-adv-3 .shot-mid { left: 16px; top: 55px; width: 232px; height: 121px; }
  .pub-page .shot-adv-3 img { left: 10px; top: 60px; width: 231px; height: 118px; }

  .pub-terms { padding: 39px 29px 38px; }
  .pub-terms .costs-intro { padding: 40px 40px 104px; }
  .pub-terms .costs-intro .btn { height: 34px; padding: 0 20px; font-size: 18px; }
  .pub-terms .costs-intro h2 { font-size: 26px; line-height: 26px; }
  .pub-terms .costs-intro p { margin: 31px 0; }
  .pub-terms .costs-tiles { padding: 32px 40px 33px; }
  .pub-terms .tile h3 { min-height: 30px; font-size: 19.4px; font-weight: 700; line-height: 21.82px; }

  .pub-page .adv-cats { padding: 106px 29px 105px; }
  .pub-page .adv-cats .cat-grid { gap: 15px 16px; }
  .pub-page .adv-cats .cat-grid li { height: 164px; }
  .pub-page .adv-cats .cat-grid h3 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }

  .pub-faq { padding: 124px 0 120px; }
  .pub-faq h2 { margin-bottom: 38px; padding: 0 64px; font-size: 26px; line-height: 26px; }
  .pub-faq summary { min-height: 72px; }
}

/* ---------- Backlink MCP (Backlink Reporting look: light + forest, mint accent, mono labels) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-status { text-align: center; font-size: 15px; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.is-error { color: #b42318; }
@media (min-width: 810px) and (max-width: 1250px) {
  .examples-card { grid-template-columns: 1fr 1fr; width: auto; }
}

.mx {
  --mx-ink: #13201a; --mx-muted: #4a5750; --mx-ground: #f4f5f1; --mx-line: #e1e4de;
  --mx-forest: #16261e; --mx-deep: #0f1b15; --mx-mint: #6fdba4; --mx-green: #1f7a4d;
  --mx-on-dark: #c9d6ce; --mx-grid: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background: var(--mx-ground); color: var(--mx-ink);
}
.mx h1, .mx h2, .mx h3 { margin: 0; color: inherit; }
.mx h2 { font-size: 44px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }
.mx h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.mx p { margin: 0; }
.mx-label, .mx-num, .mx .mono, .mx-chat-top, .mx-order-head span, .mx-chips, .mx-prompt-list span {
  font-family: "Fragment Mono", Menlo, Consolas, monospace; font-weight: 400; letter-spacing: 0;
}
.mx-label { margin-bottom: 16px !important; color: var(--mx-green); font-size: 14px; }
.mx-num { color: var(--mx-green); font-size: 14px; }
.mx-intro { color: var(--mx-muted); font-size: 17px; line-height: 1.6; }
.mx-sec { max-width: 1200px; margin: 0 auto; padding: 104px 32px; box-sizing: border-box; }
.mx-sec > h2 + .mx-intro { margin-top: 16px; }
.mx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.mx-split-end .mx-intro { max-width: 360px; justify-self: end; }

.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 26px; border: 0; border-radius: 10px;
  background: var(--mx-ink); color: var(--mx-ground); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.mx-btn:hover { background: var(--mx-green); color: #fff; }
.mx-btn-mint { background: var(--mx-mint); color: var(--mx-deep); }
.mx-btn-mint:hover { background: #fff; color: var(--mx-deep); }

/* Hero */
.mx-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; }
.mx-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; width: 100%; max-width: 660px; margin-left: auto; padding: 80px 64px; box-sizing: border-box; }
.mx-hero-copy .mx-label { margin-bottom: 0 !important; font-size: 15px; }
.mx-hero h1 { font-size: 60px; font-weight: 900; line-height: 1.03; letter-spacing: -0.03em; }
.mx-hero h1 span { color: var(--mx-green); }
.mx-lead { color: var(--mx-muted); font-size: 19px; line-height: 1.55; max-width: 31em; }
.mx-note { margin-top: -12px !important; color: var(--mx-muted); font-size: 14px; }
.mx-hero-panel { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 56px 48px; background-color: var(--mx-forest); background-image: var(--mx-grid); background-size: 48px 48px; }
.mx-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-chat { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(100%, 460px); padding: 22px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: var(--mx-deep); color: #e8eeea; box-shadow: 0 30px 60px rgba(0,0,0,.35); font-size: 15px; }
.mx-chat-top { display: flex; justify-content: space-between; color: #8fa79a; font-size: 12px; }
.mx-on { color: var(--mx-mint); }
.mx-order { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid rgba(111,219,164,.25); border-radius: 12px; background: var(--mx-forest); }
.mx-order-head { display: flex; justify-content: space-between; align-items: center; }
.mx-order-head span { color: #8fa79a; font-size: 12px; }
.mx-order-head b { padding: 4px 10px; border-radius: 99px; background: rgba(111,219,164,.12); color: var(--mx-mint); font-size: 12px; }
.mx-order dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.mx-order dt { color: #8fa79a; }
.mx-order dd { margin: 0; color: #f4f5f1; }
.mx-order .mono { font-size: 13px; }
.mx-order-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); color: var(--mx-on-dark); font-size: 14px; }
.mx-order-total b { color: #f4f5f1; font-size: 18px; }
.mx-a { align-self: flex-end; padding: 10px 16px; border-radius: 12px 12px 2px 12px; background: #2a4236; color: #f4f5f1; }
.mx-ok { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid rgba(111,219,164,.3); border-radius: 10px; background: rgba(111,219,164,.1); font-size: 14px; }
.mx-ok .icon { color: var(--mx-mint); stroke-width: 2.4; width: 18px; height: 18px; }
.mx-input { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #7f9488; font-size: 14px; }
.mx-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-size: 11px; color: #a9b8af; }
.mx-input > span:first-child { white-space: nowrap; }
.mx-chips i { white-space: nowrap; padding: 3px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; font-style: normal; }
.mx-chips i.on { border-color: rgba(111,219,164,.4); color: var(--mx-mint); }

/* Stats */
.mx-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.mx-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 36px 24px; color: var(--mx-muted); line-height: 1.45; }
.mx-stats > div:first-child { padding-left: 0; }
.mx-stats > div + div { border-left: 1px solid var(--mx-line); }
.mx-stat { color: var(--mx-ink); font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.mx-stats-band { background: #fff; border-bottom: 1px solid var(--mx-line); }

/* Cards (light) */
.mx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mx-cards article { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--mx-line); border-radius: 16px; background: #fff; }
.mx-cards h3 { font-size: 22px; }
.mx-cards p, .mx-who p { color: var(--mx-muted); line-height: 1.55; }

/* Dark bands */
.mx-dark { background: var(--mx-forest); color: #f4f5f1; }
.mx-dark .mx-label, .mx-dark .mx-num { color: var(--mx-mint); }
.mx-dark .mx-intro { color: var(--mx-on-dark); }
.mx-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.1); }
.mx-tools > * { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: var(--mx-forest); color: inherit; text-decoration: none; transition: background .2s; }
.mx-tools a:hover { background: #1d3328; }
.mx-tools h3 { font-size: 20px; }
.mx-tools p { color: var(--mx-on-dark); line-height: 1.55; }

/* Steps */
.mx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.mx-steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--mx-ink); }
.mx-steps li:last-child { border-top-color: var(--mx-mint); }
.mx-steps b { font-size: 19px; }
.mx-steps li > span:last-child { color: var(--mx-muted); line-height: 1.5; }

/* Boxes */
.mx-wrap { padding: 0 32px 104px; }
.mx-box { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 56px; box-sizing: border-box; border: 1px solid var(--mx-line); border-radius: 24px; background: #fff; }
.mx-box h2 { font-size: 40px; line-height: 1.1; }
.mx-box-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mx-box-copy .mx-label { margin-bottom: 0 !important; }
.mx-box-copy p:not(.mx-label) { color: var(--mx-muted); line-height: 1.6; }
.mx-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mx-reasons li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; background: var(--mx-ground); }
.mx-reasons span { color: var(--mx-muted); line-height: 1.5; }
.mx-box-dark { border: 0; background-color: var(--mx-forest); background-image: var(--mx-grid); background-size: 48px 48px; color: #f4f5f1; }
.mx-box-dark .mx-label { color: var(--mx-mint); }
.mx-box-dark .mx-box-copy p:not(.mx-label) { color: var(--mx-on-dark); }
.mx-ticks { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; align-self: center; }
.mx-ticks li, .mx-check { display: flex; gap: 12px; line-height: 1.5; }
.mx-ticks .icon, .mx-check .icon { margin-top: 2px; color: var(--mx-mint); stroke-width: 2.2; }

/* Prompts */
.mx-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.mx-prompts .mx-intro { margin-top: 16px; }
.mx-check { margin-top: 24px !important; color: #e8eeea; font-size: 15px; }
.mx-prompt-list { display: flex; flex-direction: column; gap: 10px; }
.mx-prompt-list p { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: var(--mx-deep); line-height: 1.5; }
.mx-prompt-list span { color: var(--mx-mint); font-size: 12px; }

/* Audiences */
.mx-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.mx-who article { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--mx-ink); }

/* FAQ (markup shared with .faq so build.py derives the FAQPage JSON-LD from it) */
.mx-faq { grid-template-columns: 1fr 1fr; gap: 48px; width: auto; max-width: 1200px; padding: 0 32px 104px; box-sizing: border-box; align-items: start; }
.mx-faq h2 { text-align: left; }
.mx-faq .faq-list { gap: 0; padding: 0; border-top: 1px solid #cbd1c9; }
.mx-faq details { border: 0; border-bottom: 1px solid #cbd1c9; border-radius: 0; background: none; }
.mx-faq summary { min-height: 0; padding: 20px 0; color: var(--mx-ink); font-size: 18px; font-weight: 700; line-height: 1.35; }
.mx-faq .faq-plus { background: none; color: var(--mx-green); font-family: "Fragment Mono", Menlo, monospace; }
.mx-faq details p { padding: 0 0 20px; color: var(--mx-muted); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }

/* Form */
.mx-form-box { padding: 64px; }
.mx-form-box h2 { font-size: 44px; }
.mx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mx-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.mx-form .mx-full { grid-column: 1 / -1; }
.mx-form input:not(.hp), .mx-form textarea {
  padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: var(--mx-deep); color: #f4f5f1;
  font: inherit; font-size: 16px; font-weight: 400;
}
.mx-form textarea { resize: vertical; min-height: 120px; }
.mx-form input::placeholder, .mx-form textarea::placeholder { color: #7f9488; }
.mx-form input:focus, .mx-form textarea:focus { outline: 2px solid var(--mx-mint); outline-offset: 1px; }
.mx-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.mx-form .form-status { color: var(--mx-mint); }
.mx-form .form-status.is-error { color: #ffb4a8; }
.mx-small { color: #a9b8af; font-size: 13px; }

/* Tablet (810-1199) and phone (<=809) */
@media (max-width: 1199px) {
  .mx-hero { grid-template-columns: 1fr; min-height: 0; }
  .mx-hero-copy { max-width: 760px; margin: 0 auto; padding: 72px 32px 56px; }
  .mx-hero-panel { min-height: 620px; }
  .mx-stats { grid-template-columns: 1fr 1fr; }
  .mx-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .mx-stats > div:nth-child(n+3) { border-top: 1px solid var(--mx-line); }
  .mx-tools, .mx-cards, .mx-who { grid-template-columns: 1fr 1fr; }
  .mx-steps { grid-template-columns: 1fr 1fr; }
  .mx-box, .mx-prompts, .mx-faq { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .mx h2, .mx-box h2, .mx-form-box h2 { font-size: 32px; }
  .mx-hero h1 { font-size: 40px; }
  .mx-hero-copy { padding: 48px 20px 40px; }
  .mx-hero-panel { min-height: 0; padding: 40px 16px; }
  .mx-input { flex-wrap: wrap; }
  .mx-sec { padding: 72px 20px; }
  .mx-split { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .mx-split-end .mx-intro { justify-self: start; }
  .mx-stats { grid-template-columns: 1fr; padding: 0 20px; }
  .mx-stats > div { padding: 24px 0 !important; border-left: 0 !important; }
  .mx-stats > div + div { border-top: 1px solid var(--mx-line); }
  .mx-tools, .mx-cards, .mx-who, .mx-steps, .mx-reasons, .mx-form { grid-template-columns: 1fr; }
  .mx-cards article, .mx-tools > * { padding: 24px; }
  .mx-wrap { padding: 0 16px 72px; }
  .mx-box, .mx-form-box { padding: 32px 20px; gap: 32px; border-radius: 18px; }
  .mx-faq { padding: 0 20px 72px; gap: 24px; }
}

/* ---------- Cases (/cases and /cases/<slug>): same .mx look as the MCP page ---------- */
.mx-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-btn-ghost { background: #fff; color: var(--mx-ink); box-shadow: inset 0 0 0 1px #cbd1c9; }
.mx-btn-ghost:hover { background: var(--mx-ink); color: #fff; }
.mx-btn-ghost-dark { background: transparent; color: #f4f5f1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.mx-btn-ghost-dark:hover { background: #fff; color: var(--mx-deep); }
.mx-tag { display: inline-block; padding: 5px 10px; border-radius: 99px; background: #e3f5ea; color: var(--mx-green); font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; line-height: 1.2; }
.mx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-logo { display: inline-flex; align-items: center; }
.mx-logo img { display: block; height: auto; }
.mx-logo-dark { padding: 12px 16px; border-radius: 12px; background: var(--mx-forest); }
.mx-logo-named { gap: 14px; font-size: 18px; font-weight: 700; }
.mx-logo-named img { border-radius: 10px; }

/* Overview */
.mx-cases-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; padding-bottom: 40px; }
.mx-cases-head h1 { font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.mx-cases-head .mx-lead { margin-bottom: 16px; }
.mx-cases-head .mx-intro { font-size: 15px; }
.mx-cases { max-width: 1200px; margin: 0 auto; padding: 0 32px 96px; box-sizing: border-box; }
.mx-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mx-chip { min-height: 40px; padding: 8px 16px; border: 1px solid #cbd1c9; border-radius: 99px; background: #fff; color: var(--mx-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.mx-chip[aria-pressed="true"] { border-color: var(--mx-ink); background: var(--mx-ink); color: #f4f5f1; font-weight: 700; }
.mx-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mx-case-card { display: flex; flex-direction: column; gap: 20px; min-height: 420px; padding: 28px; box-sizing: border-box; border: 1px solid var(--mx-line); border-radius: 20px; background: #fff; color: var(--mx-ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.mx-case-card:hover { border-color: var(--mx-green); transform: translateY(-2px); }
.mx-case-card[hidden] { display: none; }
.mx-case-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mx-case-card h2 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.mx-case-card-num { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 22px; border-radius: 14px; background: var(--mx-forest); color: var(--mx-on-dark); font-size: 15px; line-height: 1.45; }
.mx-case-card-num b { color: #f4f5f1; font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; }
.mx-case-card-more { font-size: 15px; font-weight: 700; }
.mx-method-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 88px; padding-bottom: 88px; }
.mx-method-strip h2 { font-size: 36px; }
.mx-method-strip > div:not(:first-child) { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.mx-method-strip p { color: var(--mx-on-dark); line-height: 1.55; }
.mx-case-cta-light { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.mx-case-cta-light > div:first-child { max-width: 640px; }
.mx-case-cta-light h2 { font-size: 40px; margin-bottom: 14px; }

/* Case page */
.mx-case-hero .mx-hero-copy { gap: 22px; }
.mx-case-hero h1 { font-size: 54px; line-height: 1.05; }
.mx-crumbs { color: var(--mx-muted); font-family: "Fragment Mono", Menlo, monospace; font-size: 13px; }
.mx-crumbs a { color: inherit; }
.mx-flow { display: flex; flex-direction: column; gap: 12px; width: min(100%, 460px); margin: 0; padding: 0; list-style: none; position: relative; color: #f4f5f1; }
.mx-flow-step { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: var(--mx-deep); }
.mx-flow-step > span:first-child { color: #8fa79a; font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; }
.mx-flow-step b { font-size: 26px; font-weight: 900; }
.mx-flow-step > span:last-child { color: var(--mx-on-dark); font-size: 15px; line-height: 1.5; }
.mx-flow-now { border-color: rgba(111,219,164,.4); background: rgba(111,219,164,.1); }
.mx-flow-now > span:first-child { color: var(--mx-mint); }
.mx-flow-now > span:last-child { color: #e8eeea; }
.mx-flow-arrow { align-self: center; color: var(--mx-mint); font-size: 20px; line-height: 1; }
.mx-question { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.mx-question > div { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.mx-question h2 { font-size: 40px; }
.mx-prompt { margin: 0; padding: 40px; border: 1px solid var(--mx-line); border-radius: 20px; background: #fff; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.mx-prompt .mx-num { display: block; margin-bottom: 16px; font-size: 13px; }
.mx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; align-content: center; }
.mx-facts > div { padding: 18px; border-radius: 14px; background: var(--mx-ground); }
.mx-facts dt { color: var(--mx-muted); font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; }
.mx-facts dd { margin: 6px 0 0; font-size: 20px; font-weight: 700; }
.mx-facts .mx-fact-dark { background: var(--mx-forest); color: #f4f5f1; }
.mx-facts .mx-fact-dark dt { color: #8fa79a; }
.mx-work { grid-template-columns: repeat(4, 1fr); margin: 0 0 32px; padding: 0; list-style: none; }
.mx-work b { font-size: 18px; }
.mx-work li > span:last-child { color: var(--mx-on-dark); line-height: 1.55; }
.mx-placements { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-bottom: 20px; }
.mx-placement { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid rgba(111,219,164,.3); border-radius: 16px; background: var(--mx-deep); }
.mx-placement-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.mx-placement-head span { color: #8fa79a; font-family: "Fragment Mono", Menlo, monospace; font-size: 13px; }
.mx-placement-head b { padding: 4px 10px; border-radius: 99px; background: rgba(111,219,164,.12); color: var(--mx-mint); font-size: 12px; }
.mx-placement dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: 15px; line-height: 1.5; }
.mx-placement dt { color: #8fa79a; }
.mx-placement dd { margin: 0; color: #f4f5f1; }
.mx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mx-two > div { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.mx-two p { color: #e8eeea; line-height: 1.5; }
.mx-split-top { align-items: start; }
.mx-paras { display: flex; flex-direction: column; gap: 14px; }
.mx-table-box { overflow-x: auto; margin-bottom: 40px; border: 1px solid var(--mx-line); border-radius: 18px; background: #fff; }
.mx-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.mx-table th, .mx-table td { padding: 14px 20px; text-align: left; }
.mx-table thead th { color: var(--mx-muted); font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; font-weight: 400; line-height: 1.4; }
.mx-table tbody tr { border-top: 1px solid var(--mx-line); }
.mx-table .mx-col-mark { background: #e3f5ea; color: var(--mx-green); }
.mx-cell { display: inline-block; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.mx-cell-yes { background: var(--mx-forest); color: #f4f5f1; }
.mx-cell-no { border: 1px dashed #b9c0b6; background: var(--mx-ground); color: var(--mx-muted); }
.mx-cell-none { color: #6b7570; }
.mx-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--mx-line); color: var(--mx-muted); font-size: 13px; }
.mx-legend span { display: flex; gap: 8px; align-items: center; }
.mx-legend i { width: 14px; height: 14px; border-radius: 4px; }
.mx-key-yes { background: var(--mx-forest); }
.mx-key-no { border: 1px dashed #b9c0b6; background: var(--mx-ground); }
.mx-key-mark { background: #e3f5ea; }
.mx-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mx-answer { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.mx-answer-wide { grid-column: 1 / -1; }
.mx-answer-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--mx-line); border-radius: 16px; background: #fff; color: #33403a; font-size: 15px; line-height: 1.55; }
.mx-answer-body ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mx-answer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--mx-muted); font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; }
.mx-answer figcaption { color: var(--mx-muted); font-family: "Fragment Mono", Menlo, monospace; font-size: 13px; }
.mx-answer-hit .mx-answer-body { border-color: var(--mx-forest); background: var(--mx-forest); color: var(--mx-on-dark); }
.mx-answer-hit .mx-answer-meta span:last-child { color: var(--mx-mint); }
.mx-answer-hit strong { color: #f4f5f1; }
.mx-answer-hit .hit { margin-left: -10px; padding: 10px 12px; border-radius: 10px; background: rgba(111,219,164,.12); color: #e8eeea; }
.mx-answer-hit .hit strong, .mx-answer-hit .mono { color: var(--mx-mint); }
.mx-answer-hit figcaption { color: var(--mx-green); }
.mx-answer .mono { font-family: "Fragment Mono", Menlo, monospace; font-size: 12px; }
.mx-answer .more { color: #8fa79a; }
.mx-next { padding-top: 0; }
.mx-next h2 { font-size: 32px; margin-bottom: 12px; }
.mx-next .mx-intro { max-width: 720px; margin-bottom: 28px; }
.mx-table-next td:not(:first-child) { white-space: nowrap; }
.mx-table-next td:first-child { line-height: 1.45; }
.mx-method { display: flex; flex-direction: column; gap: 28px; }
.mx-method-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.mx-method-head h2 { font-size: 32px; }
.mx-method dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; }
.mx-method dl > div { padding-top: 14px; border-top: 2px solid var(--mx-ink); }
.mx-method dl > div:last-child { border-top-color: var(--mx-mint); }
.mx-method dt { font-weight: 700; }
.mx-method dd { margin: 8px 0 0; color: var(--mx-muted); line-height: 1.55; }
.mx-quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 0; }
.mx-takeaway { color: var(--mx-muted); font-size: 19px; line-height: 1.65; }
.mx-quote { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 36px; border: 1px solid var(--mx-line); border-radius: 20px; background: #fff; }
.mx-quote blockquote { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.35; }
.mx-quote figcaption { display: flex; gap: 14px; align-items: center; }
.mx-quote figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mx-quote figcaption > span:last-child span { color: var(--mx-muted); font-size: 14px; }
.mx-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mx-forest); color: var(--mx-mint); font-weight: 700; }
.mx-case-cta { align-items: center; }

@media (max-width: 1199px) {
  .mx-case-grid { grid-template-columns: 1fr 1fr; }
  .mx-method-strip { grid-template-columns: 1fr 1fr; }
  .mx-question, .mx-quote-row, .mx-cases-head { grid-template-columns: 1fr; }
  .mx-work { grid-template-columns: 1fr 1fr; }
  .mx-method dl { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 809px) {
  .mx-cases-head h1 { font-size: 48px; }
  .mx-cases { padding: 0 20px 72px; }
  .mx-case-grid, .mx-method-strip, .mx-work, .mx-two, .mx-answers, .mx-facts, .mx-method dl { grid-template-columns: 1fr; }
  .mx-case-card { min-height: 0; }
  .mx-case-hero h1 { font-size: 38px; }
  .mx-prompt { padding: 28px 22px; font-size: 24px; }
  .mx-question { gap: 32px; }
  .mx-case-cta-light h2, .mx-method-strip h2 { font-size: 30px; }
}

/* ---------- Linkbuilding hub ---------- */
.hero-lb .split-hero-copy p { margin-top: 34px; }
.hero-lb .hero-cta { margin-top: 33px; gap: 10px; }
.lb-brands { padding: 44px 0 70px; }
.lb-brands .marquee { margin-top: 77px; }
.lb-compare { padding-top: 97px; }
.lb-compare .compare-wrap { margin-top: 47px; padding: 39px 20px; }
.lb-compare .compare { padding: 35px 32px 34px; }
.lb-compare .compare dl { margin-top: 38px; }
.lb-compare .compare dd { margin-bottom: 27px; padding-right: 64px; }
.compare dt a { color: inherit; }
.compare dt a:hover { color: #fff; }
.lb-why { padding: 48px 20px 47px; }
.lb-why .costs-card { grid-template-columns: 528px 1fr; }
.lb-why .costs-intro h2 { font-size: 36px; line-height: 36px; }
.lb-why .costs-tiles { padding: 46px 47px; }
.lb-why .tile .icon-box { margin-bottom: 0; }
.lb-why .tile h3 { font-size: 19.4px; font-weight: 400; }
.lb-how { padding: 145px 20px 134px; }
.lb-how .dark-glow { background: radial-gradient(50% 50% at 38.8% 61.6%, #12705a 5%, var(--dark) 81%); }
.start-card-dark { box-shadow: none; background: transparent; }
.start-card-dark h2 { color: #fff; text-align: left; }
.start-card-dark .start-list p { color: #878787; }   /* Framer's #757575, lifted to WCAG AA on #212020 */
.start-card-dark :is(h3, h4) { color: #fff; font-weight: 500; }
.start-card-dark li:last-child :is(h3, h4) { font-weight: 700; }
.lb-seo { padding: 111px 20px 111px; }
.lb-seo .prose p + p { margin-top: 21.6px; }
.lb-countries { padding: 33px 20px 47px; }
.lb-countries .cats-head { margin-top: 20px; }
.lb-countries .cat-grid { margin-top: 18px; }
.lb-countries .cat-grid li { height: 175px; }
.lb-faq { padding: 89px 0 90px; }
.cat-grid h3 a { color: inherit; }
.flag-box { overflow: hidden; }
.flag-box img { max-width: none; object-fit: cover; }

/* Desktop (1200+): small corrections measured against live at 1440, 1366 and 1200. */
@media (min-width: 1200px) {
  .lb-how { padding: 129px 20px 128px; } .lb-how .start-card { min-height: 530px; }
  .ctry-duitsland .ctry-why .pain:nth-child(n+3) { padding-top: 53px; } .ctry-duitsland .ctry-why { padding-bottom: 151px; }
  .ctry-duitsland .ctry-compare .compare-wrap { margin-top: 41px; padding-bottom: 51px; } .ctry-duitsland .ctry-compare .compare-good { padding-top: 46px; }
}
/* Country pages at desktop (1200+): Framer lays out every country separately (section heights,
   card heights, paddings). Measured against live at 1440. Duitsland keeps the shared values above. */
@media (min-width: 1200px) {
  main:not(.ctry-duitsland) .ctry-why .pain { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 277px; }
  main:not(.ctry-duitsland) .ctry-why .pain p { margin-top: 10px; }
  main:not(.ctry-duitsland) .ctry-why { display: flex; flex-direction: column; justify-content: center; min-height: 941px; padding: 0 20px 10px; }
  main:not(.ctry-duitsland, .ctry-frankrijk, .ctry-portugal) .ctry-why .pain-grid { row-gap: 21px; }
  main:not(.ctry-duitsland, .ctry-frankrijk, .ctry-portugal, .ctry-italie, .ctry-denemarken) .ctry-why .pain:first-child { min-height: 0; align-self: center; }
  main.ctry-frankrijk .ctry-why { min-height: 983px; padding-bottom: 11px; } .ctry-frankrijk .ctry-why .dark-sub { max-width: 940px; margin-top: 20px; font-weight: 400; }
  .ctry-frankrijk .ctry-why .pain:nth-child(1) { min-height: 0; padding: 38px 32px; } .ctry-frankrijk .ctry-why .pain:nth-child(2) { min-height: 0; align-self: center; padding: 34px 32px; }
  .ctry-frankrijk .ctry-why .pain:nth-child(3) { min-height: 0; align-self: center; padding: 32px 32px 54px; } .ctry-frankrijk .ctry-why .pain:nth-child(4) { min-height: 309px; }
  main.ctry-portugal .ctry-why { padding-bottom: 11px; } .ctry-portugal .ctry-why .pain-grid { row-gap: 21px; } .ctry-portugal .ctry-why .pain:nth-child(1) { min-height: 278px; }
  .ctry-portugal .ctry-why .pain:nth-child(2) { min-height: 270px; align-self: center; } .ctry-portugal .ctry-why .pain:nth-child(3) { min-height: 266px; align-self: center; } .ctry-portugal .ctry-why .pain:nth-child(4) { min-height: 309px; }
  main:not(.ctry-duitsland) .ctry-how { display: flex; flex-direction: column; justify-content: center; min-height: 799px; padding-top: 0; padding-bottom: 0; }
  main:not(.ctry-duitsland) .ctry-how .start-list { gap: 50px; }
  main:not(.ctry-duitsland) .ctry-why .pain-grid { grid-template-columns: repeat(2, min(605px, calc(42.5vw - 7.5px))); }
  main:not(.ctry-duitsland) .ctry-diff .costs-card { width: min(85vw, 1200px); grid-template-columns: 1fr 618px; }
  main:not(.ctry-duitsland) .ctry-why .pain { padding-top: 20px; padding-bottom: 20px; }
  main:not(.ctry-duitsland, .ctry-frankrijk, .ctry-portugal, .ctry-italie, .ctry-denemarken) .ctry-why .pain:first-child { padding-top: 38px; padding-bottom: 38px; }
  main:not(.ctry-duitsland) .ctry-offer { display: flex; flex-direction: column; justify-content: center; min-height: 670px; padding: 0 20px; }
  main:not(.ctry-duitsland) .ctry-offer .cats-head { width: min(85vw, 1224px); }
  main:not(.ctry-duitsland) .ctry-offer .cat-grid { grid-template-columns: repeat(4, calc((min(85vw, 1225px) - 45px) / 4)); align-items: center; }
  main:not(.ctry-duitsland) .ctry-offer .cat-grid li { height: auto; min-height: 173px; }
  main:not(.ctry-duitsland) .ctry-diff .tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  /* Duitsland: same viewport-relative widths (85vw / 80vw), measured at 1200 and 1366; equal to the fixed widths at 1440 */
  .ctry-duitsland .ctry-why .pain-grid { grid-template-columns: repeat(2, min(605px, calc(42.5vw - 7.5px))); }
  .ctry-duitsland .ctry-offer .cats-head { width: min(85vw, 1225px); } .ctry-duitsland .ctry-offer .cat-grid { grid-template-columns: repeat(4, calc((min(85vw, 1225px) - 45px) / 4)); }
  .ctry-duitsland .ctry-diff .costs-card { width: min(85vw, 1200px); grid-template-columns: 1fr 618px; }
  .ctry-duitsland .ctry-seo { grid-template-columns: repeat(2, calc((min(80vw, 1153px) - 65px) / 2)); }
  .ctry-frankrijk .costs-intro { padding-top: 46px; } .ctry-oostenrijk .costs-intro h2 { max-width: 290px; }
  .ctry-frankrijk .costs-col-offset .tile:first-child { padding-top: 17px; } .ctry-verenigde-staten .costs-col-offset .tile:first-child { padding: 17px 30px; }
  .ctry-portugal .costs-col-offset .tile:first-child { padding: 23px 30px; }
  .ctry-nederland .ctry-hero .split-hero-copy { width: 534px; left: -15px; } .ctry-nederland .ctry-hero h1, .ctry-nederland .ctry-hero .split-hero-copy p { max-width: 534px; }
  .ctry-nederland .ctry-hero .split-hero-copy p { margin-top: 26px; } .ctry-nederland .ctry-hero .hero-cta { margin-top: 44px; }
  .ctry-oostenrijk .ctry-hero .split-hero-copy p { margin-top: 119px; } .ctry-oostenrijk .ctry-hero .hero-cta { margin-top: 35px; }
  .ctry-polen .ctry-hero .split-hero-copy p { margin-top: 102px; } .ctry-polen .ctry-hero .hero-cta { margin-top: 51px; }
  :is(.ctry-griekenland, .ctry-australie) .ctry-hero .split-hero-copy { width: 557px; left: -26px; } :is(.ctry-griekenland, .ctry-australie) .ctry-hero h1 { max-width: 557px; }
  :is(.ctry-griekenland, .ctry-australie) .ctry-hero .split-hero-copy p { max-width: 561px; margin: 49px 0 0 -2px; } :is(.ctry-griekenland, .ctry-australie) .ctry-hero .hero-cta { margin: 34px 0 0 -7px; }
  .ctry-canada .ctry-hero .split-hero-copy { width: 534px; left: -15px; } .ctry-canada .ctry-hero h1, .ctry-canada .ctry-hero .split-hero-copy p { max-width: 534px; }
  .ctry-canada .ctry-hero .split-hero-copy p { margin-top: 49px; } .ctry-canada .ctry-hero .hero-cta { margin-top: 27px; }
  .ctry-verenigde-staten .ctry-hero .split-hero-copy { width: 550px; left: -23px; } .ctry-verenigde-staten .ctry-hero h1 { max-width: 550px; }
  .ctry-verenigde-staten .ctry-hero .split-hero-copy p { max-width: 540px; margin: 93px 0 0 5px; } .ctry-verenigde-staten .ctry-hero .hero-cta { margin-top: 23px; }
  :is(.ctry-nederland, .ctry-oostenrijk, .ctry-polen, .ctry-griekenland, .ctry-australie, .ctry-canada, .ctry-verenigde-staten) .ctry-hero .split-hero-copy { position: relative; }
  .ctry-nederland .ctry-hero .split-hero-copy { top: -13px; } .ctry-oostenrijk .ctry-hero .split-hero-copy { top: -2px; } .ctry-polen .ctry-hero .split-hero-copy { top: 10px; }
  :is(.ctry-griekenland, .ctry-australie) .ctry-hero .split-hero-copy { top: 4px; } .ctry-canada .ctry-hero .split-hero-copy { top: 8px; } .ctry-verenigde-staten .ctry-hero .split-hero-copy { top: 24px; }
  main:not(.ctry-duitsland) .ctry-compare { padding-top: 97px; }
  main:not(.ctry-duitsland) .ctry-seo { align-content: center; padding: 0 20px; grid-template-columns: repeat(2, calc((min(80vw, 1153px) - 65px) / 2)); }
  main:not(.ctry-duitsland) .ctry-compare h2 { max-width: 880px; min-height: 72px; margin: 0 auto; }
  main:not(.ctry-duitsland) .ctry-compare .compare-wrap { margin-top: 0; }
  main:not(.ctry-duitsland) .ctry-compare .compare { display: flex; flex-direction: column; justify-content: center; padding-top: 20px; padding-bottom: 20px; }
  main:not(.ctry-duitsland, .ctry-nederland, .ctry-griekenland, .ctry-australie, .ctry-canada, .ctry-verenigde-staten) .ctry-compare .compare-bad dd { margin-bottom: 38px; }
  main:not(.ctry-duitsland, .ctry-nederland, .ctry-griekenland, .ctry-australie, .ctry-canada, .ctry-verenigde-staten) .ctry-compare .compare-good dd { margin-bottom: 32.5px; }
  :is(.ctry-nederland, .ctry-griekenland, .ctry-australie, .ctry-canada, .ctry-verenigde-staten) .ctry-compare .compare dd { margin-bottom: 35px; }
  main:not(.ctry-duitsland) .ctry-compare .compare dd:last-child { margin-bottom: 0; }
  .ctry-frankrijk .ctry-brandline { padding-top: 48px; }
  .ctry-nederland .ctry-examples { padding: 75px 20px 32px; } .ctry-nederland .ctry-examples .table-wrap { margin-top: 35px; }
  .ctry-frankrijk .ctry-examples { padding: 97px 20px 88px; } .ctry-frankrijk .ctry-examples .table-wrap { margin-top: 97px; }
  .ctry-belgie .ctry-examples { padding: 97px 20px 247px; } .ctry-belgie .ctry-examples .table-wrap { margin-top: 45px; }
  .ctry-engeland .ctry-examples { padding: 97px 20px 285px; } .ctry-engeland .ctry-examples .table-wrap { margin-top: 103px; }
  .ctry-spanje .ctry-examples { padding-bottom: 165px; } .ctry-spanje .ctry-examples .table-wrap { margin-top: 52px; }
  .ctry-italie .ctry-examples { padding-bottom: 194px; } .ctry-italie .ctry-examples .table-wrap { margin-top: 61px; }
  .ctry-verenigde-staten .ctry-examples { padding-bottom: 156px; } .ctry-verenigde-staten .ctry-examples .table-wrap { margin-top: 42px; }
  .ctry-oostenrijk .ctry-faq { padding: 127px 0; } .ctry-griekenland .ctry-faq { padding-bottom: 114px; } .ctry-belgie .ctry-faq { padding-bottom: 97px; }
  /* diff (section padding, tile heights), compare card height, seo padding */
  .ctry-nederland .ctry-diff { padding: 80px 20px 81px; } .ctry-nederland .ctry-compare .compare { min-height: 543px; } .ctry-nederland .ctry-seo { min-height: 555px; }
  .ctry-nederland .costs-col .tile:first-child { min-height: 274px; } .ctry-nederland .costs-col .tile:last-child { min-height: 277px; } .ctry-nederland .costs-col-offset .tile:first-child { min-height: 306px; } .ctry-nederland .costs-col-offset .tile:last-child { min-height: 351px; }
  .ctry-frankrijk .ctry-diff { padding: 79px 20px 79px; } .ctry-frankrijk .ctry-compare .compare { min-height: 545px; } .ctry-frankrijk .ctry-seo { min-height: 702px; }
  .ctry-frankrijk .costs-col .tile:first-child { min-height: 274px; } .ctry-frankrijk .costs-col .tile:last-child { min-height: 290px; } .ctry-frankrijk .costs-col-offset .tile:first-child { min-height: 261px; } .ctry-frankrijk .costs-col-offset .tile:last-child { min-height: 290px; }
  .ctry-belgie .ctry-diff { padding: 51px 20px 52px; } .ctry-belgie .ctry-compare .compare { min-height: 549px; } .ctry-belgie .ctry-seo { min-height: 561px; }
  .ctry-belgie .costs-col .tile:first-child { min-height: 354px; } .ctry-belgie .costs-col .tile:last-child { min-height: 387px; } .ctry-belgie .costs-col-offset .tile:first-child { min-height: 345px; } .ctry-belgie .costs-col-offset .tile:last-child { min-height: 387px; }
  .ctry-engeland .ctry-diff { padding: 14px 20px 14px; } .ctry-engeland .ctry-compare .compare { min-height: 549px; } .ctry-engeland .ctry-seo { min-height: 537px; }
  .ctry-engeland .costs-col .tile:first-child { min-height: 337px; } .ctry-engeland .costs-col .tile:last-child { min-height: 337px; } .ctry-engeland .costs-col-offset .tile:first-child { min-height: 341px; } .ctry-engeland .costs-col-offset .tile:last-child { min-height: 341px; }
  .ctry-spanje .ctry-diff { padding: 29px 20px 29px; } .ctry-spanje .ctry-compare .compare { min-height: 549px; } .ctry-spanje .ctry-seo { min-height: 455px; }
  .ctry-spanje .costs-col .tile:first-child { min-height: 337px; } .ctry-spanje .costs-col .tile:last-child { min-height: 337px; } .ctry-spanje .costs-col-offset .tile:first-child { min-height: 354px; } .ctry-spanje .costs-col-offset .tile:last-child { min-height: 371px; }
  .ctry-italie .ctry-diff { padding: 37px 20px 37px; } .ctry-italie .ctry-compare .compare { min-height: 551px; } .ctry-italie .ctry-seo { min-height: 565px; }
  .ctry-italie .costs-col .tile:first-child { min-height: 354px; } .ctry-italie .costs-col .tile:last-child { min-height: 371px; } .ctry-italie .costs-col-offset .tile:first-child { min-height: 401px; } .ctry-italie .costs-col-offset .tile:last-child { min-height: 354px; }
  .ctry-portugal .ctry-diff { padding: 52px 20px 52px; } .ctry-portugal .ctry-compare .compare { min-height: 549px; } .ctry-portugal .ctry-seo { min-height: 603px; }
  .ctry-portugal .costs-col .tile:first-child { min-height: 367px; } .ctry-portugal .costs-col .tile:last-child { min-height: 320px; } .ctry-portugal .costs-col-offset .tile:first-child { min-height: 337px; } .ctry-portugal .costs-col-offset .tile:last-child { min-height: 337px; }
  .ctry-oostenrijk .ctry-diff { padding: 47px 20px 47px; } .ctry-oostenrijk .ctry-compare .compare { min-height: 549px; } .ctry-oostenrijk .ctry-seo { min-height: 539px; }
  .ctry-oostenrijk .costs-col .tile:first-child { min-height: 367px; } .ctry-oostenrijk .costs-col .tile:last-child { min-height: 354px; } .ctry-oostenrijk .costs-col-offset .tile:first-child { min-height: 387px; } .ctry-oostenrijk .costs-col-offset .tile:last-child { min-height: 417px; }
  .ctry-zweden .ctry-diff { padding: 33px 20px 33px; } .ctry-zweden .ctry-compare .compare { min-height: 549px; } .ctry-zweden .ctry-seo { min-height: 494px; }
  .ctry-zweden .costs-col .tile:first-child { min-height: 354px; } .ctry-zweden .costs-col .tile:last-child { min-height: 400px; } .ctry-zweden .costs-col-offset .tile:first-child { min-height: 380px; } .ctry-zweden .costs-col-offset .tile:last-child { min-height: 384px; }
  .ctry-denemarken .ctry-diff { padding: 28px 20px 28px; } .ctry-denemarken .ctry-compare .compare { min-height: 549px; } .ctry-denemarken .ctry-seo { min-height: 494px; }
  .ctry-denemarken .costs-col .tile:first-child { min-height: 384px; } .ctry-denemarken .costs-col .tile:last-child { min-height: 367px; } .ctry-denemarken .costs-col-offset .tile:first-child { min-height: 371px; } .ctry-denemarken .costs-col-offset .tile:last-child { min-height: 367px; }
  .ctry-polen .ctry-diff { padding: 42px 20px 42px; } .ctry-polen .ctry-compare .compare { min-height: 549px; } .ctry-polen .ctry-seo { min-height: 502px; }
  .ctry-polen .costs-col .tile:first-child { min-height: 367px; } .ctry-polen .costs-col .tile:last-child { min-height: 337px; } .ctry-polen .costs-col-offset .tile:first-child { min-height: 374px; } .ctry-polen .costs-col-offset .tile:last-child { min-height: 337px; }
  .ctry-griekenland .ctry-diff { padding: 101px 20px 101px; } .ctry-griekenland .ctry-compare .compare { min-height: 561px; } .ctry-griekenland .ctry-seo { min-height: 502px; }
  .ctry-griekenland .costs-col .tile:first-child { min-height: 287px; } .ctry-griekenland .costs-col .tile:last-child { min-height: 307px; } .ctry-griekenland .costs-col-offset .tile:first-child { min-height: 322px; } .ctry-griekenland .costs-col-offset .tile:last-child { min-height: 293px; }
  .ctry-australie .ctry-diff { padding: 70px 20px 70px; } .ctry-australie .ctry-compare .compare { min-height: 561px; } .ctry-australie .ctry-seo { min-height: 502px; }
  .ctry-australie .costs-col .tile:first-child { min-height: 320px; } .ctry-australie .costs-col .tile:last-child { min-height: 323px; } .ctry-australie .costs-col-offset .tile:first-child { min-height: 352px; } .ctry-australie .costs-col-offset .tile:last-child { min-height: 326px; }
  .ctry-canada .ctry-diff { padding: 24px 20px 23px; } .ctry-canada .ctry-compare .compare { min-height: 543px; } .ctry-canada .ctry-seo { min-height: 502px; }
  .ctry-canada .costs-col .tile:first-child { min-height: 387px; } .ctry-canada .costs-col .tile:last-child { min-height: 391px; } .ctry-canada .costs-col-offset .tile:first-child { min-height: 386px; } .ctry-canada .costs-col-offset .tile:last-child { min-height: 385px; }
  .ctry-verenigde-staten .ctry-diff { padding: 39px 20px 39px; } .ctry-verenigde-staten .ctry-compare .compare { min-height: 543px; } .ctry-verenigde-staten .ctry-seo { min-height: 502px; }
  .ctry-verenigde-staten .costs-col .tile:first-child { min-height: 320px; } .ctry-verenigde-staten .costs-col .tile:last-child { min-height: 310px; } .ctry-verenigde-staten .costs-col-offset .tile:first-child { min-height: 379px; } .ctry-verenigde-staten .costs-col-offset .tile:last-child { min-height: 338px; }
}
/* Duitsland 1200-1439: why and seo keep live's fixed section heights (941 / 647) while the
   narrower 85vw / 80vw columns wrap more, so the content is centred instead of padded. */
@media (min-width: 1200px) and (max-width: 1439px) {
  main.ctry-duitsland .ctry-why { display: flex; flex-direction: column; justify-content: center; min-height: 941px; padding-top: 0; padding-bottom: 11px; }
  .ctry-duitsland .ctry-why .pain:nth-child(4) { min-height: 309px; }
  main.ctry-duitsland .ctry-seo { align-content: center; min-height: 647px; padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 1440px) {
  main .int-countries .cats-head { margin-top: 0; } main .int-countries { padding-bottom: 42px; } main .int-who { padding-bottom: 56px; }
  main:has(> .lu-cases) .lu-compare .compare-wrap { margin-top: 43px; padding-bottom: 61px; }
  main:has(> .lu-cases) .cases-wrap { padding-bottom: 90px; }
  .int-seo .prose + .prose p + h3 { margin-top: 48px; }   /* right column: Framer's wider gap, as on tablet */
}

/* Narrow desktop (1200-1439): Framer sizes these containers relative to the viewport
   (cards 85vw, text columns 80vw, tile panel fixed). Measured at 1200 and 1366. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .lb-why .costs-card, .int-who .costs-card, main:has(> .lu-cases) .costs-card { width: 85vw; }
  .lb-why .costs-card { grid-template-columns: 1fr 672px; }
  .int-who .costs-card, main:has(> .lu-cases) .costs-card { grid-template-columns: 1fr 618px; }
  .lb-how .start-card, .int-approach .start-card, main:has(> .lu-cases) .lu-start .start-card { width: 85vw; }
  .lb-seo, .int-seo, main:has(> .lu-cases) .seo-text { grid-template-columns: repeat(2, calc(40vw - 32.5px)); align-content: center; padding-top: 0; padding-bottom: 0; }
  .lb-seo { min-height: 558px; } .int-seo { min-height: 801px; } main:has(> .lu-cases) .seo-text { min-height: 1215px; }
  .lb-how { padding: 129px 20px 128px; } main .int-approach { padding: 114px 20px; }
  main .int-who { padding: 56px 0; } main .int-who .costs-card { width: 85vw; min-height: 646px; grid-template-columns: 1fr 618px; }
  main .int-approach .start-card { width: 85vw; } main .int-seo { grid-template-columns: repeat(2, calc(40vw - 32.5px)); align-content: center; min-height: 801px; padding-top: 0; padding-bottom: 0; }
}
/* Wide desktop (above 1440): Framer's SEO text columns keep growing with the viewport (80vw), so the
   text wraps less and is centred in a band of fixed height. Measured at 1920 and 2560. */
@media (min-width: 1441px) {
  .lb-seo, main .int-seo, main:has(> .lu-cases) .seo-text, main[class] .ctry-seo { grid-template-columns: repeat(2, calc(40vw - 32.5px)); align-content: center; padding-top: 0; padding-bottom: 0; }
  main .tool-intro, main .tool-faq { width: 70vw; }   /* tool pages: Framer's text column is 70% wide at every desktop width */
  .lb-seo { min-height: 558px; } main .int-seo { min-height: 801px; } main:has(> .lu-cases) .seo-text { min-height: 1215px; } main.ctry-duitsland .ctry-seo { min-height: 647px; }
  /* Duitsland 'why': cards 42.5vw; Framer centres the block in its 941px band and centres the second row of cards in a 331px row */
  main.ctry-duitsland .ctry-why { display: flex; flex-direction: column; justify-content: center; min-height: 941px; padding-top: 0; padding-bottom: 0; }
  /* Uitbesteden 'Herken je dit': same 42.5vw cards, block centred in the 867px band; Framer's card paddings and
     empty trailing lines, second row 11px inset (measured at 1920 and 2560) */
  main:has(> .lu-cases) .lu-pains { display: flex; flex-direction: column; justify-content: center; min-height: 867px; padding-top: 0; padding-bottom: 0; }
  main:has(> .lu-cases) .lu-pains .pain-grid { grid-template-columns: repeat(2, calc(42.5vw - 7.5px)); row-gap: 9px; align-items: center; }
  main:has(> .lu-cases) .lu-pains .pain { min-height: 0; padding-top: 32px; padding-bottom: 32px; }
  main:has(> .lu-cases) .lu-pains .pain:nth-child(1) { padding-top: 38px; padding-bottom: 38px; } main:has(> .lu-cases) .lu-pains .pain:nth-child(2) { padding-top: 34px; padding-bottom: 34px; }
  main:has(> .lu-cases) .lu-pains .pain:nth-child(n+3) { margin: 11px 0; }
  main:has(> .lu-cases) .lu-pains .pain p { padding-bottom: 22px; } main:has(> .lu-cases) .lu-pains .pain:nth-child(3) p { padding-bottom: 44px; }
  /* Internationaal 'why': cards 42.5vw wide, fixed 342px tall, text centred */
  .int-reasons .pain-grid { grid-template-columns: repeat(2, calc(42.5vw - 7.5px)); }
  .int-reasons .pain { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 342px; padding-top: 0; padding-bottom: 0; }
  .int-reasons .pain:nth-child(1) p { padding-bottom: 44px; } .int-reasons .pain:is(:nth-child(2), :nth-child(3)) p { padding-bottom: 22px; }   /* Framer's empty trailing lines in these texts */
  main:not(.ctry-duitsland) .ctry-why .pain-grid { grid-template-columns: repeat(2, calc(42.5vw - 7.5px)); }   /* other countries: same 42.5vw cards, no 605px cap */
  main.ctry-portugal .ctry-why { padding-bottom: 0; }   /* Portugal: built like Duitsland (second row centred in 331px) */
  .ctry-portugal .ctry-why .pain-grid { grid-template-rows: auto 331px; row-gap: 10px; align-items: center; }
  .ctry-portugal .ctry-why .pain:nth-child(-n+3) { min-height: 0; padding-top: 32px; padding-bottom: 32px; } .ctry-portugal .ctry-why .pain:nth-child(1) { padding-top: 38px; padding-bottom: 38px; } .ctry-portugal .ctry-why .pain:nth-child(2) { padding-top: 34px; padding-bottom: 34px; }
  .ctry-duitsland .ctry-why .pain-grid { grid-template-columns: repeat(2, calc(42.5vw - 7.5px)); grid-template-rows: auto 331px; row-gap: 10px; align-items: center; } .ctry-duitsland .ctry-why .pain { min-height: 0; padding-top: 38px; }
}

/* Tablet (Framer 810-1199): fixed-width columns, centred. */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero-lb { min-height: 0; padding: 53px 0 37px; }
  .hero-lb .split-hero-inner { width: 751px; gap: 0; padding: 0; justify-content: space-between; }
  .hero-lb .split-hero-copy { flex: none; width: 380px; }
  .hero-lb .hero-cta { flex-wrap: wrap; }
  .hero-lb .split-hero-visual { flex: none; width: 283px; margin: 0; }
  .lb-brands { padding: 105px 0 59px; }
  .lb-brands .marquee { margin-top: 87px; }
  .lb-compare h2 { max-width: 708px; margin: 0 auto; }
  .lb-compare .compare-wrap { margin-top: 30px; padding: 39px 20px 245px; }
  .lb-compare .compare-grid { grid-template-columns: 345px 347px; }
  .lb-compare .compare dd { margin-bottom: 38px; padding-right: 0; }
  .lb-compare .compare-bad dd { padding-right: 16px; }
  .lb-compare .compare dd:last-child { margin-bottom: 0; }
  .lb-why { padding: 48px 0 19px; }
  .lb-why .costs-card { width: calc(100% - 20px); grid-template-columns: 369px 592px; justify-content: center; }
  .lb-why .costs-intro h2 { max-width: 250px; }
  .lb-why .costs-intro p { margin: 31px 0 30px; }
  .lb-why .costs-intro .btn { height: 45px; min-width: 240px; justify-content: center; }
  .lb-why .costs-tiles { justify-content: center; gap: 15px; padding: 12px 47px 14px; }
  .lb-why .costs-col { flex: none; width: 196px; }
  .lb-why .tile h3 { font-size: 16px; font-weight: 700; }
  .lb-why .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  .lb-how { padding: 129px 20px 128px; }
  .lb-how .start-card { width: 870px; }
  .lb-seo { grid-template-columns: 377px 377px; padding: 252px 0; }
  .lb-countries { width: 812px; margin: 0 auto; padding: 81px 61px 78px; }
  .lb-countries .cats-head { margin-top: 0; }
  .lb-countries .cat-grid { grid-template-columns: repeat(4, 161px); margin-top: 13px; }
  .lb-countries .cat-grid li { height: 161px; padding: 29px 14px; }
  .lb-countries .cat-grid h3 { font-size: 19px; line-height: 22.8px; letter-spacing: -0.76px; }
  .lb-faq { width: 626px; grid-template-columns: 233px 393px; padding: 78px 0; }
  .lb-faq summary { padding: 15px 18px; }
}

@media (max-width: 809px) {
  .hero-lb { padding: 39px 40px 0; }
  .hero-lb h1 { margin-bottom: 73px; }
  .hero-lb .hero-cta .btn { height: 27px; padding: 0 14px; font-size: 16px; }
  .hero-lb .split-hero-visual { width: 268px; margin: 96px auto -17px; }
  .lb-brands { padding: 40px 0 36px; }
  .lb-brands .brands-title { font-size: 20px; font-weight: 900; line-height: 24px; letter-spacing: -0.8px; }
  .lb-brands .marquee { margin-top: 50px; }
  .lb-brands .marquee-set { gap: 25px; padding: 0 12.5px; }
  .lb-brands .marquee-set img { transform: none; }
  .lb-compare { padding-top: 117px; }
  .lb-compare .compare-wrap { margin-top: 66px; padding: 39px 29px 26px; }
  .lb-compare .compare-bad { padding: 72px 32px 28px; }
  .lb-compare .compare-good { padding: 72px 32px; }
  .lb-compare .compare dd { margin-bottom: 38px; padding-right: 0; }
  .lb-compare .compare-bad dd { margin-top: 15px; }
  .lb-compare .compare dd:last-child { margin-bottom: 0; }
  .lb-why { padding: 31px 29px; }
  .lb-why .costs-card { grid-template-columns: 1fr; }
  .lb-why .costs-intro { padding: 40px 21px 32px; }
  .lb-why .costs-intro h2 { max-width: 250px; font-size: 26px; line-height: 26px; }
  .lb-why .costs-intro p { margin: 31px 0; }
  .lb-why .costs-tiles { padding: 32px 22px; }
  .lb-why .tile h3 { min-height: 60px; }
  .lb-why .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  .lb-how { padding: 41px 29px; }
  .lb-how .start-card { padding: 40px; }
  .lb-how .start-list { margin-top: 73px; gap: 50px; }
  .lb-how .start-list li { gap: 40px; }
  .lb-how .start-list p { font-size: 18px; line-height: 21.6px; }
  .lb-seo { padding: 117px 39px; gap: 65px; }
  .lb-seo .prose h3 + p { margin-top: 26px; }
  .lb-countries { padding: 20px 30px 35px; }
  .lb-countries .cat-grid { margin-top: 41px; gap: 12.5px 15px; }
  .lb-countries .cat-grid li { height: 175px; padding: 35px 10px; }
  .lb-countries .cat-grid h3 { font-size: 19px; font-weight: 500; line-height: 22.8px; letter-spacing: -0.76px; }
  .lb-faq { padding: 137px 0 152px; }
  .lb-faq h2, .int-faq h2, .ctry-faq h2 { margin-bottom: 38px; font-weight: 700; line-height: 24px; }
  .lb-faq summary, .int-faq summary, .ctry-faq summary { font-size: 16px; font-weight: 400; line-height: 22.4px; letter-spacing: -0.16px; }
  .lb-faq details p, .int-faq details p, .ctry-faq details p { font-size: 15px; line-height: 19.5px; letter-spacing: -0.15px; }
}

/* ---------- Internationale linkbuilding ---------- */
.hero-int h1 { max-width: 505px; }
.int-brandline { padding: 23px 20px 47px; }
.int-reasons { padding: 88px 20px 92px; }
.int-reasons h2 { max-width: 1018px; margin: 0 auto; }
.int-reasons .pain-grid { margin-top: 70px; gap: 20px 15px; }
.int-reasons .pain { min-height: 342px; padding: 48px 32px 37px; }
.int-reasons .pain h3 { margin-top: 15px; }
.int-reasons .pain p { margin-top: 9px; }
.int-approach { padding: 136px 20px 136px; }
.int-approach .start-list { margin-top: 43px; gap: 30px; }
.int-approach .start-list p { margin-top: 8px; }
.int-countries { padding-top: 51px; }
.int-who { padding: 56px 20px 72px; }
.int-who .costs-card { grid-template-columns: 582px 1fr; }
.int-who .costs-tiles { padding: 33px 20px; }
.int-who .tile h3 { font-weight: 400; }
.int-compare { width: 1200px; max-width: calc(100% - 40px); margin: 0 auto; padding-top: 97px; }
.int-compare .compare-wrap { margin-top: 32px; padding: 54px 20px; }
.int-compare .compare { padding: 33px 32px; }
.int-compare .compare dl { margin-top: 20px; }
.int-compare .compare dd { margin-bottom: 18px; }
.int-faq { padding: 130px 0 114px; }
.int-seo { padding: 136px 20px 130px; }
.int-seo .prose p + h3 { margin-top: 28px; }

@media (min-width: 810px) and (max-width: 1199px) {
  .hero-int { padding: 90px 0 68px; }
  .hero-int .split-hero-inner { width: 741px; }
  .hero-int .split-hero-copy { width: 372px; }
  .hero-int .split-hero-copy p { margin-top: 28px; }
  .hero-int .hero-cta { margin-top: 22px; }
  .hero-int .split-hero-visual { width: 278px; }
  .int-brandline { padding: 84px 20px 48px; }
  .int-reasons { padding: 63px 20px 97px; }
  .int-reasons h2 { max-width: 698px; }
  .int-reasons .pain-grid { grid-template-columns: 428px 428px; gap: 35px 14px; }
  .int-reasons .pain { min-height: 408px; padding: 18px 77px; }
  .int-reasons .pain:nth-child(1) { padding-top: 40px; }
  .int-reasons .pain:nth-child(2) { order: 4; }
  .int-reasons .pain:nth-child(3) { padding-top: 29px; }
  .int-reasons .pain h3 { margin-top: 10px; }
  .int-reasons .pain:nth-child(odd) p { font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }
  .int-approach { padding: 162px 20px 163px; }
  .int-approach .start-card { width: 870px; }
  .int-approach .start-list { margin-top: 41px; gap: 27px; }
  .int-approach .start-list p { margin-top: 10px; }
  .int-countries { padding: 62px 61px 77px; }
  .int-countries .cat-grid { margin-top: 33px; }
  .int-who { padding: 42px 0 62px; }
  .int-who .costs-card { width: calc(100% - 10px); min-height: 763px; grid-template-columns: 369px 558px; justify-content: center; }
  .int-who .costs-intro { padding: 60px 12px 60px 60px; }
  .int-who .costs-intro p { margin: 31px 0; }
  .int-who .costs-intro .btn { height: 45px; min-width: 240px; justify-content: center; }
  .int-who .costs-tiles { flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 19px; }
  .int-who .costs-col { flex: none; width: 249px; }
  .int-who .tile h3 { font-size: 16px; font-weight: 700; }
  .int-compare { width: 819px; max-width: none; padding-top: 97px; }
  .int-compare .compare-wrap { margin-top: 85px; padding: 54px 20px 67px; }
  .int-compare .compare-grid { grid-template-columns: 290px 290px; }
  .int-compare .compare dd { margin-bottom: 20px; }
  .int-compare .compare-bad dd { margin-bottom: 38px; }
  .int-compare .compare dd:last-child { margin-bottom: 0; }
  .int-faq { width: 626px; grid-template-columns: 233px 393px; padding: 99px 0 89px; }
  .int-faq summary { padding: 15px 18px; }
  .int-seo { grid-template-columns: 377px 377px; padding: 189px 0 188px; }
  .int-seo .prose p + h3 { margin-top: 29px; }
  .int-seo .prose + .prose p + h3 { margin-top: 48px; }
}

@media (max-width: 809px) {
  .hero-int { padding-top: 57px; }
  .hero-int h1 { margin-bottom: 39px; }
  .hero-int .hero-cta { margin-top: 20px; }
  .hero-int .hero-cta .btn { height: 34px; padding: 0 20px; font-size: 18px; }
  .hero-int .split-hero-visual { width: 263px; margin: 37px auto 85px; }
  .int-brandline { padding: 32px 15px 48px; }
  .int-brandline p { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .int-reasons { padding: 183px 29px 177px; }
  .int-reasons .pain-grid { margin-top: 68px; gap: 15px; }
  .int-reasons .pain { min-height: 397px; padding: 25px 32px; }
  .int-reasons .pain:nth-child(1) { min-height: 431px; padding-top: 18px; }
  .int-reasons .pain:nth-child(2) { padding-top: 30px; }
  .int-reasons .pain:nth-child(3) { padding-top: 23px; }
  .int-reasons .pain h3 { margin-top: 12px; }
  .int-reasons .pain p { margin-top: 11px; }
  .int-approach { padding: 107px 29px 106px; }
  .int-approach .start-card { padding: 40px; }
  .int-approach h2 { font-size: 26px; line-height: 26px; }
  .int-approach .start-list { margin-top: 41px; gap: 27px; }
  .int-approach .start-list li { gap: 16px; }
  .int-approach .start-no { width: 30px; height: 30px; }
  .int-approach .start-list :is(h3, h4) { font-size: 20px; line-height: 23.08px; }
  .int-approach .start-list p { margin-top: 10px; font-size: 16px; line-height: 19.2px; }
  .int-countries { padding: 64px 29px 79px; }
  .int-countries .cat-grid { margin-top: 40px; gap: 12.5px 16px; }
  .int-who { padding: 103px 29px 102px; }
  .int-who .costs-card { grid-template-columns: 1fr; }
  .int-who .costs-intro { padding: 40px 21px 87px; }
  .int-who .costs-intro h2 { font-size: 26px; line-height: 26px; }
  .int-who .costs-intro p { margin: 31px 0 30px; }
  .int-who .costs-tiles { padding: 80px 40px 110px; }
  .int-compare { max-width: 100%; padding-top: 69px; }
  .int-compare h2 { padding: 0; font-size: 36px; font-weight: 900; line-height: 36px; }
  .int-compare .compare-wrap { margin-top: 0; padding: 54px 22px 118px; }
  .int-compare .compare-grid { gap: 69px; }
  .int-compare .compare { padding: 33px 32px; }
  .int-compare .compare h3 { font-size: 26px; line-height: 26px; letter-spacing: -1.04px; }
  .int-compare .compare dd { margin-bottom: 20px; }
  .int-compare .compare dd:last-child { margin-bottom: 0; }
  .int-faq { padding: 79px 0 80px; }
  .int-seo { padding: 96px 39px; gap: 65px; }
  .int-seo .prose h3 + p { margin-top: 26px; }
  .int-seo .prose p + h3 { margin-top: 29px; }
  .int-seo .prose + .prose p + h3 { margin-top: 48px; }
}

/* ---------- Country pages (/linkbuilding/<land>/, rendered from data/countries.json) ---------- */
.ctry-hero .split-hero-copy p { margin-top: 52px; }
.ctry-hero .hero-cta { margin-top: 34px; }
.ctry-brandline { padding: 23px 20px 47px; }
.ctry-why { padding: 122px 20px 166px; }
.ctry-why .pain-grid { margin-top: 42px; gap: 20px 15px; }
.ctry-why .pain p { font-size: 20px; line-height: 22px; }
.ctry-how { padding: 81px 20px 91px; }
.ctry-how .start-card { width: 1020px; }
.ctry-how h2 { text-align: center; }
.ctry-how .start-list { margin-top: 49px; gap: 47px; }
.ctry-offer { padding: 119px 20px 119px; }
.ctry-diff { padding: 45px 20px 33px; }
.ctry-diff .costs-card { grid-template-columns: 582px 1fr; }
.ctry-diff .costs-intro h2 { max-width: 462px; }
.ctry-diff .costs-intro p { max-width: 462px; margin: 31px 0; }
.ctry-diff .costs-intro p + p { margin-top: -10px; }
.ctry-diff .tile h3 { font-weight: 400; }
@media (min-width: 1200px) and (max-width: 1250px) {
  .ctry-diff .costs-card, .int-who .costs-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ctry-compare .compare { padding: 37px 32px; }
.ctry-compare .compare dl { margin-top: 38px; }
.ctry-compare .compare dd { margin-bottom: 30px; }
.ctry-compare .compare-bad dd { padding-right: 44px; }
.ctry-compare .compare dd strong { font-weight: 900; }
.ctry-examples { padding: 46px 20px 173px; }
.ctry-examples h2 { max-width: 840px; margin: 0 auto; font-size: 36px; font-weight: 900; line-height: 36px; text-align: center; }
.table-wrap { width: 1120px; max-width: 100%; margin: 43px auto 0; overflow-x: auto; }
.ex-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; line-height: 19.2px; }   /* fixed: Framer's columns are exact (40/200/100/213/rest/70/100); auto layout lets the engines split the rest differently */
.ex-table th { padding: 12px; background: #10725b; color: #fff; font-weight: 400; text-align: left; }
.ex-table td { padding: 10px 12px; border: 1px solid #b5b5b5; vertical-align: middle; }
.ex-table th:nth-child(1) { width: 40px; } .ex-table th:nth-child(2) { width: 200px; } .ex-table th:nth-child(3) { width: 100px; }
.ex-table th:nth-child(4) { width: 213px; } .ex-table th:nth-child(6) { width: 70px; } .ex-table th:nth-child(7) { width: 100px; }
/* Framer's rows are a few px taller than ours; the section paddings below were tuned to the old auto-layout
   table, so these keep those totals now that the columns no longer stretch (same in Chrome and Safari). */
.ctry-verenigde-staten .table-wrap { padding-bottom: 38px; } .ctry-engeland .table-wrap { padding-bottom: 20px; } .ctry-spanje .table-wrap { padding-bottom: 19px; }
.ctry-faq { padding: 89px 0; }
.ctry-seo { padding: 124px 20px 124px; }
.ctry-seo .prose p + h3 { margin-top: 29px; }

@media (min-width: 810px) and (max-width: 1199px) {
  .ctry-hero { min-height: 723px; padding: 16px 0 0; }
  .ctry-hero .split-hero-inner { width: 759px; gap: 0; padding: 0; justify-content: space-between; }
  .ctry-hero .split-hero-copy { flex: none; width: 405px; }
  .ctry-hero .split-hero-copy p { margin-top: 26px; }
  .ctry-hero .hero-cta { margin-top: 33px; }
  .ctry-hero .split-hero-visual { flex: none; width: 278px; margin: 0; }
  .ctry-brandline { display: flex; flex-direction: column; justify-content: flex-end; min-height: 161px; padding: 0 20px 48px; }
  .ctry-why { display: flex; flex-direction: column; justify-content: center; min-height: 1119px; padding: 0 20px; }
  .ctry-why h2 { max-width: 678px; margin: 0 auto; }
  .ctry-why .pain-grid { grid-template-columns: 428px 428px; gap: 11px 14px; margin: 42px auto 11px; }
  .ctry-why .pain { display: flex; flex-direction: column; justify-content: center; min-height: 330px; padding: 0 32px; }
  .ctry-why .pain:nth-child(4) { justify-content: flex-start; padding: 61px 77px 0 78px; }
  .ctry-why .pain:nth-child(odd) p { font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }
  .ctry-how { display: flex; flex-direction: column; justify-content: center; min-height: 884px; padding: 0 20px; }
  .ctry-how .start-card { width: 689px; }
  .ctry-how .start-list { gap: 50px; }
  .ctry-offer { display: flex; flex-direction: column; justify-content: center; min-height: 670px; padding: 0 20px; }
  .ctry-offer .cats-head { width: 870px; }
  .ctry-offer .cat-grid { grid-template-columns: repeat(4, 206px); grid-template-rows: 166px 173px; margin-top: 42px; }
  .ctry-offer .cat-grid li { height: auto; }
  .ctry-offer .cat-grid h3 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }   /* Framer's tablet card titles */
  .ctry-nederland .ctry-offer .cat-grid { grid-template-rows: 177px 166px; margin-top: 53px; } .ctry-nederland .ctry-offer .cat-grid li:nth-child(2) { padding-top: 21px; }
  .ctry-diff { padding: 62px 0 48px; }
  .ctry-diff .costs-card { width: calc(100% - 10px); min-height: 1117px; grid-template-columns: 369px 558px; justify-content: center; }
  .ctry-diff .costs-intro { padding: 60px 12px 60px 60px; }
  .ctry-diff .costs-intro h2, .ctry-diff .costs-intro p { max-width: none; }
  .ctry-diff .costs-intro .btn { height: 45px; min-width: 271px; justify-content: center; }
  .ctry-diff .costs-tiles { flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 19px; }
  .ctry-diff .costs-col { flex: none; width: 249px; }
  .ctry-diff .tile h3 { font-size: 16px; font-weight: 700; }
  .ctry-diff .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  .ctry-frankrijk .ctry-diff .costs-intro { padding-top: 47px; }
  .ctry-compare { padding-top: 97px; }
  .ctry-compare h2 { max-width: 708px; min-height: 72px; margin: 0 auto; }
  .ctry-compare .compare-wrap { min-height: 894px; margin-top: 49px; padding: 60px 20px 0; }
  .ctry-compare .compare-grid { grid-template-columns: 345px 347px; }
  .ctry-compare .compare-good { padding-top: 46px; }
  .ctry-compare .compare dd, .ctry-compare .compare-bad dd { margin-bottom: 37px; padding-right: 0; }
  .ctry-compare .compare dd:last-child { margin-bottom: 0; }
  .ctry-examples { padding: 46px 20px 15px; }
  .ctry-examples .table-wrap { width: 716px; margin-top: 39px; }
  .ctry-examples .ex-table { min-width: 1120px; }
  .ctry-faq { width: 626px; grid-template-columns: 233px 393px; padding: 78px 0; }
  .ctry-faq summary { padding: 15px 18px; }
  .ctry-seo { grid-template-columns: 377px 377px; align-content: center; min-height: 712px; padding: 0; }
  /* Framer's tablet section heights differ per country (measured at 1024). */
  .ctry-nederland { display: flex; flex-direction: column; }
  .ctry-nederland .ctry-faq { order: 1; padding: 61px 0 41px; }
  .ctry-nederland .ctry-examples, .ctry-nederland .ctry-seo { order: 2; }
  .ctry-nederland .ctry-hero .split-hero-copy { position: relative; top: -9px; left: -7px; } .ctry-nederland .ctry-hero .hero-cta { margin-top: 44px; }
  .ctry-nederland .ctry-hero { min-height: 753px; } .ctry-nederland .ctry-brandline { min-height: 139px; } .ctry-nederland .ctry-examples { padding: 103px 16px 40px; } .ctry-nederland .table-wrap { width: 992px; margin-top: 62px; } .ctry-nederland .ctry-seo { min-height: 842px; }
  .ctry-frankrijk .ctry-brandline { min-height: 125px; } .ctry-frankrijk .costs-card { min-height: 861px; } .ctry-frankrijk .ctry-examples { padding-top: 121px; } .ctry-frankrijk .ctry-seo { min-height: 860px; }
  .ctry-belgie .ctry-why { min-height: 934px; } .ctry-belgie .costs-card { min-height: 1182px; } .ctry-belgie .ctry-examples { padding-top: 104px; } .ctry-belgie .ctry-seo { min-height: 758px; }
  .ctry-engeland .costs-card { min-height: 1107px; } .ctry-engeland .ctry-examples { padding-top: 121px; } .ctry-engeland .ctry-seo { min-height: 761px; }
  .ctry-spanje .ctry-why { min-height: 886px; } .ctry-spanje .costs-card { min-height: 1150px; } .ctry-spanje .ctry-examples { padding-top: 51px; } .ctry-spanje .ctry-seo { min-height: 705px; }
  .ctry-duitsland .ctry-hero { align-items: flex-start; min-height: 830px; padding-top: 222px; } .ctry-duitsland .ctry-hero .split-hero-inner { align-items: flex-start; } .ctry-duitsland .ctry-hero .split-hero-copy p { margin-top: 145px; } .ctry-duitsland .ctry-hero .split-hero-visual { margin-top: 53px; } .ctry-duitsland .ctry-brandline { min-height: 116px; } .ctry-duitsland .ctry-why { min-height: 887px; } .ctry-duitsland .ctry-diff { padding: 56px 0 43px; } .ctry-duitsland .costs-card { min-height: 1001px; } .ctry-duitsland .ctry-seo { min-height: 1018px; }
  .ctry-italie .costs-card { min-height: 1109px; } .ctry-italie .ctry-examples { padding-top: 36px; } .ctry-italie .ctry-seo { min-height: 685px; }
  .ctry-portugal .costs-card { min-height: 1026px; } .ctry-portugal .ctry-seo { min-height: 954px; }
  .ctry-oostenrijk .costs-card { min-height: 1158px; } .ctry-oostenrijk .ctry-seo { min-height: 747px; }
  .ctry-zweden .costs-card { min-height: 1129px; } .ctry-zweden .ctry-seo { min-height: 763px; }
  .ctry-denemarken .costs-card { min-height: 1128px; } .ctry-denemarken .ctry-seo { min-height: 755px; }
  .ctry-polen .ctry-hero, .ctry-griekenland .ctry-hero, .ctry-australie .ctry-hero, .ctry-canada .ctry-hero { min-height: 881px; }
  .ctry-polen .ctry-brandline, .ctry-griekenland .ctry-brandline, .ctry-australie .ctry-brandline, .ctry-canada .ctry-brandline { min-height: 139px; }
  .ctry-polen .ctry-compare .compare-wrap { min-height: 808px; }
  .ctry-griekenland .ctry-why { min-height: 958px; } .ctry-griekenland .costs-card { min-height: 894px; }
  .ctry-griekenland .ctry-compare .compare-bad { padding: 48px 32px; } .ctry-griekenland .ctry-compare .compare-good { padding-top: 61px; } .ctry-griekenland .ctry-compare .compare dl { margin-top: 25px; }
  .ctry-griekenland .ctry-compare .compare-bad dd { margin-bottom: 25px; } .ctry-griekenland .ctry-compare .compare-good dd { margin-bottom: 24px; } .ctry-griekenland .ctry-compare .compare-good dd:first-of-type { margin-bottom: 46px; } .ctry-griekenland .ctry-compare .compare dd:last-child { margin-bottom: 0; }
  .ctry-verenigde-staten .ctry-hero { min-height: 832px; } .ctry-verenigde-staten .ctry-brandline { min-height: 124px; }
  .ctry-faq { padding-bottom: 70px; }
  .ctry-frankrijk .ctry-hero .split-hero-copy, .ctry-zweden .ctry-hero .split-hero-copy, .ctry-australie .ctry-hero .split-hero-copy { position: relative; top: 41px; }
  .ctry-spanje .ctry-hero .split-hero-copy, .ctry-portugal .ctry-hero .split-hero-copy, .ctry-oostenrijk .ctry-hero .split-hero-copy { position: relative; top: 14px; }
  .ctry-polen .ctry-hero .split-hero-copy { position: relative; top: -26px; } .ctry-griekenland .ctry-hero .split-hero-copy { position: relative; top: -20px; } .ctry-italie .ctry-hero .split-hero-copy { position: relative; top: -30px; }
  .ctry-italie .ctry-why .pain:nth-child(2), .ctry-zweden .ctry-why .pain:nth-child(2), .ctry-denemarken .ctry-why .pain:nth-child(2), .ctry-polen .ctry-why .pain:nth-child(2) { padding-bottom: 40px; }
  .ctry-duitsland .ctry-why .pain:nth-child(2) { padding-top: 46px; }
  .ctry-engeland .ctry-why .pain:nth-child(4) { padding-top: 45px; } .ctry-griekenland .ctry-why .pain:nth-child(4) { padding-top: 31px; }
  .ctry-frankrijk .ctry-why .dark-sub { max-width: 678px; margin-top: 20px; font-weight: 400; } .ctry-frankrijk .ctry-why .dark-sub br { display: none; }
  .ctry-frankrijk .ctry-why .pain p { font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; } .ctry-frankrijk .ctry-why .pain:nth-child(3) { align-self: center; min-height: 411px; padding-bottom: 42px; } .ctry-frankrijk .ctry-why .pain:nth-child(4) { min-height: 453px; }
  .ctry-portugal .ctry-why h2 { position: relative; top: -35px; } .ctry-portugal .ctry-why .pain-grid { row-gap: 83px; } .ctry-portugal .ctry-why .pain:nth-child(2) { padding-top: 36px; }
  .ctry-italie .ctry-compare h2 { min-height: 0; } .ctry-italie .ctry-compare .compare-wrap { margin-top: 7px; }
  .ctry-portugal .ctry-compare h2 { min-height: 0; } .ctry-portugal .ctry-compare .compare-wrap { margin-top: 19px; } .ctry-portugal .ctry-compare .compare-bad { padding-top: 96px; } .ctry-portugal .ctry-compare .compare-good { padding-top: 98px; } .ctry-portugal .ctry-why .pain:nth-child(4) { padding-top: 36px; }
  .ctry-duitsland .ctry-examples { padding-bottom: 28px; }
  .ctry-frankrijk .ctry-examples { padding-bottom: 100px; } .ctry-belgie .ctry-examples { padding-bottom: 35px; } .ctry-engeland .ctry-examples, .ctry-italie .ctry-examples { padding-bottom: 66px; } .ctry-spanje .ctry-examples { padding-bottom: 28px; }
}

@media (max-width: 809px) {
  .ctry-hero { padding: 117px 40px 42px; }
  .ctry-hero .split-hero-copy p { margin-top: 34px; }
  .ctry-hero .hero-cta { margin-top: 34px; }
  .ctry-hero .split-hero-visual { margin-top: 139px; }
  .ctry-brandline { padding: 28px 15px 48px; }
  .ctry-brandline p { font-size: 24px; line-height: 28.8px; letter-spacing: -0.96px; }
  .ctry-why { padding: 136px 29px 147px; }
  .ctry-why .pain-grid { margin-top: 68px; gap: 15px; }
  .ctry-why .pain { display: flex; flex-direction: column; justify-content: center; min-height: 349px; padding: 0 32px; }
  .ctry-why .pain:nth-child(3) { min-height: 308px; margin-top: 38px; }
  .ctry-why .pain:nth-child(4) { margin-top: 2px; }
  .ctry-why .pain h3 { margin-top: 12px; }
  .ctry-why .pain p { margin-top: 12px; font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }
  .ctry-how { padding: 80px 29px; }
  .ctry-how .start-card { padding: 40px; }
  .ctry-how h2 { font-size: 26px; line-height: 26px; text-align: left; }
  .ctry-how .start-list { margin-top: 49px; gap: 50px; }
  .ctry-how .start-list li { gap: 16px; }
  .ctry-how .start-no { width: 30px; height: 30px; }
  .ctry-how .start-list :is(h3, h4) { font-size: 20px; line-height: 23.08px; }
  .ctry-how .start-list p { margin-top: 10px; font-size: 16px; line-height: 19.2px; }
  .ctry-offer { padding: 39px 29px; }
  .ctry-offer .cats-head { gap: 20px; }
  .ctry-offer .cat-grid { margin-top: 42px; }
  .ctry-offer .cat-grid li { height: auto; min-height: 164px; }
  .ctry-diff { display: flex; flex-direction: column; justify-content: center; min-height: 2338px; padding: 0 29px; }
  .ctry-diff .costs-card { grid-template-columns: 1fr; }
  .ctry-diff .costs-intro { padding: 40px 21px; }
  .ctry-diff .costs-intro h2 { font-size: 26px; line-height: 26px; }
  .ctry-diff .costs-intro p { margin: 31px 0; }
  .ctry-diff .costs-tiles { justify-content: center; min-height: 1738px; padding: 32px 40px; }
  .ctry-duitsland .ctry-diff { min-height: 2107px; } .ctry-duitsland .ctry-diff .costs-tiles { min-height: 1530px; } .ctry-nederland .ctry-diff .costs-tiles { min-height: 1685px; } .ctry-nederland .ctry-diff .costs-intro { min-height: 405px; } .ctry-duitsland .ctry-examples { padding-bottom: 46px; }
  .ctry-diff .tile h3 { max-width: 192px; }
  .ctry-diff .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  .ctry-compare { padding-top: 117px; }
  .ctry-compare .compare-wrap { margin-top: 11px; padding: 60px 29px 41px; }
  .ctry-compare .compare h3 { font-size: 24px; line-height: 24px; }
  .ctry-compare .compare-bad { min-height: 737px; padding: 109px 32px 37px; }
  .ctry-compare .compare-good { min-height: 744px; padding: 101px 32px 46px; }
  .ctry-compare .compare dd, .ctry-compare .compare-bad dd { margin-bottom: 38px; padding-right: 0; }
  .ctry-compare .compare dd:last-child { margin-bottom: 0; }
  .ctry-examples { padding: 35px 0 26px; }
  .ctry-examples h2 { padding: 0 34px; font-size: 24px; font-weight: 700; line-height: 24px; }
  .ctry-examples .table-wrap { width: 326px; margin: 61px 0 0 40px; }
  .ex-table { min-width: 1120px; }
  .ctry-faq { padding: 86px 0; }
  .ctry-seo { padding: 95px 39px; gap: 65px; }
  .ctry-seo .prose h3 + p { margin-top: 26px; }
  /* Per-country phone variants (Framer lays out each country page separately). */
  .ctry-nederland .ctry-hero { padding: 164px 40px 56px; } .ctry-nederland .ctry-hero .split-hero-copy p { margin-top: 68px; } .ctry-nederland .ctry-hero .hero-cta { margin-top: 26px; } .ctry-nederland .ctry-hero .split-hero-visual { margin-top: 104px; }
  .ctry-nederland .ctry-brandline { padding-top: 23px; } .ctry-nederland .ctry-why { padding: 67px 29px 77px; } .ctry-nederland .ctry-how { padding: 111px 29px 130px; }
  .ctry-nederland .ctry-seo h3, .ctry-griekenland .ctry-seo h3, .ctry-australie .ctry-seo h3, .ctry-canada .ctry-seo h3, .ctry-verenigde-staten .ctry-seo h3 { font-size: 20px; line-height: 20px; }
  .ctry-nederland .ctry-offer { padding-bottom: 88px; } .ctry-nederland .ctry-compare .compare-wrap { padding-bottom: 54px; } .ctry-nederland .ctry-compare .compare-bad { min-height: 590px; padding-top: 43px; } .ctry-nederland .ctry-compare .compare-good { min-height: 633px; padding-top: 53px; }
  .ctry-nederland .ctry-examples { padding: 103px 0 68px; } .ctry-nederland .ctry-examples h2 { padding: 0 44px 0 45px; } .ctry-nederland .table-wrap { width: 374px; margin: 98px 0 0 16px; } .ctry-nederland .ex-table td { padding-top: 11.5px; padding-bottom: 11.5px; } .ctry-nederland .ctry-faq { padding: 0; } .ctry-nederland .ctry-seo { padding-top: 94px; }
  .ctry-verenigde-staten .ctry-how { padding-bottom: 100px; } .ctry-verenigde-staten .ctry-seo { padding-top: 32px; padding-bottom: 44px; } .ctry-verenigde-staten .ctry-compare .compare-bad { padding-top: 99px; } .ctry-nederland .ctry-offer { padding-top: 76px; }
  .ctry-verenigde-staten .ctry-hero h1 { width: 338px; max-width: none; margin-left: -14px; }   /* Framer's 338px title box: in 310px Safari's wider flag emoji pushes a word to a sixth line */
  .ctry-verenigde-staten .ctry-hero { padding: 72px 40px 18px; } .ctry-verenigde-staten .ctry-hero .split-hero-copy p { margin-top: 72px; } .ctry-verenigde-staten .ctry-hero .hero-cta { margin-top: 22px; } .ctry-verenigde-staten .ctry-hero .split-hero-visual { margin-top: 134px; }
  .ctry-nederland .ctry-why .pain:nth-child(3), .ctry-verenigde-staten .ctry-why .pain:nth-child(3) { min-height: 277px; margin-top: 69px; }
  .ctry-offer { padding-bottom: 52px; } .ctry-nederland .ctry-offer { padding-bottom: 76px; } .ctry-verenigde-staten .ctry-offer { padding-bottom: 39px; } .ctry-faq { padding-bottom: 79px; }
  /* Nederland offer: Framer groups the 8 cards in two 381px blocks; the second block's cards are 183px tall */
  .ctry-nederland .ctry-offer .cat-grid li:nth-child(5), .ctry-nederland .ctry-offer .cat-grid li:nth-child(6) { margin-top: 16px; } .ctry-nederland .ctry-offer .cat-grid li:nth-child(n+7) { min-height: 183px; }
  /* Nederland compare: live clips the bad card's longer answers; spacing tightened so both card headings land on live's */
  main.ctry-nederland .ctry-compare .compare-bad { padding: 53px 32px 30px; } main.ctry-nederland .ctry-compare .compare dl { margin-top: 35px; } main.ctry-nederland .ctry-compare .compare dd { margin-top: 9px; }
  main.ctry-nederland .ctry-compare .compare-bad dd { margin-bottom: 30px; } main.ctry-nederland .ctry-compare .compare-good dd { margin-bottom: 35px; } main.ctry-nederland .ctry-compare .compare dd:last-child { margin-bottom: 0; }
  .ctry-nederland .ctry-faq h2 { margin-bottom: 35px; } .ctry-nederland .ctry-faq .faq-list { gap: 15px; margin-bottom: -4px; } .ctry-nederland .ctry-faq summary { min-height: 73px; }
  .ctry-australie .ctry-compare .compare-good { padding-top: 86px; } .ctry-australie .ctry-compare .compare-good dd { margin-bottom: 35px; } .ctry-australie .ctry-compare .compare-good dd:last-child { margin-bottom: 0; }
  .ctry-frankrijk .ctry-hero { padding-bottom: 19px; } .ctry-belgie .ctry-hero, .ctry-italie .ctry-hero, .ctry-polen .ctry-hero { padding-bottom: 61px; } .ctry-engeland .ctry-hero { padding-bottom: 56px; } .ctry-spanje .ctry-hero { padding-bottom: 81px; }
  .ctry-portugal .ctry-hero { padding-bottom: 11px; } .ctry-oostenrijk .ctry-hero { padding-bottom: 35px; } .ctry-zweden .ctry-hero { padding-bottom: 29px; } .ctry-denemarken .ctry-hero { padding-bottom: 54px; }
  .ctry-griekenland .ctry-hero { padding-bottom: 0; margin-bottom: -19px; } .ctry-australie .ctry-hero { padding-bottom: 0; margin-bottom: -23px; } .ctry-canada .ctry-hero { padding-bottom: 0; margin-bottom: -17px; }
  .ctry-frankrijk .ctry-brandline { padding-top: 48px; }
  .ctry-italie .ctry-how { padding-bottom: 106px; } .ctry-oostenrijk .ctry-how { padding-bottom: 61px; } .ctry-griekenland .ctry-how, .ctry-australie .ctry-how { padding-bottom: 118px; } .ctry-canada .ctry-how { padding-bottom: 138px; }
  .ctry-frankrijk .ctry-diff { min-height: 1963px; } .ctry-belgie .ctry-diff { min-height: 2238px; } .ctry-engeland .ctry-diff { min-height: 2099px; } .ctry-spanje .ctry-diff { min-height: 2091px; } .ctry-italie .ctry-diff { min-height: 2264px; }
  .ctry-portugal .ctry-diff { min-height: 2113px; } .ctry-oostenrijk .ctry-diff { min-height: 2251px; } .ctry-zweden .ctry-diff { min-height: 2255px; } .ctry-denemarken .ctry-diff { min-height: 2249px; } .ctry-griekenland .ctry-diff { min-height: 2083px; }
  :is(.ctry-frankrijk, .ctry-belgie, .ctry-engeland, .ctry-spanje, .ctry-italie, .ctry-portugal, .ctry-oostenrijk, .ctry-zweden, .ctry-denemarken, .ctry-griekenland) .ctry-diff .costs-tiles { min-height: 0; }
  .ctry-frankrijk .ctry-compare .compare-wrap { padding-bottom: 181px; }
  :is(.ctry-griekenland, .ctry-canada) .ctry-compare .compare-bad, :is(.ctry-griekenland, .ctry-canada) .ctry-compare .compare-good { min-height: 0; }
  .ctry-frankrijk .ctry-examples { padding: 117px 0 72px; } .ctry-frankrijk .ctry-examples .table-wrap { margin-top: 27px; } .ctry-belgie .ctry-examples { padding-bottom: 121px; } .ctry-engeland .ctry-examples { padding-bottom: 52px; } .ctry-spanje .ctry-examples { padding-bottom: 54px; } .ctry-italie .ctry-examples { padding-bottom: 51px; }
  :is(.ctry-belgie, .ctry-engeland, .ctry-spanje, .ctry-italie, .ctry-oostenrijk, .ctry-zweden, .ctry-denemarken, .ctry-polen, .ctry-griekenland, .ctry-australie, .ctry-canada) .ctry-why .pain:nth-child(3) { padding-top: 30px; }
  .ctry-italie .ctry-how { padding-top: 94px; padding-bottom: 92px; } .ctry-griekenland .ctry-how, .ctry-australie .ctry-how { padding-top: 99px; padding-bottom: 99px; } .ctry-canada .ctry-how { padding-top: 109px; padding-bottom: 109px; }
  .ctry-diff .costs-card { position: relative; }
  .ctry-frankrijk .ctry-diff .costs-card { top: -41px; } .ctry-belgie .ctry-diff .costs-card { top: -28px; } .ctry-engeland .ctry-diff .costs-card { top: -30px; } .ctry-spanje .ctry-diff .costs-card { top: -26px; } .ctry-italie .ctry-diff .costs-card { top: -47px; }
  .ctry-portugal .ctry-diff .costs-card { top: 46px; } .ctry-zweden .ctry-diff .costs-card { top: -38px; } .ctry-denemarken .ctry-diff .costs-card { top: -29px; } .ctry-griekenland .ctry-diff .costs-card { top: -58px; } .ctry-australie .ctry-diff .costs-card { top: 66px; }
  .ctry-frankrijk .ctry-why .dark-sub { margin-top: 20px; font-weight: 400; } .ctry-frankrijk .ctry-why .dark-sub br { display: none; } .ctry-frankrijk .ctry-why { padding-top: 50px; padding-bottom: 63px; } .ctry-frankrijk .ctry-why .pain:nth-child(3) { min-height: 350px; margin-top: -4px; padding-bottom: 42px; } .ctry-frankrijk .ctry-how { padding-bottom: 89px; } .ctry-frankrijk .ctry-diff { margin-bottom: -79px; } .ctry-frankrijk .ctry-compare .compare-bad { padding-top: 136px; } .ctry-frankrijk .ctry-compare .compare-good { padding-top: 128px; }
  .ctry-belgie .ctry-hero { padding-top: 224px; } .ctry-belgie .ctry-hero .split-hero-visual { margin-top: 32px; }
  .ctry-frankrijk .ctry-hero, .ctry-griekenland .ctry-hero { padding-top: 93px; } .ctry-portugal .ctry-hero { padding-top: 101px; } .ctry-oostenrijk .ctry-hero { padding-top: 91px; } .ctry-polen .ctry-hero { padding-top: 97px; }
  .ctry-frankrijk .ctry-hero .split-hero-visual, .ctry-griekenland .ctry-hero .split-hero-visual { margin-top: 163px; } .ctry-portugal .ctry-hero .split-hero-visual { margin-top: 155px; } .ctry-oostenrijk .ctry-hero .split-hero-visual { margin-top: 165px; } .ctry-polen .ctry-hero .split-hero-visual { margin-top: 159px; }
  :is(.ctry-griekenland, .ctry-canada) .ctry-compare .compare-bad { padding-top: 37px; } :is(.ctry-griekenland, .ctry-canada) .ctry-compare .compare-good { padding-top: 46px; } .ctry-griekenland .ctry-compare .compare-bad dd { margin-bottom: 10px; } .ctry-griekenland .ctry-compare .compare-good dd { margin-bottom: 27px; } .ctry-canada .ctry-compare .compare-bad dd { margin-bottom: 13px; } .ctry-griekenland .ctry-compare .compare-wrap { padding-bottom: 4px; }
  .ctry-frankrijk .ctry-seo { padding-top: 37px; padding-bottom: 52px; } .ctry-griekenland .ctry-seo { padding-top: 64px; padding-bottom: 51px; } .ctry-belgie .ctry-seo { padding-top: 71px; padding-bottom: 71px; } .ctry-spanje .ctry-seo { padding-top: 86px; padding-bottom: 86px; }
  .ctry-italie .ctry-seo { padding-top: 116px; padding-bottom: 116px; } .ctry-zweden .ctry-seo { padding-top: 43px; padding-bottom: 43px; } .ctry-denemarken .ctry-seo { padding-top: 131px; padding-bottom: 131px; } .ctry-polen .ctry-seo { padding-top: 61px; padding-bottom: 61px; } .ctry-canada .ctry-seo { padding-top: 85px; padding-bottom: 85px; }
}

/* ---------- Linkbuilding uitbesteden: tablet + phone, scoped to that page (main has .lu-cases) ---------- */
@media (min-width: 810px) and (max-width: 1199px) {
  main:has(> .lu-cases) .split-hero { min-height: 0; padding: 203px 0 186px; }
  main:has(> .lu-cases) .split-hero-inner { width: 719px; gap: 0; padding: 0; justify-content: space-between; }
  main:has(> .lu-cases) .split-hero-copy { flex: none; width: 351px; }
  main:has(> .lu-cases) .split-hero h1 { font-size: 50px; line-height: 45px; }
  main:has(> .lu-cases) .split-hero-copy p { margin: 20px 0 18px; font-size: 16px; line-height: 20px; letter-spacing: -0.64px; }
  main:has(> .lu-cases) .split-hero-visual { flex: none; width: 278px; margin: 0; }
  main:has(> .lu-cases) .brandline { padding: 84px 20px 48px; }
  main:has(> .lu-cases) .lu-pains { padding: 96px 20px 107px; }
  main:has(> .lu-cases) .lu-pains .dark-sub { margin-top: 20px; }
  main:has(> .lu-cases) .pain-grid { grid-template-columns: 428px 428px; gap: 12px 14px; margin-top: 41px; }
  main:has(> .lu-cases) .pain { min-height: 329px; padding: 44px 32px; }
  main:has(> .lu-cases) .pain:nth-child(n+3) { min-height: 387px; padding-top: 63px; }
  main:has(> .lu-cases) .pain:nth-child(4) { padding-top: 73px; }
  main:has(> .lu-cases) .pain p { font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }
  main:has(> .lu-cases) .steps-sec { padding: 70px 20px; }
  main:has(> .lu-cases) .steps-sec h2 { max-width: 688px; margin: 0 auto; }
  main:has(> .lu-cases) .steps { width: 897px; }
  main:has(> .lu-cases) .step { grid-template-columns: 468px 428px; height: 468px; }
  main:has(> .lu-cases) .step-flip { grid-template-columns: 428px 468px; }
  main:has(> .lu-cases) .step:nth-child(2) { height: 478px; }
  main:has(> .lu-cases) .step:nth-child(3) { height: 467px; }
  main:has(> .lu-cases) .step:nth-child(4) { height: 536px; }
  main:has(> .lu-cases) .step:nth-child(5) { height: 400px; }
  main:has(> .lu-cases) .step:nth-child(6) { height: 551px; }
  main:has(> .lu-cases) .step-text { justify-content: space-between; padding: 40px 20px; }
  main:has(> .lu-cases) .step-no { font-size: 24px; line-height: 28.8px; }
  main:has(> .lu-cases) .step-head h3 { font-size: 18px; line-height: 21.6px; }
  main:has(> .lu-cases) .step-body p { margin: 0; }
  main:has(> .lu-cases) .step-body p + p { margin-top: 24px; }
  main:has(> .lu-cases) .step-media img { height: auto !important; max-width: none; }
  main:has(> .lu-cases) .step:nth-child(1) .step-media img { width: 197px; }
  main:has(> .lu-cases) .step:nth-child(2) .step-media img { width: 326px; }
  main:has(> .lu-cases) .step:nth-child(3) .step-media img { width: 248px; }
  main:has(> .lu-cases) .step:nth-child(4) .step-media img { width: 218px; }
  main:has(> .lu-cases) .step:nth-child(5) .step-media img { width: 193px; }
  main:has(> .lu-cases) .step:nth-child(6) .step-media img { width: 236px; }
  main:has(> .lu-cases) .lu-compare { padding-top: 97px; }
  main:has(> .lu-cases) .lu-compare h2 { max-width: 708px; margin: 0 auto; }
  main:has(> .lu-cases) .lu-compare .compare-wrap { margin-top: 49px; padding: 60px 20px 113px; }
  main:has(> .lu-cases) .compare-grid { grid-template-columns: 345px 347px; }
  main:has(> .lu-cases) .compare { padding: 33px 32px; }
  main:has(> .lu-cases) .compare dd { margin-bottom: 33px; padding-right: 0; }
  main:has(> .lu-cases) .compare-bad dd { margin-bottom: 38px; overflow: hidden; white-space: nowrap; }
  main:has(> .lu-cases) .compare-good dl { margin-top: 33px; }
  main:has(> .lu-cases) .compare dd:last-child { margin-bottom: 0; }
  main:has(> .lu-cases) .lu-start { padding: 177px 20px; }
  main:has(> .lu-cases) .lu-start .start-card { width: 870px; }
  main:has(> .lu-cases) .lu-cases { padding-top: 112px; }
  main:has(> .lu-cases) .lu-cases h2 { max-width: 636px; margin: 0 auto; }
  main:has(> .lu-cases) .cases-wrap { margin-top: 17px; padding: 114px 15px 130px; }
  main:has(> .lu-cases) .case-grid { grid-template-columns: repeat(3, 321px); align-items: start; min-height: 502px; }
  main:has(> .lu-cases) .case { min-height: 0; padding: 34px 32px; }
  main:has(> .lu-cases) .case h3 { margin-top: 24px; font-size: 16px; line-height: 19.2px; letter-spacing: -0.64px; }
  main:has(> .lu-cases) .case-sub { margin-top: 24px; }
  main:has(> .lu-cases) .case-block:first-of-type { min-height: 0; }
  main:has(> .lu-cases) .cta-bar { width: 993px; }
  main:has(> .lu-cases) .faq { width: 626px; grid-template-columns: 233px 393px; padding: 78px 0 60px; }
  main:has(> .lu-cases) .faq summary { padding: 15px 18px; }
  main:has(> .lu-cases) .lu-costs { padding: 48px 0 0; }
  main:has(> .lu-cases) .costs-card { width: calc(100% - 10px); min-height: 971px; grid-template-columns: 369px 558px; justify-content: center; }
  main:has(> .lu-cases) .costs-intro { padding: 60px 12px 60px 60px; }
  main:has(> .lu-cases) .costs-intro h2, main:has(> .lu-cases) .costs-intro p { max-width: none; }
  main:has(> .lu-cases) .costs-intro .btn { height: 45px; min-width: 240px; justify-content: center; }
  main:has(> .lu-cases) .costs-tiles { flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 19px; }
  main:has(> .lu-cases) .costs-col { flex: none; width: 249px; }
  main:has(> .lu-cases) .tile h3 { font-size: 16px; font-weight: 700; }
  main:has(> .lu-cases) .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  main:has(> .lu-cases) .seo-text { grid-template-columns: 377px 377px; padding: 227px 0 275px; }
}
@media (max-width: 809px) {
  main:has(> .lu-cases) .split-hero { padding: 171px 40px 163px; }
  main:has(> .lu-cases) .split-hero-copy p { margin-top: 44px; }
  main:has(> .lu-cases) .brandline { padding: 5px 15px 48px; }
  main:has(> .lu-cases) .lu-pains .dark-sub { margin-top: 20px; }
  main:has(> .lu-cases) .lu-pains { padding-bottom: 49px; }
  main:has(> .lu-cases) .pain-grid { gap: 0; }
  main:has(> .lu-cases) .pain { padding-bottom: 0; }
  main:has(> .lu-cases) .pain:nth-child(1) { min-height: 282px; }
  main:has(> .lu-cases) .pain:nth-child(2) { min-height: 249px; }
  main:has(> .lu-cases) .pain:nth-child(3) { min-height: 358px; }
  main:has(> .lu-cases) .pain:nth-child(4) { min-height: 295px; }
  main:has(> .lu-cases) .steps-sec { padding: 64px 24px 48px; }
  main:has(> .lu-cases) .steps { width: 325px; }
  main:has(> .lu-cases) .step, main:has(> .lu-cases) .step:nth-child(n) { height: 479px; margin-bottom: 121px; }
  main:has(> .lu-cases) .step:nth-child(2) { height: 493px; }
  main:has(> .lu-cases) .step:nth-child(3) { height: 506px; }
  main:has(> .lu-cases) .step:nth-child(4) { height: 551px; }
  main:has(> .lu-cases) .step:nth-child(5) { height: 556px; }
  main:has(> .lu-cases) .steps .step:last-child { height: 581px; margin-bottom: 0; }
  main:has(> .lu-cases) .step-text { gap: 30px; }
  main:has(> .lu-cases) .step-head { min-height: 43px; }
  main:has(> .lu-cases) .step-no { font-size: 24px; line-height: 28.8px; }
  main:has(> .lu-cases) .step-body p { margin: 0; }
  main:has(> .lu-cases) .step-body p + p { margin-top: 24px; }
  main:has(> .lu-cases) .lu-compare .compare-wrap { margin-top: 11px; padding: 60px 29px 57px; }
  main:has(> .lu-cases) .compare { padding: 24px 32px 38px; }
  main:has(> .lu-cases) .compare-good { padding: 26px 32px; }
  main:has(> .lu-cases) .compare dd { margin-bottom: 33px; }
  main:has(> .lu-cases) .compare-bad dd { margin-bottom: 38px; }
  main:has(> .lu-cases) .compare-good dl { margin-top: 33px; }
  main:has(> .lu-cases) .compare dd:last-child { margin-bottom: 0; }
  main:has(> .lu-cases) .lu-start { padding: 182px 29px; }
  main:has(> .lu-cases) .lu-start .start-card { padding: 40px; }
  main:has(> .lu-cases) .lu-start h2 { font-size: 26px; line-height: 26px; }
  main:has(> .lu-cases) .lu-start .start-list { margin-top: 73px; gap: 50px; }
  main:has(> .lu-cases) .lu-start .start-list li { gap: 16px; }
  main:has(> .lu-cases) .lu-start .start-no { width: 30px; height: 30px; }
  main:has(> .lu-cases) .lu-start .start-list :is(h3, h4) { font-size: 20px; line-height: 23.08px; }
  main:has(> .lu-cases) .lu-start .start-list p { margin-top: 10px; font-size: 16px; line-height: 19.2px; }
  main:has(> .lu-cases) .lu-cases { padding-top: 87px; }
  main:has(> .lu-cases) .lu-cases h2 { padding: 0 63px 0 40px; font-size: 26px; line-height: 26px; }
  main:has(> .lu-cases) .cases-wrap { margin-top: 13px; padding: 55px 33px 72px; }
  main:has(> .lu-cases) .case-grid { gap: 15px; }
  main:has(> .lu-cases) .case { padding: 33px 24px 24px; }
  main:has(> .lu-cases) .case:nth-child(1) { min-height: 502px; }
  main:has(> .lu-cases) .case:nth-child(2) { min-height: 478px; }
  main:has(> .lu-cases) .case:nth-child(3) { min-height: 475px; }
  /* Framer stacks these cards with fixed gaps and blank lines: icon, h3 and sub 15px apart
     (14px in card 3, 17px under card 1's icon), the "Aanpak" block always 123px below "Uitgangssituatie". Card 1 is
     vertically centred, so its content starts lower. */
  main:has(> .lu-cases) .cases-wrap { padding-top: 47px; padding-bottom: 80px; }
  main:has(> .lu-cases) .case { padding-top: 24px; }
  main:has(> .lu-cases) .case:nth-child(1) { padding-top: 38px; }
  main:has(> .lu-cases) .case h3 { margin-top: 15px; line-height: 19.2px; letter-spacing: -0.64px; }
  main:has(> .lu-cases) .case-sub { margin-top: 15px; }
  main:has(> .lu-cases) .case:nth-child(1) h3 { margin-top: 17px; }
  main:has(> .lu-cases) .case:nth-child(1) .case-block:first-of-type { margin-top: 17.6px; }
  main:has(> .lu-cases) .case:nth-child(3) :is(h3, .case-sub, .case-block:first-of-type) { margin-top: 14px; }
  main:has(> .lu-cases) .case-block:first-of-type { min-height: 123.1px; }
  main:has(> .lu-cases) .case-block + .case-block { margin-top: 0; }
  main:has(> .lu-cases) .faq { padding: 183px 0 158px; }
  main:has(> .lu-cases) .faq h2 { margin-bottom: 38px; font-weight: 700; line-height: 24px; }
  main:has(> .lu-cases) .faq summary { font-size: 16px; font-weight: 400; line-height: 22.4px; letter-spacing: -0.16px; }
  main:has(> .lu-cases) .faq details p { font-size: 15px; line-height: 19.5px; letter-spacing: -0.15px; }
  main:has(> .lu-cases) .lu-costs { padding: 32px 29px 31px; }
  main:has(> .lu-cases) .costs-intro { padding: 40px 21px 101px; }
  main:has(> .lu-cases) .costs-intro h2 { font-size: 26px; line-height: 26px; }
  main:has(> .lu-cases) .costs-intro p { margin: 31px 0 30px; }
  main:has(> .lu-cases) .costs-intro .btn { height: 34px; padding: 0 20px; font-size: 18px; }
  main:has(> .lu-cases) .costs-tiles { padding: 19px 40px 20px; }
  main:has(> .lu-cases) .tile h3 { min-height: 60px; }
  main:has(> .lu-cases) .costs-col-offset .tile h3 { min-height: 0; }
  main:has(> .lu-cases) .costs-col-offset .tile:first-child h3 { margin-top: 12px; }
  main:has(> .lu-cases) .seo-text { padding: 167px 39px 151px; gap: 65px; }
  main:has(> .lu-cases) .prose h3 + p { margin-top: 26px; }
  main:has(> .lu-cases) .prose p + p { margin-top: 22px; }
}

/* ---------- Text pages (data/textpages.json): centered hero + body ---------- */
.top-text { min-height: 567px; }
.top-text::after { background-size: max(100%, 1656px) auto; background-position: center top; }
.theme-yellow .top-text::before { background: radial-gradient(50% 50% at 91.4% 95.5%, rgba(255, 217, 3, 0.14) 0%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(#fff 17%, rgba(255, 213, 5, 0.62) 100%); }
.hero-text { padding: 123px 20px 0; }
.has-badge .hero-text { padding-top: 89px; }
.hero-text h1 { line-height: 54px; }
.hero-text .badge { margin-bottom: 0; }
.hero-text .btn { margin-top: 33px; }
.theme-yellow .badge { background: #fffadb; color: #000; }
.theme-yellow .hero-text .hero-sub { font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }
.theme-yellow .hero-text .btn { margin-top: 31px; color: var(--ink); }
.text-body { padding: 40px 20px; }
.text-body-inner { width: 880px; max-width: 100%; margin: 0 auto; }
.text-body a { color: var(--green); }
.text-body h2, .text-body h3 { color: var(--ink); font-size: 55.7px; font-weight: 700; line-height: 66.84px; letter-spacing: -1.62px; }
.tb-large p, .tb-large li { font-size: 18.9px; font-weight: 500; line-height: 37.5px; }
.tb-large h2 { text-align: center; }
.tb-compact p { font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.tb-compact p + p { margin-top: 20px; }
.tb-compact h2, .tb-compact h3 { margin: 38px 0 19px; }
.tb-compact > div > :first-child { margin-top: 0; }
.tb-legal { padding-top: 46px; }
.tb-legal h2 { font-size: 18.9px; font-weight: 700; line-height: 37.5px; letter-spacing: 0; }
.tb-legal p, .tb-legal li { font-size: 18.9px; font-weight: 500; line-height: 37.5px; }
.tb-legal ul { padding-left: 26px; }

@media (max-width: 809px) {
  .top-text { min-height: 0; padding-bottom: 80px; }
  .hero-text { padding-top: 90px; }
  .has-badge .hero-text { padding-top: 60px; }
  .hero-text h1 { font-size: 36px; line-height: 36px; }
  .text-body { padding: 40px 20px; }
  .tb-compact { padding-bottom: 46px; }
  .tb-compact h2, .tb-compact h3, .tb-large h2, .tb-large h3 { font-size: 36px; line-height: 43.2px; letter-spacing: -1px; }
  /* Framer bolds "Satoshi Medium" synthetically, which runs narrower than the real bold. */
  .tb-legal h2 { font-size: 18.9px; font-weight: 500; line-height: 37.5px; -webkit-text-stroke: 0.4px currentColor; }
  /* Framer centres the hero block in a 567px band that starts 20px below the .top box. */
  main .top-text:not(.top-blog):not(.author-top):not(.top-cases) { display: flex; flex-direction: column; justify-content: center; min-height: 587px; padding: 20px 0 0; }
  main .top-text:not(.top-blog):not(.author-top):not(.top-cases) .hero-text { padding: 0 20px; }
  .top-text:not(.has-badge) .hero-text h1 { margin-top: 0; }
  main .top-text.has-badge:not(.top-blog):not(.tool-top):not(.top-cases) .hero-text { padding-top: 60px; }
  .top-text:not(.top-blog) .hero-text h1 { font-size: 40px; line-height: 36px; }
  .top-text:not(.top-blog) .hero-text .hero-sub { max-width: 288px; font-size: 18px; line-height: 21.6px; letter-spacing: -0.72px; }
  .top-text.has-badge:not(.top-blog) .hero-text .hero-sub { max-width: 273px; }
  main:not(.theme-yellow) .has-badge:not(.top-blog):not(.tool-top):not(.top-cases) .hero-sub { font-size: 22px; line-height: 26.4px; letter-spacing: -0.88px; }
  .top-text.has-badge:not(.top-blog):not(.tool-top):not(.top-cases) .badge { font-size: 16px; }
  .top-text:not(.top-blog) .hero-text .btn { height: 34px; padding: 0 20px; font-size: 18px; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  main .top-text:not(.top-blog):not(.author-top) { display: flex; flex-direction: column; justify-content: center; min-height: 587px; padding-top: 20px; }
  main .top-text:not(.top-blog):not(.author-top) .hero-text { padding: 0 20px; }
  .top-text:not(.has-badge) .hero-text h1 { margin-top: 0; }
  main:not(.theme-yellow) .top-text:not(.top-blog) .hero-text .hero-sub { max-width: 681px; font-size: 22px; line-height: 26.4px; letter-spacing: -0.88px; }
}
/* Text-page typography keeps the tablet sizes up to 1439px. */
@media (min-width: 810px) and (max-width: 1439px) {
  main:not(.theme-yellow) .has-badge:not(.top-blog):not(.tool-top):not(.top-cases) h1 { font-size: 40px; line-height: 36px; }
  .tb-compact h2, .tb-compact h3, .tb-large h2, .tb-large h3 { font-size: 45px; line-height: 54px; }
}

/* ---------- Cases ---------- */
.cases-list { padding: 54px 20px; }
.case-teaser-sm { grid-template-columns: 446px 394px; width: 840px; margin-top: 0; }
.case-teaser-sm h2 { font-size: 30px; font-weight: 700; line-height: 30px; letter-spacing: -1.2px; }
.case-teaser-sm .case-teaser-text img { margin-top: 18px; }
.case-hero { min-height: 582px; padding-top: 22px; align-items: flex-start; }
.case-hero .split-hero-inner { width: 827px; align-items: flex-start; padding-top: 42px; }
.case-hero .split-hero-copy { width: 505px; }
.case-hero h1 { margin-top: 36px; }
.case-hero .split-hero-copy p { margin: 26px 0 67px; color: #000; font-weight: 400; letter-spacing: 0; }
.back { display: block; width: 32px; color: #000; }
.back .icon { width: 32px; height: 32px; }
.case-hero-img { width: 245px; height: 333px; margin-top: 72px; border-radius: 10px; object-fit: contain; }
.case-body { padding: 40px 20px 195px; }
.case-body-inner { width: 912px; max-width: 100%; margin: 0 auto; }
.case-body h2 { font-size: 28.2px; font-weight: 700; line-height: 36px; letter-spacing: -0.81px; color: var(--ink); }
.case-body h2 + p { margin-top: 20px; }
.case-body p { font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.case-body p + p { margin-top: 20px; }
.case-body h2:not(:first-child) { margin-top: 56px; }
.press { list-style: none; margin-top: 56px; display: flex; flex-direction: column; gap: 56px; }
.press li { display: flex; align-items: center; gap: 16px; }
.press img { width: 60px; height: 60px; border-radius: 99px; object-fit: cover; }
.press p { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0; }
.quote-card { margin: 57px 0 0; padding: 60px; border-radius: 20px; background: #fafafa; }
.quote-card figcaption { display: flex; align-items: center; gap: 16px; }
.quote-card figcaption img { border-radius: 99px; object-fit: cover; }
.quote-card figcaption b { display: block; font-size: 20px; font-weight: 600; line-height: 28px; }
.quote-card figcaption small { display: block; margin-top: 2px; color: #696969; font-size: 14px; line-height: 19.6px; }
.quote-card .li { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 99px; background: #257cff; color: #fff; }
.quote-card .li svg { width: 16px; height: 16px; }
.quote-card blockquote { margin: 40px 0 0; }

/* ---------- Gratis analyse ---------- */
.ga-hero .split-hero-inner { width: 1063px; }
.ga-hero .split-hero-copy { width: 505px; }
.ga-hero .tick-list { margin: 62px 0 0; }
.ga-hero .split-hero-copy p.hero-note { margin: 30px 0 0; }
.ga-form { display: flex; flex-direction: column; width: 436px; }
.ga-form label { color: var(--ink); font-size: 21.9px; font-weight: 700; line-height: 34px; letter-spacing: -0.65px; }
.ga-form input { height: 40px; margin: 10px 0 20px; padding: 12px; border: 0; border-radius: 10px; background: rgba(187, 187, 187, 0.5); font: inherit; font-size: 14px; }
.ga-form input::placeholder { color: #888; }
.ga-form button { height: 40px; border: 0; border-radius: 10px; background: var(--green); color: #fff; font: inherit; font-size: 18px; font-weight: 500; cursor: pointer; }
.ga-form .hp { position: absolute; left: -9999px; height: 1px; margin: 0; }
.ga-form .form-status { margin-top: 12px; }
.ga-faq { padding: 100px 0; }

/* The case hero keeps its tablet layout up to 1439px (the body switches at 1200). */
@media (min-width: 810px) and (max-width: 1439px) {
  .case-hero { min-height: 582px; padding: 22px 20px 0; align-items: center; }
  .case-hero .split-hero-inner { width: 721px; justify-content: space-between; align-items: center; gap: 57px; padding: 0 0 0 20px; }
  .case-hero .split-hero-copy { flex: none; width: 351px; }
  .case-hero h1 { font-size: 40px; line-height: 36px; }
  .case-hero .split-hero-copy p { margin: 26px 0 68px; }
  .case-hero-img { width: 273px; height: 412px; margin-top: 0; }
  .case-body-inner { max-width: calc((100% - 214px) * 0.9); }
}
/* Framer's tablet variant for these pages runs 810-1199; from 1200 the desktop layout holds. */
@media (min-width: 810px) and (max-width: 1199px) {
  main .top-text.top-cases:not(.top-blog):not(.author-top) { min-height: 981px; }
  main .top-text.top-cases:not(.top-blog) .hero-text .hero-sub { max-width: none; }
  .cases-list { padding: 104px 20px; }
  .case-teaser-sm { grid-template-columns: 569px 281px; width: 850px; }
  .case-teaser-sm .case-teaser-text { display: flex; flex-direction: column; align-items: flex-start; }
  .case-teaser-sm .case-teaser-text img { margin: auto 0; }
  .case-teaser-sm .case-teaser-text .btn { margin-top: 33px; }
  .case-hero { min-height: 602px; padding-top: 42px; }
  .case-body-inner { width: 717px; max-width: 100%; }
  .ga-hero { min-height: 725px; padding: 16px 20px 0; }
  .ga-hero .split-hero-inner { width: 794px; justify-content: center; gap: 0; padding: 0; }
  .ga-hero .split-hero-copy { flex: none; width: 351px; margin: 0 20px; padding: 13px 0; }
  .ga-hero h1 { margin: 19px 0; }
  .ga-hero .tick-list { margin: 62px 0 0; gap: 5px; }
  .ga-hero .split-hero-copy p.hero-note { margin-top: 36px; }
  .ga-form { flex: none; width: 343px; margin: 0 30px; }
  /* Framer's tablet FAQ: a 393px list column with 36px side padding; items are 14px + text + 14px. */
  .ga-faq { grid-template-columns: 233px 393px; column-gap: 0; justify-content: center; width: auto; margin: 0; }
  .ga-faq .faq-list { padding: 0 36px; gap: 16px; }
  .ga-faq summary { min-height: 0; padding: 14px 18px; }
}

@media (max-width: 809px) {
  .case-teaser-sm { grid-template-columns: 1fr; width: auto; }
  main .top-cases { min-height: 766px; padding-bottom: 0; }
  main .top-cases .hero-text { padding: 189px 39px 0; }
  .top-cases h1 { font-size: 40px; line-height: 36px; }
  main .top-text.top-cases.has-badge .hero-text .hero-sub { max-width: none; font-size: 18px; line-height: 21.6px; }
  .top-cases .btn { height: 34px; padding: 0 20px; font-size: 18px; }
  .cases-list { padding: 44px 29px; }
  .case-teaser-sm .case-teaser-text { display: flex; flex-direction: column; align-items: flex-start; min-height: 416px; }
  .case-teaser-sm h2 { font-size: 20px; line-height: 20px; letter-spacing: -0.8px; }
  .case-teaser-sm .case-teaser-text img { width: 62px; height: 33px; margin: auto 0; }
  .case-teaser-sm .case-teaser-text .btn { margin-top: 33px; }
  .case-hero { padding: 79px 57px 37px; min-height: 0; }
  .case-hero .split-hero-inner { flex-direction: column; align-items: flex-start; padding: 0; }
  .case-hero .split-hero-copy { width: auto; }
  .case-hero h1 { font-size: 40px; line-height: 36px; }
  .case-hero .split-hero-copy p { margin: 26px 0 68px; font-size: 16px; line-height: 19.2px; }
  .case-hero .btn-sm { height: 34px; padding: 0 20px; font-size: 18px; }
  .case-hero-img { width: 277px; height: 323px; margin: 26px 0 0; }
  .case-body { padding: 61px 24px; }
  .case-body-inner { width: 260px; }
  .press li { flex-direction: column; align-items: flex-start; }
  .quote-card { position: relative; padding: 32px; }
  .quote-card figcaption { flex-direction: column; align-items: flex-start; }
  .quote-card .li { position: absolute; top: 32px; right: 32px; }
  .quote-card blockquote { margin-top: 24px; }
  .ga-hero { padding: 130px 40px 72px; }
  .ga-hero .split-hero-copy { width: auto; }
  .ga-hero h1 { margin: 0; }
  .ga-hero .tick-list { margin: 62px 0 0; gap: 18px; }
  .ga-hero .tick-list li { font-size: 16px; line-height: 19.2px; }
  .ga-hero .split-hero-copy p.hero-note { margin-top: 39px; }
  .ga-form { width: 341px; max-width: none; margin: 54px 0 0 -15px; }
  .ga-form input { margin-bottom: 6px; }
  .ga-faq { padding: 47px 0 73px; }
}

/* ---------- Tools (data/tools.json) ---------- */
.tool-hero { min-height: 516px; padding: 40px 20px 0; align-items: flex-start; }
.tool-hero .split-hero-inner { width: 1232px; align-items: flex-start; padding: 56px 0 0; }
.tool-hero .split-hero-copy { width: 505px; }
.tool-hero .split-hero-copy > * { flex-shrink: 0; }
.tool-hero h1 { margin-top: 36px; }
.tool-hero .split-hero-copy p { margin: 34px 0 34px; color: #000; font-size: 16px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.32px; }
.tool-hero-img { width: 650px; height: 433px; margin-top: -36px; border-radius: 10px; object-fit: cover; }
@media (min-width: 1440px) {   /* Framer centres the copy in a fixed box: shorter or longer copy moves both ways */
  .tool-hero .split-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 320px; }
}
.tool-intro { width: 1008px; max-width: calc(100% - 40px); margin: 0 auto; padding: 203px 0 147px; }
.tool-intro h2 { margin-bottom: 20px; color: var(--ink); font-size: 28.2px; font-weight: 700; line-height: 36px; letter-spacing: -0.81px; }
.tool-intro p, .tool-faq p { font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.tool-intro p + p { margin-top: 20px; }
/* Framer ends each intro with blank paragraphs: one of two lines (our padding), one line on some tools, two on others. */
.tool-intro.tool-intro-short { margin-bottom: -21px; }
.tool-intro.tool-intro-long { margin-bottom: 62px; }
.tool-how { padding: 0 20px 184px; text-align: center; }
.tool-how h2, .tool-faq h2 { color: var(--ink); font-size: 28.2px; font-weight: 700; line-height: 36px; letter-spacing: -0.81px; }
.tool-how ol { display: grid; grid-template-columns: 302px 281px 262px; gap: 0; margin: 123px 0 0 calc(50% - 432px); list-style: none; text-align: left; }   /* Framer: text columns 221/259/262 at 288/590/871 */
.tool-how li { position: relative; }
.tool-how li:nth-child(1) { padding-right: 81px; }
.tool-how li:nth-child(2) { padding-right: 22px; }
.tool-step-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 0 21px 84px; border-radius: 100px; background: var(--green); }
.tool-how li:nth-child(2) .tool-step-icon { margin-left: 83px; }
.tool-how li:nth-child(3) .tool-step-icon { margin-left: 75px; }
/* Each step's title + text is centred in a fixed 175px box, so longer texts overflow evenly (as on Framer). */
.tool-step-text { display: flex; flex-direction: column; justify-content: center; height: 175px; }
/* Some tools number their steps with a list marker, the title indented 40px. */
.tool-steps-num { counter-reset: step; }
.tool-steps-num li { counter-increment: step; }
.tool-steps-num h3 { position: relative; padding-left: 40px; }
.tool-steps-num h3::before { content: counter(step) "."; position: absolute; left: 0; }
.tool-steps-inset3 li:nth-child(3) p { padding-left: 40px; }   /* one tool indents its last step's text too */
.tool-step-icon img { width: 27px; height: auto; }
.tool-how .sparkle { position: absolute; left: 118px; top: -26px; }
.tool-how h3 { color: var(--ink); font-size: 28.2px; font-weight: 700; line-height: 36px; letter-spacing: -0.81px; }
.tool-how p { margin-top: 20px; font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.tool-app { display: flex; justify-content: center; padding: 192px 20px 191px; background: radial-gradient(50% 50% at 25.3% 78.9%, #4fb39b 0%, var(--green) 100%); }
.tool-app .tapp { width: 1008px; max-width: 100%; min-height: 600px; }
.tool-faq { width: 1008px; max-width: calc(100% - 40px); margin: 0 auto; padding: 85px 0 202px; }
.tool-faq h3 { margin-top: 40px; font-size: 18px; font-weight: 700; line-height: 25.2px; letter-spacing: -0.18px; }   /* Framer sets these in Inter; looser Satoshi wraps the same */
.tool-faq h3 + p { margin-top: 20px; }

.tool-list { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 90px 20px; }
.tool-card { display: grid; grid-template-columns: 536px 472px; width: 1008px; max-width: 100%; height: 350px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.26) 0 1px 22px -12px; overflow: hidden; }
.tool-card { transition: box-shadow .2s; }
.tool-card:hover { box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px 0; }
.tool-card-text { display: flex; flex-direction: column; padding: 42px 32px 32px; background: #fff; }
.tool-card h2 { font-size: 26px; font-weight: 700; line-height: 26px; letter-spacing: -1.04px; }
.tool-card p { margin-top: auto; font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.tool-card .btn { align-self: flex-start; margin-top: 49px; }
.tool-card-media { display: grid; place-items: center; background: radial-gradient(50% 50% at 23% 78.1%, #819993 0%, rgba(18, 112, 90, 0.84) 100%); }
.tool-card-media img { width: 386px; height: 350px; object-fit: contain; }

/* Tool pages keep Framer's tablet variant up to 1439px; the /tools list switches at 1200. */
@media (min-width: 810px) and (max-width: 1439px) {
  .tool-hero { min-height: 520px; padding: 0 20px; align-items: center; }
  .tool-hero .split-hero-inner { width: 774px; justify-content: space-between; align-items: center; gap: 57px; padding: 0 0 0 20px; }
  .tool-hero .split-hero-copy { flex: none; width: 351px; }
  .tool-hero h1 { font-size: 50px; line-height: 45px; }
  .tool-hero-img { width: 326px; height: 276px; margin-top: 0; }
  .tool-intro, .tool-faq { width: 70%; max-width: none; }
  .tool-intro { padding: 110px 0 147px; }
  .tool-how { padding-bottom: 181px; }
  .tool-how ol { grid-template-columns: 276px 259px 227px; justify-content: center; align-items: start; gap: 0; margin: 123px 0 0 16px; }
  .tool-how li:nth-child(1) { padding-right: 48px; }
  .tool-how li:nth-child(2) { padding-right: 21px; }
  /* Framer's tablet steps: icons sit in one row at fixed offsets; only step 2's text is lifted 17px. */
  .tool-how .tool-step-icon { margin: 0 0 20px 37px; }
  .tool-how li:nth-child(2) .tool-step-icon { margin-left: 62px; }
  .tool-how li:nth-child(3) .tool-step-icon { margin-left: 76px; }
  .tool-how li:nth-child(n+2) .tool-step-icon img { width: 31px; }
  .tool-how li:nth-child(2) .tool-step-text { position: relative; top: -7px; }
  .tool-how .sparkle { left: 115px; }
  .tool-app { padding: 164px 0; }
  .tool-app .tapp { width: 80%; }
  .tool-faq { padding: 85px 0 110px; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .tool-hero { min-height: 536px; padding-top: 16px; }
  .tool-card { grid-template-columns: 391px 326px; width: 717px; }
  .tool-card h2 { margin-top: 10px; }
  .tool-card-media img { width: 100%; height: 350px; object-fit: cover; }
}
@media (max-width: 809px) {
  .tool-hero { padding: 55px 57px 22px; min-height: 0; }
  .tool-hero .split-hero-inner { flex-direction: column; align-items: flex-start; padding-top: 0; }
  .tool-hero .split-hero-copy { display: flex; flex: none; flex-direction: column; justify-content: center; align-items: flex-start; width: auto; height: 305px; }
  .tool-hero h1 { font-size: 40px; line-height: 36px; }
  .tool-hero .btn-sm { height: 34px; padding: 0 20px; font-size: 18px; }
  .tool-hero-img { width: 330px; max-width: none; height: 329px; margin: 12px 0 0 -27px; }
  .tool-intro, .tool-faq { width: 70%; max-width: none; }
  .tool-intro { padding: 116px 0 113px; }
  /* Framer hides the three steps on phones. */
  .tool-how { display: none; }
  .tool-app { padding: 213px 0 212px; }
  .tool-app .tapp { width: 80%; }
  .tool-app .tapp textarea { height: 133px; min-height: 0; }   /* keeps every app inside Framer's 600px embed box on phones */
  .tool-faq { padding: 52px 0 116px; }
  .tool-list { padding: 90px 0; }
  .tool-card { grid-template-columns: 1fr; width: 70%; height: auto; }
  .tool-card-text { padding: 32px; }
  .tool-card h2 { margin: 10px 0; }
  /* Framer's 386px image is cropped by the narrower card. */
  .tool-card-media { margin: 0 calc((100% - 386px) / 2); }
  .tool-card-media img { width: 100%; height: 218px; object-fit: cover; }
  .tool-card-text p { margin-top: 18px; }
  .tool-card .btn { height: 34px; margin-top: 49px; padding: 0 20px; font-size: 18px; }
}

/* ---------- Blog (data/blog.json) ---------- */
.pill-cat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: #e6f4ed; color: var(--green); font-size: 13px; font-weight: 600; line-height: 18.2px; white-space: nowrap; }
.byline { display: flex; align-items: center; gap: 12px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.byline span { display: block; color: #666; font-size: 15px; line-height: 21px; }
.byline a { color: #1b1b1b; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.byline small { display: block; color: #666; font-size: 14px; line-height: 19.6px; }
.byline-sm { display: inline-flex; align-items: center; gap: 6px; color: #1b1b1b; font-size: 13px; line-height: 16.9px; }
.byline-sm img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.byline-sm b { font-weight: 600; }
.post-meta-sm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-meta-sm .pill-cat { padding: 3px 8px; font-size: 13px; line-height: 16.9px; }

.post-hero { min-height: 713px; padding: 62px 20px 40px; }
@media (min-width: 1440px) { .post-hero { height: 713px; } }   /* Framer keeps the hero 713px; a long title overflows it evenly */
.post-hero .split-hero-inner { width: 1082px; gap: 20px; padding: 0; }
.post-hero .split-hero-copy { width: 505px; }
.post-hero h1 { margin-top: 70px; }
.post-hero .split-hero-copy > p { margin: 26px 0 0; color: #000; font-size: 18px; font-weight: 400; line-height: 21.6px; letter-spacing: 0; }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; padding: 18px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.post-hero .btn { margin-top: 34px; }
.post-hero-img { width: 557px; height: 371px; border-radius: 10px; object-fit: cover; }

.post { width: 1000px; max-width: calc(100% - 40px); margin: 0 auto; padding: 62px 0 126px; }
.toc { padding: 16px 18px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; font-family: sans-serif; }
.toc p { color: #666; font-size: 14px; font-weight: 700; line-height: 20.3px; }
.toc ol { margin-top: 10px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.toc li { position: relative; padding-left: 16px; font-size: 15px; line-height: 21.75px; }
.toc li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #bbb; }
.toc a { color: #1b1b1b; }
.toc a.is-active { color: var(--green); font-weight: 700; }
.toc li:has(a.is-active)::before { background: var(--green); }
.post-body { margin-top: 32px; }
.post-body > ul, .post-body > ol, .post-body > figure, .post-body > pre, .post-body h2 + ul, .post-body h2 + ol, .post-body h3 + ul, .post-body h3 + ol { margin-top: 0; }
.post-body > * + * { margin-top: 20px; }
.post-body p, .post-body li, .post-body td, .post-body th { font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; }
.post-body a { color: var(--green); }
.post-body h2, .post-body h3 { overflow-wrap: break-word; }
.post-body h2 { margin-top: 40px; color: var(--ink); font-size: 55.7px; font-weight: 700; line-height: 66.84px; letter-spacing: -1.62px; scroll-margin-top: 96px; }
.post-body :not(pre) > code { padding: 1.6px 3.2px; border-radius: 6px; background: rgba(0, 0, 0, 0.1); color: #333; font-family: "Fragment Mono", Menlo, Consolas, monospace; }   /* Framer's inline code */
.post-body h3 { margin-top: 40px; color: var(--ink); font-size: 28.2px; font-weight: 700; line-height: 36px; letter-spacing: -0.81px; }
.post-body h2 + *, .post-body h3 + * { margin-top: 20px; }
.post-body h2 + h3 { margin-top: 40px; }
.post-body h2 + figure, .post-body h3 + figure { margin-top: 0; }
.post-body ul, .post-body ol { padding-left: 21.856px; }   /* Framer's li indent; the 0.144px wider text column changes some phone wraps */
.post-body ul > li + li, .post-body ol > li + li { margin-top: 0; }
.post-body li > p + p { margin-top: 20px; }   /* Framer spaces paragraphs inside a list item like body paragraphs */
.post-body .table-wrap { width: 100%; margin: 0; border: 1px solid rgba(153, 153, 153, 0.25); border-radius: 8px; }
.post-body table { width: 100%; border-collapse: separate; border-spacing: 0; }
.post-body td, .post-body th { padding: 10px; border-bottom: 1px solid rgba(153, 153, 153, 0.25); vertical-align: top; text-align: left; }
/* Framer's table rule: cells may break anywhere and are at least 16ch of its 12px sans-serif wide, so auto layout spreads columns by content. */
.post-body td, .post-body th { min-width: 106.781px; overflow-wrap: anywhere; }
.post-body td + td, .post-body th + th { border-left: 1px solid rgba(153, 153, 153, 0.25); }
.post-body th { background: rgba(153, 153, 153, 0.1); } .post-body th p { font-weight: 400; }
.post-body tr:last-child td { border-bottom: 0; }
.post-body td p, .post-body th p { margin: 0; }
/* Framer's server-rendered block shows a trailing blank line, but CodeMirror drops it once the block
   hydrates (on scroll), so the hydrated 30px padding all round is what readers see. */
.post-body pre { padding: 30px; overflow-x: auto; border-radius: 15px; background: #161820; color: #eee; font: 14px/21px "SFMono-Regular", Menlo, Consolas, monospace; }
/* Token colours from Framer's CodeMirror theme (tools/render.py highlight()). */
.tk-k { color: #0bf; } .tk-s { color: #b8f; } .tk-n { color: #f86; } .tk-f { color: #fc6; } .tk-p { color: #999; } .tk-v { color: #7dd; }
.post-body figure { margin-bottom: 0; margin-left: 0; margin-right: 0; }
/* Framer's quote: 2px grey bar, 22px indent, 28.8px lines (its Inter is not shipped; Satoshi with 0.45px tracking stands in). */
.post-body blockquote { position: relative; margin: 20px 0 0; padding-left: 22px; }
.post-body blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: #ddd; }
.post-body blockquote p { line-height: 28.8px; letter-spacing: 0.45px; }   /* widens Satoshi to Inter's measure so quotes wrap like Framer's */
.post-body img { border-radius: 10px; }

.top-blog { min-height: 520px; }
.top-blog::before { background: radial-gradient(50% 50% at 91.4% 95.5%, rgba(255, 217, 3, 0.14) 0%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(#fff 0%, rgba(18, 112, 90, 0.2) 72%, #fff 100%); }
.top-blog .hero-text { padding-top: 75px; }
.top-blog h1 { margin-top: 24px; max-width: 960px; font-size: 56px; line-height: 54.88px; letter-spacing: -3.08px; }
.top-blog .hero-sub { max-width: 760px; margin-top: 24px; font-size: 20px; line-height: 27px; letter-spacing: -0.5px; }
.top-blog .btn { margin-top: 24px; }
.blog-list { width: 1040px; max-width: calc(100% - 40px); margin: 0 auto; padding: 72px 0 104px; }
.blog-featured { display: grid; grid-template-columns: 499px 1fr; height: 400px; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: rgba(0, 0, 0, 0.38) 0 18px 52px -44px; }
.blog-featured > img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-text { padding: 40px; }
.pill-feat { display: inline-block; padding: 8px 12px; border-radius: 100px; background: rgba(255, 217, 3, 0.25); color: #12705a; font-size: 13px; font-weight: 700; line-height: 13px; }
.blog-featured h2 { margin: 14px 0; font-size: 38px; font-weight: 700; line-height: 40.28px; letter-spacing: -2.09px; color: var(--ink); }
.blog-featured p { margin: 13px 0 27px; font-size: 16px; line-height: 23.68px; color: #5a5a5a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 48px; }
.blog-card { display: flex; flex-direction: column; height: 540px; border-radius: 22px; box-shadow: rgba(0, 0, 0, 0.32) 0 14px 36px -34px; }
.blog-card-text { display: flex; flex-direction: column; height: 300px; padding: 26px; border-radius: 0 0 22px 22px; background: #fff; box-shadow: rgba(0, 0, 0, 0.26) 0 1px 14px -9px; }
.blog-card h2 { min-height: 55px; font-size: 24px; font-weight: 700; line-height: 27.6px; letter-spacing: -1.2px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card .post-meta-sm { margin-top: 15px; }
.blog-card p { margin-top: 20px; color: #5a5a5a; font-size: 15px; line-height: 21.75px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card .btn { align-self: flex-start; margin-top: 18px; }
.blog-featured, .blog-card { position: relative; }
.blog-featured::after, .blog-card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(18, 112, 90, 0.13); border-radius: inherit; pointer-events: none; }
.blog-card::after { border-color: rgba(18, 112, 90, 0.12); }
.top-blog h1, .top-blog .hero-sub, .blog-featured h2, .blog-card h2 { text-wrap: balance; }
.blog-card-media { height: 240px; overflow: hidden; border-radius: 22px 22px 0 0; background: radial-gradient(80% 70% at 25% 25%, rgba(255, 217, 3, 0.22) 0%, rgba(18, 112, 90, 0.82) 62%, #12705a 100%); }
.blog-card-media img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 810px) and (max-width: 1199px) {
  .top-blog { min-height: 520px; }
  .top-blog .hero-text { padding-top: 97px; }
  .top-blog h1 { max-width: 720px; margin-top: 22px; font-size: 48px; line-height: 48.96px; letter-spacing: -2.64px; }
  .top-blog .hero-sub { max-width: 640px; margin-top: 22px; font-size: 19px; line-height: 25.65px; letter-spacing: -0.475px; }
  .top-blog .btn { margin-top: 25px; }
  .blog-list { width: 720px; padding: 60px 0 91px; }
  .blog-featured { grid-template-columns: 1fr; height: auto; }
  .blog-featured > img { height: 280px; }
  .blog-featured-text { padding: 32px; }
  .blog-featured h2 { font-size: 34px; line-height: 35.36px; letter-spacing: -1.87px; }
  .blog-featured p { margin: 15px 0 49px; -webkit-line-clamp: 2; }
  .blog-grid { gap: 24px; margin-top: 42px; }
  .blog-card { height: 520px; }
  .blog-card-text { height: 300px; padding: 24px; }
  .blog-card h2 { min-height: 0; font-size: 22px; line-height: 25.3px; letter-spacing: -1.1px; }
  .blog-card .post-meta-sm { margin-top: 14px; }
  .blog-card p { margin-top: 20px; color: #000; font-size: 16px; line-height: 17.6px; }
  .blog-card .btn { margin-top: 16px; }
  .blog-card-media { height: 220px; }
}
/* Blog posts keep Framer's tablet variant up to 1439px. */
@media (min-width: 810px) and (max-width: 1439px) {
  .post-hero { min-height: 691px; padding: 0 20px; }
  .post-hero .split-hero-inner { width: 664px; justify-content: space-between; align-items: center; gap: 0; padding: 0; }
  .post-hero .split-hero-copy { flex: none; width: 351px; margin: 0 20px; }
  .post-hero h1 { font-size: 40px; line-height: 36px; }
  .post-hero-img { width: 273px; height: 216px; }
  .post-meta { flex-wrap: wrap; gap: 16px; }
  .post { width: 769px; }
  .toc { width: 733px; max-width: calc(100vw - 40px); margin: 0 auto; border-radius: 10px; }
  .post-body { margin-top: 30px; }
  .post-body h2 { font-size: 45px; line-height: 54px; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .post-hero { min-height: 733px; padding-top: 42px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .post-hero { min-height: 715px; padding-top: 24px; }
}
@media (max-width: 809px) {
  /* Framer's hero is a fixed 776px with the content centred, so a long title overflows it
     evenly up and down. We do the same up to 52px each side: exactly the room between the nav
     and the back arrow. Only beyond that (very long titles) the hero grows, where Framer lets the
     arrow slide under the nav (deliberate deviation). */
  .post-hero { display: flex; align-items: center; min-height: 776px; padding: 52px 57px 9px; }
  .post-hero .split-hero-inner { margin: -52px 0; }
  .post-hero .split-hero-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .post-hero .split-hero-copy { width: auto; }
  .post-hero h1 { margin-top: 70px; font-size: 40px; line-height: 36px; }
  .post-hero .split-hero-copy > p { font-size: 16px; line-height: 19.2px; }
  .post-meta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 33px; }
  .post-hero .btn { height: 34px; margin-top: 35px; padding: 0 20px; font-size: 18px; }
  .post-hero-img { width: 100%; height: 218px; margin-top: 26px; }
  .toc { margin: 0 -10px; }
  .post { max-width: calc(100% - 43px); padding: 62px 0 126px; }
  .post-body h2 { font-size: 36px; line-height: 43.2px; }
  .top-blog .hero-text { padding-top: 83px; }
  .top-blog .badge { padding: 0 14px; font-size: 16px; }
  .top-blog h1 { max-width: 340px; margin-top: 18px; font-size: 38px; line-height: 38.76px; letter-spacing: -1.9px; }
  .top-blog .hero-sub { max-width: 320px; margin-top: 18px; font-size: 17px; line-height: 22.95px; letter-spacing: -0.425px; }
  .top-blog .btn, .blog-list .btn { height: 27px; margin-top: 18px; padding: 0 14px; font-size: 16px; }
  .blog-list { padding: 7px 0 111px; }
  .blog-featured { grid-template-columns: 1fr; height: auto; border-radius: 24px; }
  .blog-featured > img { height: 210px; }
  .blog-featured-text { padding: 24px; }
  .blog-featured h2 { font-size: 28px; line-height: 30.24px; letter-spacing: -1.54px; }
  .blog-featured .post-meta-sm { flex-direction: column; align-items: flex-start; gap: 6px; }
  .blog-featured p { margin: 14px 0 8px; font-size: 15px; line-height: 22.5px; }
  .blog-grid { grid-template-columns: 1fr; gap: 21.5px; margin-top: 34px; }
  .blog-card { height: auto; }
  .blog-card-media { order: -1; height: 205px; }
  .blog-card-text { height: auto; min-height: 247px; padding: 22px; }
  .blog-card h2 { min-height: 0; font-size: 22px; line-height: 25.3px; letter-spacing: -0.88px; }
  .blog-card .post-meta-sm { margin-top: 13px; }
  .blog-card p { margin-top: 25px; font-size: 15px; line-height: 22px; }
  .blog-card .btn { margin-top: 18px; }
}

/* ---------- Author pages (/auteur/<slug>/, data/blog.json authors) ---------- */
.author-top { min-height: 0; }
.author-top::before { background: radial-gradient(50% 50% at 91.4% 95.5%, rgba(255, 217, 3, 0.14) 0%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(#fff 0%, rgba(18, 112, 90, 0.2) 72%, #fff 100%); }
.author-hero { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; padding: 72px 20px 64px; text-align: center; }
.author-photo { width: 160px; height: 160px; margin-bottom: 24px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.3) 0 18px 40px -24px; }
.author-hero h1 { margin-top: 18px; font-size: 56px; line-height: 54.88px; letter-spacing: -3.08px; }
.author-hero .hero-sub { margin-top: 12px; font-size: 20px; line-height: 27px; letter-spacing: -0.5px; }
.author-bio { margin-top: 24px; color: #333; font-size: 17px; line-height: 25px; }
.author-bio p + p { margin-top: 14px; }
.author-hero .btn { margin-top: 28px; }
.author-posts { padding-top: 24px; }
.author-posts > h2 { font-size: 38px; font-weight: 700; line-height: 40.28px; letter-spacing: -2.09px; color: var(--ink); }
.author-posts .blog-grid { margin-top: 32px; }
.blog-card h3 { min-height: 55px; font-size: 24px; font-weight: 700; line-height: 27.6px; letter-spacing: -1.2px; color: var(--ink); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 809px) {
  .author-hero { padding: 48px 20px 40px; }
  .author-photo { width: 120px; height: 120px; }
  .author-hero h1 { font-size: 38px; line-height: 38.76px; letter-spacing: -1.9px; }
  .author-hero .hero-sub { font-size: 17px; line-height: 23px; }
  .author-bio { font-size: 16px; line-height: 23px; }
  .author-posts > h2 { font-size: 28px; line-height: 30px; letter-spacing: -1.2px; }
  .blog-card h3 { min-height: 0; font-size: 22px; line-height: 25.3px; letter-spacing: -0.88px; }
}

/* ---------- Tool apps (/tools/<slug>/): form and results, public/js/tools.js ----------
   Look of the original Lovable apps: white card, one centred column, thin borders,
   teal primary button, choice buttons as toggles. */
.tapp { padding: 48px; border-radius: 8px; background: #fff; color: #1d1d1d; font-size: 14px; line-height: 1.5; }
.tapp-form, .tapp-status, .tapp-results { max-width: 720px; margin: 0 auto; }
.tapp-form { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid #e5e7eb; border-radius: 8px; }
.tapp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.tapp-grid > * { grid-column: 1 / -1; }
.tapp-grid > .tapp-half { grid-column: auto; }
.tapp-intro h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.tapp-intro p { color: #7d7d82; }
.tapp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tapp-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.tapp-field > label, .tapp-field legend { padding: 0; font-size: 14px; font-weight: 600; }
.tapp input[type=text], .tapp select, .tapp textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: inherit; font: inherit; }
.tapp textarea { min-height: 180px; resize: vertical; font-family: inherit; }
.tapp input::placeholder, .tapp textarea::placeholder { color: #9b9ba0; }
.tapp input:focus-visible, .tapp select:focus-visible, .tapp textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.tapp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tapp-choice { position: relative; flex: 1 1 auto; }
.tapp-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tapp-choice span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px; font-weight: 500; text-align: center; }
.tapp-choice small { color: #7d7d82; font-size: 12px; font-weight: 400; }
.tapp-choice input:checked + span { border-color: var(--green); background: var(--green); color: #fff; }
.tapp-choice input:checked + span small { color: rgba(255, 255, 255, 0.8); }
.tapp-choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.tapp-switch { flex-direction: row; align-items: center; gap: 12px; }
.tapp-switch input { appearance: none; position: relative; width: 40px; height: 22px; flex: none; margin: 0; border-radius: 22px; background: #d4d4d8; cursor: pointer; transition: background-color .2s; }
.tapp-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tapp-switch input:checked { background: var(--green); }
.tapp-switch input:checked::after { transform: translateX(18px); }
.tapp-switch label { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; }
.tapp-switch small { color: #7d7d82; font-weight: 400; }
.tapp-hp { position: absolute; left: -9999px; }
.tapp-buttons { display: flex; gap: 8px; }
.tapp-submit, .tapp-reset { min-height: 42px; padding: 0 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tapp-submit { border: 0; background: var(--green); color: #fff; }
.tapp-buttons.is-wide .tapp-submit { flex: 1; }
.tapp-submit:disabled { opacity: 0.6; cursor: progress; }
.tapp-reset { border: 1px solid #e5e7eb; background: #fff; color: inherit; }
.tapp-status:empty { display: none; }
.tapp-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; color: #7d7d82; font-size: 14px; }
.tapp-status.is-warn, .tapp-status.is-error { justify-content: flex-start; padding: 12px 14px; border: 1px solid #b7dccf; border-radius: 6px; background: #f3f4f6; color: #1d1d1d; }
.tapp-status.is-error { border-color: #f1b5b5; }
.tapp-spinner { width: 18px; height: 18px; border: 2px solid #d4d4d8; border-top-color: var(--green); border-radius: 50%; animation: tapp-spin .8s linear infinite; }
@keyframes tapp-spin { to { transform: rotate(360deg); } }
.tapp-results { margin-top: 24px; padding: 28px; border: 1px solid #e5e7eb; border-radius: 8px; }
.tapp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.tapp-head h2, .tapp-item h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.tapp-head p { flex-basis: 100%; color: #7d7d82; font-size: 14px; }
.tapp-head .tapp-link { flex-basis: auto; }
.tapp-list { display: flex; flex-direction: column; gap: 12px; }
.tapp-item { padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 8px; transition: opacity .2s; }
.tapp-item.is-working { opacity: 0.6; }
.tapp-rows { gap: 0; border: 1px solid #e5e7eb; border-radius: 8px; }
.tapp-rows .tapp-item { border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0; }
.tapp-rows .tapp-item:last-child { border-bottom: 0; }
.tapp-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tapp-strong { font-weight: 700; }
.tapp-muted { color: #5a5a5f; }
.tapp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.tapp-meter { color: #7d7d82; font-size: 13px; font-variant-numeric: tabular-nums; }
.tapp-meter.is-good { color: #15803d; }
.tapp-meter.is-bad { color: #c2410c; }
.tapp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tapp-ad .tapp-actions, .tapp-item > .tapp-actions { margin-top: 12px; }
.tapp-btn { min-height: 30px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #1d1d1d; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.tapp-btn:hover { background: #f3f4f6; }
.tapp-btn:disabled { opacity: 0.5; cursor: progress; }
.tapp-copy { border-color: var(--green); color: var(--green); }
.tapp-link { padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tapp-label { color: #7d7d82; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tapp-part { padding: 10px 0; border-bottom: 1px solid #f0f0f2; }
.tapp-part:last-of-type { border-bottom: 0; }
.tapp-part .tapp-label { margin-bottom: 4px; }
.tapp-part-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tapp-part-head .tapp-actions { flex: none; flex-wrap: nowrap; }
.tapp-pill { display: inline-block; padding: 4px 12px; border-radius: 6px; background: #f3f4f6; font-size: 14px; font-weight: 600; }
.tapp-clusters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tapp-clusters h3 { font-size: 15px; font-weight: 700; }
.tapp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tapp-chips span { padding: 3px 8px; border-radius: 6px; background: #f3f4f6; font-size: 12px; }
.tapp-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.tapp-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tapp-table th, .tapp-table td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; text-align: right; white-space: nowrap; }
.tapp-table th:first-child, .tapp-table td:first-child { text-align: left; }
.tapp-table th { color: #7d7d82; font-size: 13px; font-weight: 600; }
.tapp-table tr:last-child td { border-bottom: 0; }
.tapp-money { color: var(--green); font-weight: 600; }
.tapp-note { margin: 14px 0; color: #7d7d82; font-size: 13px; }
.tapp-code { margin: 12px 0 0; padding: 16px; overflow-x: auto; border-radius: 6px; background: #f3f4f6; font: 13px/1.6 "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre; }
.tapp-preview { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
.tapp-preview-label { margin-bottom: 12px; font-weight: 700; }
.tapp-yt { display: flex; gap: 12px; }
.tapp-yt-thumb { width: 144px; height: 80px; flex: none; border-radius: 8px; background: #e5e7eb; }
.tapp-yt-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tapp-yt-meta { color: #7d7d82; font-size: 13px; }
@media (max-width: 809px) {
  .tapp { padding: 24px 16px; }
  .tapp-form, .tapp-results { padding: 20px 16px; }
  .tapp-grid { grid-template-columns: 1fr; }
  .tapp-grid > .tapp-half { grid-column: 1 / -1; }
  .tapp-clusters { grid-template-columns: 1fr; }
  .tapp-buttons { flex-direction: column; }
  .tapp-actions { margin-left: 0; }
}

/* ---------- Cookie banner (partials/footer.html, logic in site.js) ---------- */
.footer-linkbtn { display: block; padding: 0; border: 0; background: none; color: #999; font-family: inherit; font-size: 15.3px; font-weight: 500; line-height: 18.4px; cursor: pointer; text-align: left; }
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 100; width: 420px; max-width: calc(100% - 40px); padding: 22px 22px 20px; border: 1px solid rgba(18, 112, 90, 0.13); border-radius: 16px; background: #fff; box-shadow: rgba(0, 0, 0, 0.25) 0 18px 52px -20px; color: #1b1b1b; font-size: 14px; line-height: 20px; }
.consent[hidden] { display: none; }
.consent-title { margin-bottom: 6px; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.4px; }
.consent a { color: var(--green); text-decoration: underline; }
.consent-prefs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.consent-prefs[hidden] { display: none; }
.consent-prefs label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.consent-prefs span { color: #666; font-weight: 400; }
.consent-prefs input { accent-color: var(--green); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.consent .btn { height: 34px; padding: 0 14px; font-size: 15px; letter-spacing: -0.3px; }
.btn-ghost { border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; color: #1b1b1b; }
.consent-more { margin-left: auto; padding: 0; border: 0; background: none; color: #666; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 809px) {
  .consent { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 18px; }
  .consent-more { margin-left: 0; }
}

/* ---------- 404 ---------- */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140px 20px 180px;
  text-align: center;
}
.notfound h1 {
  max-width: 760px;
  margin-top: 32px;
  color: var(--ink);
  font-size: 60px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2.32px;
}
.notfound-sub {
  max-width: 560px;
  margin-top: 32px;
  color: var(--muted);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.88px;
}
@media (max-width: 809px) {
  .notfound { padding: 80px 39px 100px; }
  .notfound h1 { font-size: 36px; }
  .notfound-sub { font-size: 16px; letter-spacing: -0.5px; }
  .notfound .hero-cta { flex-direction: column; align-items: center; }
}

.top-cases .hero-text { padding-top: 73px; }
.top-cases .hero-sub { max-width: 640px; }