/* Sojolock — verkoopsite (bovenop app.css) */
header.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;color:var(--ink)}
.nav nav{display:flex;gap:22px;font-size:15px;font-weight:600}
.nav nav a{text-decoration:none;color:var(--mut)}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink)}
.nav .right{display:flex;align-items:center;gap:10px}
.langsw{font-size:13px;font-weight:700;text-decoration:none;color:var(--mut);border:1px solid var(--line);padding:6px 10px;border-radius:9px;background:var(--card)}
.burger{display:none}
.navlogin{display:none}
.hero{padding:70px 0 52px;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.hero>*{min-width:0}
.eyebrow{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:13px;padding:6px 12px;border-radius:99px}
p.lead{font-size:19px;color:var(--mut);max-width:36em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--mut)}
.trust b{color:var(--ink)}
section.s{padding:56px 0}
section.alt{background:var(--card);border-block:1px solid var(--line)}
section.alt .card{background:var(--bg)}
.center{text-align:center}
.center p.lead{margin-inline:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.grid2s{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.grid3>*,.grid2s>*,.grid4>*{min-width:0}
.step-n{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:12px}
.ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:12px}
.ico svg{width:22px;height:22px;stroke:var(--accent-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split>*{min-width:0}
ul.ticks{list-style:none;padding:0;margin:16px 0 0}
ul.ticks li{padding:6px 0 6px 30px;position:relative}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:800}
.brand{display:flex;flex-direction:column;gap:12px}
.logo-tile{background:#fff;border-radius:12px;height:64px;display:grid;place-items:center;border:1px solid var(--line)}
.logo-tile img{height:52px;width:auto;object-fit:contain}
.photo{background:#fff;border:1px solid var(--line);border-radius:12px;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center}
.photo img{width:100%;height:100%;object-fit:contain}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;align-self:flex-start;padding:4px 12px;border-radius:99px}
.status.ok{background:var(--ok-soft);color:var(--ok)}
.status.soon,.status.test{background:var(--warn-soft);color:var(--warn)}
.brand .btn{margin-top:auto}
.banner{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:linear-gradient(135deg,#0a444e,#0f6a78);color:#fff;border-radius:22px;padding:36px}
.banner h2{color:#fff}.banner p{color:#cfe8ec;margin:0}
.price{display:flex;flex-direction:column}
.price .amt{font-size:34px;font-weight:800;margin:6px 0}
.price .amt small{font-size:14px;font-weight:500;color:var(--mut)}
.price.feat{border:2px solid var(--accent);position:relative}
.price.feat::before{content:attr(data-badge);position:absolute;top:-13px;left:20px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px}
.price ul{list-style:none;padding:0;margin:14px 0 20px;flex:1}
.price li{padding:6px 0;font-size:14.5px;border-top:1px solid var(--line)}
.sd{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-top:26px}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
details summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
details summary::after{content:"+";font-size:20px;line-height:1;color:var(--accent-ink)}
details[open] summary::after{content:"–"}
details p{color:var(--mut);margin:10px 0 0}
.note-box{background:var(--warn-soft);color:var(--ink);border-radius:var(--r);padding:20px 24px;margin-top:20px;font-size:15px}
.safe{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.safe ul{margin:10px 0 0;padding-left:20px;color:var(--mut);font-size:15px}
.safe li{padding:3px 0}
.shot{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.crumbs{font-size:13.5px;color:var(--mut);padding:18px 0 0}
.crumbs a{color:var(--mut)}
.prose{max-width:760px}
.prose h2{font-size:26px;margin:1.6em 0 .5em}
.prose p,.prose li{color:var(--ink)}
.prose p{margin:.7em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.phone{position:relative;width:236px;margin:0 auto;background:#0f1f2e;border-radius:34px;padding:10px;box-shadow:0 24px 60px #0a444e44}
.phone .scr{background:var(--bg);border-radius:26px;padding:18px 16px 20px;color:var(--ink)}
.phone .code{font-size:25px;font-weight:800;letter-spacing:.1em;white-space:nowrap;text-align:center;background:var(--card);border:1px dashed var(--accent);border-radius:14px;padding:12px 0;margin:10px 0;font-family:ui-monospace,Menlo,monospace}
.phone .open{display:block;text-align:center;background:var(--accent);color:#fff;border-radius:12px;padding:12px;font-weight:700;font-size:14px}
.herovis{position:relative;min-height:440px}
.dash{position:absolute;left:0;top:10px;width:92%;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.dash .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.dash .bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dash .in{padding:16px}
.dash h4{margin:0 0 10px;font-size:15px}
.drow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.drow:first-of-type{border-top:0}
.herovis .phone{position:absolute;right:0;bottom:-10px}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;margin-top:20px}
table.cmp td,table.cmp th{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.matrix{width:100%;border-collapse:separate;border-spacing:4px;font-size:13px;text-align:center}
.matrix th{font-weight:600;color:var(--mut);padding:6px 4px}
.matrix td.n{text-align:left;font-weight:600}
.matrix td.x{background:var(--accent);color:#fff;border-radius:6px;padding:7px 0;font-weight:700}
.matrix td.o{background:var(--bg);border-radius:6px;padding:7px 0;color:var(--mut)}
.matrix td.s{background:var(--violet);color:#fff;border-radius:6px;padding:7px 0;font-weight:700}
.legend{display:flex;gap:16px;margin-top:12px;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
footer.foot{padding:44px 0;color:var(--mut);font-size:14px;border-top:1px solid var(--line);margin-top:30px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fcols h4{margin:0 0 10px;color:var(--ink);font-size:14px}
.fcols a{display:block;color:var(--mut);text-decoration:none;padding:3px 0}
.fcols a:hover{color:var(--ink)}
code.blk{display:block;white-space:pre;overflow-x:auto;background:#0f1f2e;color:#d8eef2;padding:16px 18px;border-radius:12px;font-size:13px;line-height:1.55}
@media(max-width:900px){
  .hero,.split,.grid2s,.banner,.safe{grid-template-columns:1fr}
  .grid3,.grid4{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .nav nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;padding:12px 20px;gap:4px}
  .nav nav.open{display:flex}
  .nav nav a{padding:10px 0}
  .burger{display:inline-grid}
  .navlogin{display:block}
  .nav .right .btn.sec{display:none}
  .nav .right{gap:6px}
  .nav .wrap{gap:8px}
  .nav .right .btn.pri{padding:7px 10px;font-size:13px}
  .logo{font-size:18px}
  .hero{padding-top:36px}
  .herovis{min-height:0;display:flex;flex-direction:column;align-items:center;gap:20px}
  .dash{position:static;width:100%}
  .herovis .phone{position:static}
  .matrix-wrap{overflow-x:auto}
  .matrix{min-width:460px}
  table.cmp{display:block;overflow-x:auto}
}

/* label "Meest gekozen" mag buiten de kaart steken */
.card.price,.card.brand,.card.feat{overflow:visible}
.price.feat{margin-top:0}
.price.feat::before{top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;line-height:1.3;padding:4px 14px;box-shadow:0 2px 6px rgba(10,68,78,.25)}