@layer theme {
  :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: .25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); }
}
@layer base {
  *, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
  hr { height: 0px; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; }
  small { font-size: 80%; }
  sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::file-selector-button { margin-inline-end: 4px; }
  ::placeholder { opacity: 1; }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
  ::placeholder { color: currentcolor; }
  @supports (color:color-mix(in lab, red, red)) {
  ::placeholder { color: color-mix(currentcolor, transparent); }
}
}
  textarea { resize: vertical; }
  ::-webkit-search-decoration { appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
  ::-webkit-datetime-edit { padding-block: 0px; }
  ::-webkit-datetime-edit-year-field { padding-block: 0px; }
  ::-webkit-datetime-edit-month-field { padding-block: 0px; }
  ::-webkit-datetime-edit-day-field { padding-block: 0px; }
  ::-webkit-datetime-edit-hour-field { padding-block: 0px; }
  ::-webkit-datetime-edit-minute-field { padding-block: 0px; }
  ::-webkit-datetime-edit-second-field { padding-block: 0px; }
  ::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
  ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
  ::-webkit-calendar-picker-indicator { line-height: 1; }
  button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
  ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button { height: auto; }
  ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}
@layer components;
@layer utilities {
  .visible { visibility: visible; }
  .relative { position: relative; }
  .start { inset-inline-start: var(--spacing); }
  .table { display: table; }
}
@font-face { font-family: Poppins; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url("/assets/fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root { --navy: #07152f; --navy-2: #102345; --ink: #101b31; --blue: #315cf6; --blue-dark: #2348ce; --mint: #4adfc9; --mint-dark: #159d8b; --cloud: #f2f5f9; --line: #dce2ea; --muted: #59657b; --purple: #34233a; --orange: #d05f40; --white: #fff; --page: 80rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; margin: 0px; font-family: Arial, Helvetica, sans-serif; line-height: 1.65; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: Poppins, Arial, sans-serif; text-transform: uppercase; word-spacing: 0.1em; }
.eyebrow, .button, .desktop-nav, .mobile-nav, .footer-title { font-family: Poppins, Arial, sans-serif; }
:where(a, summary, button):focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.visually-hidden { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; width: 1px; height: 1px; padding: 0px; position: absolute; overflow: hidden; }
.solutions, .iot-feature, .managed-case, .pricing, .difference, .team, .care, .faq { scroll-margin-top: 6.5rem; }
.page-width { width: min(var(--page), calc(100% - 3rem)); margin-inline: auto; }
.section-pad { padding: 7.5rem 0px; }
.skip-link { z-index: 1000; background: var(--white); color: var(--navy); border-radius: 999px; padding: 0.75rem 1rem; position: fixed; top: -5rem; left: 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { z-index: 30; width: 100%; position: absolute; top: 1.4rem; left: 0px; }
.header-inner { background: transparent; border-radius: 0px; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; min-height: 5.25rem; padding: 0.7rem 0px; display: grid; box-shadow: none; }
.brand img { content: url("/assets/images/xenid-logo-footer.svg"); width: 14rem; height: auto; }
.desktop-nav { justify-self: center; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); display: flex; }
.desktop-nav a { color: var(--white); white-space: nowrap; font-size: 1.15rem; font-weight: 600; text-decoration: none; text-shadow: rgba(0, 8, 25, 0.32) 0px 1px 10px; transition: color 0.2s; position: relative; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--mint); }
.mobile-nav { display: none; }
.button { letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid rgba(0, 0, 0, 0); border-radius: 999px; justify-content: center; align-items: center; min-height: 3.35rem; padding: 0.78rem 1.45rem; font-size: 0.78rem; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform 0.2s, background 0.2s, border-color 0.2s; display: inline-flex; }
.button:hover { transform: translateY(-2px); }
.button-blue { background: var(--blue); color: var(--white); }
.button-blue:hover { background: var(--blue-dark); }
.button-mint { background: var(--mint); color: var(--navy); }
.button-mint:hover { background: rgb(107, 231, 214); }
.button-outline { color: var(--navy); background: 0px 0px; border-color: rgb(174, 184, 199); }
.button-outline:hover { border-color: var(--navy); background: var(--cloud); }
.text-link { min-height: 3.2rem; color: var(--white); text-underline-offset: 0.35rem; align-items: center; padding: 0.5rem 0.3rem; font-family: Poppins, Arial, sans-serif; font-size: 0.82rem; font-weight: 700; text-decoration-thickness: 1px; display: inline-flex; }
.hero { background: var(--navy); min-height: 61rem; color: var(--white); align-items: center; display: flex; position: relative; overflow: hidden; }
.hero-image { background: url("/assets/images/xenid-hero-kantoor-01-aug2026.webp") 44% top / cover no-repeat; position: absolute; inset: 0px; }
.hero-shade { background: linear-gradient(90deg, rgba(5, 16, 37, 0.98) 0%, rgba(5, 16, 37, 0.92) 38%, rgba(5, 16, 37, 0.55) 64%, rgba(5, 16, 37, 0.14) 100%), linear-gradient(rgba(0, 0, 0, 0) 52%, rgba(5, 16, 37, 0.76) 100%); position: absolute; inset: 0px; }
.hero-content { z-index: 2; padding-top: 10rem; padding-bottom: 3rem; position: relative; }
.eyebrow { letter-spacing: 0.14em; text-transform: uppercase; margin: 0px 0px 1rem; font-size: 0.74rem; font-weight: 800; }
.eyebrow-mint { color: var(--mint); }
.eyebrow-blue { color: var(--blue); }
.hero h1 { letter-spacing: -0.02em; text-wrap: balance; max-width: 52rem; margin: 0px; font-size: clamp(2.55rem, 3.5vw, 3.7rem); font-weight: 700; line-height: 1.04; }
.hero-lead { color: rgb(210, 219, 233); max-width: 41rem; margin: 2rem 0px 2.2rem; font-size: 1.08rem; line-height: 1.78; }
.hero-actions { flex-wrap: wrap; align-items: center; gap: 1.2rem; display: flex; }
.hero-points { grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 0.72rem; max-width: none; margin: 4.2rem 0px 0px; padding: 0px; list-style: none; display: grid; }
.hero-points li { min-width: 0px; min-height: 7.4rem; align-items: center; grid-template-columns: 2.65rem 1fr; gap: 0.8rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 1rem; background: rgba(7, 21, 47, 0.34); box-shadow: rgba(0, 8, 25, 0.16) 0px 0.8rem 2rem; backdrop-filter: blur(8px); display: grid; }
.hero-point-icon { width: 2.65rem; height: 2.65rem; color: var(--mint); border-radius: 0.8rem; background: rgba(74, 223, 201, 0.12); place-items: center; display: grid; }
.hero-point-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-point-copy { min-width: 0px; display: grid; gap: 0.2rem; }
.hero-points strong { color: var(--white); font-family: Poppins, Arial, sans-serif; font-size: 0.8rem; line-height: 1.3; }
.hero-points small { color: rgb(168, 183, 205); font-size: 0.68rem; line-height: 1.45; }
.intro { background: var(--navy); color: var(--white); }
.intro-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 7rem; display: grid; }
.intro h2, .platform-callout h2, .team h2, .care h2 { letter-spacing: -0.02em; text-wrap: balance; margin: 0px; font-size: clamp(2.2rem, 3.6vw, 3.7rem); font-weight: 700; line-height: 1.05; }
.intro-copy p { color: rgb(182, 193, 210); margin: 0px 0px 1.4rem; font-size: 1.02rem; line-height: 1.85; }
.intro-cta { margin-top: 0.4rem; }
.home-route { background: var(--cloud); }
.home-route-heading { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); margin-bottom: 3rem; display: grid; }
.home-route-heading h2 { color: var(--navy); letter-spacing: -0.02em; text-wrap: balance; margin: 0px; font-size: var(--xenid-public-h2); font-weight: 700; line-height: 1.06; }
.home-route-heading > p { color: var(--muted); margin: 0px; font-size: 1rem; line-height: 1.8; }
.home-route-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1rem; display: grid; }
.home-route-card { min-width: 0px; border: 1px solid var(--line); background: var(--white); border-radius: 1.45rem; padding: clamp(1.7rem, 3vw, 2.5rem); box-shadow: rgba(20, 42, 80, 0.06) 0px 1rem 3rem; }
.home-route-card-apk { border-color: rgba(49, 92, 246, 0.34); background: linear-gradient(145deg, rgb(242, 246, 255), var(--white) 58%); }
.home-route-card-top { justify-content: space-between; align-items: start; gap: 1rem; display: flex; }
.home-route-label { color: #087b6e; letter-spacing: 0.1em; text-transform: uppercase; margin: 0px 0px 0.8rem; font-family: Poppins, Arial, sans-serif; font-size: 0.67rem; font-weight: 800; }
.home-route-price { color: var(--blue); margin: 0px; font-family: Poppins, Arial, sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.home-route-price span { color: var(--muted); margin-left: 0.25rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; }
/* A tilted sticker draws attention to the free Website APK scan. */
.home-route-card-apk .home-route-card-top { align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.home-route-card-apk .home-route-label { margin-bottom: 0; }
.home-route-card-apk .home-route-price { flex-shrink: 0; margin: -.3rem calc(1rem - clamp(1.7rem, 3vw, 2.5rem)) .3rem auto; }
.home-route-card-apk .home-route-price span { display: inline-block; margin-left: 0; padding: .65rem .9rem; border: 0; border-radius: .55rem .55rem .55rem .15rem; background: var(--blue); color: var(--white); box-shadow: none; font-size: .7rem; font-weight: 800; letter-spacing: .045em; line-height: 1.15; transform: rotate(7deg); }
@media (max-width: 560px) {
  .home-route-card-apk .home-route-card-top { align-items: flex-start; gap: 1rem; }
  .home-route-card-apk .home-route-price { order: -1; align-self: flex-end; margin: -.4rem -.5rem .2rem auto; }
}

.home-route-card h3 { color: var(--navy); letter-spacing: -0.025em; text-wrap: balance; margin: 0px; font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.12; }
.home-route-card > p:not(.home-route-label) { color: var(--muted); margin: 1.1rem 0px 1.7rem; line-height: 1.75; }
@media (min-width: 681px) {
  .home-route-card { display: flex; flex-direction: column; }
  .home-route-card h3 { min-height: 2.24em; }
  .home-route-card > p:not(.home-route-label) { min-height: 5.25rem; }
  .home-route-card .button { align-self: flex-start; margin-top: auto; }
}
.solutions { background: var(--white); overflow: hidden; }
.solutions-heading { margin-bottom: 5.2rem; }
.solutions-summary .solutions-heading { margin-bottom: 3rem; }
.solution-summary-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); column-gap: clamp(2.5rem, 6vw, 7rem); margin: 0px; padding: 0px; list-style: none; display: grid; }
.solution-summary-card { min-height: 0px; grid-template-columns: 3.5rem minmax(0px, 1fr); align-items: start; gap: 1.25rem; padding: 2rem 0px; display: grid; }
.solution-summary-card:nth-child(n+3) { border-top: 1px solid var(--line); }
.solution-summary-icon { width: 3.5rem; height: 3.5rem; color: var(--blue); border-radius: 1rem; background: rgba(49, 92, 246, 0.08); place-items: center; display: grid; }
.solution-summary-icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.solution-summary-card h3 { color: var(--navy); letter-spacing: -0.01em; margin: 0.25rem 0px 0.55rem; font-size: 1.08rem; line-height: 1.35; }
.solution-summary-card p { color: var(--muted); margin: 0px; font-size: 0.9rem; line-height: 1.65; }
.solution-summary-action { justify-content: center; margin-top: 2.4rem; display: flex; }
.solution-feature { border-top: 1px solid var(--line); grid-template-columns: 0.86fr 1.14fr; align-items: center; gap: clamp(3rem, 6vw, 7rem); padding: 5.5rem 0px; display: grid; }
.solution-feature-reverse { grid-template-columns: 1.14fr 0.86fr; }
.solution-copy { position: relative; }
.solution-number { z-index: 0; color: rgb(237, 241, 247); font-family: Poppins, Arial, sans-serif; font-size: 7rem; font-weight: 800; line-height: 1; position: absolute; top: -5.4rem; left: -0.2rem; }
.solution-copy > :not(.solution-number) { z-index: 1; position: relative; }
.solution-copy h3 { color: var(--navy); letter-spacing: -0.015em; text-wrap: balance; margin: 0px; font-size: clamp(1.9rem, 3vw, 3.1rem); font-weight: 700; line-height: 1.08; }
.solution-copy > p:not(.eyebrow) { color: var(--muted); margin: 1.5rem 0px 1.7rem; font-size: 1rem; line-height: 1.8; }
.outcome-list { border-top: 1px solid var(--line); gap: 0px; margin: 0px 0px 1.8rem; padding: 0px; list-style: none; display: grid; }
.outcome-list li { border-bottom: 1px solid var(--line); grid-template-columns: 2rem 1fr; gap: 0.8rem; padding: 1rem 0px; display: grid; }
.outcome-list li > span { background: var(--cloud); width: 1.55rem; height: 1.55rem; color: var(--blue); border-radius: 50%; place-items: center; font-family: Poppins, Arial, sans-serif; font-size: 0.66rem; font-weight: 800; display: grid; }
.outcome-list strong { color: var(--navy); font-family: Poppins, Arial, sans-serif; font-size: 0.9rem; display: block; }
.outcome-list p { color: var(--muted); margin: 0.2rem 0px 0px; font-size: 0.84rem; line-height: 1.55; }
.inline-action { color: var(--blue); text-underline-offset: 0.32rem; font-family: Poppins, Arial, sans-serif; font-size: 0.84rem; font-weight: 700; text-decoration-thickness: 1px; }
.case-text-link { color: #6be7d6; text-underline-offset: 0.32rem; font-family: Poppins, Arial, sans-serif; font-size: 0.84rem; font-weight: 700; text-decoration-thickness: 1px; }
.admin-demo-links { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.admin-demo-link { min-height: 2.8rem; display: inline-flex; align-items: center; justify-content: center; padding: .65rem .95rem; border-radius: 999px; background: var(--navy); color: var(--white); font: 700 .72rem/1.2 Poppins, Arial, sans-serif; text-decoration: none; }
.admin-demo-link:hover { background: var(--blue); }
.admin-contact-link { color: var(--blue); text-underline-offset: .3rem; font: 700 .72rem/1.2 Poppins, Arial, sans-serif; }
.demo-window { background: var(--white); border: 1px solid rgb(217, 224, 233); border-radius: 1.7rem; overflow: hidden; box-shadow: rgba(9, 28, 65, 0.13) 0px 1.8rem 4.2rem; }
.demo-bar { border-bottom: 1px solid var(--line); color: rgb(123, 132, 149); background: rgb(249, 250, 252); grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 3.25rem; padding: 0.7rem 1.2rem; font-size: 0.68rem; display: grid; }
.demo-bar strong { color: var(--navy); font-family: Poppins, Arial, sans-serif; font-size: 0.7rem; }
.demo-dots { gap: 0.3rem; display: flex; }
.demo-dots i { background: rgb(195, 202, 212); border-radius: 50%; width: 0.45rem; height: 0.45rem; }
.demo-dots i:first-child { background: var(--orange); }
.demo-dots i:last-child { background: var(--mint-dark); }
.booking-body { padding: clamp(1.35rem, 3vw, 2.35rem); }
.demo-heading > span { color: var(--blue); letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.68rem; font-weight: 800; }
.demo-heading h4 { color: var(--navy); margin: 0.5rem 0px 0.35rem; font-size: 1.3rem; line-height: 1.25; }
.demo-heading p { color: var(--muted); margin: 0px; font-size: 0.84rem; }
.demo-options, .date-options, .time-options { border: 0px; margin: 1.5rem 0px 0px; padding: 0px; }
.demo-options legend, .date-options legend, .time-options legend { color: rgb(89, 100, 122); margin-bottom: 0.65rem; font-family: Poppins, Arial, sans-serif; font-size: 0.69rem; font-weight: 700; }
.demo-options { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; display: grid; }
.demo-options legend { grid-column: 1 / -1; }
.demo-options label, .date-options label, .time-options label { cursor: pointer; position: relative; }
.demo-options input, .date-options input, .time-options input { opacity: 0; pointer-events: none; position: absolute; }
.demo-options label > span { border: 1px solid var(--line); background: var(--white); border-radius: 0.85rem; align-content: center; gap: 0.05rem; min-height: 4.25rem; padding: 0.75rem 0.9rem; transition: border-color 0.18s, background 0.18s; display: grid; }
.demo-options label:hover > span { border-color: var(--blue); background: rgb(245, 247, 255); }
.demo-options label:has(input:checked) > span { border-color: var(--blue); background: rgb(245, 247, 255); }
:is(.demo-options label:has(input:focus-visible) > span, .date-options label:has(input:focus-visible) > span, .time-options label:has(input:focus-visible) > span) { outline: 3px solid var(--mint); outline-offset: 2px; }
.demo-options strong { color: var(--navy); font-size: 0.78rem; }
.demo-options small { color: var(--muted); font-size: 0.66rem; }
.booking-picker { grid-template-columns: 1.05fr 0.95fr; gap: 1.2rem; display: grid; }
.date-options, .time-options { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; display: grid; }
.date-options legend, .time-options legend { grid-column: 1 / -1; }
.date-options label > span { border: 1px solid var(--line); min-height: 3.6rem; color: var(--muted); text-align: center; border-radius: 0.75rem; place-items: center; padding: 0.45rem; font-size: 0.64rem; display: grid; }
.date-options label > span small { color: var(--navy); font-family: Poppins, Arial, sans-serif; font-size: 1rem; font-weight: 700; display: block; }
.time-options label > span { border: 1px solid var(--line); min-height: 3.6rem; color: var(--navy); border-radius: 0.75rem; place-items: center; padding: 0.45rem; font-family: Poppins, Arial, sans-serif; font-size: 0.72rem; font-weight: 700; display: grid; }
:is(.date-options label:has(input:checked) > span, .time-options label:has(input:checked) > span) { border-color: var(--blue); background: var(--blue); color: var(--white); }
.date-options label:has(input:checked) > span small { color: var(--white); }
.demo-result { background: var(--navy); color: var(--white); border-radius: 0.9rem; margin-top: 1.5rem; }
.demo-result summary { text-align: center; cursor: pointer; place-items: center; min-height: 3.65rem; padding: 0.85rem 1rem; font-family: Poppins, Arial, sans-serif; font-size: 0.72rem; font-weight: 800; list-style: none; display: grid; }
.demo-result summary::-webkit-details-marker { display: none; }
.demo-result > div { grid-template-columns: 2.2rem 1fr; gap: 0.8rem; padding: 0px 1.2rem 1.2rem; display: grid; }
.result-mark { background: var(--mint); width: 2rem; height: 2rem; color: var(--navy); border-radius: 50%; place-items: center; font-weight: 900; display: grid; }
.demo-result p { color: rgb(203, 212, 226); margin: 0px; font-size: 0.76rem; line-height: 1.6; }
.demo-result strong { color: var(--white); }
.iot-preview { background: rgb(241, 244, 247); border: 1px solid rgb(217, 224, 233); border-radius: 1.7rem; display: block; overflow: hidden; position: relative; box-shadow: rgba(9, 28, 65, 0.13) 0px 1.8rem 4.2rem; transition: transform 0.2s, box-shadow 0.2s; }
.iot-preview::after { content: ""; border-radius: inherit; pointer-events: none; position: absolute; inset: 0px; box-shadow: rgba(7, 21, 47, 0.08) 0px 0px 0px 1px inset; }
.iot-preview:hover { transform: translateY(-4px); box-shadow: rgba(9, 28, 65, 0.19) 0px 2.1rem 4.8rem; }
.iot-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.iot-preview-label { color: var(--blue); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(49, 92, 246, 0.22); border-radius: 999px; padding: 0.72rem 1rem; font-family: Poppins, Arial, sans-serif; font-size: 0.69rem; font-weight: 800; line-height: 1.2; position: absolute; right: 1rem; bottom: 1rem; box-shadow: rgba(7, 21, 47, 0.18) 0px 0.7rem 1.8rem; transition: color 0.2s, background 0.2s; }
.iot-preview:hover .iot-preview-label { color: var(--white); background: var(--blue); }
.iot-actions { flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; display: flex; }
.iot-demo-button { min-height: 3.1rem; padding: 0.72rem 1.2rem; font-size: 0.7rem; }
.admin-planner-link, .analytics-planner-link { margin-top: 1rem; display: inline-block; }
.analytics-demo { min-height: 23rem; color: var(--white); background: var(--navy); border-radius: 1.15rem; padding: 1.35rem; display: grid; gap: 1.1rem; }
.analytics-feature .analytics-demo { min-height: 29rem; }
.analytics-demo-head { align-items: center; justify-content: space-between; gap: 1rem; display: flex; }
.analytics-demo-head span, .analytics-demo-head strong { display: block; }
.analytics-demo-head span { color: var(--mint); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.58rem; font-weight: 800; }
.analytics-demo-head strong { margin-top: 0.18rem; font-size: 0.8rem; }
.analytics-demo-head small { color: rgb(137, 154, 181); font-size: 0.58rem; }
.analytics-metrics { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0.55rem; display: grid; }
.analytics-metrics > div { min-width: 0px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.055); padding: 0.75rem; }
.analytics-metrics span, .analytics-metrics strong, .analytics-metrics small { display: block; }
.analytics-metrics span { color: rgb(144, 161, 187); font-size: 0.55rem; }
.analytics-metrics strong { overflow: hidden; margin: 0.18rem 0px; color: var(--white); text-overflow: ellipsis; white-space: nowrap; font-family: Poppins, Arial, sans-serif; font-size: 1rem; }
.analytics-metrics small { color: var(--mint); font-size: 0.51rem; line-height: 1.45; }
.analytics-detail { grid-template-columns: minmax(0px, 1fr) 6.5rem; gap: 0.7rem; display: grid; }
.analytics-chart, .analytics-breakdown { border-radius: 0.8rem; background: var(--white); color: var(--navy); }
.analytics-chart { padding: 0.8rem; }
.analytics-chart-head { align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.57rem; display: flex; }
.analytics-chart-head span { color: var(--muted); }
.analytics-bars { height: 6.6rem; align-items: end; gap: 0.32rem; padding-top: 0.8rem; border-bottom: 1px solid rgb(220, 226, 234); display: flex; }
.analytics-bars i { min-width: 0.25rem; flex: 1; border-radius: 0.22rem 0.22rem 0px 0px; background: var(--blue); }
.analytics-bars i:nth-child(1) { height: 42%; }
.analytics-bars i:nth-child(2) { height: 58%; }
.analytics-bars i:nth-child(3) { height: 49%; }
.analytics-bars i:nth-child(4) { height: 76%; }
.analytics-bars i:nth-child(5) { height: 66%; }
.analytics-bars i:nth-child(6) { height: 88%; }
.analytics-bars i:nth-child(7) { height: 73%; }
.analytics-bars i:nth-child(8) { height: 94%; }
.analytics-bars i:nth-last-child(2) { background: var(--mint-dark); }
.analytics-breakdown { margin: 0px; padding: 0.7rem; display: grid; align-content: center; gap: 0.55rem; }
.analytics-breakdown div { border-bottom: 1px solid var(--line); padding-bottom: 0.45rem; }
.analytics-breakdown div:last-child { border-bottom: 0px; padding-bottom: 0px; }
.analytics-breakdown dt { color: var(--muted); font-size: 0.52rem; }
.analytics-breakdown dd { margin: 0.1rem 0px 0px; font-family: Poppins, Arial, sans-serif; font-size: 0.72rem; font-weight: 700; }
.analytics-outcomes { margin: 1.2rem 0px 0px; padding: 0px; list-style: none; display: grid; gap: 0.55rem; }
.analytics-outcomes li { grid-template-columns: 0.55rem 1fr; gap: 0.55rem; color: var(--muted); font-size: 0.77rem; line-height: 1.5; display: grid; }
.analytics-outcomes li::before { width: 0.45rem; height: 0.45rem; margin-top: 0.35rem; border-radius: 50%; background: var(--mint-dark); content: ""; }
.admin-demo { min-height: 29rem; align-content: stretch; padding: clamp(.9rem, 2.2vw, 1.6rem); border: 1px solid #dbe3ee; border-radius: 1.7rem; background: linear-gradient(145deg, #e9eff7, #f8fafc); display: grid; overflow: hidden; }
.admin-preview-window { min-width: 0; height: 100%; display: grid; grid-template-rows: auto 1fr; border: 1px solid #d5deea; border-radius: 1.15rem; background: var(--white); overflow: hidden; box-shadow: rgba(9, 28, 65, .13) 0 1.4rem 3.6rem; }
.admin-preview-bar { min-height: 3.35rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.admin-preview-bar img { width: 4.8rem; height: auto; }
.admin-preview-bar > span { padding-left: .75rem; border-left: 1px solid var(--line); color: #718099; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-preview-bar em { color: #8190a7; font-size: .5rem; font-style: normal; }
.admin-preview-body { min-height: 0; display: grid; grid-template-columns: 7.8rem minmax(0, 1fr); }
.admin-preview-sidebar { min-width: 0; display: flex; flex-direction: column; padding: .85rem .65rem; background: var(--navy); color: var(--white); }
.admin-preview-company { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .5rem; border: 1px solid rgba(255,255,255,.11); border-radius: .6rem; background: rgba(255,255,255,.06); }
.admin-preview-company > i { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: .5rem; background: var(--mint); color: var(--navy); font: 800 .5rem/1 Poppins, Arial, sans-serif; font-style: normal; }
.admin-preview-company strong, .admin-preview-company small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-preview-company strong { font-size: .5rem; }
.admin-preview-company small { margin-top: .12rem; color: #9aabc4; font-size: .43rem; }
.admin-preview-sidebar nav { display: grid; gap: .18rem; margin-top: .75rem; }
.admin-preview-sidebar nav > span { min-height: 2.25rem; display: grid; grid-template-columns: 1.45rem 1fr; align-items: center; gap: .3rem; padding: .35rem .45rem; border-radius: .48rem; color: #aebbd0; font-size: .48rem; }
.admin-preview-sidebar nav > span > i { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: .4rem; background: rgba(255,255,255,.06); color: var(--mint); font-style: normal; font-size: .55rem; }
.admin-preview-sidebar nav > span.active { background: rgba(49,92,246,.34); color: var(--white); font-weight: 700; }
.admin-preview-sidebar nav > span.active > i { background: var(--blue); color: var(--white); }
.admin-preview-safe { display: flex; align-items: center; gap: .38rem; margin-top: auto; padding: .7rem .35rem .25rem; border-top: 1px solid rgba(255,255,255,.09); color: #9fadc2; font-size: .42rem; }
.admin-preview-safe i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .2rem rgba(74,223,201,.1); }
.admin-preview-content { min-width: 0; padding: clamp(.75rem, 1.6vw, 1.15rem); background: #f7f9fc; }
.admin-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: .7rem; }
.admin-preview-heading small, .admin-preview-heading strong { display: block; }
.admin-preview-heading small { margin-bottom: .15rem; color: #8490a4; font-size: .43rem; letter-spacing: .07em; text-transform: uppercase; }
.admin-preview-heading strong { color: var(--navy); font: 700 .72rem/1.2 Poppins, Arial, sans-serif; }
.admin-preview-heading > span { display: inline-flex; align-items: center; gap: .28rem; color: var(--mint-dark); font-size: .44rem; font-weight: 700; }
.admin-preview-heading > span i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint-dark); }
.admin-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .8rem; }
.admin-preview-metrics article { min-width: 0; padding: .62rem; border: 1px solid #e0e6ee; border-radius: .62rem; background: var(--white); }
.admin-preview-metrics span, .admin-preview-metrics strong, .admin-preview-metrics small { display: block; }
.admin-preview-metrics span { color: #78859b; font-size: .43rem; }
.admin-preview-metrics strong { margin: .27rem 0 .18rem; color: var(--navy); font: 750 clamp(.65rem, 1.25vw, .9rem)/1.1 Poppins, Arial, sans-serif; white-space: nowrap; }
.admin-preview-metrics small { color: var(--mint-dark); font-size: .4rem; line-height: 1.35; }
.admin-preview-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(8rem, .9fr); gap: .5rem; margin-top: .5rem; }
.admin-preview-chart, .admin-preview-activity { min-width: 0; border: 1px solid #e0e6ee; border-radius: .65rem; background: var(--white); overflow: hidden; }
.admin-preview-chart header, .admin-preview-activity header { min-height: 2.2rem; display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .5rem .62rem; border-bottom: 1px solid #edf0f4; }
.admin-preview-chart header strong, .admin-preview-activity header strong { color: var(--navy); font-size: .45rem; }
.admin-preview-chart header span, .admin-preview-activity header span { color: #8994a7; font-size: .38rem; }
.admin-preview-chart > div { height: 6.7rem; display: flex; align-items: end; gap: .28rem; padding: .75rem .62rem .55rem; background: linear-gradient(to top, rgba(220,226,234,.55) 1px, transparent 1px) 0 0/100% 25%; }
.admin-preview-chart > div i { flex: 1; min-width: .2rem; border-radius: .25rem .25rem .08rem .08rem; background: var(--blue); }
.admin-preview-chart > div i:nth-child(1) { height: 38%; }.admin-preview-chart > div i:nth-child(2) { height: 54%; }.admin-preview-chart > div i:nth-child(3) { height: 46%; }.admin-preview-chart > div i:nth-child(4) { height: 63%; }.admin-preview-chart > div i:nth-child(5) { height: 58%; }.admin-preview-chart > div i:nth-child(6) { height: 76%; }.admin-preview-chart > div i:nth-child(7) { height: 69%; }.admin-preview-chart > div i:nth-child(8) { height: 88%; background: var(--mint-dark); }
.admin-preview-activity ul { list-style: none; margin: 0; padding: .2rem .55rem .35rem; }
.admin-preview-activity li { min-width: 0; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .62rem .08rem; border-bottom: 1px solid #edf0f4; }
.admin-preview-activity li:last-child { border-bottom: 0; }
.admin-preview-activity li > span { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: rgba(74,223,201,.16); color: var(--mint-dark); font-size: .46rem; font-weight: 800; }
.admin-preview-activity li strong, .admin-preview-activity li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-preview-activity li strong { color: var(--navy); font-size: .42rem; }
.admin-preview-activity li small { margin-top: .12rem; color: #8994a7; font-size: .36rem; }
.admin-preview-activity li em { color: var(--navy); font-size: .4rem; font-style: normal; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .admin-preview-bar em { display: none; }
  .admin-preview-body { grid-template-columns: 1fr; }
  .admin-preview-sidebar { display: none; }
  .admin-preview-content { padding: .75rem; }
  .admin-preview-metrics { grid-template-columns: 1fr 1fr; }
  .admin-preview-metrics article:nth-child(3) { display: none; }
  .admin-preview-lower { grid-template-columns: 1fr; }
}

/* SEO-pakketten */
.seo-detail-hero { position: relative; display: flex; min-height: 42rem; align-items: end; overflow: hidden; padding: 12rem 0 5.5rem; background: linear-gradient(115deg, #07152f 0%, #0c2148 58%, #2855b7 100%); color: var(--white); }
.seo-detail-hero::after { position: absolute; right: -8rem; bottom: -17rem; width: 42rem; height: 42rem; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2%), 0 0 0 11rem rgb(255 255 255 / 2%); content: ""; }
.seo-detail-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.seo-detail-hero h1 { max-width: 48rem; margin: 0; font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.seo-detail-hero-copy > p:not(.kicker) { max-width: 42rem; margin: 1.7rem 0 0; color: #d0d9e7; font-size: 1.03rem; line-height: 1.82; }
.seo-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.seo-detail-primary-button, .seo-detail-package-button { display: inline-flex; min-height: 3.35rem; align-items: center; justify-content: center; padding: .78rem 1.35rem; border-radius: 999px; background: var(--mint); color: var(--navy); font: 800 .69rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.seo-detail-primary-button:hover, .seo-detail-package-button-mint:hover { background: #6be7d6; transform: translateY(-2px); }
.seo-detail-text-link { color: var(--white); font: 800 .69rem/1.35 Poppins, Arial, sans-serif; text-underline-offset: .3rem; text-transform: uppercase; }
.seo-detail-preview { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 20%); border-radius: 1.4rem; background: #f4f7fb; box-shadow: 0 2rem 5rem rgb(0 8 26 / 28%); color: var(--navy); }
.seo-detail-preview-head { display: flex; min-height: 3.6rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem; border-bottom: 1px solid #d8e1ee; background: var(--white); }
.seo-detail-preview-head > div { display: flex; align-items: center; gap: .38rem; }
.seo-detail-preview-head > div > span { width: .45rem; height: .45rem; border-radius: 50%; background: #d7694b; }
.seo-detail-preview-head > div > span:nth-child(2) { background: #b9c0cb; }
.seo-detail-preview-head > div > span:nth-child(3) { background: var(--mint-dark); }
.seo-detail-preview-head strong { margin-left: .45rem; font: 700 .7rem Poppins, Arial, sans-serif; }
.seo-detail-preview-head small { color: #78869c; font-size: .58rem; }
.seo-detail-preview-body { padding: 1.25rem; }
.seo-detail-preview-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.seo-detail-preview-status small, .seo-detail-preview-status strong { display: block; }
.seo-detail-preview-status small { color: #8290a4; font-size: .57rem; }
.seo-detail-preview-status strong { margin-top: .2rem; font: 700 .78rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-preview-status > span { padding: .5rem .65rem; border-radius: 999px; background: #e6f9f5; color: #087a6d; font: 700 .56rem Poppins, Arial, sans-serif; }
.seo-detail-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.seo-detail-preview-metrics article { min-width: 0; padding: .9rem; border: 1px solid #d8e1ee; border-radius: .8rem; background: var(--white); }
.seo-detail-preview-metrics small, .seo-detail-preview-metrics strong, .seo-detail-preview-metrics span { display: block; }
.seo-detail-preview-metrics small { min-height: 2rem; color: #748197; font-size: .54rem; line-height: 1.35; }
.seo-detail-preview-metrics strong { margin-top: .4rem; font: 800 .95rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-preview-metrics span { margin-top: .35rem; color: #079c8b; font-size: .52rem; }
.seo-detail-preview-chart { margin-top: .65rem; padding: 1rem; border: 1px solid #d8e1ee; border-radius: .8rem; background: var(--white); }
.seo-detail-preview-chart > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.seo-detail-preview-chart strong { font: 700 .61rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-preview-chart small { color: #8794a7; font-size: .52rem; }
.seo-detail-preview-bars { display: flex; height: 7.4rem; align-items: end; gap: .45rem; margin-top: .8rem; padding: .6rem .3rem 0; border-bottom: 1px solid #dbe3ef; background: linear-gradient(#f4f7fb 1px, transparent 1px) 0 0 / 100% 2rem; }
.seo-detail-preview-bars span { flex: 1; min-height: 1rem; border-radius: .35rem .35rem 0 0; background: var(--blue); }
.seo-detail-preview-bars span:nth-child(1) { height: 36%; }
.seo-detail-preview-bars span:nth-child(2) { height: 48%; }
.seo-detail-preview-bars span:nth-child(3) { height: 43%; }
.seo-detail-preview-bars span:nth-child(4) { height: 61%; }
.seo-detail-preview-bars span:nth-child(5) { height: 69%; }
.seo-detail-preview-bars span:nth-child(6) { height: 78%; }
.seo-detail-preview-bars span:nth-child(7) { height: 88%; }
.seo-detail-preview-bars span:nth-child(6) { background: var(--mint-dark); }
.seo-detail-preview-body > p { margin: .8rem 0 0; color: #78869c; font-size: .55rem; }

.seo-detail-foundation, .seo-detail-cycle, .seo-detail-boundaries, .seo-detail-faq { padding: 8rem 0; background: var(--white); }
.seo-detail-foundation-grid, .seo-detail-section-heading, .seo-detail-measurement-grid, .seo-detail-boundaries-grid, .seo-detail-faq-grid, .seo-detail-final-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.seo-detail-foundation h2, .seo-detail-section-heading h2, .seo-detail-measurement h2, .seo-detail-boundaries h2, .seo-detail-faq h2, .seo-detail-final-cta h2 { margin: 0; font-size: var(--xenid-public-h2); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.seo-detail-foundation h2, .seo-detail-section-heading h2, .seo-detail-boundaries h2, .seo-detail-faq h2 { color: var(--navy); }
.seo-detail-foundation-copy p { max-width: 42rem; margin: 0; color: var(--muted); line-height: 1.82; }
.seo-detail-foundation-copy p + p { margin-top: 1.15rem; }
.seo-detail-basis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3.5rem; }
.seo-detail-basis-grid article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-width: 0; padding: 1.8rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--cloud); }
.seo-detail-icon { display: grid; width: 3.15rem; height: 3.15rem; flex: 0 0 auto; place-items: center; border-radius: .9rem; background: #e4f8f5; color: var(--mint-dark); }
.seo-detail-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.seo-detail-card-label, .seo-detail-package-label { margin: 0 0 .6rem; color: var(--mint-dark); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.seo-detail-basis-grid h3, .seo-detail-cycle-grid h3 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h3); line-height: 1.2; letter-spacing: -.025em; }
.seo-detail-basis-grid p:last-child, .seo-detail-cycle-grid p { margin: .65rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.7; }

.seo-detail-packages { padding: 8rem 0; background: var(--cloud); }
.seo-detail-section-heading { margin-bottom: 3.5rem; }
.seo-detail-section-heading > p { max-width: 42rem; margin: 0; color: var(--muted); line-height: 1.82; }
.seo-detail-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.seo-detail-package-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 2.25rem; border: 1px solid var(--line); border-radius: 1.4rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(20 42 80 / 5%); }
.seo-detail-package-card-featured { border-top: .38rem solid var(--blue); padding-top: 1.92rem; }
.seo-detail-package-card-custom { background: var(--navy); }
.seo-detail-package-card h3 { margin: 0; color: var(--navy); font-size: clamp(1.65rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.035em; }
.seo-detail-package-card-custom h3 { color: var(--white); }
.seo-detail-package-card > div:first-of-type > p:last-child { margin: 1.15rem 0 0; color: var(--muted); line-height: 1.75; }
.seo-detail-package-card-custom > div:first-of-type > p:last-child { color: #b7c2d4; }
.seo-detail-package-price { display: flex; min-height: 4.2rem; align-items: baseline; flex-wrap: wrap; gap: .45rem .8rem; margin: 1.35rem 0 0; }
.seo-detail-package-price strong { color: var(--blue); font: 800 clamp(1.35rem, 2.8vw, 2rem)/1.2 Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-package-card-custom .seo-detail-package-price strong { color: var(--mint); }
.seo-detail-package-price span { color: #77849a; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.seo-detail-package-card-custom .seo-detail-package-price span { color: #aebbd0; }
.seo-detail-package-card > ul { display: grid; gap: .75rem; margin: 1.6rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.seo-detail-package-card > ul li { position: relative; padding-left: 1.15rem; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.seo-detail-package-card > ul li::before { position: absolute; left: 0; top: .68em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--mint-dark); content: ""; }
.seo-detail-package-card-custom > ul { border-color: rgb(255 255 255 / 15%); }
.seo-detail-package-card-custom > ul li { color: #c7d1e0; }
.seo-detail-package-boundary { display: grid; gap: .35rem; margin: 1.5rem 0 0; padding: 1.2rem; border-radius: .9rem; background: var(--cloud); }
.seo-detail-package-card-custom .seo-detail-package-boundary { background: rgb(255 255 255 / 7%); }
.seo-detail-package-boundary strong { color: var(--navy); font: 700 .67rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-package-card-custom .seo-detail-package-boundary strong { color: var(--white); }
.seo-detail-package-boundary span { color: var(--muted); font-size: .77rem; line-height: 1.65; }
.seo-detail-package-card-custom .seo-detail-package-boundary span { color: #b7c2d4; }
.seo-detail-package-button { align-self: flex-start; margin-top: 1.6rem; background: var(--navy); color: var(--white); }
.seo-detail-package-button:hover { background: var(--blue); transform: translateY(-2px); }
.seo-detail-package-button-mint { background: var(--mint); color: var(--navy); }
.seo-detail-package-card-custom .seo-detail-package-button { background: var(--mint); color: var(--navy); }
.seo-detail-package-badge { position: absolute; top: 1.5rem; right: 1.5rem; padding: .5rem .7rem; border-radius: 999px; background: #e8efff; color: var(--blue); font: 800 .57rem Poppins, Arial, sans-serif; text-transform: uppercase; }

.seo-detail-cycle { background: var(--white); }
.seo-detail-cycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.seo-detail-cycle-grid article { min-width: 0; padding: 1.8rem; border-top: 1px solid var(--line); }
.seo-detail-cycle-grid .seo-detail-icon { margin-bottom: 1.5rem; }
.seo-detail-measurement { padding: 8rem 0; background: var(--navy); color: var(--white); }
.seo-detail-measurement-grid { align-items: center; }
.seo-detail-measurement h2 { color: var(--white); }
.seo-detail-measurement-grid > div:first-child > p:not(.kicker) { max-width: 42rem; margin: 1.5rem 0 0; color: #bdc8d9; line-height: 1.82; }
.seo-detail-measurement-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgb(255 255 255 / 15%); border-radius: 1.25rem; }
.seo-detail-measurement-list article { min-width: 0; padding: 1.5rem; }
.seo-detail-measurement-list article:nth-child(even) { border-left: 1px solid rgb(255 255 255 / 15%); }
.seo-detail-measurement-list article:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 15%); }
.seo-detail-measurement-list strong, .seo-detail-measurement-list span { display: block; }
.seo-detail-measurement-list strong { color: var(--mint); font: 700 .75rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-measurement-list span { margin-top: .55rem; color: #b9c5d7; font-size: .78rem; line-height: 1.65; }

.seo-detail-boundaries { background: var(--cloud); }
.seo-detail-boundaries-grid { align-items: start; }
.seo-detail-boundary-list { overflow: hidden; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--white); }
.seo-detail-boundary-list article { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1.2rem; padding: 1.45rem; }
.seo-detail-boundary-list article + article { border-top: 1px solid var(--line); }
.seo-detail-boundary-list strong { color: var(--navy); font: 700 .72rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-detail-boundary-list p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.seo-detail-faq-grid { align-items: start; }
.seo-detail-faq-list { border-top: 1px solid var(--line); }
.seo-detail-faq-list details { border-bottom: 1px solid var(--line); }
.seo-detail-faq-list summary { position: relative; cursor: pointer; padding: 1.35rem 2.3rem 1.35rem 0; color: var(--navy); font: 700 .83rem/1.55 Poppins, Arial, sans-serif; list-style: none; }
.seo-detail-faq-list summary::-webkit-details-marker { display: none; }
.seo-detail-faq-list summary::after { position: absolute; top: 1.4rem; right: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--cloud); color: var(--blue); content: "+"; font: 700 .82rem/1.25rem Arial, sans-serif; text-align: center; }
.seo-detail-faq-list details[open] summary::after { content: "−"; }
.seo-detail-faq-list details p { margin: 0; padding: 0 2.3rem 1.35rem 0; color: var(--muted); font-size: .84rem; line-height: 1.75; }
.seo-detail-final-cta { padding: 7.5rem 0; background: linear-gradient(135deg, #0c2148, #315cf6); color: var(--white); }
.seo-detail-final-cta h2 { color: var(--white); }
.seo-detail-final-grid > div:last-child > p { max-width: 40rem; margin: 0; color: #dbe3f2; line-height: 1.8; }
.seo-detail-final-cta .seo-detail-actions { margin-top: 1.7rem; }
.seo-detail-text-link-light { color: var(--white); }

@media (max-width: 1020px) {
  .seo-detail-hero-grid, .seo-detail-foundation-grid, .seo-detail-section-heading, .seo-detail-measurement-grid, .seo-detail-boundaries-grid, .seo-detail-faq-grid, .seo-detail-final-grid { grid-template-columns: 1fr; }
  .seo-detail-hero-copy > p:not(.kicker), .seo-detail-foundation-copy p, .seo-detail-section-heading > p { max-width: 48rem; }
  .seo-detail-basis-grid { grid-template-columns: 1fr; }
  .seo-detail-cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .seo-detail-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .seo-detail-foundation, .seo-detail-packages, .seo-detail-cycle, .seo-detail-measurement, .seo-detail-boundaries, .seo-detail-faq, .seo-detail-final-cta { padding: 5rem 0; }
  .seo-detail-package-grid { grid-template-columns: 1fr; }
  .seo-detail-package-badge { position: static; align-self: flex-start; margin-bottom: 1.2rem; }
}

@media (max-width: 560px) {
  .seo-detail-hero h1, .seo-detail-foundation h2, .seo-detail-section-heading h2, .seo-detail-measurement h2, .seo-detail-boundaries h2, .seo-detail-faq h2, .seo-detail-final-cta h2 { overflow-wrap: anywhere; }
  .seo-detail-preview-metrics { grid-template-columns: 1fr; }
  .seo-detail-preview-metrics article:nth-child(2) { display: none; }
  .seo-detail-preview-metrics small { min-height: 0; }
  .seo-detail-preview-chart > div:first-child { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .seo-detail-basis-grid article { grid-template-columns: 1fr; }
  .seo-detail-package-card { padding: 1.4rem; border-radius: 1.1rem; }
  .seo-detail-package-button, .seo-detail-primary-button { width: 100%; }
  .seo-detail-actions { align-items: stretch; flex-direction: column; }
  .seo-detail-text-link { align-self: flex-start; }
  .seo-detail-cycle-grid, .seo-detail-measurement-list { grid-template-columns: 1fr; }
  .seo-detail-cycle-grid article { padding: 1.4rem 0; }
  .seo-detail-measurement-list article:nth-child(even) { border-left: 0; }
  .seo-detail-measurement-list article + article { border-top: 1px solid rgb(255 255 255 / 15%); }
  .seo-detail-boundary-list article { grid-template-columns: 1fr; gap: .55rem; }
}
.analytics-demo.analytics-insights-visual { position: relative; min-height: 0; align-content: center; padding: clamp(.65rem, 1.4vw, 1rem); border: 1px solid #d4deea; background: linear-gradient(145deg, #e9eff7, #f8fafc); }
.analytics-insights-visual img { width: 100%; height: auto; display: block; border: 1px solid #d7e0eb; border-radius: 1.05rem; background: var(--white); box-shadow: rgba(9, 28, 65, .15) 0 1.5rem 3.8rem; }
.analytics-insights-caption { position: absolute; right: clamp(1.1rem, 2.3vw, 1.6rem); bottom: clamp(1.1rem, 2.3vw, 1.6rem); padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(7,21,47,.88); color: var(--white); font: 700 .56rem/1.2 Poppins, Arial, sans-serif; letter-spacing: .03em; box-shadow: rgba(7,21,47,.2) 0 .5rem 1.4rem; backdrop-filter: blur(8px); }
@media (max-width: 560px) {
  .analytics-insights-caption { right: 1rem; bottom: 1rem; padding: .45rem .6rem; font-size: .48rem; }
}
.managed-case { background: var(--navy); color: var(--white); }
.home-proof-grid { grid-template-columns: 0.88fr 1.12fr; align-items: center; gap: clamp(3.5rem, 7vw, 7rem); display: grid; }
.home-proof-copy { max-width: 35rem; }
.home-proof-copy h2 { letter-spacing: -0.02em; text-wrap: balance; margin: 0px; font-size: var(--xenid-public-h2); font-weight: 700; line-height: 1.05; }
.home-proof-copy > p:not(.eyebrow) { color: rgb(183, 194, 212); margin: 1.5rem 0px 0px; line-height: 1.8; }
.home-proof-points { flex-wrap: wrap; gap: 0.8rem 1.2rem; margin: 1.7rem 0px 2rem; padding: 0px; list-style: none; display: flex; }
.home-proof-points li { color: var(--white); border-left: 2px solid var(--mint); padding-left: 0.7rem; font-family: Poppins, Arial, sans-serif; font-size: 0.7rem; font-weight: 750; line-height: 1.4; text-transform: uppercase; }
.home-proof-actions { flex-wrap: wrap; align-items: center; gap: 1.2rem; display: flex; }
.home-proof-visual { min-height: 27rem; border-radius: 1.5rem; display: block; position: relative; overflow: hidden; box-shadow: rgba(0, 5, 16, 0.34) 0px 1.8rem 4.5rem; }
.home-proof-visual img { object-fit: cover; object-position: top center; width: 100%; height: 100%; position: absolute; inset: 0px; }
.home-proof-status { color: var(--navy); background: rgba(255, 255, 255, 0.94); border-radius: 999px; align-items: center; gap: 0.55rem; padding: 0.72rem 0.9rem; font-family: Poppins, Arial, sans-serif; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; display: inline-flex; position: absolute; right: 1rem; bottom: 2.5rem; box-shadow: rgba(7, 21, 47, 0.18) 0px 0.7rem 1.8rem; }
.home-proof-status i { background: var(--mint-dark); border-radius: 50%; width: 0.5rem; height: 0.5rem; box-shadow: rgba(21, 157, 139, 0.16) 0px 0px 0px 0.22rem; }
.pricing { background: var(--cloud); }
.section-heading { max-width: 50rem; margin-bottom: 3.4rem; }
.section-heading-center { text-align: center; margin-inline: auto; }
.pricing .section-heading { width: 100%; max-width: none; }
.pricing .section-heading > p:last-child { width: 100%; max-width: none; }
.section-heading h2, .difference h2, .faq h2 { color: var(--navy); letter-spacing: -0.02em; text-wrap: balance; margin: 0px; font-size: clamp(2.15rem, 3.6vw, 3.65rem); font-weight: 700; line-height: 1.06; }
.section-heading > p:last-child { max-width: 42rem; color: var(--muted); margin: 1.4rem auto 0px; font-size: 1rem; }
.section-heading:not(.section-heading-center) > p:last-child { margin-left: 0px; }
.pricing-apk-strip { grid-template-columns: 0.55fr 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); background: var(--white); border-radius: 1.35rem; margin: -0.4rem 0px 3rem; padding: 1.6rem 1.8rem; display: grid; box-shadow: rgba(20, 42, 80, 0.05) 0px 1rem 3rem; }
.pricing-apk-strip h3 { color: var(--navy); margin: 0px; font-size: 1.45rem; }
.pricing-apk-strip > p { color: var(--muted); margin: 0px; font-size: 0.88rem; line-height: 1.7; }
.pricing-apk-action { align-items: center; gap: 1.2rem; display: flex; }
.pricing-apk-action > p { min-width: 5.5rem; margin: 0px; }
.pricing-apk-action strong, .pricing-apk-action span { display: block; }
.pricing-apk-action strong { color: var(--navy); font-family: Poppins, Arial, sans-serif; font-size: 1.55rem; line-height: 1; }
.pricing-apk-action span { color: var(--muted); margin-top: 0.35rem; font-size: 0.62rem; text-transform: uppercase; }
.price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1.1rem; display: grid; }
.price-card { border: 1px solid var(--line); background: var(--white); border-radius: 1.65rem; flex-direction: column; padding: 2.2rem; display: flex; position: relative; box-shadow: rgba(8, 25, 58, 0.07) 0px 1.2rem 3rem; }
.price-card-featured { border-color: var(--navy); background: var(--navy); color: var(--white); transform: translateY(-0.65rem); box-shadow: rgba(7, 21, 47, 0.22) 0px 1.7rem 4rem; }
.card-label { color: var(--blue); letter-spacing: 0.09em; text-transform: uppercase; margin: 0px 0px 0.7rem; font-family: Poppins, Arial, sans-serif; font-size: 0.72rem; font-weight: 800; }
.price-card-featured .card-label { color: var(--mint); }
.price-card h3 { color: var(--navy); margin: 0px; font-size: 1.45rem; font-weight: 700; }
.price-card-featured h3 { color: var(--white); }
.price { grid-template-columns: auto 1fr; align-items: end; column-gap: 0.65rem; margin: 1.7rem 0px 1rem; display: grid; }
.price span { color: var(--muted); text-transform: uppercase; align-self: center; font-size: 0.72rem; }
.price strong { color: var(--navy); letter-spacing: -0.05em; font-family: Poppins, Arial, sans-serif; font-size: clamp(2.15rem, 3vw, 3.15rem); line-height: 1; }
.price small { color: var(--muted); grid-column: 2; margin-top: 0.45rem; font-size: 0.72rem; }
.price-card-featured .price span, .price-card-featured .price small { color: rgb(169, 182, 202); }
.price-card-featured .price strong { color: var(--white); }
.price-description { min-height: 6.3rem; color: var(--muted); margin: 0px; font-size: 0.94rem; line-height: 1.65; }
.price-card-featured .price-description { color: rgb(185, 196, 213); }
.check-list { border-top: 1px solid var(--line); gap: 0.75rem; margin: 1.7rem 0px 2rem; padding: 1.6rem 0px 0px; list-style: none; display: grid; }
.price-card-featured .check-list { border-color: rgba(255, 255, 255, 0.16); }
.check-list li { color: rgb(61, 73, 96); grid-template-columns: 1.2rem 1fr; align-items: start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.5; display: grid; }
.price-card-featured .check-list li { color: rgb(214, 222, 234); }
.check-list span { color: var(--mint-dark); font-weight: 900; }
.price-card .button { width: 100%; margin-top: auto; }
.pricing-note { color: var(--muted); text-align: center; margin: 2.4rem 0px 0px; font-size: 0.84rem; }
.pricing-page-action { display: flex; justify-content: center; margin-top: 1.5rem; }
.platform-callout { background: var(--navy-2); color: var(--white); padding: 6rem 0px; }
.platform-inner { grid-template-columns: 1.2fr 0.8fr; align-items: end; gap: 7rem; display: grid; }
.platform-inner > div:last-child > p { color: rgb(189, 200, 217); margin: 0px 0px 1.7rem; }
.difference { background: var(--white); }
.difference-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 6rem; display: grid; }
.difference-visual { background: var(--cloud); border-radius: 1.8rem; place-items: center; min-height: 39rem; display: grid; overflow: hidden; }
.difference-visual img { object-fit: cover; width: 100%; height: 100%; }
.large-copy { color: var(--muted); margin: 1.7rem 0px 2.3rem; font-size: 1.04rem; line-height: 1.8; }
.number-list { gap: 0px; margin: 0px; padding: 0px; list-style: none; display: grid; }
.number-list li { border-top: 1px solid var(--line); grid-template-columns: 3.1rem 1fr; gap: 1rem; padding: 1.25rem 0px; display: grid; }
.number-list li:last-child { border-bottom: 1px solid var(--line); }
.number-list > li > span { color: var(--blue); font-family: Poppins, Arial, sans-serif; font-size: 0.75rem; font-weight: 800; }
.number-list h3 { color: var(--navy); margin: -0.15rem 0px 0.25rem; font-size: 0.95rem; }
.number-list p { color: var(--muted); margin: 0px; font-size: 0.9rem; }
.difference-action { margin-top: 2rem; }
.team { background: var(--navy); color: var(--white); }
.team-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 5.5rem; display: grid; }
.team-copy > p:not(.eyebrow) { color: rgb(189, 200, 217); margin: 1.7rem 0px 2.2rem; line-height: 1.85; }
.team-roles { grid-template-columns: repeat(2, 1fr); gap: 1rem; display: grid; }
.team-roles div { border-top: 1px solid rgba(255, 255, 255, 0.2); gap: 0.25rem; padding: 1.1rem 0px; display: grid; }
.team-roles strong { font-family: Poppins, Arial, sans-serif; }
.team-roles span { color: rgb(159, 172, 192); font-size: 0.82rem; }
.team-photo { border-radius: 1.8rem; min-height: 30rem; margin: 0px; overflow: hidden; }
.team-photo img { object-fit: cover; object-position: right center; width: 100%; height: 100%; min-height: 30rem; transform: scale(1.16); transform-origin: right center; }
.care { background: var(--navy-2); color: var(--white); }
.care-heading { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 7rem; margin-bottom: 3rem; display: grid; }
.care-heading > p { color: rgb(189, 200, 217); margin: 0px; }
.care-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; display: grid; }
.care-grid article { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 1.35rem; padding: 2rem; }
.care-grid article > p:first-child { color: var(--mint); letter-spacing: 0.08em; text-transform: uppercase; margin: 0px; font-family: Poppins, Arial, sans-serif; font-size: 0.76rem; font-weight: 800; }
.care-grid h3 { margin: 1.2rem 0px 1rem; font-size: 1.5rem; }
.care-grid h3 span { color: rgb(169, 182, 202); font-size: 0.75rem; font-weight: 400; }
.care-grid article > p:last-child { color: rgb(189, 200, 217); margin: 0px; font-size: 0.9rem; }
.care-note { color: rgb(143, 157, 179); margin: 1.4rem 0px 0px; font-size: 0.8rem; }
.care-action { justify-content: center; margin-top: 2rem; display: flex; }
.faq { background: var(--white); }
.faq-grid { grid-template-columns: 0.75fr 1.25fr; align-items: start; gap: 6rem; display: grid; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { color: var(--navy); cursor: pointer; padding: 1.35rem 3rem 1.35rem 0px; font-family: Poppins, Arial, sans-serif; font-weight: 700; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--blue); font-size: 1.5rem; font-weight: 400; position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 43rem; color: var(--muted); margin: -0.2rem 0px 1.5rem; }
.site-footer { color: var(--white); background: rgb(5, 14, 32); padding: 4.2rem 0px 1.5rem; }
.footer-grid { grid-template-columns: 1.4fr 0.8fr 0.6fr; gap: 5rem; padding-bottom: 3.5rem; display: grid; }
.footer-grid > div { flex-direction: column; align-items: flex-start; gap: 0.55rem; display: flex; }
.footer-grid img { background: var(--white); border-radius: 0.5rem; width: 9rem; padding: 0.5rem; }
.footer-grid > div:first-child p { color: rgb(153, 167, 189); max-width: 27rem; margin: 0.7rem 0px 0px; }
.footer-title { color: var(--mint); letter-spacing: 0.1em; text-transform: uppercase; margin: 0px 0px 0.4rem; font-size: 0.76rem; font-weight: 800; }
.footer-grid a { color: rgb(214, 222, 234); font-size: 0.9rem; text-decoration: none; }
.footer-grid span { color: rgb(136, 150, 173); font-size: 0.82rem; }
.footer-bottom { color: rgb(116, 131, 155); border-top: 1px solid rgba(255, 255, 255, 0.12); justify-content: space-between; gap: 1rem; padding-top: 1.4rem; font-size: 0.75rem; display: flex; }
@media (max-width: 1160px) {
  .desktop-nav, .header-cta { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { background: rgba(7, 21, 47, 0.86); border: 1px solid rgba(255, 255, 255, 0.24); cursor: pointer; border-radius: 50%; place-content: center; gap: 0.28rem; width: 3.1rem; height: 3.1rem; list-style: none; display: grid; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { background: var(--white); border-radius: 2px; width: 1.2rem; height: 2px; }
  .mobile-nav nav { background: rgba(7, 21, 47, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1rem; gap: 0.25rem; min-width: 16rem; padding: 0.75rem; display: grid; position: absolute; top: calc(100% + 0.8rem); right: 0px; box-shadow: rgba(0, 8, 25, 0.36) 0px 1rem 2.5rem; backdrop-filter: blur(12px); }
  .mobile-nav nav a { color: var(--white); border-radius: 0.6rem; padding: 0.8rem 0.9rem; font-weight: 600; text-decoration: none; }
  .mobile-nav nav a:hover, .mobile-nav nav a:focus-visible { color: var(--mint); background: rgba(255, 255, 255, 0.1); }
  .price-grid { grid-template-columns: 1fr; max-width: 45rem; margin-inline: auto; }
  .price-card-featured { transform: none; }
  .price-description { min-height: 0px; }
  .solution-feature, .solution-feature-reverse { grid-template-columns: 1fr; gap: 3.5rem; }
  .solution-feature > .solution-copy { order: 1; }
  .solution-feature > .demo-window, .solution-feature > .iot-preview, .solution-feature > .analytics-demo, .solution-feature > .admin-demo { order: 2; }
}
@media (max-width: 850px) {
  .page-width { width: min(100% - 2rem, var(--page)); }
  .section-pad { padding: 5.2rem 0px; }
  .site-header { top: 1rem; }
  .hero { align-items: flex-end; min-height: 59rem; }
  .hero-image { background-color: var(--navy); background-position: 70% top; background-size: auto clamp(34rem, 74vw, 40rem); }
  .hero-shade { background: linear-gradient(90deg, rgba(5, 16, 37, 0.96), rgba(5, 16, 37, 0.6)), linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(5, 16, 37, 0.9) 100%); }
  .hero-content { padding: 9rem 0px 3.5rem; }
  .hero h1 { font-size: clamp(2.45rem, 10vw, 3.55rem); }
  .hero-lead { font-size: 1rem; }
  .hero-points { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.75rem; margin-top: 3rem; }
  .hero-points li { min-height: 6.5rem; grid-template-columns: 2.5rem 1fr; }
  .intro-grid, .home-route-heading, .platform-inner, .difference-grid, .team-grid, .care-heading, .faq-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .home-route-grid { grid-template-columns: 1fr; }
  .pricing-apk-strip { grid-template-columns: 1fr; gap: 1.2rem; }
  .pricing-apk-action { justify-content: space-between; }
  .difference-visual { order: 2; min-height: 25rem; }
  .team-copy { order: 1; }
  .team-photo { order: 2; min-height: 22rem; }
  .team-photo img { min-height: 22rem; transform: none; }
  .care-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .solutions-heading { margin-bottom: 3.5rem; }
  .solutions-summary .solutions-heading { margin-bottom: 2.5rem; }
  .solution-summary-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .solution-feature { padding: 4.5rem 0px; }
  .home-proof-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .home-proof-copy { max-width: 46rem; }
  .home-proof-visual { min-height: 23rem; }
  .analytics-demo { min-height: 22rem; }
  .admin-demo { border-radius: 1.2rem; min-height: 22rem; }
}
@media (max-width: 560px) {
  .header-inner { border-radius: 1.2rem; min-height: 4.75rem; padding-left: 1rem; }
  .brand img { width: 10.5rem; }
  .hero { min-height: 69rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .difference-action { width: 100%; }
  .care-action .button { width: 100%; }
  .text-link { justify-content: center; }
  .hero-points { grid-template-columns: 1fr; }
  .hero-points li { min-height: 0px; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; }
  .intro h2, .platform-callout h2, .team h2, .care h2, .section-heading h2, .difference h2, .faq h2, .home-proof-copy h2 { font-size: 2.05rem; }
  .home-route-heading h2 { font-size: 2.05rem; }
  .home-route-card { border-radius: 1.15rem; padding: 1.5rem; }
  .home-route-card .button, .pricing-apk-action .button { width: 100%; }
  .home-route-card-top, .pricing-apk-action { align-items: stretch; flex-direction: column; }
  .pricing-apk-strip { border-radius: 1.15rem; padding: 1.5rem; }
  .price-card { border-radius: 1.25rem; padding: 1.6rem; }
  .team-roles, .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .solution-summary-grid { grid-template-columns: 1fr; }
  .solution-summary-card { min-height: 0px; grid-template-columns: 3rem minmax(0px, 1fr); gap: 1rem; padding: 1.5rem 0px; }
  .solution-summary-card:nth-child(n) { border-top: 1px solid var(--line); }
  .solution-summary-card:first-child { border-top: 0px; }
  .solution-summary-icon { width: 3rem; height: 3rem; border-radius: 0.85rem; }
  .solution-summary-icon svg { width: 1.4rem; height: 1.4rem; }
  .solution-summary-action .button { width: 100%; }
  .solution-number { font-size: 5rem; top: -3.7rem; }
  .solution-copy h3 { font-size: 1.9rem; }
  .demo-bar { grid-template-columns: auto 1fr; }
  .demo-bar > span:last-child { display: none; }
  .demo-options, .booking-picker { grid-template-columns: 1fr; }
  .demo-options legend { grid-column: auto; }
  .iot-preview { border-radius: 1.2rem; }
  .iot-preview-label { right: 0.7rem; bottom: 0.7rem; padding: 0.6rem 0.8rem; font-size: 0.62rem; }
  .iot-actions { align-items: stretch; flex-direction: column; }
  .iot-demo-button { width: 100%; }
  .iot-actions .inline-action { text-align: center; padding: 0.5rem 0px; }
  .analytics-metrics { grid-template-columns: 1fr; }
  .analytics-detail { grid-template-columns: 1fr; }
  .analytics-breakdown { grid-template-columns: repeat(3, 1fr); }
  .analytics-breakdown div { border-right: 1px solid var(--line); border-bottom: 0px; padding: 0px 0.55rem 0px 0px; }
  .analytics-breakdown div:last-child { border-right: 0px; }
  .home-proof-actions { align-items: stretch; flex-direction: column; }
  .home-proof-actions .button { width: 100%; }
  .case-text-link { text-align: center; padding: 0.5rem 0px; }
  .home-proof-visual { min-height: 18rem; border-radius: 1.2rem; }
  .home-proof-status { right: 0.7rem; bottom: 2rem; max-width: calc(100% - 1.4rem); font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0.01ms !important; }
}
.difference-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(3.5rem, 5vw, 5rem); }
.difference-visual { aspect-ratio: 3 / 2; min-height: 0px; background: transparent; border-radius: 0px; overflow: visible; }
.difference-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
@media (max-width: 850px) {
  .difference-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .difference-visual { min-height: 0px; }
}
@media (min-width: 1161px) {
  .difference-visual { width: 118%; justify-self: center; }
}
.back-to-top { position: fixed; z-index: 60; right: 1.5rem; bottom: 1.5rem; display: grid; min-width: 6.5rem; min-height: 3rem; place-items: center; padding: 0.72rem 1.05rem; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 999px; background: var(--blue); color: var(--white); font: 800 0.68rem/1 Poppins, Arial, sans-serif; text-decoration: none; text-transform: uppercase; box-shadow: rgba(7, 21, 47, 0.24) 0px 1rem 2.8rem; opacity: 0; visibility: hidden; transform: translateY(0.75rem); transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.2s; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0px); }
.back-to-top:hover { background: var(--blue-dark); transform: translateY(-3px); }
.cookie-notice { position: fixed; z-index: 80; right: 1.25rem; bottom: 1.25rem; min-width: 0; width: min(44rem, calc(100% - 2rem)); max-width: calc(100vw - 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); align-items: center; gap: 1.2rem; padding: 1.15rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 1.15rem; background: rgba(5, 14, 32, 0.97); color: var(--white); box-shadow: rgba(5, 14, 32, 0.28) 0px 1rem 3rem; }
.cookie-notice[hidden] { display: none; }
.cookie-notice > div { min-width: 0; }
.cookie-notice strong { font: 700 0.82rem Poppins, Arial, sans-serif; }
.cookie-notice p { margin: 0.25rem 0px 0px; color: rgb(173, 186, 207); font-size: 0.72rem; line-height: 1.55; }
.cookie-notice a { color: var(--mint); text-underline-offset: 0.2rem; }
.cookie-notice button { min-height: 2.75rem; padding: 0.65rem 1rem; border: 0px; border-radius: 999px; background: var(--mint); color: var(--navy); cursor: pointer; font: 800 0.68rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.cookie-notice-actions { display: grid; gap: 0.55rem; }
.cookie-notice .cookie-choice-secondary { border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--white); }
.cookie-notice button[hidden] { display: none; }
body.cookie-notice-visible .back-to-top { bottom: 11rem; }
@media (max-width: 560px) {
  .back-to-top { right: 1rem; bottom: 1rem; }
  .platform-inner h2 { overflow-wrap: anywhere; }
  .cookie-notice { right: 0.6rem; left: 0.6rem; bottom: 0.6rem; width: auto; max-width: none; max-height: 45vh; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; overflow-y: auto; padding: 0.75rem; border-radius: 0.9rem; }
  .cookie-notice strong { font-size: 0.7rem; line-height: 1.35; }
  .cookie-notice p { margin-top: 0.15rem; font-size: 0.63rem; line-height: 1.4; }
  .cookie-notice-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .cookie-notice button { width: 100%; min-height: 2.3rem; padding: 0.45rem 0.55rem; font-size: 0.56rem; line-height: 1.25; }
  body.cookie-notice-visible .back-to-top { bottom: 12rem; }
}

/* Vaste openbare kophiërarchie op basis van de homepage */
:root {
  --xenid-public-h1: clamp(2.55rem, 3.5vw, 3.7rem);
  --xenid-public-h2: clamp(2.15rem, 3.6vw, 3.65rem);
  --xenid-public-h3: clamp(1.9rem, 3vw, 3.1rem);
}
.hero h1 { font-size: var(--xenid-public-h1); }
.intro h2,
.platform-callout h2,
.team h2,
.care h2,
.section-heading h2,
.difference h2,
.faq h2,
.home-proof-copy h2 { font-size: var(--xenid-public-h2); }
.solution-copy h3 { font-size: var(--xenid-public-h3); }

@media (max-width: 760px) {
  :root {
    --xenid-public-h1: clamp(2.45rem, 10vw, 3.55rem);
    --xenid-public-h2: 2.05rem;
    --xenid-public-h3: 1.9rem;
  }
}

@media (max-width: 560px) {
  .pricing-page-action .button { width: 100%; }
}

/* Over Ons-pagina */
.about-page-body { background: var(--white); }
.about-page { overflow: hidden; background: var(--white); }
.about-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 84% 16%, rgb(74 223 201 / 18%), transparent 24rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.about-hero::after { content: ""; position: absolute; width: 34rem; height: 34rem; right: -17rem; bottom: -24rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%); }
.about-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.about-hero h1 { max-width: 48rem; margin: 0; color: var(--white); font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.about-hero-copy > p { max-width: 39rem; margin: 0 0 2rem; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.about-primary-button { display: inline-flex; min-height: 3.45rem; align-items: center; justify-content: center; padding: .8rem 1.45rem; border-radius: 999px; background: var(--mint); color: var(--navy); font: 800 .72rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.about-primary-button:hover { background: #6be7d6; transform: translateY(-2px); }

.about-team-section { padding: 8rem 0; background: var(--navy); color: var(--white); }
.about-team-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.about-team-copy h2, .about-section-heading h2, .about-location-grid h2 { margin: 0; font-size: var(--xenid-public-h2); font-weight: 700; line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.about-team-copy h2 { color: var(--white); }
.about-team-copy > p:not(.kicker) { margin: 1.6rem 0 2rem; color: #c4cede; line-height: 1.82; }
.about-team-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-team-roles > div { padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 20%); }
.about-team-roles strong, .about-team-roles span { display: block; }
.about-team-roles strong { color: var(--white); font: 700 1rem Poppins, Arial, sans-serif; }
.about-team-roles span { margin-top: .35rem; color: #9fb0c9; font-size: .77rem; line-height: 1.55; }
.about-team-photo { min-width: 0; margin: 0; overflow: hidden; border-radius: 1.6rem; background: #172744; box-shadow: 0 1.8rem 4.5rem rgb(0 5 20 / 30%); }
.about-team-photo img { width: 100%; height: 31rem; display: block; object-fit: cover; object-position: center center; }

.about-roles-section { padding: 8rem 0; background: var(--cloud); }
.about-section-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); margin-bottom: 3.5rem; }
.about-section-heading h2, .about-location-grid h2 { color: var(--navy); }
.about-section-heading > p { max-width: 40rem; margin: 0; color: var(--muted); line-height: 1.82; }
.about-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-role-grid article { min-width: 0; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 1.5rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(20 42 80 / 6%); }
.about-role-label { margin: 0 0 .8rem; color: var(--mint-dark); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.about-role-grid h3 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h3); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.about-role-grid article > p:not(.about-role-label) { margin: 1.4rem 0 0; color: var(--muted); line-height: 1.75; }
.about-role-grid ul { display: grid; gap: .65rem; margin: 1.6rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.about-role-grid li { position: relative; padding-left: 1.2rem; color: #455169; font-size: .85rem; }
.about-role-grid li::before { content: ""; position: absolute; width: .43rem; height: .43rem; left: 0; top: .45rem; border-radius: 50%; background: var(--mint-dark); }

.about-principles-section { padding: 8rem 0; background: linear-gradient(135deg, #0c2148, #173e80); color: var(--white); }
.about-section-heading-light h2 { color: var(--white); }
.about-section-heading-light > p { color: #c0ccde; }
.about-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 18%); }
.about-principles-grid article { min-width: 0; padding: 2rem 2rem 0 0; }
.about-principles-grid article + article { padding-left: 2rem; border-left: 1px solid rgb(255 255 255 / 18%); }
.about-principles-grid h3 { margin: 0; color: var(--white); font-size: 1.15rem; line-height: 1.35; letter-spacing: -.02em; }
.about-principles-grid p { margin: .8rem 0 0; color: #b5c2d6; font-size: .88rem; line-height: 1.72; }

.about-location-section { padding: 8rem 0; background: var(--white); }
.about-location-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.about-location-grid > div:last-child > p { max-width: 39rem; margin: 0 0 2rem; color: var(--muted); line-height: 1.82; }
.about-location-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.about-text-link { color: var(--blue); font: 800 .76rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.about-text-link:hover { color: var(--blue-dark); }

@media (max-width: 980px) {
  .about-hero-grid, .about-team-grid, .about-section-heading, .about-location-grid { grid-template-columns: 1fr; }
  .about-hero-grid { gap: 2.2rem; }
  .about-hero-copy > p { max-width: 48rem; }
  .about-team-copy { max-width: 48rem; }
  .about-team-photo { max-width: 48rem; }
  .about-role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .about-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .about-team-section, .about-roles-section, .about-principles-section, .about-location-section { padding: 5rem 0; }
  .about-principles-grid { grid-template-columns: 1fr; }
  .about-principles-grid article { padding: 1.5rem 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
  .about-principles-grid article + article { padding-left: 0; border-left: 0; }
  .about-principles-grid article:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .about-hero .page-width,
  .about-page > section .page-width { width: min(100% - 2rem, var(--page)); }
  .about-hero h1, .about-team-copy h2, .about-section-heading h2, .about-location-grid h2, .about-role-grid h3 { overflow-wrap: anywhere; }
  .about-primary-button { width: 100%; }
  .about-team-roles { grid-template-columns: 1fr; }
  .about-team-photo { border-radius: 1.1rem; }
  .about-team-photo img { height: 23rem; }
  .about-role-grid article { padding: 1.5rem; border-radius: 1.1rem; }
  .about-location-actions { align-items: stretch; flex-direction: column; }
  .about-text-link { padding: .5rem 0; text-align: center; }
}

/* Pakkettenpagina */
.packages-page-body { background: var(--white); }
.packages-page { overflow: hidden; background: var(--white); }
.packages-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 84% 16%, rgb(74 223 201 / 18%), transparent 24rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.packages-hero::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -17rem;
  bottom: -24rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%);
}
.packages-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.packages-hero h1 { max-width: 48rem; margin: 0; font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.packages-hero-copy > p { max-width: 38rem; margin: 0 0 1.7rem; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.packages-hero-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.packages-hero-list li { min-width: 0; padding: .9rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: .8rem; background: rgb(7 21 47 / 35%); }
.packages-hero-list strong, .packages-hero-list span { display: block; }
.packages-hero-list strong { color: var(--white); font: 700 .7rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.packages-hero-list span { margin-top: .25rem; color: #aebbd0; font-size: .66rem; line-height: 1.45; }

.packages-apk-section { padding: 8rem 0; border-bottom: 1px solid var(--line); background: var(--cloud); }
.packages-apk-card { display: grid; grid-template-columns: .48fr 1.12fr .72fr; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--white); box-shadow: 0 1.2rem 3.5rem rgb(20 42 80 / 6%); }
.packages-apk-card > div { min-width: 0; padding: clamp(1.6rem, 3vw, 2.5rem); }
.packages-apk-card > div + div { border-left: 1px solid var(--line); }
.packages-apk-price small, .packages-apk-price strong, .packages-apk-price span { display: block; }
.packages-apk-price small { color: var(--mint-dark); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.packages-apk-price strong { margin-top: .65rem; color: var(--navy); font: 800 clamp(2.4rem, 5vw, 3.8rem)/1 Poppins, Arial, sans-serif; letter-spacing: -.055em; }
.packages-apk-price span { margin-top: .45rem; color: #7a8799; font-size: .62rem; text-transform: uppercase; }
.packages-apk-copy h3 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h3); line-height: 1.15; letter-spacing: -.035em; }
.packages-apk-copy > p { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.packages-apk-copy ul { display: grid; gap: .55rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.packages-apk-copy li { position: relative; padding-left: 1.15rem; color: #455169; font-size: .8rem; line-height: 1.55; }
.packages-apk-copy li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .45rem; border-radius: 50%; background: var(--mint-dark); }
.packages-apk-action p { margin: 0 0 1.3rem; color: var(--muted); font-size: .78rem; line-height: 1.7; }

.packages-section { padding: 8rem 0; background: var(--white); }
.packages-section-heading, .hosting-packages-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); margin-bottom: 3.5rem; }
.packages-section-heading h2, .hosting-packages-heading h2, .packages-faq-grid h2, .packages-final-cta h2 { margin: 0; font-size: var(--xenid-public-h2); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.packages-section-heading h2, .packages-faq-grid h2 { color: var(--navy); }
.packages-section-heading > p, .hosting-packages-heading > p { max-width: 40rem; margin: 0; color: var(--muted); line-height: 1.82; }

.package-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; }
.package-tier-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 2.3rem; border: 1px solid var(--line); border-radius: 1.55rem; background: var(--white); box-shadow: 0 1.2rem 3.5rem rgb(20 42 80 / 6%); }
.package-tier-featured { border-color: var(--blue); background: linear-gradient(180deg, #f4f7ff, #fff 45%); box-shadow: 0 1.5rem 4rem rgb(49 92 246 / 13%); }
.package-tier-badge { align-self: flex-start; margin: -3.15rem 0 1.3rem; padding: .48rem .75rem; border-radius: 999px; background: var(--blue); color: var(--white); font: 800 .59rem/1.3 Poppins, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.package-tier-label, .hosting-package-label, .seo-package-label { margin: 0 0 .75rem; color: var(--mint-dark); font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.package-tier-card h3, .hosting-package-card h3, .seo-package-card h3, .seo-next-step h3 { margin: 0; font-size: var(--xenid-public-h3); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.package-tier-card h3, .seo-package-card h3, .seo-next-step h3 { color: var(--navy); }
.package-tier-top > p:last-child { margin: 1.25rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }
.package-tier-price { display: grid; gap: .05rem; margin: 1.4rem 0 0; }
.package-tier-price span, .package-tier-price small { color: #7a8799; font-size: .65rem; font-style: normal; text-transform: uppercase; }
.package-tier-price strong { color: var(--navy); font: 800 clamp(2rem, 3vw, 2.75rem)/1 Poppins, Arial, sans-serif; letter-spacing: -.055em; }
.package-feature-list, .hosting-feature-list, .seo-feature-list { display: grid; gap: .72rem; margin: 1.65rem 0; padding: 1.45rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.package-feature-list li, .hosting-feature-list li, .seo-feature-list li { position: relative; padding-left: 1.2rem; color: #455169; font-size: .86rem; line-height: 1.55; }
.package-feature-list li::before, .hosting-feature-list li::before, .seo-feature-list li::before { content: ""; position: absolute; width: .43rem; height: .43rem; left: 0; top: .48rem; border-radius: 50%; background: var(--mint-dark); }
.package-fit { margin: auto 0 1.5rem; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.package-fit strong { color: var(--navy); }
.packages-card-button, .hosting-package-button, .packages-primary-button { display: inline-flex; min-height: 3.35rem; align-items: center; justify-content: center; padding: .78rem 1.2rem; border-radius: 999px; background: var(--navy); color: var(--white); font: 800 .7rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.packages-card-button:hover, .hosting-package-button:hover { background: var(--blue); transform: translateY(-2px); }
.packages-card-button-mint, .hosting-package-button-mint, .packages-primary-button { background: var(--mint); color: var(--navy); }
.packages-card-button-mint:hover, .hosting-package-button-mint:hover, .packages-primary-button:hover { background: #6be7d6; transform: translateY(-2px); }

.packages-compare-heading { margin: 5rem 0 1.6rem; }
.packages-compare-heading h3 { margin: 0; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; text-transform: uppercase; }
.packages-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(20 42 80 / 5%); }
.packages-table { width: 100%; min-width: 48rem; border-collapse: collapse; }
.packages-table th, .packages-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.packages-table tr:last-child th, .packages-table tr:last-child td { border-bottom: 0; }
.packages-table thead th { background: var(--navy); color: var(--white); font: 800 .67rem/1.4 Poppins, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.packages-table tbody th { width: 25%; color: var(--navy); font: 700 .77rem/1.5 Poppins, Arial, sans-serif; }
.packages-table tbody td { color: #566279; font-size: .78rem; line-height: 1.55; }
.packages-boundaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.packages-boundaries > div { min-width: 0; padding: 1.4rem; border-radius: 1rem; background: var(--cloud); }
.packages-boundaries strong, .packages-boundaries span { display: block; }
.packages-boundaries strong { color: var(--navy); font: 700 .78rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.packages-boundaries span { margin-top: .5rem; color: var(--muted); font-size: .76rem; line-height: 1.6; }

.hosting-packages-section { padding: 8rem 0; background: var(--navy); color: var(--white); }
.hosting-packages-heading h2 { color: var(--white); }
.hosting-packages-heading > p { color: #bac5d7; }
.hosting-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hosting-package-card { min-width: 0; display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 3rem); border: 1px solid rgb(255 255 255 / 15%); border-radius: 1.5rem; background: rgb(255 255 255 / 5%); }
.hosting-package-card-plus { border-color: rgb(74 223 201 / 48%); background: linear-gradient(145deg, rgb(74 223 201 / 12%), rgb(255 255 255 / 5%)); }
.hosting-package-card h3 { color: var(--white); }
.hosting-package-price { display: grid; gap: .2rem; margin: 1.4rem 0 0; }
.hosting-package-price strong { color: var(--white); font: 800 clamp(2rem, 4vw, 3rem)/1 Poppins, Arial, sans-serif; letter-spacing: -.055em; }
.hosting-package-price span { color: #9faec5; font-size: .65rem; text-transform: uppercase; }
.hosting-package-card .hosting-feature-list { border-color: rgb(255 255 255 / 14%); }
.hosting-package-card .hosting-feature-list li { color: #d0d8e5; }
.hosting-package-card > p:last-of-type { margin: 0 0 1.7rem; color: #aebbd0; font-size: .86rem; line-height: 1.75; }
.hosting-package-button { align-self: flex-start; margin-top: auto; background: var(--white); color: var(--navy); }
.hosting-package-button:hover { background: #e9eef7; }
.hosting-exclusions { display: grid; grid-template-columns: .55fr 1.2fr .85fr; gap: 2rem; margin-top: 2rem; padding: 1.8rem 2rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1.15rem; background: rgb(0 0 0 / 9%); }
.hosting-exclusions p { margin: 0; color: #aebbd0; font-size: .78rem; line-height: 1.7; }
.hosting-exclusions strong { color: var(--white); font-family: Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-exclusions ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.1rem; color: #d0d8e5; font-size: .78rem; line-height: 1.55; }

.seo-packages-section { padding: 8rem 0; background: var(--cloud); }
.seo-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; }
.seo-package-card { min-width: 0; padding: 2.2rem; border: 1px solid var(--line); border-radius: 1.4rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(20 42 80 / 5%); }
.seo-package-card-accent { border-top: .35rem solid var(--blue); padding-top: 1.88rem; }
.seo-package-price { min-height: 3.5rem; margin: 1.35rem 0 0; color: var(--blue); font: 800 1.18rem/1.35 Poppins, Arial, sans-serif; text-transform: uppercase; }
.seo-package-card > p:last-child { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.seo-next-step { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; margin-top: 1.5rem; padding: 2rem; border-radius: 1.3rem; background: var(--navy); color: var(--white); }
.seo-next-step h3 { color: var(--white); font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.seo-next-step > p { margin: 0; color: #b7c2d4; font-size: .86rem; line-height: 1.75; }
.seo-next-step > div:last-child > p { margin: 0 0 1.25rem; color: #b7c2d4; font-size: .86rem; line-height: 1.75; }

.packages-faq-section { padding: 8rem 0; background: var(--white); }
.packages-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.packages-faq-list { border-top: 1px solid var(--line); }
.packages-faq-list details { border-bottom: 1px solid var(--line); }
.packages-faq-list summary { padding: 1.5rem .2rem; color: var(--navy); cursor: pointer; font: 700 .98rem/1.5 Poppins, Arial, sans-serif; list-style: none; text-transform: uppercase; }
.packages-faq-list summary::-webkit-details-marker { display: none; }
.packages-faq-list summary::after { content: "+"; float: right; margin-left: 1rem; color: var(--blue); font-size: 1.25rem; line-height: 1; }
.packages-faq-list details[open] summary::after { content: "−"; }
.packages-faq-list details p { max-width: 48rem; margin: -.3rem 0 1.7rem; color: var(--muted); line-height: 1.75; }

.packages-final-cta { padding: 7.5rem 0; background: linear-gradient(135deg, #0c2148, #315cf6); color: var(--white); }
.packages-final-cta h2 { color: var(--white); }
.packages-final-cta-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.packages-final-cta-grid > div:last-child > p { max-width: 38rem; margin: 0 0 2rem; color: #dbe3f2; line-height: 1.8; }

@media (max-width: 980px) {
  .packages-hero-grid, .packages-section-heading, .hosting-packages-heading, .packages-faq-grid, .packages-final-cta-grid { grid-template-columns: 1fr; }
  .packages-hero-grid { gap: 2.2rem; }
  .packages-hero-copy > p { max-width: 48rem; }
  .package-tier-grid, .seo-package-grid { grid-template-columns: 1fr; }
  .package-tier-featured { margin-top: 1.15rem; }
  .package-tier-card { max-width: 48rem; }
  .packages-boundaries { grid-template-columns: 1fr; }
  .hosting-exclusions { grid-template-columns: 1fr; gap: 1rem; }
  .seo-next-step { grid-template-columns: 1fr; gap: 1.5rem; }
  .packages-apk-card { grid-template-columns: 1fr; }
  .packages-apk-card > div + div { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 760px) {
  .packages-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .packages-apk-section, .packages-section, .hosting-packages-section, .seo-packages-section, .packages-faq-section, .packages-final-cta { padding: 5rem 0; }
  .packages-hero-list { grid-template-columns: 1fr; }
  .hosting-package-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .packages-hero .page-width,
  .packages-page > section .page-width { width: min(100% - 2rem, var(--page)); }
  .packages-hero h1, .packages-section-heading h2, .hosting-packages-heading h2, .packages-faq-grid h2, .packages-final-cta h2 { overflow-wrap: anywhere; }
  .package-tier-card, .hosting-package-card, .seo-package-card, .seo-next-step { padding: 1.4rem; border-radius: 1.1rem; }
  .packages-apk-card { border-radius: 1.1rem; }
  .packages-apk-card > div { padding: 1.4rem; }
  .package-tier-badge { margin: -2.25rem 0 1.1rem; }
  .packages-card-button, .hosting-package-button, .packages-primary-button { width: 100%; }
  .packages-compare-heading { margin-top: 3.5rem; }
  .packages-boundaries > div { padding: 1.15rem; }
  .packages-table th, .packages-table td { padding: .85rem; }
  .hosting-exclusions { padding: 1.35rem; }
  .packages-faq-list summary { padding-right: 0; font-size: .88rem; }
}

/* Mobiele visuele verfijning september 2026 */
@media (max-width: 560px) {
  :root {
    --xenid-public-h1: clamp(1.6rem, 8.5vw, 2.1rem);
    --xenid-public-h2: clamp(1.55rem, 7.6vw, 1.95rem);
    --xenid-public-h3: clamp(1.35rem, 6.5vw, 1.75rem);
  }

  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    word-spacing: .08em;
  }

  .hero h1,
  .contact-hero h1,
  .legal-hero h1,
  .portfolio-hero h1,
  .booking-hero h1,
  .page-hero h1,
  .about-hero h1,
  .services-overview-hero h1,
  .appointment-service-hero h1,
  .website-service-hero h1,
  .portal-service-hero h1,
  .dashboard-service-hero h1,
  .hosting-service-hero h1,
  .iot-service-hero h1,
  .work-hero h1,
  .airfryer-case-hero h1,
  .packages-hero h1,
  .seo-detail-hero h1,
  .error-page .booking-confirmation h1 {
    max-width: 100%;
    font-size: var(--xenid-public-h1);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .button,
  .pill,
  .outline-link,
  .shared-header-cta,
  .shared-mobile-cta,
  .contact-submit,
  .contact-planner-button,
  .seo-detail-primary-button,
  .seo-detail-package-button,
  .packages-primary-button,
  .packages-card-button,
  .hosting-package-button {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }

  .home-proof-grid,
  .home-proof-copy {
    min-width: 0;
    max-width: 100%;
  }

  .booking-step {
    padding-inline: 1rem;
  }

  .date-options {
    gap: .5rem;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
  }

  .date-options button {
    flex-basis: calc((100% - 1rem) / 3);
    scroll-snap-align: start;
  }

  .legal-content h2,
  .legal-content p,
  .legal-content li {
    overflow-wrap: anywhere;
  }

  .packages-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .packages-table,
  .packages-table tbody,
  .packages-table tr,
  .packages-table th,
  .packages-table td {
    display: block;
    width: 100%;
  }

  .packages-table {
    min-width: 0;
  }

  .packages-table thead {
    display: none;
  }

  .packages-table tr {
    margin-bottom: .85rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 .55rem 1.8rem rgb(20 42 80 / 5%);
  }

  .packages-table tbody th {
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    background: var(--navy);
    color: var(--white);
  }

  .packages-table tbody td {
    display: grid;
    grid-template-columns: 5.3rem minmax(0, 1fr);
    gap: .75rem;
    padding: .78rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .packages-table tbody td:last-child {
    border-bottom: 0;
  }

  .packages-table tbody td::before {
    color: var(--blue);
    font: 800 .58rem/1.5 Poppins, Arial, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .packages-table tbody td:nth-of-type(1)::before { content: "Compact"; }
  .packages-table tbody td:nth-of-type(2)::before { content: "Business"; }
  .packages-table tbody td:nth-of-type(3)::before { content: "Plus"; }
}

/* Homepage: crop the empty photograph below the cards and tighten the join. */
.xenid-home .hero { overflow: clip; }
.xenid-home .hero + .intro { padding-top: 4rem; }
@media (min-width: 851px) {
  .xenid-home .hero { min-height: 0; }
  .xenid-home .hero-content { padding-top: 15rem; padding-bottom: 2.5rem; }
}
@media (max-width: 850px) {
  .xenid-home .hero-content { padding-bottom: 2rem; }
  .xenid-home .hero + .intro { padding-top: 3rem; }
}

/* Topic symbols replace decorative step numbering. */
.xenid-topic-icon { display: block; width: 1.45rem; height: 1.45rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xenid-topic-label { display: flex; align-items: center; gap: .7rem; }
.xenid-topic-label > span { min-width: 0; }

.number-list > li > .xenid-topic-symbol { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #e9efff; color: var(--blue); }

/* Header contact actions: one calm, responsive group with a direct WhatsApp link. */
.xenid-header-actions { display: flex; align-items: center; justify-self: end; gap: .65rem; }
.xenid-header-actions > :is(.header-cta, .shared-header-cta) { white-space: nowrap; }
.xenid-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 3.35rem; height: 3.35rem; border: 1px solid transparent; border-radius: 50%;
  background: var(--mint, #42d9c8); color: var(--navy, #07152f); text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.xenid-whatsapp svg { display: block; width: 1.65rem; height: 1.65rem; fill: currentColor; }
.xenid-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px var(--navy, #07152f); }
@media (hover: hover) and (pointer: fine) {
  .xenid-whatsapp:hover { background: #6be7d6; transform: translateY(-2px); }
}
@media (min-width: 1161px) and (max-width: 1500px) {
  :is(.header-inner, .shared-header-inner) { gap: clamp(1rem, 2vw, 2rem); }
  :is(.desktop-nav, .shared-desktop-nav) { gap: clamp(.75rem, 1.35vw, 1.3rem); }
  :is(.desktop-nav, .shared-desktop-nav) a { font-size: clamp(.875rem, 1.15vw, 1.08rem); }
}
@media (max-width: 1160px) {
  :is(.header-inner, .shared-header-inner) { grid-template-columns: 1fr auto auto; gap: .75rem; }
  .xenid-whatsapp { width: 3rem; height: 3rem; }
  .xenid-whatsapp svg { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 560px) {
  :is(.header-inner, .shared-header-inner) { gap: .6rem; }
  :is(.brand, .shared-brand) { min-width: 0; }
  .brand img, .shared-brand .brand-logo { width: clamp(7rem, 36vw, 10.5rem); max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xenid-whatsapp { transition: none; }
  .xenid-whatsapp:hover { transform: none; }
}

/* Optional mobile reading depth; desktop paragraphs retain their original flow. */
.xenid-home .home-copy-toggle,
.xenid-home .home-copy-more[hidden] { display: none; }
@media (max-width: 760px) {
  .xenid-home .home-copy-toggle:not([hidden]) {
    display: block;
    min-height: 44px;
    margin: .25rem 0 0;
    padding: .4rem 0;
    border: 0;
    border-radius: .2rem;
    background: transparent;
    color: var(--mint);
    font-family: Poppins, Arial, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
  }
  .xenid-home .home-copy-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
}

/* Compact mobile actions float together without a background bar. */
.xenid-mobile-appointment { display: none; }
.xenid-backtop-icon { display: none; }
@media (max-width: 760px) {
  body.has-mobile-appointment {
    padding-bottom: var(--xenid-mobile-bar-height, calc(76px + env(safe-area-inset-bottom, 0px)));
  }
  html:has(body.has-mobile-appointment) {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .xenid-mobile-appointment:not([hidden]) {
    position: fixed;
    z-index: 72;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
  }
  .xenid-mobile-appointment-link {
    pointer-events: auto;
    display: flex;
    flex: 0 1 auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--blue, #3458ff);
    color: #fff;
    font: 800 .72rem/1.35 Poppins, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }
  .xenid-mobile-appointment .back-to-top {
    pointer-events: auto;
    position: static;
    display: none;
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--blue, #3458ff);
    color: #fff;
    font: 800 .6rem/1.35 Poppins, Arial, sans-serif;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .xenid-mobile-appointment .xenid-backtop-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .xenid-mobile-appointment .xenid-backtop-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .xenid-mobile-appointment .back-to-top.visible { display: grid; }
  .xenid-mobile-appointment a:focus-visible { outline: 2px solid var(--mint, #43d8c7); outline-offset: 3px; }
  html.xm-intro-boot .xenid-mobile-appointment,
  html.xm-intro-active .xenid-mobile-appointment,
  .xenid-mobile-appointment.is-paused {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xenid-mobile-appointment { transition: none !important; }
}
@media print { .xenid-mobile-appointment { display: none !important; } }

/* A working product demonstration in the existing homepage composition. */
.difference-visual.home-klantflow {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  border: 1px solid #d9e1ef;
  border-radius: 22px;
  overflow: hidden;
  background: #f6f7f2;
  box-shadow: 0 22px 64px rgb(7 21 47 / 10%);
}
.home-klantflow-bar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: #07152f;
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
}
.home-klantflow-bar strong { font-size: 1rem; font-weight: 700; }
.home-klantflow-status { display: inline-flex; align-items: center; gap: 7px; font-size: .625rem; font-weight: 700; }
.home-klantflow-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #43d8c7; }
.home-klantflow iframe { display: block; width: 100%; height: 620px; border: 0; background: #f6f7f2; }
.home-klantflow-caption { display: flex; width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 18px; background: #fff; border-top: 1px solid #d9e1ef; }
.home-klantflow-caption p { flex: 1 1 160px; margin: 0; color: #546780; font-size: .75rem; line-height: 1.6; }
.home-klantflow-caption a { display: inline-flex; align-items: center; min-height: 44px; color: #244cff; font: 700 .75rem/1.5 Poppins, Arial, sans-serif; text-decoration: underline; text-underline-offset: .25em; }
.home-klantflow-caption a:focus-visible { outline: 2px solid #244cff; outline-offset: 4px; }
@media (max-width: 760px) {
  .difference-visual.home-klantflow { width: 100%; border-radius: 18px; }
  .home-klantflow-bar { padding: 14px; gap: 10px; }
  .home-klantflow-bar strong { font-size: .9rem; }
  .home-klantflow-status { font-size: .58rem; }
  .home-klantflow iframe { height: min(620px, 76svh); min-height: 430px; }
  .home-klantflow-caption { padding: 10px 14px; }
}