/* GENERATED by tools/extract-shell.js from the approved landing page. Do not edit; put additions in shell/site.css */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #2B4BDB; }
:root{--bg: #F6F3EE; --bg-2: #FBFAF7; --card: #FFFFFF; --ink: #1A1A1F; --ink-2: #3A3A44; --mid: #6B6B76; --mute: #9A9AA3; --line: rgba(26,26,31,.08); --line-2: rgba(26,26,31,.14); --rule: #E6E4DF; --rule-2: #D6D4CE; --rule-app: #EBEBEF; --app-side: #F9F9FA; --kob: #2B4BDB; --kob-hi: #3A5BFF; --kob-lo: #2337B8; --tint: #E7ECFF; --tint-2: #F1F4FF; --accent: #2B4BDB; --on-accent: #FFFFFF; --accent-ink: #2B4BDB; --grad: linear-gradient(135deg,#3A5BFF 0%,#2B4BDB 45%,#2337B8 100%); --alert: #C2361F; --ok: #1F7A4A; --f-d: 'Inter Tight','Inter Display','SF Pro Display',-apple-system,system-ui,'Helvetica Neue',Arial,sans-serif; --f-b: 'Inter','SF Pro Text',-apple-system,system-ui,'Helvetica Neue',Arial,sans-serif; --f-ui: 'Inter','SF Pro Text',-apple-system,system-ui,'Helvetica Neue',Arial,sans-serif; --f-m: 'Geist Mono','SF Mono',ui-monospace,'DejaVu Sans Mono',Menlo,monospace; --e: cubic-bezier(.22,1,.36,1); --e-out: cubic-bezier(.22,1,.36,1); --e-io: cubic-bezier(.65,0,.35,1); --e-snap: cubic-bezier(.34,1.25,.5,1); --t1: 180ms; --t2: 280ms; --t3: 420ms; --w: 1040px; --pad: clamp(20px,4vw,40px); --gap: 16px; --navH: 56px; --sh-1: 0 1px 1px rgba(26,26,31,.03),0 2px 6px -2px rgba(26,26,31,.06); --sh-2: 0 1px 2px rgba(26,26,31,.04),0 12px 32px -12px rgba(26,26,31,.14); --sh-3: 0 2px 4px rgba(26,26,31,.04),0 40px 80px -36px rgba(30,40,90,.35),0 18px 36px -24px rgba(30,40,90,.18);}
*{box-sizing: border-box;}
html{text-size-adjust: 100%; scroll-padding-top: 72px; background: var(--bg);}
body{margin: 0px; background: var(--bg); color: var(--ink); font-family: var(--f-b); font-size: 17px; line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-x: hidden; font-feature-settings: "cv11", "ss01";}
h1,h2,h3,h4,h5,p,dl,dd,ul,ol,figure,blockquote{margin: 0px;}
ul,ol{padding: 0px; list-style: none;}
button,input,select,textarea{font: inherit; color: inherit; letter-spacing: inherit;}
button{cursor: pointer; background: none; border: 0px; padding: 0px;}
a{color: inherit; text-decoration: none;}
img,svg{display: block;}
:focus-visible{outline: 2px solid var(--kob); outline-offset: 3px; border-radius: 6px;}
.sr{width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; position: absolute !important;}
.skip{position: absolute; left: -999px; top: 8px; background: var(--ink); color: rgb(255, 255, 255); padding: 8px 14px; z-index: 300; border-radius: 999px; font-size: 14px;}
.skip:focus{left: 12px;}
.tnum{font-variant-numeric: tabular-nums; font-feature-settings: "tnum";}
.wrap{width: min(var(--w),100% - 2*var(--pad)); margin-inline: auto;}
.ml{font-family: var(--f-m); font-size: 11px; letter-spacing: 0.04em; color: var(--mid);}
.clouds{position: fixed; inset: 0px; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg);}
.clouds i{position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform;}
.clouds .c1{width: 62vw; height: 52vw; left: -18vw; top: 30vh; background: radial-gradient(closest-side, rgba(58, 91, 255, 0.2), rgba(58, 91, 255, 0));}
.clouds .c2{width: 58vw; height: 48vw; right: -16vw; top: 6vh; background: radial-gradient(closest-side, rgba(170, 205, 240, 0.55), rgba(170, 205, 240, 0));}
.clouds .c3{width: 52vw; height: 44vw; left: 24vw; top: 70vh; background: radial-gradient(closest-side, rgba(246, 196, 160, 0.42), rgba(246, 196, 160, 0));}
.h1{font-family: var(--f-d); font-weight: 700; font-size: clamp(44px, 5.7vw, 80px); line-height: 1.03; letter-spacing: -0.045em; text-wrap: balance;}
.h2{font-family: var(--f-d); font-weight: 700; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -0.04em;}
.h2 span{display: block;}
.lede{font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--mid); letter-spacing: -0.012em; max-width: 34em;}
.breathe{display: inline-block; transform-origin: 0px 50%; will-change: transform;}
.sec{position: relative; padding: clamp(96px, 11vw, 148px) 0px 0px;}
.sec-h{display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 3.6vw, 48px);}
.sec-h .lede{max-width: 27em; padding-bottom: 6px;}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: transform var(--t1) var(--e),background-color var(--t2) var(--e),box-shadow var(--t2) var(--e),color var(--t2); -webkit-tap-highlight-color: transparent;}
.btn:active{transform: scale(0.97);}
.btn-p{background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent);}
.btn-p:hover{background: color-mix(in srgb,var(--accent) 88%,#000);}
.btn-l{background: rgba(255, 255, 255, 0.6); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset,0 1px 2px rgba(26,26,31,.04); backdrop-filter: blur(12px);}
.btn-l:hover{background: rgba(255, 255, 255, 0.9);}
.btn-w{background: rgb(255, 255, 255); color: var(--kob-lo); box-shadow: rgba(0, 0, 30, 0.45) 0px 10px 24px -10px;}
.btn-w:hover{background: rgb(243, 245, 255);}
.btn-g{background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset;}
.btn-g:hover{background: rgba(255, 255, 255, 0.24);}
.btn-s{height: 34px; padding: 0px 15px; font-size: 13.5px;}
.btn .ar{display: inline-grid; transition: transform var(--t2) var(--e);}
.btn:hover .ar{transform: translateX(2px);}
.lnk{color: var(--accent); font-weight: 500; text-decoration-line: underline; text-decoration-style: initial; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb,var(--accent) 40%,transparent);}
.nav{position: fixed; left: 0px; right: 0px; top: 0px; z-index: 80; height: var(--navH); transition: background-color var(--t3) var(--e),box-shadow var(--t3) var(--e),backdrop-filter var(--t3);}
.nav.is-glass{background: rgba(246, 243, 238, 0.72); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--line);}
.nav-in{height: 100%; display: flex; align-items: center; gap: 28px; width: min(1240px,100% - 2*var(--pad)); margin-inline: auto;}
.logo{display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-d); font-weight: 700; font-size: 19px; letter-spacing: -0.04em;}
.logo svg{width: 22px; height: 22px;}
.menu{margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 13.5px; color: var(--ink-2); letter-spacing: -0.005em;}
.menu a,.menu button{transition: color var(--t1);}
.menu a:hover,.menu button:hover{color: var(--ink);}
.fn-pop{position: relative;}
.fn-btn{display: inline-flex; align-items: center; gap: 5px;}
.fn-btn svg{width: 9px; height: 9px; transition: transform var(--t2) var(--e);}
.fn-btn[aria-expanded="true"] svg{transform: rotate(180deg);}
.fn-menu{position: absolute; top: calc(100% + 14px); left: -18px; width: 300px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 0 0 1px var(--line),0 24px 48px -20px rgba(26,26,31,.3); opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 20% 0px; pointer-events: none; transition: opacity var(--t1) var(--e),transform var(--t2) var(--e);}
.fn-menu.on{opacity: 1; transform: none; pointer-events: auto;}
.fn-menu a{display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--ink);}
.fn-menu a:hover{background: var(--tint-2);}
.fn-menu a small{display: block; color: var(--mid); font-size: 12.5px; line-height: 1.35;}
.fn-menu a b{font-weight: 600; font-size: 14px;}
.fn-menu hr{border: 0px; height: 1px; background: var(--line); margin: 6px 10px;}
.mg{position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: rgba(26, 26, 31, 0.07) 0px 0px 0px 1px inset, rgba(26, 26, 31, 0.04) 0px 1px 2px;}
.nav.is-glass .mg{background: rgba(255, 255, 255, 0.7);}
.mg > a,.mg .fn-btn{position: relative; z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0px 14px; border-radius: 999px; font-size: 14px; font-weight: 560; letter-spacing: -0.012em; color: var(--ink); opacity: 0.78; transition: opacity var(--t1),color var(--t1);}
.mg > a:hover,.mg .fn-btn:hover,.mg .fn-btn[aria-expanded="true"]{opacity: 1;}
.mg > a.is-cur{opacity: 1; color: var(--accent,var(--b));}
.mg > a.is-cur::after{content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentcolor;}
.mg-hl{position: absolute; z-index: 0; top: 4px; left: 0px; height: 32px; width: 10px; border-radius: 999px; background: rgb(255, 255, 255); box-shadow: rgba(26, 26, 31, 0.08) 0px 1px 2px, rgba(26, 26, 31, 0.05) 0px 0px 0px 1px; opacity: 0; transform: translateX(0px); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s;}
.mg.hl-on .mg-hl{opacity: 1;}
.menu{gap: 14px !important;}
@media (prefers-reduced-motion: reduce){.mg-hl{transition: opacity 0.1s;}}
.nav .btn{height: 32px; padding: 0px 14px; font-size: 13px;}
.burger{display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; margin-left: auto;}
.mob{position: fixed; inset: 0px; z-index: 90; background: rgba(246, 243, 238, 0.96); backdrop-filter: blur(20px); padding: 14px var(--pad); display: none; flex-direction: column;}
.mob.on{display: flex;}
.mob-top{display: flex; justify-content: space-between; align-items: center; height: 40px;}
.mob nav{margin-top: 28px; display: flex; flex-direction: column;}
.mob nav a{font-family: var(--f-d); font-weight: 700; font-size: 30px; letter-spacing: -0.035em; padding: 10px 0px; border-bottom: 1px solid var(--line);}
.mob nav a small{display: block; font-family: var(--f-b); font-weight: 400; font-size: 14px; color: var(--mid); letter-spacing: -0.01em;}
.mob .btn{margin-top: auto; height: 50px;}
.ink-reset{display: none; align-items: center; gap: 7px; height: 28px; padding: 0px 10px 0px 6px; border-radius: 999px; font-size: 12px; color: var(--ink-2); background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px var(--line) inset;}
.ink-reset i{width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;}
.ink-reset.on{display: inline-flex;}
.steps3{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--gap);}
.s3{position: relative; border-radius: 18px; background: rgb(255, 255, 255); padding: 22px 22px 24px; box-shadow: 0 0 0 1px var(--line),var(--sh-1); min-height: 150px; display: flex; flex-direction: column;}
.s3 .num{position: absolute; right: 20px; top: 12px; font-family: var(--f-d); font-weight: 700; font-size: 46px; letter-spacing: -0.05em; color: rgba(26, 26, 31, 0.08); line-height: 1;}
.s3 .ic{width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(243, 241, 236); color: var(--ink-2);}
.s3 .ic svg{width: 17px; height: 17px;}
.s3 h3{margin-top: auto; padding-top: 30px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em;}
.s3 p{font-size: 14px; color: var(--mid); margin-top: 4px;}
@property --ba { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cmp-w{border-radius: 20px; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line),var(--sh-1); overflow: hidden;}
.cmp{width: 100%; border-collapse: collapse; font-size: 14px;}
.cmp th,.cmp td{padding: 13px 16px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle;}
.cmp thead th{border-top: 0px; font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 18px; padding-bottom: 16px; vertical-align: bottom;}
.cmp th:first-child,.cmp td:first-child{text-align: left; font-weight: 500; color: var(--ink); width: 38%;}
.cmp .tz{background: rgba(231, 236, 255, 0.6);}
.cmp thead .tz{color: var(--kob); font-weight: 700;}
.cmp td small{display: block; font-size: 11.5px; color: var(--mid); font-weight: 400; margin-top: 2px;}
.mk{display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;}
.mk.y{color: var(--kob);}
.mk.y svg{width: 16px; height: 16px;}
.mk.p{color: var(--mid); font-weight: 600;}
.mk.n{color: rgb(184, 183, 178);}
.fn{font-size: 12.5px; color: var(--mid); margin-top: 14px; max-width: 62em;}
.cmp tbody tr{transition: background-color 0.2s;}
.cmp tbody tr:hover{background: rgba(26, 26, 31, 0.02);}
.ban{perspective: 1400px; padding-top: clamp(96px, 11vw, 148px);}
.ban-c{position: relative; border-radius: 28px; background: var(--grad); color: rgb(255, 255, 255); text-align: center; padding: clamp(56px,7vw,92px) var(--pad); overflow: hidden; transform-origin: 50% 100%; box-shadow: rgba(35, 55, 184, 0.6) 0px 60px 100px -50px, rgba(26, 26, 31, 0.35) 0px 30px 60px -40px; will-change: transform;}
.ban-c::before{content: ""; position: absolute; inset: 0px; background: radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%), radial-gradient(50% 60% at 85% 110%, rgba(150, 120, 255, 0.35), transparent 60%); pointer-events: none;}
.ban-c > *{position: relative;}
.ban-c .eb{font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72);}
.ban-c h2{font-family: var(--f-d); font-weight: 700; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.045em; line-height: 1.02; margin-top: 12px;}
.ban-c p{max-width: 34em; margin: 16px auto 0px; font-size: 17px; color: rgba(255, 255, 255, 0.84);}
.ban-m{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); max-width: 760px; margin: 36px auto 0px; border-top: 1px solid rgba(255, 255, 255, 0.2);}
.ban-m div{padding: 18px 8px 0px;}
.ban-m b{display: block; font-family: var(--f-d); font-weight: 700; font-size: 30px; letter-spacing: -0.04em;}
.ban-m span{font-size: 13px; color: rgba(255, 255, 255, 0.75);}
.plan-f{display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 30px;}
.plan-f input{height: 48px; width: min(320px, 100%); border-radius: 999px; border: 0px; padding: 0px 20px; font-size: 15px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset; outline: 0px;}
.plan-f input::placeholder{color: rgba(255, 255, 255, 0.65);}
.plan-f input:focus{box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px inset;}
.plan-f .btn{height: 48px;}
.plan-ok{margin-top: 26px; font-size: 16px;}
.pr{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); border-radius: 20px; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line),var(--sh-1); overflow: hidden;}
.pr-t{padding: 8px 0px;}
.pr-t table{width: 100%; border-collapse: collapse; font-size: 14px;}
.pr-t td{padding: 13px 24px; border-top: 1px solid var(--line);}
.pr-t tr:first-child td{border-top: 0px;}
.pr-t td:last-child{text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;}
.pr-t td small{display: block; color: var(--mid); font-size: 12.5px; font-weight: 400;}
.pr-c{background: linear-gradient(rgba(231, 236, 255, 0.55), rgba(231, 236, 255, 0.9)); padding: 26px 26px 24px; border-left: 1px solid var(--line);}
.pr-c h3{font-size: 15px; font-weight: 600; color: var(--kob); letter-spacing: -0.01em; text-align: center;}
.pr-big{text-align: center; margin-top: 6px; font-family: var(--f-d); font-weight: 700; font-size: 52px; letter-spacing: -0.05em; line-height: 1.05;}
.pr-big small{font-size: 17px; color: var(--mid); letter-spacing: -0.02em; font-weight: 500; margin-left: 3px;}
.pr-sub{text-align: center; font-size: 12.5px; color: var(--mid);}
.rng{margin-top: 20px;}
.rng label{display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 500;}
.rng output{font-weight: 700; font-variant-numeric: tabular-nums;}
input[type="range"]{appearance: none; width: 100%; height: 28px; background: transparent; margin-top: 4px;}
input[type="range"]::-webkit-slider-runnable-track{height: 4px; border-radius: 2px; background: linear-gradient(90deg,var(--kob) var(--f,20%),rgba(26,26,31,.12) var(--f,20%));}
input[type="range"]::-webkit-slider-thumb{appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.18) 0px 3px 8px;}
.seg2{display: flex; margin-top: 14px; padding: 3px; border-radius: 999px; background: rgba(26, 26, 31, 0.06); position: relative;}
.seg2 button{flex: 1 1 0%; height: 30px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); transition: background-color 0.2s, color 0.2s;}
.seg2 button[aria-pressed="true"]{background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px;}
.seg2 button:disabled{opacity: 0.4; cursor: not-allowed;}
.tg{display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; font-size: 13.5px; cursor: pointer;}
.tg input{position: absolute; opacity: 0;}
.tg .sw{flex: 0 0 auto; width: 36px; height: 22px; border-radius: 999px; background: rgba(26, 26, 31, 0.16); position: relative; transition: background-color .25s var(--e);}
.tg .sw::after{content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; transition: transform .28s var(--e);}
.tg input:checked + .sw{background: var(--kob);}
.tg input:checked + .sw::after{transform: translateX(14px);}
.tg input:focus-visible + .sw{outline: 2px solid var(--kob); outline-offset: 2px;}
.tg small{display: block; color: var(--mid); font-size: 12px;}
.pr-ratio{margin-top: 16px; font-size: 12.5px; color: var(--mid); line-height: 1.45; border-top: 1px solid rgba(43, 75, 219, 0.14); padding-top: 12px;}
.pr-ratio b{color: var(--ink);}
.fp{margin-top: var(--gap); border-radius: 20px; background: linear-gradient(120deg, rgb(241, 244, 255), rgb(235, 230, 250) 60%, rgb(246, 238, 231)); box-shadow: 0 0 0 1px rgba(43,75,219,.1),var(--sh-1); padding: 24px 26px; display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 20px; align-items: center;}
.fp h3{font-size: 19px; font-weight: 600; letter-spacing: -0.02em;}
.fp p{font-size: 14px; color: var(--mid); margin-top: 4px; max-width: 44em;}
.fp .seats{display: grid; grid-template-columns: repeat(10, 12px); gap: 5px; margin-top: 14px;}
.fp .seats i{width: 12px; height: 12px; border-radius: 4px; background: rgb(255, 255, 255); box-shadow: rgba(43, 75, 219, 0.25) 0px 0px 0px 1px inset;}
.fp .seats i.on{background: var(--kob); box-shadow: none;}
.fp-r{text-align: right;}
.fp-r b{display: block; font-family: var(--f-d); font-weight: 700; font-size: 40px; letter-spacing: -0.05em; line-height: 1;}
.fp-r span{font-size: 12.5px; color: var(--mid);}
.trust{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 0px; margin-top: clamp(56px, 6vw, 80px); border-top: 1px solid var(--line);}
.trust div{padding: 18px 18px 0px 0px;}
.trust div + div{padding-left: 18px; border-left: 1px solid var(--line);}
.trust b{display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;}
.trust span{display: block; font-size: 13.5px; color: var(--mid); margin-top: 3px;}
.foot{margin-top: clamp(80px, 9vw, 120px); border-top: 1px solid var(--line); padding: 26px 0px 34px;}
.foot .wrap{display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--mid);}
.foot nav{display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto;}
.foot nav a:hover{color: var(--ink);}
.foot select{height: 30px; border-radius: 8px; border: 0px; box-shadow: inset 0 0 0 1px var(--line-2); background: rgb(255, 255, 255); padding: 0px 8px; font-size: 12.5px;}
.modal{position: fixed; inset: 0px; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(26, 26, 31, 0.28); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .28s var(--e);}
.modal.on{opacity: 1; pointer-events: auto;}
.dlg{width: min(520px, 100%); max-height: calc(-40px + 100vh); overflow: auto; border-radius: 24px; background: rgb(255, 255, 255); padding: 28px; box-shadow: rgba(26, 26, 31, 0.5) 0px 40px 80px -30px; transform: translateY(10px) scale(0.98); transition: transform .38s var(--e); position: relative;}
.modal.on .dlg{transform: none;}
.dlg h2{font-family: var(--f-d); font-weight: 700; font-size: 30px; letter-spacing: -0.04em;}
.dlg .s{color: var(--mid); font-size: 15px; margin-top: 6px;}
.x{position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgb(243, 241, 236);}
.x svg{width: 12px; height: 12px;}
.dur{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;}
.dur label{position: relative; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow 0.2s;}
.dur input{position: absolute; opacity: 0;}
.dur b{display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em;}
.dur span{font-size: 12.5px; color: var(--mid);}
.dur label:has(input:checked){box-shadow: inset 0 0 0 2px var(--kob); background: var(--tint-2);}
.dur label:has(input:focus-visible){outline: 2px solid var(--kob); outline-offset: 2px;}
.flds{display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;}
.fld{display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500;}
.fld.w{grid-column: 1 / -1;}
.fld input,.fld select{height: 44px; border-radius: 12px; border: 0px; box-shadow: inset 0 0 0 1px var(--line-2); padding: 0px 14px; font-size: 15px; background: rgb(255, 255, 255); outline: 0px;}
.fld input:focus,.fld select:focus{box-shadow: inset 0 0 0 2px var(--kob);}
.fld input[aria-invalid="true"]{box-shadow: inset 0 0 0 2px var(--alert);}
.tel{display: grid; grid-template-columns: 86px 1fr; gap: 6px;}
.err{color: var(--alert); font-size: 13px; min-height: 18px; margin-top: 10px;}
.dlg .btn-p{width: 100%; height: 48px; margin-top: 6px;}
@media (max-width: 900px){.menu{display: none;}.burger{display: grid;}.nav .btn{display: none;}.steps3{grid-template-columns: 1fr;}.s3{min-height: 0px;}.pr{grid-template-columns: 1fr;}.pr-c{border-left: 0px; border-top: 1px solid var(--line);}.trust{grid-template-columns: 1fr 1fr;}.trust div:nth-child(3){padding-left: 0px; border-left: 0px;}.cmp-w{overflow-x: auto;}.cmp{min-width: 680px;}}
@media (max-width: 720px){.fp{grid-template-columns: 1fr;}.fp-r{text-align: left;}.ban-m b{font-size: 24px;}}
@media (max-width: 560px){.trust{grid-template-columns: 1fr;}.trust div,.trust div + div{padding-left: 0px; border-left: 0px;}.flds{grid-template-columns: 1fr;}.foot nav{margin-left: 0px;}}
@media (prefers-reduced-motion: reduce){*,::before,::after{animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important;}}
.breathe{transform: scaleX(var(--bx,1));}
.breathe{transform-origin: 0px 50%; letter-spacing: calc(-.04em - (var(--bx,1) - 1) * .3em);}
.ai-sq{width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--tint); color: var(--kob);}
.ai-sq svg{width: 16px; height: 16px;}
@media (max-width: 560px){.h1{font-size: 40px;}}
.btn-l{backdrop-filter: none; background: rgba(255, 255, 255, 0.82);}
.btn-l:hover{background: rgb(255, 255, 255);}
.fn-menu{backdrop-filter: none; background: rgb(255, 255, 255);}
.mob{backdrop-filter: none; background: var(--bg);}
.modal{backdrop-filter: none; background: rgba(26, 26, 31, 0.42);}
.clouds i,.breathe,.ban-c{will-change: auto;}
.breathe{transform: none; letter-spacing: inherit;}
.h2 .breathe{letter-spacing: -0.04em;}
.sec.cv{content-visibility: auto; padding-bottom: 64px; margin-bottom: -64px;}
.kort{display: grid; grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 1fr); border-radius: 20px; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line),var(--sh-1); overflow: hidden;}
.kort-f{padding: 8px 0px;}
.kort-f > div{display: grid; grid-template-columns: 104px minmax(0px, 1fr); gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line);}
.kort-f > div:first-child{border-top: 0px;}
.kort-f dt{font-size: 12.5px; font-weight: 600; color: var(--kob); letter-spacing: -0.005em; padding-top: 2px;}
.kort-f dd{margin: 0px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);}
.kort-s{background: linear-gradient(rgba(231, 236, 255, 0.55), rgba(231, 236, 255, 0.9)); padding: 26px 26px 24px; border-left: 1px solid var(--line);}
.kort-s h3{font-size: 15px; font-weight: 600; color: var(--kob); letter-spacing: -0.01em;}
.kort-s ol{margin-top: 12px; counter-reset: k 0;}
.kort-s li{position: relative; padding: 10px 0px 10px 40px; border-top: 1px solid rgba(43, 75, 219, 0.14); font-size: 14px; line-height: 1.45; color: var(--mid); counter-increment: k 1;}
.kort-s li:first-child{border-top: 0px;}
.kort-s li::before{content: counter(k); position: absolute; left: 0px; top: 11px; width: 26px; height: 26px; border-radius: 8px; background: rgb(255, 255, 255); color: var(--kob); font-family: var(--f-m); font-size: 12.5px; line-height: 26px; text-align: center; box-shadow: rgba(43, 75, 219, 0.18) 0px 0px 0px 1px inset;}
.kort-s li b{display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: -0.015em;}
.kort-n{margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--mid);}
.faq{border-radius: 20px; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line),var(--sh-1); overflow: hidden; interpolate-size: allow-keywords;}
.faq details{border-top: 1px solid var(--line);}
.faq details:first-child{border-top: 0px;}
.faq summary{display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; cursor: pointer; list-style: none; transition: background-color 0.2s; -webkit-tap-highlight-color: transparent;}
.faq summary::-webkit-details-marker{display: none;}
.faq summary:hover{background: rgba(26, 26, 31, 0.02);}
.faq summary:focus-visible{outline-offset: -2px; border-radius: 0px;}
.faq summary h3{font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;}
.faq-i{flex: 0 0 auto; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-2); box-shadow: rgba(43, 75, 219, 0.12) 0px 0px 0px 1px inset; transition: background-color var(--t2) var(--e);}
.faq-i::before,.faq-i::after{content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -0.8px 0px 0px -5.5px; border-radius: 1px; background: var(--kob);}
.faq-i::after{transform: rotate(90deg); transition: transform var(--t2) var(--e);}
.faq details[open] .faq-i{background: var(--tint);}
.faq details[open] .faq-i::after{transform: rotate(0deg);}
.faq-a p{padding: 0px 24px 22px; font-size: 15px; line-height: 1.55; color: var(--mid); max-width: 46em;}
.faq details::details-content{block-size: 0px; overflow: hidden; transition: block-size var(--t3) var(--e),content-visibility var(--t3) allow-discrete;}
.faq details[open]::details-content{block-size: auto;}
@media (max-width: 900px){.kort{grid-template-columns: 1fr;}.kort-s{border-left: 0px; border-top: 1px solid var(--line);}}
@media (max-width: 560px){.kort-f > div{grid-template-columns: 1fr; gap: 2px; padding: 14px 20px;}.faq summary{padding: 16px 20px;}.faq-a p{padding: 0px 20px 20px;}.faq summary h3{font-size: 16px;}}
@media (prefers-reduced-motion: reduce){.faq details::details-content{transition: none;}}
.foot-2{flex-basis: 100%; display: flex; justify-content: space-between; gap: 8px 22px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line);}
.foot-ai{display: flex; gap: 6px 14px; flex-wrap: wrap;}
.foot-ai a{color: var(--ink-2);}
.foot-ai a:hover{color: var(--ink);}

/* ===== Traze content pages: additions on top of base.css (extracted from the landing page).
   Same tokens (--kob, --e, --sh-*), same card language: 20px radius, white, 1px line + --sh-1. ===== */
body.tz-page{overflow-x:clip}
.p-main{min-height:60vh}

/* hero: answer first */
.p-hero{position:relative;padding:calc(var(--navH) + clamp(48px,7vw,96px)) 0 0}
.p-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mid);letter-spacing:-.005em}
.p-crumbs a{position:relative;color:var(--ink-2);transition:color var(--t1) var(--e)}.p-crumbs a:hover{color:var(--ink)}
.p-crumbs a::after{content:"";position:absolute;inset:-14px -4px}/* 44px tap target without moving the line */
.p-crumbs [aria-current]{color:var(--mid)}
.p-crumbs li+li::before{content:"/";margin-right:6px;color:var(--mute)}
/* type = the landing scale: .p-h1 = .h1, .p-h2 = .h2, .p-sub = .lede */
.p-h1{font-family:var(--f-d);font-weight:700;font-size:clamp(44px,5.7vw,80px);line-height:1.03;letter-spacing:-.045em;margin-top:22px;text-wrap:balance;max-width:14em}
.p-answer{margin-top:22px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);letter-spacing:-.012em;max-width:35em}
.p-answer b{color:var(--ink);font-weight:600}
.p-meta{margin-top:18px;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--mid)}
.p-meta span{display:inline-flex;align-items:center;gap:7px}
.p-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kob);opacity:.55}
.p-hero .hero-cta{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}

/* sections */
.p-sec{position:relative;padding-top:clamp(96px,11vw,148px)}
.p-sec .sec-h{margin-bottom:clamp(32px,3.6vw,48px)}
.p-h2{font-family:var(--f-d);font-weight:700;font-size:clamp(34px,3.6vw,50px);line-height:1.06;letter-spacing:-.04em;text-wrap:balance;max-width:18em}
.p-h2.md{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;line-height:1.1}
.p-h2.sm{font-size:22px;letter-spacing:-.03em;line-height:1.15}
.p-h2.sm+.p-srcs{margin-top:16px}.p-h2.md+.p-rel{margin-top:22px}
.p-sub{margin-top:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--mid);letter-spacing:-.012em;max-width:34em}
.p-prose{max-width:36em;font-size:17px;line-height:1.6;color:var(--ink-2)}/* ~70 characters per line */
.p-prose p+p,.p-prose p+ul,.p-prose ul+p{margin-top:14px}
.p-prose ul{display:grid;gap:8px}
.p-prose li{position:relative;padding-left:20px}
.p-prose li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--kob)}
.p-prose a,.p-link{color:var(--accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.p-prose a:hover,.p-link:hover{text-decoration-color:var(--accent)}

/* cards */
.p-card{border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.p-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-grid .p-card{padding:24px 24px 22px}
.p-card h3{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.p-card p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--mid)}
.p-card .p-k{display:block;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--kob);margin-bottom:12px}

/* key facts: definition list in the .kort card language */
.p-facts{border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);overflow:hidden}
.p-facts>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:16px 26px;border-top:1px solid var(--line)}
.p-facts>div:first-child{border-top:0}
.p-facts dt{font-size:13.5px;font-weight:600;color:var(--kob);letter-spacing:-.005em;padding-top:2px}
.p-facts dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* tables: the landing comparison table (.cmp / .cmp-w). On narrow screens the card scrolls
   sideways; soft edge shadows show there is more (they scroll with the content, pure CSS). */
.p-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.p-table th,.p-table td{text-align:left;padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.p-table th:first-child,.p-table td:first-child{padding-left:20px}.p-table th:last-child,.p-table td:last-child{padding-right:20px}
.p-table thead th{border-top:0;font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;padding-top:18px;padding-bottom:16px;vertical-align:bottom}
.p-table tbody th{font-weight:500;color:var(--ink)}
.p-table td small,.p-table th small{display:block;font-size:11.5px;color:var(--mid);font-weight:400;margin-top:2px}
.p-table td.n,.p-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-table tbody tr{transition:background-color .2s}
.p-table tbody tr:hover{background:rgba(26,26,31,.018)}
.p-table caption:not(.sr){caption-side:bottom;text-align:left;padding:12px 20px 16px;font-size:12.5px;color:var(--mid);border-top:1px solid var(--line)}
.p-tw{border-radius:20px;box-shadow:0 0 0 1px var(--line),var(--sh-1);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(26,26,31,.10),rgba(26,26,31,0)) 0 0/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(26,26,31,.10),rgba(26,26,31,0)) 100% 0/12px 100% no-repeat scroll,#fff}
.p-tw:focus-visible{outline-offset:2px;border-radius:20px}

/* callout: the tinted panel of the landing (.kort-s / .pr-c). <aside class="p-note"><b>Kop</b><p>..</p></aside> */
.p-note{border-radius:20px;background:linear-gradient(180deg,rgba(231,236,255,.55),rgba(231,236,255,.9));box-shadow:0 0 0 1px var(--line);padding:22px 26px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46em}
.p-note>b:first-child,.p-note>strong:first-child{display:block;font-size:15px;font-weight:600;color:var(--kob);letter-spacing:-.01em;margin-bottom:6px}
.p-note p+p{margin-top:10px}

/* sources: every number on a page links to where it comes from */
.p-src{margin-top:18px;font-size:12.5px;line-height:1.5;color:var(--mid);max-width:52em}
.p-src a:hover,.p-srcs a:hover{text-decoration-color:currentColor}
.p-src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.p-srcs{display:grid;gap:8px;font-size:13px;line-height:1.5;color:var(--mid);counter-reset:s;max-width:52em}
.p-srcs li:target{color:var(--ink-2)}.p-srcs li:target::before{background:var(--kob);color:#fff}
.p-srcs li{position:relative;padding-left:28px;counter-increment:s}
.p-srcs li::before{content:counter(s);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:6px;background:var(--tint-2);color:var(--kob);font-family:var(--f-m);font-size:11px;line-height:19px;text-align:center}
.p-srcs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px;word-break:break-word}
sup.p-fn{line-height:0;vertical-align:super;font-size:inherit}
sup.p-fn a{position:relative;font-family:var(--f-m);font-size:max(.66em,11px);color:var(--kob);padding:0 1px}
sup.p-fn a::after{content:"";position:absolute;inset:-12px -8px}/* bigger tap target, same line */

/* related pages: internal links between pages */
.p-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.p-rel a{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);transition:transform var(--t2) var(--e),box-shadow var(--t2) var(--e)}
.p-rel a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.p-rel b{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.p-rel span{font-size:14px;line-height:1.45;color:var(--mid)}
.p-rel i{margin-top:auto;padding-top:6px;font-style:normal;font-size:13px;font-weight:600;color:var(--accent)}

/* tool slot: static fallback until the module mounts */
.tz-tool{position:relative}
.tz-tool[data-tool-state="loading"]{min-height:var(--tool-h,320px)}
.tz-tool-fb{padding:24px 26px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);font-size:15px;color:var(--mid)}
.tz-tool-fb b{display:block;color:var(--ink);font-size:16.5px;letter-spacing:-.02em;margin-bottom:4px}

/* closing CTA uses the landing banner (.ban/.ban-c) with its own spacing */


@media (max-width:900px){.p-grid,.p-rel{grid-template-columns:1fr 1fr}}
/* small screens: the landing sets .h1 to 40px under 560px; long Dutch compounds may still break */
@media (max-width:560px){.p-h1{font-size:40px}}
@media (max-width:420px){.p-h1,.p-h2{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}}
@media (max-width:620px){.p-grid,.p-grid.two,.p-rel{grid-template-columns:1fr}.p-facts>div{grid-template-columns:1fr;gap:4px;padding:14px 20px}.p-table th,.p-table td,.p-table th:first-child,.p-table td:first-child,.p-table th:last-child,.p-table td:last-child{padding:12px 14px}.p-note{padding:18px 20px}}

/* ===== footer link groups (all pages; also inlined into the landing page by landing.js).
   Same type as the landing footer: 12.5-13.5px, --mid links, --ink on hover, --line rules. ===== */
.foot-cols{flex-basis:100%;display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:24px 28px;padding-bottom:26px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.foot-cols p{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--mid);max-width:22em}
.foot-cols h2{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.5;margin:0 0 10px}
.foot-cols ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.foot-cols a{font-size:13.5px;color:var(--mid);transition:color var(--t1) var(--e)}.foot-cols a:hover{color:var(--ink)}
.foot .logo{color:var(--ink)}
@media (max-width:900px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-cols>div:first-child{grid-column:1/-1}}
@media (max-width:620px){.foot-cols ul{gap:0}.foot-cols li a{display:inline-flex;align-items:center;min-height:44px}}
/* bigger tap areas on touch screens without moving anything (the landing footer rows stay as they are) */
@media (max-width:620px){.foot nav a,.foot-ai a,.foot-cols .logo{position:relative}.foot nav a::after,.foot-ai a::after,.foot-cols .logo::after{content:"";position:absolute;inset:-10px -8px}}