@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 16px; }

/* Marketing site (home + privacy). Originally a fixed 1254px reference layout (absolute positions, the base
   rules below); the "@media all" blocks reflow it into a fluid layout with real type sizes for every width:
   one column on phones, grid from 700px, wider grid from 960px and a desktop scale from 1180px.
   The site deliberately commits to one look (light sections, navy hero/footer) in both OS themes. */

:root { color-scheme: light; }
body.site { margin: 0; background: #f6f9fc; color: #13233f; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.site a { color: inherit; text-decoration: none; }
.site svg { display: block; }
.site h1, .site h2, .site h3 { word-spacing: .07em; }
.page { --z: 1; width: 1254px; margin: 0 auto; zoom: var(--z); overflow: hidden; background: #f6f9fc; }
.wrap { width: 1020px; margin: 0 auto; position: relative; }
.hand { font-family: var(--font-hand); }
br.d { display: inline; }

/* ------------------------------------------------------------------ nav */
.site-nav { position: relative; z-index: 3; display: flex; align-items: center; height: 50px; }
.brand { display: flex; align-items: center; gap: 7px; font: 700 16.2px/1 var(--font-display); letter-spacing: -.3px; margin-left: -4px; }
.brand img { width: 26px; height: 26px; }
.links { display: flex; gap: 24px; margin-left: 38px; font-size: 10px; font-weight: 500; color: #e8edf5; }
.links a:hover, .nav-r a:first-child:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 17px; font-size: 10px; font-weight: 500; }
.site .btn-w { background: #fff; color: #0d1622; padding: 9px 13px; border-radius: 7px; font-weight: 600; }
.site-nav.light { color: #13233f; }
.site-nav.light .links { color: #3a4a64; }
.site-nav.light .brand img { background: #0f1b2b; border-radius: 8px; padding: 3px; }
.site .site-nav.light .btn-w { background: #0f1b2b; color: #fff; }
.site-nav.light .links a:hover, .site-nav.light .nav-r a:first-child:hover { color: #0f1b2b; }
.links a.on { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-nav.light .links a.on { color: #0f1b2b; }

/* ------------------------------------------------------------------ shared bits */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 31px; padding: 0 15px; border-radius: 999px; font-size: 9.8px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 0; font-family: inherit; }
.pill.teal { background: #8ff3e0; color: #0d1b24; box-shadow: 0 0 18px rgb(143 243 224 / 0.25); }
.pill.ghost { background: transparent; border: 1.3px solid rgb(255 255 255 / 0.75); color: #fff; }
.pill:hover { transform: translateY(-1px); }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px 0 11px; border-radius: 14px; background: #d5f6ef; color: #0f1f36; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-pill svg { width: 13px; height: 13px; }
.teal-grad { background: linear-gradient(90deg, #11b096, #2dc7a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checks-list { list-style: none; margin: 0; padding: 0; }
.checks-list li { display: flex; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: no-preference) { .pill, .card-lift { transition: transform .15s ease, box-shadow .15s ease; } }
.site a:focus-visible, .site button:focus-visible { outline: 2px solid #2f6bf2; outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------------ HOME: hero */
.hero { position: relative; height: 410px; background: #0d151f url(/assets/img/hero.webp?v=2) center / 1254px 410px no-repeat; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 17 26 / 0.35), rgb(10 17 26 / 0) 40%); pointer-events: none; }
.hero .eyebrow { position: absolute; top: 88px; left: 2px; display: flex; align-items: center; gap: 6px; font: 600 15.6px/1 var(--font-display); letter-spacing: -.3px; }
.hero .eyebrow img { width: 17px; height: 17px; }
.hero h1 { position: absolute; top: 116px; left: 1px; margin: 0; font: 700 45px/1.05 var(--font-display); letter-spacing: -1.9px; color: #f6f8fb; }
.hero h1 span { display: block; background: linear-gradient(90deg, #9ff6e6, #7fe6d6 60%, #b3f4ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { position: absolute; top: 229px; left: 2px; width: 280px; margin: 0; font-size: 11.8px; line-height: 18.2px; color: #eef2f7; }
.hero .ctas { position: absolute; top: 317px; left: 2px; display: flex; gap: 11px; }
.hero .checks { position: absolute; top: 374px; left: 2px; display: flex; gap: 20px; font-size: 8.6px; color: #dfe6ee; }
.hero .checks span { display: flex; align-items: center; gap: 7px; }
.hero .hand { position: absolute; right: -92px; top: 112px; font-size: 17px; line-height: 1.15; color: #dfe8ff; transform: rotate(-12deg); }
.hero .hand u { text-decoration: none; border-bottom: 1.3px solid #cfdcff; }
.hero .arrow { position: absolute; right: 30px; top: 150px; }
.hero .devs { position: absolute; right: -74px; top: 188px; display: flex; gap: 11px; color: #8fb2ff; }

/* ------------------------------------------------------------------ HOME: features strip */
.features { height: 160px; background: transparent; }
.features .wrap { display: flex; padding-top: 25px; }
.features h2 { margin: 23px 0 0 2px; width: 225px; font: 700 18px/1.43 var(--font-display); letter-spacing: -.2px; color: #13233f; }
.feat { width: 160px; }
.feat:nth-of-type(4) { width: 176px; }
.feat .ico { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 17px; }
.feat h3 { margin: 0 0 5px; font: 700 12.2px/1.3 var(--font-display); color: #13233f; }
.feat p { margin: 0; font-size: 10px; line-height: 16px; color: #6b788f; }
.ico.i1 { background: #e9eefd; } .ico.i2 { background: #e6e9fd; } .ico.i3 { background: #e5f9f6; } .ico.i4 { background: #fef1e1; } .ico.i5 { background: #e9effd; }

/* ------------------------------------------------------------------ HOME: sectors */
.sectors { background: transparent; padding: 34px 0; }
.sectors .wrap { display: flex; }
.sec-intro { width: 229px; padding-top: 9px; }
.sec-intro h2 { margin: 0; font: 700 23px/1.2 var(--font-display); letter-spacing: -.3px; color: #13233f; }
.sec-intro .sub { margin: 6px 0 29px; font: 500 13.6px/1.3 var(--font-display); color: #2a3a57; }
.sec-intro p { margin: 0; font-size: 10px; line-height: 18px; color: #55647d; white-space: nowrap; }
.sec-intro b { font-weight: 600; color: #2b3b58; }
.cards { display: flex; gap: 20px; }
.scard { width: 252px; background: #fff; border-radius: 9px; box-shadow: 0 6px 22px rgb(30 52 90 / 0.07), 0 1px 2px rgb(30 52 90 / 0.05); overflow: hidden; }
.scard:nth-child(3) { width: 246px; }
.scard .ph { height: 110px; background-size: cover; background-position: center; position: relative; }
.scard .ph.zorg { background-image: url(/assets/img/zorg.webp); }
.scard .ph.jur { background-image: url(/assets/img/jur.webp); }
.scard .ph.hr { background-image: url(/assets/img/hr.webp); }
.badge { position: absolute; left: 8px; bottom: -14px; background: #fff; padding: 4px 5px 0; border-radius: 13px 13px 0 0; }
.badge span { display: block; padding: 0 15px; height: 21px; line-height: 21px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 600; }
.badge .b-zorg { background: #077e6a; padding: 0 22px; } .badge .b-jur { background: linear-gradient(90deg, #5c6ff5, #7f8cf8); } .badge .b-hr { background: #fb8526; }
.scard .bd { padding: 27px 16px 16px; }
.scard h3 { margin: 0 0 9px; font: 700 12.2px/1.3 var(--font-display); color: #13233f; }
.scard p { margin: 0; font-size: 9.9px; line-height: 16.1px; color: #55647d; white-space: nowrap; }
.scard p b { font-weight: 500; color: #2d3d5a; }
.scard .ex { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 9.3px; color: #667490; }

/* ------------------------------------------------------------------ HOME: portal */
.portal { position: relative; height: 630px; background: #eef3f9 url(/assets/img/portal.webp?v=2) center / 1254px 630px no-repeat; }
.portal .screen { display: none; position: absolute; left: 429px; top: 111px; width: 594px; height: 423px; background: #0f1b2b url(/assets/img/app-dashboard.webp?v=2) top left / 100% auto no-repeat; }
.portal .eyebrow-pill { position: absolute; left: 58px; top: 62px; }
.portal h2 { position: absolute; left: 58px; top: 104px; margin: 0; font: 800 42px/1.2 var(--font-display); letter-spacing: -1.6px; color: #0f1f36; }
.portal .lead { position: absolute; left: 60px; top: 229px; margin: 0; width: 320px; font-size: 13.4px; line-height: 22px; color: #1f2d45; }
.pfeat { position: absolute; left: 56px; display: flex; gap: 20px; }
.pfeat .ci { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e7edf6; display: grid; place-items: center; color: #13233f; }
.pfeat .ci svg { width: 22px; height: 22px; }
.pfeat h3 { margin: 4px 0 2px; font: 700 13.4px/1.3 var(--font-display); color: #13233f; }
.pfeat p { margin: 0; font-size: 11.2px; line-height: 18.5px; color: #55647d; white-space: nowrap; }
.callout { position: absolute; display: flex; gap: 11px; padding: 13px 14px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgb(30 52 90 / 0.12); }
.callout .ci { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #e4e9fd; color: #4f63d8; display: grid; place-items: center; }
.callout .ci svg { width: 14px; height: 14px; }
.callout h3 { margin: 1px 0 3px; font: 700 10.4px/1.2 var(--font-display); color: #13233f; }
.callout p { margin: 0; font-size: 9.6px; line-height: 14.4px; color: #55647d; white-space: nowrap; }
.co1 { left: 1057px; top: 66px; width: 180px; height: 76px; }
.co2 { left: 1065px; top: 220px; width: 172px; height: 75px; }
.co3 { left: 1071px; top: 339px; width: 166px; height: 83px; }

/* ------------------------------------------------------------------ HOME: in detail */
.detail { position: relative; height: 495px; background: transparent; }
.detail .eyebrow-pill { position: absolute; left: 60px; top: 49px; height: 24px; padding: 0 11px 0 9px; font-size: 9.6px; }
.detail h2 { position: absolute; left: 61px; top: 80px; margin: 0; font: 800 29px/1.24 var(--font-display); letter-spacing: -.9px; color: #0f1f36; }
.detail .lead { position: absolute; left: 61px; top: 180px; margin: 0; font-size: 12.6px; line-height: 22px; color: #55647d; white-space: nowrap; }
.detail .hand { position: absolute; left: 74px; top: 332px; font-size: 16px; line-height: 1.25; color: #3b5b8f; transform: rotate(-13deg); }
.detail .harrow { position: absolute; left: 160px; top: 360px; }
.dcard { position: absolute; top: 54px; height: 395px; background: #fff; border-radius: 10px; box-shadow: 0 4px 18px rgb(30 52 90 / 0.05); padding: 10px 12px 0; }
.dcard.c1 { left: 322px; width: 177px; } .dcard.c2 { left: 508px; width: 177px; } .dcard.c3 { left: 693px; width: 144px; } .dcard.c4 { left: 846px; width: 159px; }
.dcard .tile { width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 11px; }
.dcard .tile svg { width: 20px; height: 20px; }
.t1 { background: #d9f6ee; color: #0e8f76; } .t2 { background: #e6e7fd; color: #4f4fd9; } .t3 { background: #fdeede; color: #f08a1c; } .t4 { background: #e8e8fd; color: #5b5ce0; }
.dcard h3 { margin: 0 0 5px; font: 800 15px/1.2 var(--font-display); letter-spacing: -.3px; color: #0f1f36; }
.dcard > p { margin: 0 0 21px; font-size: 11.2px; line-height: 17px; color: #6b788f; min-height: 34px; }
.panel { border: 1px solid #e8edf5; border-radius: 8px; padding: 11px 10px; background: #fff; }
.panel h4 { margin: 0 0 10px; font: 700 10.2px/1.2 var(--font-display); color: #13233f; }
.panel .utt { display: grid; grid-template-columns: 24px 1fr; gap: 0 4px; padding: 7px 0; border-bottom: 1px solid #eef2f7; font-size: 8px; }
.panel .utt:last-child { border-bottom: 0; }
.panel .utt time { color: #6b788f; font-size: 7.4px; padding-top: 2px; }
.panel .utt b { display: flex; align-items: center; gap: 6px; font-size: 7.6px; font-weight: 600; color: #13233f; }
.panel .utt p { grid-column: 2; margin: 4px 0 0; color: #55647d; line-height: 13px; }
.mini-av { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #c8d6fb, #a7b8f3); display: inline-grid; place-items: center; font-size: 6px; color: #2b3a8f; font-weight: 700; }
.mini-av.me { background: #dde6ff; color: #2f6bf2; }
.panel ul { margin: 0; padding: 0 0 0 10px; font-size: 8.3px; line-height: 13px; color: #3c4b66; }
.panel ul li { margin-bottom: 11px; }
.panel ul li::marker { color: #6b788f; }
.panel .more { display: inline-block; margin-top: 3px; padding: 5px 10px; border-radius: 999px; background: #eef2fe; color: #2f6bf2; font-size: 8.8px; font-weight: 600; }
.panel .todo { display: grid; grid-template-columns: 16px 1fr; gap: 0 5px; padding: 6px 0 9px; font-size: 8.3px; line-height: 14px; color: #3c4b66; }
.panel .todo i { width: 11px; height: 11px; border-radius: 50%; border: 1.2px solid #9aa6b8; margin-top: 2px; }
.panel .todo small { grid-column: 2; color: #4f63d8; font-size: 7.8px; margin-top: 4px; }
.panel .bar { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-bottom: 11px; font-size: 8.2px; color: #55647d; }
.panel .bar .l.pos { color: #1aa37a; } .panel .bar .l.neu { color: #55647d; } .panel .bar .l.neg { color: #ef4a4a; }
.panel .bar i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; display: block; }
.panel .bar i::before { content: ""; display: block; height: 100%; border-radius: inherit; }
.panel .bar i.p::before { width: 72%; background: linear-gradient(90deg, #13b39a, #27c3a6); }
.panel .bar i.n::before { width: 20%; background: #8aa5d6; }
.panel .bar i.g::before { width: 8%; background: #ef4a4a; }
.panel hr { border: 0; height: 1px; background: #eef2f7; margin: 12px 0; }
.panel .kw { display: flex; flex-wrap: wrap; gap: 5px; }
.panel .kw span { padding: 4px 8px; border-radius: 999px; background: #eaf0fe; color: #3c5ab3; font-size: 7.8px; }
.dcard.c4 .panel h4 + h4 { margin-top: 0; }
.phone { position: absolute; left: 1005px; top: 25px; width: 235px; height: 450px; background: url(/assets/img/phone.webp?v=2) center / 100% 100% no-repeat; }

/* ------------------------------------------------------------------ footer CTA (home) */
.foot { position: relative; height: 154px; background: #132030; color: #fff; overflow: hidden; }
.waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.foot .wrap { display: flex; align-items: flex-start; height: 100%; }
.foot h2 { margin: 18px 0 0 4px; font: 700 24.5px/1.2 var(--font-display); letter-spacing: -.5px; width: 404px; }
.foot h2 .a { color: #c7d6f6; } .foot h2 .b { color: #bcd8f1; }
.foot h2 .g { background: linear-gradient(90deg, #76e0cd, #58cdb9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot .sm { position: absolute; left: 5px; top: 86px; margin: 0; font-size: 9.8px; line-height: 15.5px; color: #e6ecf4; }
.foot .cta { display: flex; align-items: center; gap: 27px; margin-top: 42px; }
.foot .pill.teal { height: 38px; padding: 0 21px; font-size: 10.8px; gap: 14px; }
.foot .demo { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.foot .tag { position: absolute; right: 14px; top: 30px; font-size: 17px; font-weight: 500; color: #e9eefc; transform: rotate(-8deg); letter-spacing: .3px; }
.foot .tag svg { margin: 2px 0 0 22px; }

/* ------------------------------------------------------------------ trust bar (both pages) */
.trustbar { position: relative; height: 129px; background: linear-gradient(90deg, #172739, #101c2c 60%, #13223a); color: #fff; overflow: hidden; }
.trustbar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 12% 50%, rgb(143 243 224 / 0.06), transparent 60%); pointer-events: none; }
.trustbar .wrap { width: 1150px; display: flex; align-items: center; height: 100%; }
.trustbar .sh { flex: none; margin-right: 16px; }
.trustbar h2 { margin: 0 0 3px; font: 700 18.5px/1.2 var(--font-display); letter-spacing: -.3px; color: #d7fbf3; }
.trustbar p { margin: 0; font-size: 12px; color: #c9d4e3; }
.trustbar ul { margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center; gap: 12px; font-size: 10.6px; color: #e6ecf4; }
.trustbar ul li + li::before { content: "•"; margin-right: 12px; color: #93a3ba; }
.trustbar .eu-flag { margin-right: 14px; }
.trustbar .legal { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 9px; color: #7f8ea5; white-space: nowrap; }
.trustbar .legal a:hover { color: #fff; }

/* ------------------------------------------------------------------ PRIVACY page */
.p-hero { position: relative; height: 596px; background: #f3f7fc url(/assets/img/privacy-hero.webp) center bottom / 1254px 540px no-repeat; }
.p-hero .site-nav { position: absolute; left: 0; right: 0; top: 0; }
.p-hero .inner { position: absolute; left: 0; right: 0; top: 56px; height: 540px; }
.p-hero .eyebrow-pill { position: absolute; left: 67px; top: 53px; }
.p-hero h1 { position: absolute; left: 66px; top: 96px; margin: 0; font: 800 42px/1.22 var(--font-display); letter-spacing: -1.6px; color: #0f1f36; }
.p-hero .lead { position: absolute; left: 67px; top: 212px; margin: 0; font-size: 14.2px; line-height: 24px; color: #1f2d45; white-space: nowrap; }
.p-hero .checks-list { position: absolute; left: 67px; top: 336px; display: grid; gap: 15.6px; font-size: 13.2px; color: #3a4a63; }
.nl-pill { position: absolute; left: 563px; top: 134px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 12px; background: #fff; border-radius: 10px; box-shadow: 0 8px 22px rgb(30 52 90 / 0.12); font: 600 12px/1 var(--font-display); color: #13233f; }
.sep-card { position: absolute; left: 770px; top: 77px; width: 241px; height: 364px; background: rgb(255 255 255 / 0.97); border-radius: 14px; box-shadow: 0 16px 40px rgb(30 52 90 / 0.14); padding: 18px 20px 0; }
.sep-card header { display: flex; gap: 12px; padding-bottom: 14px; }
.sep-card header .ci { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #c9e8fb; display: grid; place-items: center; }
.sep-card h3 { margin: 3px 0 4px; font: 700 12.6px/1.2 var(--font-display); color: #13233f; }
.sep-card header p { margin: 0; font-size: 9.8px; line-height: 15px; color: #55647d; }
.sep-card ul { list-style: none; margin: 0; padding: 0; }
.sep-card li { display: flex; align-items: center; gap: 12px; height: 49.5px; border-top: 1px solid #eef2f7; font-size: 10px; font-weight: 600; color: #13233f; }
.sep-card li .ci { flex: none; width: 31px; height: 31px; border-radius: 50%; background: #eef2f8; display: grid; place-items: center; color: #13233f; }
.sep-card li .ci svg { width: 15px; height: 15px; }
.sep-card li em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 8.8px; color: #20b389; display: flex; align-items: center; gap: 6px; }
.sep-card li em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #20c08f; }

.norms { position: relative; margin: 22px 54px 0; height: 263px; background: #f3f7fc; border-radius: 14px; }
.norms .intro { position: absolute; left: 34px; top: 22px; width: 260px; }
.norms h2 { margin: 0 0 12px; font: 700 22.4px/1.2 var(--font-display); letter-spacing: -.6px; color: #0f1f36; }
.norms .intro p { margin: 0; font-size: 11.6px; line-height: 20.3px; color: #3c4b66; white-space: nowrap; }
.norms .gdpr { position: absolute; left: 34px; top: 186px; display: flex; align-items: center; gap: 22px; }
.norms .gdpr .ci { width: 40px; height: 40px; border-radius: 50%; background: #eaf0f7; display: grid; place-items: center; }
.norms .gdpr strong { display: block; font-size: 10.6px; font-weight: 600; color: #13233f; }
.norms .gdpr small { font-size: 9.6px; color: #55647d; }
.ncard { position: absolute; top: 43px; width: 186px; height: 197px; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgb(30 52 90 / 0.04); padding: 20px 20px 0; }
.ncard.n1 { left: 344px; } .ncard.n2 { left: 545px; } .ncard.n3 { left: 746px; } .ncard.n4 { left: 946px; width: 183px; }
.ncard .ci { width: 52px; height: 52px; border-radius: 50%; background: #e9eef6; display: grid; place-items: center; color: #13233f; margin-bottom: 20px; }
.ncard .ci svg { width: 24px; height: 24px; }
.ncard h3 { margin: 0 0 11px; font: 700 13.8px/1.2 var(--font-display); color: #0f1f36; letter-spacing: -.2px; }
.ncard p { margin: 0; font-size: 11px; line-height: 18.5px; color: #55647d; white-space: nowrap; }

.band { position: relative; margin: 20px 54px 56px; height: 221px; border-radius: 12px; background: #0f1b2c; color: #fff; overflow: hidden; }
.band .stars { position: absolute; left: 81px; top: 57px; }
.band h2 { position: absolute; left: 259px; top: 38px; margin: 0; font: 700 31px/1.22 var(--font-display); letter-spacing: -.9px; }
.band h2 span { color: #5fe3cf; }
.band p { position: absolute; left: 259px; top: 124px; margin: 0; font-size: 12.3px; line-height: 20.5px; color: #e6ecf4; white-space: nowrap; }
.band .vr { position: absolute; left: 692px; top: 40px; width: 1px; height: 142px; background: rgb(255 255 255 / 0.2); }
.band .hand { position: absolute; left: 790px; top: 36px; font-size: 15.5px; line-height: 1.3; color: #cfe0ff; transform: rotate(-12deg); }
.band .harrow { position: absolute; left: 755px; top: 76px; }
.band .pill.teal { position: absolute; left: 867px; top: 113px; height: 44px; padding: 0 22px; font-size: 12.4px; gap: 18px; }
.band .note { position: absolute; left: 872px; top: 170px; display: flex; align-items: center; gap: 8px; font-size: 9.6px; color: #e6ecf4; }

.how { height: 176px; text-align: center; padding-top: 42px; }
.how .kick { margin: 0 0 12px; font-size: 9.6px; font-weight: 700; letter-spacing: .14em; color: #2f6bf2; }
.how h2 { margin: 0 0 16px; font: 700 30px/1.15 var(--font-display); letter-spacing: -.8px; color: #0f1f36; }
.how p { margin: 0; font-size: 14px; line-height: 23px; color: #55647d; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 1146px; margin: 10px auto 54px; }
.step { background: #fff; border: 1px solid #e8edf5; border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgb(30 52 90 / 0.04); }
.step .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf0fe; color: #2f6bf2; font: 700 12px/1 var(--font-display); margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; font: 700 14px/1.2 var(--font-display); color: #0f1f36; }
.step p { margin: 0; font-size: 11.4px; line-height: 18px; color: #55647d; }

/* ------------------------------------------------------------------ pilot dialog */
.pilot-dialog { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 26px; background: #fff; color: #13233f; color-scheme: light; box-shadow: 0 30px 80px rgb(15 27 43 / 0.35); }
.pilot-dialog::backdrop { background: rgb(15 27 43 / 0.55); backdrop-filter: blur(2px); }
.pilot-dialog h2 { margin: 0 0 8px; font: 700 22px/1.2 var(--font-display); letter-spacing: -.4px; }
.pilot-dialog > p { margin: 0 0 18px; color: #55647d; font-size: 14px; line-height: 1.55; }
.pilot-dialog form { display: grid; gap: 10px; }
.pilot-dialog input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid #dfe5ee; background: #fff; color: #13233f; font: inherit; font-size: 15px; }
.pilot-dialog input:focus { outline: 2px solid rgb(47 107 242 / 0.35); border-color: #2f6bf2; }
.pilot-dialog .pill.teal { height: 44px; font-size: 14px; }
.pilot-dialog .close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: #55647d; cursor: pointer; }
.pilot-dialog .close:hover { background: #f1f4f9; }
.pilot-msg { margin: 4px 0 0; font-size: 14px; min-height: 20px; }
.pilot-msg.ok { color: #16a37a; } .pilot-msg.err { color: #e5484d; }
.pilot-small { margin: 10px 0 0; font-size: 12.5px; color: #6b788f; }

/* ------------------------------------------------------------------ phones & small screens: reflow */
@media all {
  .page { width: 100%; zoom: 1; }
  .wrap, .trustbar .wrap { width: auto; padding-inline: 18px; }
  br.d { display: none; }
  .sec-intro p, .scard p, .pfeat p, .callout p, .detail .lead, .eu p, .p-hero .lead, .norms .intro p, .ncard p, .band p { white-space: normal; }
  .links, .hero .hand, .hero .arrow, .hero .devs { display: none; }
  .nav-r { gap: 12px; }
  .brand, .btn-w, .nav-r a { white-space: nowrap; }
  .nav-r a:first-child { font-size: 14px; font-weight: 600; color: #fff; }
  .site-nav.light .nav-r a:first-child { color: #13233f; }
  .brand { font-size: 17px; margin-left: 0; }
  .btn-w { font-size: 13px; }
  .pill { height: 42px; font-size: 14px; padding: 0 18px; }
  .hero, .portal, .detail, .p-hero, .norms, .band, .how, .features, .eu, .foot, .trustbar { height: auto; }
  .hero, .portal, .detail, .p-hero .inner, .band, .norms { display: flex; flex-direction: column; }
  .hero .eyebrow, .hero h1, .hero .lead, .hero .ctas, .hero .checks,
  .portal .eyebrow-pill, .portal h2, .portal .lead, .pfeat, .callout, .portal .screen,
  .detail .eyebrow-pill, .detail h2, .detail .lead, .detail .hand, .detail .harrow, .dcard, .phone,
  .p-hero .eyebrow-pill, .p-hero h1, .p-hero .lead, .p-hero .checks-list, .nl-pill, .sep-card,
  .norms .intro, .norms .gdpr, .ncard, .band .stars, .band h2, .band p, .band .vr, .band .hand, .band .harrow, .band .pill.teal, .band .note, .foot .sm, .foot .tag { position: static; transform: none; }

  .hero { background-size: auto 280px; background-position: right -140px bottom; padding-bottom: 300px; }
  .hero::before { background: linear-gradient(180deg, rgb(10 17 26 / 0.94) 55%, rgb(10 17 26 / 0) 78%); }
  .hero .eyebrow { margin-top: 24px; }
  .hero h1 { margin-top: 14px; font-size: 40px; letter-spacing: -1.4px; }
  .hero .lead { margin-top: 14px; width: auto; max-width: 34ch; font-size: 15px; line-height: 1.5; }
  .hero .ctas { margin-top: 20px; flex-wrap: wrap; }
  .hero .checks { margin-top: 18px; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; }

  .features { padding-bottom: 28px; }
  .features .wrap { flex-wrap: wrap; gap: 24px 18px; }
  .features h2 { width: 100%; margin: 0; font-size: 22px; }
  .feat, .feat:nth-of-type(4) { width: calc(50% - 9px); }
  .feat h3 { font-size: 15px; } .feat p { font-size: 13px; line-height: 1.5; }

  .sectors .wrap { flex-direction: column; gap: 26px; }
  .sec-intro { width: auto; } .sec-intro h2 { font-size: 28px; } .sec-intro p { font-size: 14px; line-height: 1.6; }
  .cards { flex-direction: column; }
  .scard, .scard:nth-child(3) { width: 100%; } .scard .ph { height: 170px; }
  .scard h3 { font-size: 16px; } .scard p { font-size: 14px; line-height: 1.55; } .scard .ex { font-size: 12.5px; }

  .portal { background: linear-gradient(180deg, #f3f7fc, #e6eef8); padding: 36px 18px 30px; gap: 16px; }
  .portal h2 { font-size: 34px; letter-spacing: -1.1px; }
  .portal .lead { width: auto; font-size: 15px; line-height: 1.55; }
  .pfeat p { font-size: 13.5px; line-height: 1.5; }
  .pfeat h3 { font-size: 15.5px; }
  .portal .screen { display: block; order: 10; width: 100%; height: auto; aspect-ratio: 594 / 423; max-width: 100%; border-radius: 10px; border: 6px solid #0b0f15; box-shadow: 0 20px 40px rgb(15 27 43 / 0.25); }
  .callout { width: 100%; height: auto; order: 11; }
  .callout h3 { font-size: 14px; } .callout p { font-size: 13px; line-height: 1.45; }

  .detail { padding: 36px 18px 30px; gap: 16px; }
  .detail h2 { font-size: 30px; }
  .detail .lead { font-size: 15px; line-height: 1.55; }
  .detail .hand, .detail .harrow { display: none; }
  .dcard { width: 100% !important; height: auto; padding: 16px 16px 16px; }
  .dcard h3 { font-size: 18px; } .dcard > p { font-size: 14px; min-height: 0; margin-bottom: 14px; }
  .panel .utt, .panel ul, .panel .todo, .panel .bar, .panel .kw span { font-size: 12.5px; line-height: 1.5; }
  .panel .utt b, .panel .utt time, .panel .todo small { font-size: 11.5px; }
  .panel h4 { font-size: 14px; }
  .phone { align-self: center; }

  .foot { padding-bottom: 30px; }
  .foot .wrap { flex-direction: column; }
  .foot h2 { width: auto; font-size: 30px; margin-top: 28px; }
  .foot .sm { margin: 12px 4px 0; font-size: 13.5px; line-height: 1.5; }
  .foot .cta { margin-top: 22px; flex-wrap: wrap; }
  .foot .demo { font-size: 14px; }
  .foot .tag { margin-top: 22px; transform: rotate(-4deg); }

  .trustbar { padding: 28px 0 40px; }
  .trustbar .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trustbar ul { margin: 0; flex-wrap: wrap; font-size: 13px; }
  .trustbar h2 { font-size: 20px; } .trustbar p { font-size: 14px; }

  .p-hero { background: linear-gradient(180deg, #f3f7fc, #eaf1fa); }
  .p-hero .site-nav { position: static; padding-inline: 18px; }
  .p-hero .inner { position: static; height: auto; padding: 16px 18px 30px; gap: 16px; }
  .p-hero h1 { font-size: 36px; letter-spacing: -1.2px; }
  .p-hero .lead { font-size: 15px; line-height: 1.55; }
  .p-hero .checks-list { font-size: 14.5px; gap: 12px; }
  .nl-pill { display: none; }
  .sep-card { width: 100%; height: auto; padding-bottom: 6px; }
  .sep-card h3 { font-size: 15px; } .sep-card header p, .sep-card li { font-size: 13px; } .sep-card li em { font-size: 12px; }
  .norms, .band { margin: 16px 16px 0; padding: 22px 18px; gap: 14px; }
  .band { margin-bottom: 28px; }
  .norms h2 { font-size: 24px; } .norms .intro { width: auto; } .norms .intro p { font-size: 14px; line-height: 1.55; }
  .ncard { width: 100% !important; height: auto; padding: 18px; }
  .ncard h3 { font-size: 16px; } .ncard p { font-size: 14px; line-height: 1.5; }
  .band h2 { font-size: 30px; } .band p { font-size: 14.5px; line-height: 1.55; }
  .band .vr, .band .hand, .band .harrow { display: none; }
  .band .pill.teal { align-self: flex-start; }
  .band .note { font-size: 12.5px; }
  .how { padding: 40px 18px 0; }
  .how h2 { font-size: 28px; } .how p { font-size: 15px; }
  .steps { width: auto; grid-template-columns: 1fr; margin: 20px 16px 40px; }
  .step h3 { font-size: 16px; } .step p { font-size: 14px; line-height: 1.55; }
}
.pf1 { top: 348px; } .pf2 { top: 432px; } .pf3 { top: 516px; }
@media all { .pfeat { position: static; } }
.callout h3 { white-space: nowrap; font-size: 10px; }
.ncard .ci.eu { background: transparent; }
.ncard .ci.eu svg { width: 52px; height: 52px; }
.band .hand { font-size: 17px; }
.panel .utt p, .panel ul, .panel .todo { font-size: 7.7px; }
.dcard > p { font-size: 10.8px; }
@media all { .callout h3 { white-space: normal; font-size: 14px; } .panel .utt p, .panel ul, .panel .todo { font-size: 12.5px; } .dcard > p { font-size: 14px; } }
.phone { -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 80%, transparent 100%); }
@media all {
  .eyebrow-pill { align-self: flex-start; }
  .phone { position: relative; }
  .norms .gdpr strong { font-size: 13px; } .norms .gdpr small { font-size: 12px; }
}
.trustbar ul li { display: flex; align-items: center; }
.brand-txt { display: flex; flex-direction: column; gap: 3px; }
.brand-txt small { font: 500 10.5px/1 var(--font-sans); letter-spacing: .01em; opacity: .62; }
.trustbar .legal a { text-decoration: underline; text-underline-offset: 2px; }
@media all { .trustbar .legal { position: static; transform: none; white-space: normal; margin: 18px 18px 0; font-size: 12px; } }

/* ------------------------------------------------------------------ reflow: shared container + tablet layout (700–1179px) */
@media all {
  :root { --gut: clamp(18px, 4.5vw, 44px); }
  .wrap, .trustbar .wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--gut); }
  .portal, .detail, .p-hero .inner, .how { padding-inline: var(--gut); }
  .norms, .band { margin-inline: var(--gut); }
  .steps { margin-inline: var(--gut); }
  .p-hero .site-nav { padding-inline: 0; }
  .hero { background-size: auto 300px; background-position: 64% bottom; padding-bottom: 310px; }
  .phone { width: 235px; height: 450px; flex: none; }
}
@media (min-width: 700px) {
  .links { display: flex; margin-left: auto; margin-right: 22px; font-size: 13px; gap: 20px; }
  .nav-r { margin-left: 0; }
  .nav-r a:first-child { display: inline; font-size: 13px; }

  /* hero: copy left, product photo right */
  .hero { min-height: 560px; padding-bottom: 48px; background-size: cover; background-position: 68% center; }
  .hero::before { background: linear-gradient(90deg, rgb(10 17 26 / 0.96) 0%, rgb(10 17 26 / 0.85) 38%, rgb(10 17 26 / 0.1) 62%, rgb(10 17 26 / 0) 80%); }
  .hero .eyebrow { margin-top: 64px; }
  .hero h1 { font-size: clamp(44px, 5.4vw, 56px); }
  .hero .lead, .hero .checks { max-width: 400px; }
  .hero .lead { font-size: 16px; }

  .features .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .features h2 { grid-column: 1 / -1; font-size: 26px; }
  .feat, .feat:nth-of-type(4) { width: auto; }

  .sectors .wrap { gap: 30px; }
  .sec-intro h2 { font-size: 32px; }
  .sec-intro p { max-width: 60ch; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .scard .ph { height: 150px; }

  /* portal: copy + features left, screen right, callouts in a row */
  .portal { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 36px; row-gap: 14px; padding-block: 56px 44px; align-items: start; }
  .portal > .eyebrow-pill, .portal h2, .portal .lead, .pfeat { grid-column: 1; }
  .portal .screen { grid-column: 2; grid-row: 1 / span 6; order: 0; align-self: center; }
  .portal h2 { font-size: clamp(36px, 4.2vw, 44px); }
  .callout { grid-column: auto; order: 0; }
  .portal .co1, .portal .co2, .portal .co3 { grid-row: 7; }
  .portal .co1 { grid-column: 1; }
  .portal .co2 { grid-column: 2; }
  .portal .co3 { display: none; }

  /* in detail: intro left, phone right, the four cards 2×2 below */
  .detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding-block: 56px 48px; }
  .detail > .eyebrow-pill, .detail h2, .detail .lead { grid-column: 1; }
  .detail .phone { grid-column: 2; grid-row: 1 / span 3; justify-self: center; align-self: center; }
  .detail h2 { font-size: 36px; }
  .dcard { width: auto !important; }

  .foot .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 40px; padding-block: 32px; }
  .foot h2 { margin-top: 0; }
  .foot .cta { margin-top: 0; }
  .foot .tag { width: 100%; }
  .trustbar .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .trustbar ul { margin-left: auto; }

  /* privacy */
  .p-hero .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: 32px; row-gap: 16px; padding-block: 24px 48px; }
  .p-hero .inner > * { grid-column: 1; }
  .p-hero .sep-card { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .p-hero h1 { font-size: clamp(38px, 4.6vw, 48px); }
  .norms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 30px; }
  .norms .intro, .norms .gdpr { grid-column: 1 / -1; }
  .band { padding: 36px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .features .wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .portal .co3 { display: flex; grid-column: auto; }
  .portal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal > .eyebrow-pill, .portal h2, .portal .lead, .pfeat { grid-column: 1 / span 1; }
  .portal .screen { grid-column: 2 / span 2; }
  .portal .co1 { grid-column: 1; } .portal .co2 { grid-column: 2; } .portal .co3 { grid-column: 3; }
  .detail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail > .eyebrow-pill, .detail h2, .detail .lead { grid-column: 1 / span 2; }
  .detail .phone { grid-column: 3 / span 2; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .norms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media all {
  .phone { left: auto; top: auto; }
  .steps { list-style: none; padding: 0; }
}
@media (min-width: 700px) {
  .hero { background-size: auto 100%; background-position: calc(50vw - 650px) center; }
  .hero::before { background: linear-gradient(90deg, rgb(10 17 26 / 0.97) 0%, rgb(10 17 26 / 0.9) 40%, rgb(10 17 26 / 0.2) 52%, rgb(10 17 26 / 0) 64%); }
  .hero .lead, .hero .checks, .hero h1 { max-width: calc(50vw - var(--gut) - 12px); }
  .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .detail > .eyebrow-pill { align-self: end; }
  .detail h2 { align-self: center; }
  .detail .lead { align-self: start; }
}
@media all { .eyebrow-pill { justify-self: start; width: max-content; } }

/* callouts: let the text wrap inside the card instead of running past it */
.callout { height: auto; }
.callout h3, .callout p { white-space: normal; }
.co1 { left: 1052px; width: 190px; }
.co2 { left: 1060px; width: 184px; }
.co3 { left: 1064px; width: 180px; }
/* transcript panel: room between the time and the speaker */
.panel .utt { grid-template-columns: 30px 1fr; column-gap: 6px; }
.panel .utt time { font-variant-numeric: tabular-nums; }
.hero .devs { right: -60px; gap: 14px; align-items: flex-end; }
@media (min-width: 700px) and (max-width: 959px) {
  .portal .co3 { display: flex; grid-row: 8; grid-column: 1; }
}
@media all {
  .panel .utt { grid-template-columns: 44px 1fr; }
}
@media all { .portal .co1, .portal .co2, .portal .co3 { width: auto; left: auto; top: auto; } }

/* ============================================================ PRICING */
.pricing { background: transparent; padding: 44px 0 50px; }
.pr-head { text-align: center; margin-bottom: 30px; }
.pr-head h2 { margin: 0; font: 700 20px/1.28 var(--font-display); letter-spacing: -.3px; color: #13233f; }
.pr-head p { margin: 9px auto 0; max-width: 560px; font-size: 10.5px; color: #66758d; }
.pr-cards { display: flex; gap: 18px; align-items: stretch; }
.pcard { flex: 1; background: #fff; border: 1px solid #e6ebf3; border-radius: 13px; padding: 22px 18px 18px; display: flex; flex-direction: column; position: relative; box-shadow: 0 6px 22px rgb(30 52 90 / 0.05); }
.pcard.featured { border-color: #8ff3e0; box-shadow: 0 12px 32px rgb(30 52 90 / 0.11); }
.pc-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #8ff3e0; color: #0d1b24; font-size: 8.6px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pc-name { font: 700 13px var(--font-display); color: #13233f; }
.pc-price { margin: 11px 0 2px; display: flex; align-items: baseline; gap: 5px; }
.pc-price b { font: 800 30px/1 var(--font-display); color: #13233f; letter-spacing: -1px; }
.pc-price span { font-size: 9.6px; color: #66758d; }
.pc-year { font-size: 9.4px; color: #8aa0bd; }
.pc-for { margin: 13px 0; font-size: 10.4px; color: #66758d; }
.pc-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pc-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 10.4px; color: #35445f; line-height: 1.35; }
.pc-feats li svg { flex: none; margin-top: 2px; }
.pc-cta { width: 100%; height: 34px; font-size: 10.5px; }
.pr-note { text-align: center; margin: 24px 0 0; font-size: 9.6px; color: #8aa0bd; }

@media all {
  .pricing { padding: 40px 18px 44px; }
  .pr-head h2 { font-size: 26px; }
  .pr-head p, .pc-for, .pc-feats li, .pc-cta, .pc-price span { font-size: 14px; }
  .pc-name { font-size: 17px; }
  .pc-price b { font-size: 34px; }
  .pc-year { font-size: 12.5px; }
  .pr-note { font-size: 12.5px; }
  .pc-badge { font-size: 11px; }
  .pc-cta { height: 42px; }
  .pc-feats li svg { width: 14px; height: 14px; }
}
@media (max-width: 760px) {
  .pr-cards { flex-direction: column; }
}




@media (max-width: 420px) {
  .brand { font-size: 15px; gap: 6px; }
  .nav-r { gap: 10px; margin-left: auto; }
  .nav-r a:first-child { font-size: 13px; }
  .site .btn-w { font-size: 12.5px; padding: 8px 10px; }
}
@media (max-width: 380px) {
  .brand { font-size: 14px; }
  .brand img { width: 22px; height: 22px; }
  .nav-r { padding-left: 10px; gap: 9px; }
}

/* ------------------------------------------------------------------ desktop (1180px+): one content column, larger type
   Everything lines up on the same content edge (--cl); the column grows to 1152px and stays centred. */
@media (min-width: 1180px) {
  :root { --gut: 44px; --cl: max(var(--gut), calc((100vw - 1152px) / 2)); --hh: clamp(520px, 40vw, 640px); }
  .wrap, .trustbar .wrap { max-width: none; padding-inline: var(--cl); }
  .portal, .detail, .p-hero .inner, .how { padding-inline: var(--cl); }
  .p-hero .site-nav { padding-inline: var(--cl); }
  .norms, .band, .steps { margin-inline: var(--cl); }

  /* nav */
  .site-nav { height: 64px; }
  .brand { font-size: 19px; } .brand img { width: 30px; height: 30px; }
  .links { font-size: 14.5px; gap: 26px; }
  .nav-r a:first-child { font-size: 14.5px; }
  .site .btn-w { font-size: 14px; padding: 10px 16px; border-radius: 9px; }
  .pill { height: 46px; font-size: 15px; padding: 0 22px; }

  /* hero: copy on the left, the device photo starts right after it */
  .hero { min-height: var(--hh); padding-block: 0 56px; background-size: auto var(--hh);
    background-position: calc(var(--cl) + 540px - 1.16 * var(--hh)) top; }
  .hero::before { background: linear-gradient(90deg, rgb(10 17 26 / 0.96) 0, rgb(10 17 26 / 0.88) calc(var(--cl) + 470px), rgb(10 17 26 / 0) calc(var(--cl) + 620px)); }
  .hero .eyebrow { margin-top: calc(var(--hh) * 0.16); font-size: 18px; }
  .hero .eyebrow img { width: 20px; height: 20px; }
  .hero h1 { font-size: clamp(56px, 4.6vw, 68px); letter-spacing: -2px; max-width: 520px; }
  .hero .lead { font-size: 18px; line-height: 1.6; max-width: 470px; }
  .hero .checks { font-size: 14px; max-width: 520px; }
  .hero .ctas { margin-top: 28px; }

  /* features + sectors */
  .features { padding-top: 24px; }
  .features h2 { font-size: 32px; }
  .feat h3 { font-size: 17px; } .feat p { font-size: 15px; }
  .ico { width: 52px; height: 52px; }
  .sectors { padding-block: 56px; }
  .sec-intro h2 { font-size: 38px; } .sec-intro .sub { font-size: 17px; } .sec-intro p { font-size: 16px; }
  .scard .ph { height: 190px; }
  .scard h3 { font-size: 18px; } .scard p { font-size: 15px; } .scard .ex { font-size: 13.5px; }
  .badge span { font-size: 12.5px; height: 26px; line-height: 26px; }

  /* portal */
  .portal { padding-block: 72px 56px; column-gap: 40px; grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .portal h2 { font-size: clamp(40px, 3.2vw, 46px); }
  .portal .lead { font-size: 18px; }
  .pfeat h3 { font-size: 17px; } .pfeat p { font-size: 15px; }
  .callout { padding: 18px 20px; } .callout h3 { font-size: 15.5px; } .callout p { font-size: 14.5px; }
  .eyebrow-pill { height: 32px; font-size: 12px; padding: 0 16px 0 12px; }

  /* in detail */
  .detail { padding-block: 72px 56px; gap: 22px 24px; }
  .detail h2 { font-size: 44px; } .detail .lead { font-size: 17.5px; }
  .dcard { padding: 20px; } .dcard h3 { font-size: 20px; } .dcard > p { font-size: 15px; }
  .panel h4 { font-size: 15px; }
  .panel .utt, .panel ul, .panel .todo, .panel .bar, .panel .kw span, .panel .utt p { font-size: 13.5px; }
  .panel .utt b, .panel .utt time, .panel .todo small { font-size: 12.5px; }

  /* how + pricing */
  .how { padding-top: 64px; }
  .how .kick { font-size: 12.5px; } .how h2 { font-size: 40px; } .how p { font-size: 17.5px; }
  .step { padding: 24px; } .step h3 { font-size: 18px; } .step p { font-size: 15px; }
  .pricing { padding: 64px 0 72px; }
  .pr-head h2 { font-size: 34px; } .pr-head p { font-size: 16px; max-width: 640px; }
  .pcard { padding: 28px 24px 24px; }
  .pc-name { font-size: 19px; } .pc-price b { font-size: 40px; } .pc-price span, .pc-for, .pc-feats li { font-size: 15px; }
  .pc-year, .pr-note { font-size: 13.5px; } .pc-badge { font-size: 12px; } .pc-cta { height: 46px; font-size: 15px; }

  /* footer CTA + trust bar */
  .foot .wrap { padding-block: 44px; }
  .foot h2 { font-size: 38px; } .foot .sm { font-size: 16px; } .foot .demo { font-size: 15px; } .foot .tag { font-size: 22px; }
  .trustbar h2 { font-size: 23px; } .trustbar p { font-size: 15.5px; } .trustbar ul { font-size: 14.5px; }
  .trustbar .legal { font-size: 13px; }

  /* privacy page */
  .p-hero .inner { column-gap: 56px; padding-block: 40px 64px; grid-template-columns: minmax(0, 1fr) 400px; }
  .p-hero h1 { font-size: clamp(48px, 4.2vw, 60px); } .p-hero .lead { font-size: 18px; } .p-hero .checks-list { font-size: 16px; }
  .sep-card { padding: 24px 24px 8px; } .sep-card h3 { font-size: 17px; } .sep-card header p, .sep-card li { font-size: 14.5px; } .sep-card li em { font-size: 13px; }
  .norms { padding: 40px; } .norms h2 { font-size: 32px; } .norms .intro p { font-size: 16px; }
  .norms .gdpr strong { font-size: 15px; } .norms .gdpr small { font-size: 13.5px; }
  .ncard { padding: 24px; } .ncard h3 { font-size: 18px; } .ncard p { font-size: 15px; }
  .band { padding: 48px; } .band h2 { font-size: 40px; } .band p { font-size: 17px; } .band .note { font-size: 14px; }
}