/* Vergelijking H2YO vs Aquablu, Dripl, iTapToo: eigen stylesheet (tokens uit brand.css) */
.vg-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--night)}
.vg-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.vg-hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,10,.5),rgba(7,7,10,0) 25%),linear-gradient(to top,rgba(7,7,10,1),rgba(7,7,10,0) 28%),linear-gradient(90deg,rgba(7,7,10,.7),rgba(7,7,10,.3) 45%,rgba(7,7,10,0) 65%)}
.vg-hero .wrap{position:relative;width:100%;padding-top:140px;padding-bottom:100px}
.vg-hero .copy{max-width:660px}
.vg-hero h1{font-size:clamp(2.2rem,4.2vw,3.8rem);margin-bottom:18px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.vg-hero .lead{margin-bottom:28px}
.vg-hero .anchor{margin-top:22px;font-size:.92rem;color:var(--muted)}
.vg-hero .anchor b{color:#fff;font-weight:600}.vg-hero .anchor i{font-style:normal;margin:0 8px;opacity:.5}

/* de vier apparaten */
.vg-devs .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(28px,4vw,48px)}
.vg-devs figure{margin:0;background:#fff;border:1px solid var(--line-ink);border-radius:var(--r);overflow:hidden}
.vg-devs .ph{aspect-ratio:4/5;background:var(--paper2);overflow:hidden}
.vg-devs .ph img{width:100%;height:100%;object-fit:cover}
.vg-devs figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px}
.vg-devs figcaption b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.vg-devs figcaption span{font-size:.92rem;color:var(--ink-muted)}
.vg-devs figure.us{background:var(--night);color:var(--txt);border-color:var(--night);box-shadow:0 24px 50px rgba(0,0,0,.18)}
.vg-devs figure.us figcaption span{color:var(--muted2)}
.vg-devs .cap{margin-top:16px;font-size:.85rem;color:var(--ink-muted)}

/* prijsstaven */
.vg-bars{background:var(--night)}
.vg-bars .bars{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0;display:grid;gap:18px;max-width:980px}
.vg-bars li{display:grid;grid-template-columns:110px 1fr 120px;grid-template-areas:"n track p" ". t t";align-items:center;gap:6px 20px;margin:0}
.vg-bars .n{grid-area:n;font-family:var(--display);font-weight:700;color:var(--muted2)}
.vg-bars .track{grid-area:track;height:14px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.vg-bars .fill{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.28);transform-origin:left;transition:transform 1s var(--ease)}
html.js .vg-bars li.reveal .fill{transform:scaleX(0)}html.js .vg-bars li.reveal.in .fill{transform:none}
.vg-bars .p{grid-area:p;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;text-align:right}
.vg-bars .p i{font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-left:2px}
.vg-bars .t{grid-area:t;font-size:.86rem;color:var(--muted)}
.vg-bars li.us .n{color:#fff}
.vg-bars li.us .fill{background:linear-gradient(90deg,#FF3B86,#FF8A3D)}
.vg-bars li.us .p{color:#fff}
.vg-bars .note{margin-top:26px;font-size:.86rem;color:var(--muted);max-width:70ch}

/* de tabel */
.vg-crit .sub{color:var(--ink-muted);max-width:70ch}
.vg-crit .sub b{color:var(--ink)}
.vg-table{margin-top:clamp(24px,3vw,40px);border-radius:var(--r);border:1px solid var(--line-ink);background:#fff;overflow-x:auto}
.vg-table table{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:.93rem}
.vg-table thead th{background:#fff;text-transform:none;font:800 1.05rem var(--display);letter-spacing:-.01em;text-align:left;padding:20px 18px;border-bottom:1px solid var(--line-ink);color:var(--ink)}
.vg-table thead th:first-child{font:700 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.vg-table th[scope=row]{text-transform:none;letter-spacing:-.01em;font-size:.95rem;text-align:left;font-family:var(--display);font-weight:700;color:var(--ink);width:19%;vertical-align:top}
.vg-table th small,.vg-table td small{display:block;font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--ink-muted);margin-top:3px;line-height:1.45}
.vg-table td,.vg-table th[scope=row]{padding:16px 18px;border-bottom:1px solid var(--line-ink);vertical-align:top}
.vg-table td{width:20.25%;color:var(--ink)}
.vg-table td b.v{font-weight:600}
.vg-table td b.ask{font-style:italic;color:var(--ink-muted);font-weight:500}
.vg-table .us{background:var(--night);color:var(--txt)!important}
.vg-table thead th.us{background:var(--night);color:#fff;border-radius:14px 14px 0 0;border-bottom-color:rgba(255,255,255,.1)}
.vg-table td.us{border-bottom-color:rgba(255,255,255,.08)}
.vg-table td.us small{color:var(--muted2)}
.vg-table td.us b.v{font-weight:700}
.vg-table .c{display:block}
.vg-table tr.grp th{background:var(--paper2);font:700 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding:12px 18px;text-align:left;border-bottom:1px solid var(--line-ink)}
.vg-table tbody tr:last-child td,.vg-table tbody tr:last-child th{border-bottom:0}
.vg-table tbody tr:not(.grp):hover td:not(.us),.vg-table tbody tr:not(.grp):hover th{background:#FBFBFC}
.vg-crit .foot{margin-top:18px;font-size:.84rem;color:var(--ink-muted);max-width:90ch;line-height:1.6}
.vg-crit .btn-row{margin-top:28px}

/* drie verschillen */
.vg-diff .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.vg-diff figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.vg-diff figure img{width:100%;height:100%;object-fit:cover}
.vg-diff .three{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0}
.vg-diff .three li{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--line-ink);margin:0}
.vg-diff .three b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.vg-diff .three span{color:#3a3a44}

/* afsluiter */
.vg-close{position:relative;overflow:hidden;background:var(--night);color:var(--txt)}
.vg-close .glow{position:absolute;left:50%;top:40%;width:900px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,59,134,.2),rgba(255,59,134,0));pointer-events:none}
.vg-close .wrap{position:relative}

@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}html.js .vg-bars li.reveal .fill{transform:none}}
@media (max-width:1024px){.vg-devs .row4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .vg-hero{min-height:0;display:flex;flex-direction:column}
  .vg-hero>.wrap{order:1;padding-top:28px;padding-bottom:32px}
  .vg-hero>img{order:2;position:relative;height:auto;aspect-ratio:4/3;object-position:82% 50%}
  .vg-hero .shade{display:none}
  .vg-devs .row4{gap:12px}
  .vg-devs figcaption{padding:12px 12px 14px}.vg-devs figcaption b{font-size:1rem}.vg-devs figcaption span{font-size:.82rem}
  .vg-bars li{grid-template-columns:70px 1fr 104px;gap:4px 10px}
  .vg-bars .p{font-size:1.15rem}
  .vg-diff .grid2{grid-template-columns:1fr}
  .vg-diff figure{aspect-ratio:1/1}.vg-diff figure img{object-position:50% 0}
  /* tabel: één kaart per criterium, vier waarden onder elkaar, H2YO bovenaan donker (wint van brand.css table.stack) */
  .vg-crit .vg-table{border:0;background:none;overflow:visible;border-radius:0}
  .vg-crit .vg-table table.stack{min-width:0;display:block}
  .vg-crit .vg-table table.stack thead{display:none}
  .vg-crit .vg-table table.stack tbody{display:block}
  .vg-crit .vg-table table.stack tr{display:block;background:#fff;border:1px solid var(--line-ink);border-radius:var(--r);margin-bottom:12px;overflow:hidden;padding:0}
  .vg-crit .vg-table table.stack tr.grp{background:none;border:0;border-radius:0;margin:26px 0 10px}
  .vg-crit .vg-table table.stack tr.grp th{display:block;background:none!important;border:0!important;padding:0!important;font:700 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
  .vg-crit .vg-table table.stack th[scope=row]{display:block;width:auto;padding:16px 18px 12px!important;border:0!important;font-size:1.08rem;text-transform:none;letter-spacing:-.01em}
  .vg-crit .vg-table table.stack td{display:grid;grid-template-columns:82px 1fr;gap:10px;width:auto;padding:12px 18px!important;border:0!important;border-top:1px solid var(--line-ink)!important;background:none!important;font-size:.93rem}
  .vg-crit .vg-table table.stack td::before{content:attr(data-label);font:700 .78rem var(--display);color:var(--ink-muted);padding-top:2px}
  .vg-crit .vg-table table.stack td.us{background:var(--night)!important;color:var(--txt)!important;border-top:0!important}
  .vg-crit .vg-table table.stack td.us::before{color:#fff}
  .vg-crit .vg-table table.stack td.us b.v{color:#fff}
  .vg-crit .vg-table table.stack tbody tr:not(.grp):hover td:not(.us),.vg-crit .vg-table table.stack tbody tr:not(.grp):hover th{background:none}
}