/* Real product UI in the existing InvalDirect photographic world. */
.hero{overflow:hidden}
.hero-content{width:min(92vw,90rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:3vw;align-items:center;min-height:100svh;padding:9rem 0 5rem}
.hero-copy{min-width:0;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(3rem,4.7vw,5.5rem);max-width:14ch;line-height:1.04}
.hero-copy .mechanism{max-width:36rem;font-size:1rem;line-height:1.55}
.hero-copy .category{max-width:35rem;display:inline-block;letter-spacing:0}
.hero-copy .hero-action{flex-direction:column;align-items:flex-start;gap:.8rem}
.hero-copy .hero-price{border-left:0;padding:.1rem 0;background:none}
.hero-copy .hero-price span{font-size:.85rem}
.hero-copy .hero-price strong{font-size:1.65rem}
.hero-copy .hero-terms{font-size:.75rem;line-height:1.5;color:#fffdf7ce;max-width:34rem}
.hero-terms a{color:#fffdf7;text-decoration:underline;text-underline-offset:.2em}
.hero-app-proof{min-width:0;width:100%;margin:2rem 0 0;position:relative;isolation:isolate}
.app-proof-world{position:relative;width:100%;padding:0 1.7rem 6rem 0;min-height:35rem}
.app-proof-world:before{content:"";position:absolute;z-index:-1;inset:-4rem -10rem -3rem -5rem;background:radial-gradient(ellipse,#baf0d02b,transparent 67%);filter:blur(18px)}
.actual-planner{position:relative;width:100%;overflow:hidden;border:1px solid #c5d8d152;border-radius:1rem;background:#eff1eb;box-shadow:0 2.5rem 4rem #0007;transform:perspective(1300px) rotateY(-5deg) rotateZ(-1deg)}
.actual-planner img{display:block;width:100%;height:auto}
.app-frame-label{padding:.65rem 1rem;background:#0c3035;color:var(--mint);font-size:.6rem;letter-spacing:.1em;font-weight:700}
.actual-employee{position:absolute;right:-1rem;top:8rem;width:30%;max-width:12rem;padding:.25rem;overflow:hidden;border:2px solid #48605a;border-radius:1.5rem;background:#0b1312;box-shadow:0 1.6rem 3rem #0009;transform:rotate(2.5deg)}
.actual-employee img{display:block;width:100%;height:auto;border-radius:1.2rem}
.app-role-note{position:absolute;left:1rem;bottom:1.5rem;max-width:60%;padding:.5rem .8rem;color:var(--mint);border-left:2px solid var(--coral);font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.hero-app-proof figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding-top:.5rem;color:#e7eee8;font-size:.68rem;line-height:1.5}
.app-enlarge{border:0;border-bottom:1px solid currentColor;border-radius:0;min-height:44px;padding:.3rem 0;background:transparent;color:var(--mint);font:inherit;font-weight:650;cursor:pointer;text-align:left}
.app-enlarge:focus-visible,.app-dialog-close:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.route-depth{background:var(--cream)}
.route-depth>summary{padding:1.2rem 5vw 2rem;cursor:pointer;text-align:center;color:var(--petrol);font-weight:650;list-style-position:inside}
.route-depth[open]>summary{padding-bottom:1rem}
.route-depth .phone-story{border-top:1px solid var(--line)}
.route-depth .explanation-link{padding-bottom:1rem}
.no-acceptance{max-width:34rem}
.no-acceptance strong{display:block;color:var(--mint);margin-bottom:.25rem}
#prijsvoorwaarden{scroll-margin-top:8rem}
.app-screen-dialog{width:min(94vw,90rem);max-height:92svh;padding:1.5rem;border:1px solid #baf0d040;border-radius:1.3rem;background:var(--night);color:var(--cream);box-shadow:0 3rem 8rem #0009}
.app-screen-dialog::backdrop{background:#06191de8;backdrop-filter:blur(8px)}
.app-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.app-dialog-heading h2{font-size:clamp(1.8rem,3vw,3rem);margin:0}
.app-dialog-close{min-height:44px;min-width:44px;padding:.5rem 1rem;border:1px solid var(--mint);border-radius:999px;background:var(--mint);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
.app-screen-dialog>p{font-size:.85rem;margin:.8rem 0 1.5rem;max-width:none;color:var(--mint)}
.app-dialog-images{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(0,.9fr);gap:1.5rem;align-items:start}
.app-dialog-images figure{min-width:0;margin:0}
.app-dialog-images img{display:block;width:100%;height:auto;border-radius:.6rem}
.app-dialog-images figcaption{font-size:.85rem;margin-bottom:.6rem}
@media(max-width:75rem){
 .hero-copy h1{font-size:clamp(2.9rem,4.8vw,4.5rem)}
 .hero-content{gap:2vw;padding-top:8rem}
 .app-proof-world{padding-bottom:6rem;min-height:28rem}
 .actual-employee{top:6rem}
}
@media(max-width:52rem){
 .hero-content{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:8rem 0 2.5rem;min-height:0;width:90vw}
 .hero-copy h1{font-size:clamp(2.6rem,9.6vw,4.3rem);max-width:15ch}
 .hero-copy .mechanism{font-size:.95rem;line-height:1.5;margin:1.2rem 0}
 .hero-copy .hero-terms{font-size:.75rem;max-width:35rem}
 .hero-copy .hero-action{gap:.65rem}
 .hero-content .category{font-size:.8rem;margin-bottom:1rem}
 .hero-app-proof{width:100%;max-width:38rem;margin:1rem auto 0}
 .app-proof-world{padding-right:1rem;padding-bottom:5rem;min-height:21rem}
 .actual-planner{width:93%;transform:rotate(-1deg);border-radius:.7rem}
 .actual-employee{top:4.5rem;right:0;width:31%;max-width:10rem;border-radius:1.1rem}
 .actual-employee img{border-radius:.85rem}
 .app-frame-label{padding:.5rem .65rem;font-size:.55rem}
 .app-role-note{left:0;bottom:1rem;font-size:1.15rem;max-width:63%}
 .hero-app-proof figcaption{font-size:.68rem;display:block}
 .app-enlarge{display:block}
 .app-screen-dialog{padding:1rem}
 .app-dialog-heading{align-items:start}
 .app-dialog-images{grid-template-columns:1fr}
 .app-dialog-images figure:nth-child(2){max-width:22rem;margin:auto}
}
@media(prefers-reduced-motion:no-preference){
 .hero-app-proof{animation:inval-proof-enter .8s cubic-bezier(.22,1,.36,1) both}
 @keyframes inval-proof-enter{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){.actual-planner,.actual-employee{transform:none}}