From cf39f5a6e755d403b592f67dec5846c759faf28d Mon Sep 17 00:00:00 2001
From: christofer holm <christofer.holm@doableware.com>
Date: Sat, 2 Nov 2024 14:43:25 +0100
Subject: [PATCH] Product comparison table

---
 docs/assets/css/custom.css |   2 +-
 docs/index.html            | 709 ++++++++++++++++++++++++++-----------
 2 files changed, 497 insertions(+), 214 deletions(-)

diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
index ec55dd2e..8b541f0a 100644
--- a/docs/assets/css/custom.css
+++ b/docs/assets/css/custom.css
@@ -1 +1 @@
-.l-fixed-content,.fp-right .pitch-content,.form-right .pitch-content,.code-right .pitch-content,.img-right .pitch-content{max-width:1280px;margin:auto;padding-left:1em;padding-right:1em}.l-fixed-content p,.fp-right .pitch-content p,.form-right .pitch-content p,.code-right .pitch-content p,.img-right .pitch-content p{margin-bottom:1.3rem}.l-docs #main{max-width:1880px}.l-splash-full #main{max-width:100%;padding:0}.l-splash-full #main p{margin-top:0}.l-fixed-notice{position:fixed;bottom:0;left:0;color:#646769;background-color:#f2f3f3;width:100%}.l-fixed-notice p{margin:1.3em auto;text-align:center}.l-fixed-notice button{margin-left:.5em}.empty-banner .masthead{margin-bottom:3em}.seamless{border-bottom:none}.visible-links{align-items:baseline}.pitch>section,.pitch-white>section,.pitch-grey>section{padding:5.318rem 0}.pitch>section::after,.pitch-white>section::after,.pitch-grey>section::after{content:"";display:block;clear:both}.pitch h3,.pitch-white h3,.pitch-grey h3{font-size:.84em;font-weight:normal}.pitch h2,.pitch-white h2,.pitch-grey h2,.pitch h3,.pitch-white h3,.pitch-grey h3,.pitch h4,.pitch-white h4,.pitch-grey h4{margin:0 0 2.7rem;text-align:center}.pitch a:not(.btn,.cta),.pitch-white a:not(.btn,.cta),.pitch-grey a:not(.btn,.cta){text-decoration:none;color:#457d5b}.pitch a:not(.btn,.cta):hover,.pitch-white a:not(.btn,.cta):hover,.pitch-grey a:not(.btn,.cta):hover{color:#09411f}.pitch-grey>section:nth-child(odd){background-color:#f2f3f3}.pitch-white>section:nth-child(even){background-color:#f2f3f3}.sz-short{overflow:auto;min-height:0}.btn--theme{color:#fff;background-color:#09411f}.btn--theme:visited{background-color:#09411f;color:#fff}.btn--theme:hover{background-color:#457d5b;color:#fff}.float,.float-right,.fp-right,.form-right,.code-right,.img-right,.float-left,.fp-left,.code-left,.img-left{display:block}.float-left,.fp-left,.code-left,.img-left{float:left}@media(max-width: 600px){.float-left,.fp-left,.code-left,.img-left{float:none}}.float-right,.fp-right,.form-right,.code-right,.img-right{float:right}@media(max-width: 600px){.float-right,.fp-right,.form-right,.code-right,.img-right{float:none}}.top-align{margin-top:0.25em}.pos-right,.fp-right,.form-right,.code-right,.img-right{margin-left:2rem}@media(max-width: 600px){.pos-right,.fp-right,.form-right,.code-right,.img-right{margin-left:0}}.pos-left,.fp-left,.code-left,.img-left{margin-right:2rem}@media(max-width: 600px){.pos-left,.fp-left,.code-left,.img-left{margin-right:0}}.pos-twice.pos-left,.pos-twice.fp-left,.pos-twice.code-left,.pos-twice.img-left{margin-right:1rem}@media(max-width: 600px){.pos-twice.pos-left,.pos-twice.fp-left,.pos-twice.code-left,.pos-twice.img-left{margin-right:0}}.pos-twice.pos-right,.pos-twice.fp-right,.pos-twice.form-right,.pos-twice.code-right,.pos-twice.img-right{margin-left:1rem}@media(max-width: 600px){.pos-twice.pos-right,.pos-twice.fp-right,.pos-twice.form-right,.pos-twice.code-right,.pos-twice.img-right{margin-left:0}}.sz-sm,.form-right{max-width:31.3%}@media(max-width: 600px){.sz-sm,.form-right{max-width:100%}}.sz-hf{width:calc(50% - 1rem)}@media(max-width: 768px){.sz-hf{width:100%}}@media(max-width: 768px){.sz-short.reset{height:auto}}.img,.img-left,.img-right{margin-bottom:1em}@media(max-width: 600px){.img,.img-left,.img-right{margin-bottom:2em}}.code,.code-left,.code-right{margin-bottom:0}@media(max-width: 600px){.code,.code-left,.code-right{margin-bottom:1em}}.form-right{padding:0;margin-left:2.5em}.flex{display:flex;justify-content:space-between}.flex>div{margin:0 1em 0}@media(max-width: 600px){.flex{flex-direction:column}}.is-hidden{display:none}h2.reset-border{border-bottom:none}h2.is-subtitled{margin-bottom:1.3rem}h3.is-subtitled{margin-bottom:2.7rem}.l-grid{display:grid;font-size:.8em;column-gap:1rem;grid-template-columns:repeat(3, 1fr)}.l-grid>div{display:grid;grid-template-rows:subgrid;margin-bottom:1rem}.l-grid.is-titled{padding-top:1rem}@media(max-width: 900px){.l-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 600px){.l-grid{grid-template-columns:repeat(1, 1fr)}}.grid-2-row{grid-area:span 2}.grid-3-row{grid-area:span 3}.grid-4-row{grid-area:span 4}.grid-5-col{grid-template-columns:repeat(5, 1fr)}@media(max-width: 1024px){.grid-5-col{grid-template-columns:repeat(4, 1fr)}}@media(max-width: 900px){.grid-5-col{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 600px){.grid-5-col{grid-template-columns:repeat(2, 1fr)}}.banner{padding:0;clear:both;background-size:cover;background-repeat:no-repeat;background-position:center;-webkit-animation:intro .3s both;animation:intro .3s both;-webkit-animation-delay:.25s;animation-delay:.25s}.banner.banner-dark{margin-bottom:0}.banner-text{padding:3em 3em 3em 1em;color:#fff;margin-left:calc((100% - 1280px)/2);max-width:980px}@media(max-width: 80em){.banner-text{margin-left:0;width:900px}}@media(max-width: 900px){.banner-text{width:100%}}.banner-text h1{margin-top:0;font-size:2.441em}@media(max-width: 37.5em){.banner-text h1{font-size:1.953em}}.banner-text-dark{color:#000}.banner-text-dark .btn{color:#fff;background-color:#000;border:1px solid #000}.banner-text-dark .btn:hover{background-color:rgba(0,0,0,0);color:#000}.banner-text-hero{background-image:linear-gradient(to left, rgba(255, 255, 255, 0) 0em, rgb(9, 65, 31) 2.5em, rgb(9, 65, 31) calc(100% - 2.5em), rgba(255, 255, 255, 0))}.banner-text-hero .btn{background-color:#fff;color:#09411f;border:1px solid #fff}.banner-text-hero .btn:hover{background-color:rgba(0,0,0,0);color:#fff}.banner-lead{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;font-size:1.25em;max-width:768px}.masthead{position:sticky;top:0;background-color:#fff}.masthead__inner-wrap{padding:.5em}.masthead__menu-item:first-of-type a{margin-right:1rem;padding:.5em 1em;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;font-size:.75em;font-weight:bold;text-align:center;text-decoration:none;border-width:0;border-radius:4px;background-color:#ee5f5b;color:#fff}.masthead__menu-item:first-of-type a:before{background:none}.masthead__menu-item:first-of-type a:visited{background-color:#ee5f5b}.masthead__menu-item:first-of-type a:hover{background-color:#b2231f}.l-tire{display:flex;justify-content:space-evenly;flex-direction:row;flex-wrap:wrap}@media(max-width: 768px){.l-tire-full{flex-direction:column;align-content:center}}.tire-content{text-align:center;background-color:#fff;border:1px solid #f2f3f3;border-radius:4px;padding:1em}.tire-content.is-grey{background-color:#f2f3f3}.tire-content ul{text-align:left;list-style:none}.tire-content li::before{content:"";display:inline-block;height:.75em;width:.97em;background-image:url("/assets/images/tick.svg");background-repeat:no-repeat;background-position:left center;background-size:1em;margin-right:.3em}.tire-content form{text-align:left;width:100%}.tire-content form input[type=submit]{text-align:center;margin:0 auto 1.75em auto;display:block}.tire-benefits{font-size:.8em;display:grid;margin-left:1em;margin-right:1em;grid-template-columns:1em 1fr;gap:.7em;text-align:left}.tire-col{margin-bottom:2em}.tire-3-col-fixed,.tire-2-col-fixed{width:16em}.tire-3-col-full{width:calc(33.3333333333% - (1em));margin-left:.5em;margin-right:.5em;margin-bottom:2em}@media(max-width: 38em){.tire-3-col-full{width:calc(50% - (1em))}}@media(max-width: 20em){.tire-3-col-full{width:calc(100% - (1em))}}@media(max-width: 768px){.tire-3-col-full{width:100%}}.tire-2-col-full{width:calc(50% - (1em));margin-left:.5em;margin-right:.5em;margin-bottom:2em}@media(max-width: 20em){.tire-2-col-full{width:calc(100% - (1em))}}@media(max-width: 768px){.tire-2-col-full{width:100%}}.tire-title{font-weight:bold;margin-bottom:2.7rem}.tire-cta{margin-bottom:2.7rem}.tire-price{font-weight:bold;font-size:2.5em}.tire-period{font-size:.9em;font-weight:lighter;margin-bottom:1em}.l-tire-switcher{display:flex;align-items:stretch;justify-content:space-around}.l-tire-switcher svg:hover{cursor:pointer}.l-tire-switcher .svg-box{display:flex;align-items:center}.switcher-title{font-weight:bold;margin-left:10px;margin-right:10px;font-size:1.5em}.pc,.pc-img-right{display:flex;gap:2rem}.pc>img,.pc-img-right>img,.pc div,.pc-img-right div{flex:50%}@media(max-width: 900px){.pc,.pc-img-right{flex-direction:column;align-items:center}}.pc-img-right{flex-direction:row-reverse}@media(max-width: 768px){.pc-img-right{flex-direction:column-reverse}}.punchline{font-size:.8em;text-align:center}.punchline>p{margin-bottom:0}.punchline:not(:first-child){margin-top:5.318rem}.cta-btn{text-align:center;margin:2.6rem 0 1.3rem}.cta-btn:last-child{margin-bottom:0}a.cta{text-decoration:none;color:#09411f;position:relative;width:fit-content}a.cta:before{content:"";position:absolute;background:#09411f;bottom:0;height:2px;left:0;transform:scaleX(0) translate3d(0, 0, 0);transition:all .2s ease-in-out;width:100%}a.cta:after{content:"→"}a.cta:hover:before{transform:scaleX(1)}.l-tiles>div{box-shadow:0 5px 15px rgba(0,0,0,.35);padding:1.5em;border-radius:5px;background-color:#fff}.l-tiles img{height:5em;display:block;margin:0 auto 1.3rem}.l-grid-text h1{text-align:left;margin-bottom:1em}.l-grid-text svg{margin-bottom:1em}.grid-logo{grid-gap:3em}.grid-logo img{margin:auto;max-height:123px}.query{display:flex;flex-flow:row wrap;gap:2rem}.query>div:nth-child(1){flex:0 1 min-content;overflow:scroll;width:min-content;max-height:13.5em}.query>div:nth-child(2){flex:1 1 min-content}.query .highlighter-rouge{margin-bottom:0}.query .btn{margin-bottom:0}.query .btn:hover{cursor:default}@media(max-width: 900px){.query{flex-flow:column wrap}}.query-right-box{display:grid;grid-template-columns:min-content 10px min-content auto;grid-template-rows:min-content 2rem min-content 1.3rem min-content}.query-right-box>div:nth-child(1){grid-area:1/1/2/5;width:min-content}.query-right-box>div:nth-child(2){grid-area:3/1/4/2}.query-right-box>div:nth-child(3){grid-area:3/3/4/4}.query-right-box>div:nth-child(4){grid-area:5/1/6/5}@media(max-width: 900px){.query-right-box>div:nth-child(1){grid-area:3/1/4/5;max-width:90vw;overflow:scroll}.query-right-box>div:nth-child(2){grid-area:1/1/2/2}.query-right-box>div:nth-child(3){grid-area:1/3/2/4}}.chart{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto}.chart p{margin-bottom:0}.x-axis{transform:rotate(-90deg);align-self:center;grid-area:1/1/2/2}.y-axis{margin:1em 0 2.4rem;text-align:center;grid-area:2/2/3/3}.chart>.cta{grid-area:3/2/4/3}.chart-grid{grid-area:1/2/2/3;display:grid;grid-template-columns:2rem auto 2rem auto 2rem auto;grid-template-rows:min-content min-content min-content max-content 2rem;border-bottom:1px solid #000;border-left:1px solid #000}@media(max-width: 900px){.chart-grid{grid-template-columns:10px auto 10px;grid-template-rows:min-content min-content 2rem min-content min-content 2rem min-content min-content 2rem}}.c1-title,.c2-title,.c3-title{border-bottom:2px solid #b6b7b7;border-radius:5px 5px 0 0;padding:.6em 1.2em}.c1-content,.c2-content,.c3-content{border-radius:0 0 5px 5px;padding:1.2em}.c1-title,.c2-title,.c3-title,.c1-content,.c2-content,.c3-content{background-color:#fff}.c1-title{grid-area:3/2/4/3}@media(max-width: 900px){.c1-title{grid-area:7/2/8/3}}.c1-content{grid-area:4/2/5/3}@media(max-width: 900px){.c1-content{grid-area:8/2/9/3}}.c2-title{grid-area:2/4/3/5}@media(max-width: 900px){.c2-title{grid-area:4/2/5/3}}.c2-content{grid-area:3/4/5/5}@media(max-width: 900px){.c2-content{grid-area:5/2/6/3}}.c3-title{grid-area:1/6/2/7}@media(max-width: 900px){.c3-title{grid-area:1/2/2/3}}.c3-content{grid-area:2/6/5/7}@media(max-width: 900px){.c3-content{grid-area:2/2/3/3}}table.light{font-size:1em;display:table}@media(max-width: 768px){table.light{overflow:scroll;max-width:90vw;display:block}}table.light th:first-child{background-color:#fff}table.light td:first-child{background-color:#f2f3f3}table.light th:first-child,table.light td:first-child{width:49%;padding:.7em 1em}table.light th:nth-child(n+2),table.light td:nth-child(n+2){width:17%;text-align:center}table.light td,table.light th{padding:.7em .5em}table.light .btn{margin-bottom:0}table.light img{max-height:1em}
+.l-fixed-content,.fp-right .pitch-content,.form-right .pitch-content,.code-right .pitch-content,.img-right .pitch-content{max-width:1280px;margin:auto;padding-left:1em;padding-right:1em}.l-fixed-content p,.fp-right .pitch-content p,.form-right .pitch-content p,.code-right .pitch-content p,.img-right .pitch-content p{margin-bottom:1.3rem}.l-docs #main{max-width:1880px}.l-splash-full #main{max-width:100%;padding:0}.l-splash-full #main p{margin-top:0}.l-fixed-notice{position:fixed;bottom:0;left:0;color:#646769;background-color:#f2f3f3;width:100%}.l-fixed-notice p{margin:1.3em auto;text-align:center}.l-fixed-notice button{margin-left:.5em}.empty-banner .masthead{margin-bottom:3em}.seamless{border-bottom:none}.visible-links{align-items:baseline}.pitch>section,.pitch-white>section,.pitch-grey>section{padding:5.318rem 0}.pitch>section::after,.pitch-white>section::after,.pitch-grey>section::after{content:"";display:block;clear:both}.pitch h3,.pitch-white h3,.pitch-grey h3{font-size:.84em;font-weight:normal}.pitch h2,.pitch-white h2,.pitch-grey h2,.pitch h3,.pitch-white h3,.pitch-grey h3,.pitch h4,.pitch-white h4,.pitch-grey h4{margin:0 0 2.7rem;text-align:center}.pitch a:not(.btn,.cta),.pitch-white a:not(.btn,.cta),.pitch-grey a:not(.btn,.cta){text-decoration:none;color:#457d5b}.pitch a:not(.btn,.cta):hover,.pitch-white a:not(.btn,.cta):hover,.pitch-grey a:not(.btn,.cta):hover{color:#09411f}.pitch-grey>section:nth-child(odd){background-color:#f2f3f3}.pitch-white>section:nth-child(even){background-color:#f2f3f3}.sz-short{overflow:auto;min-height:0}.btn--theme{color:#fff;background-color:#09411f}.btn--theme:visited{background-color:#09411f;color:#fff}.btn--theme:hover{background-color:#457d5b;color:#fff}.float,.float-right,.fp-right,.form-right,.code-right,.img-right,.float-left,.fp-left,.code-left,.img-left{display:block}.float-left,.fp-left,.code-left,.img-left{float:left}@media(max-width: 600px){.float-left,.fp-left,.code-left,.img-left{float:none}}.float-right,.fp-right,.form-right,.code-right,.img-right{float:right}@media(max-width: 600px){.float-right,.fp-right,.form-right,.code-right,.img-right{float:none}}.top-align{margin-top:0.25em}.pos-right,.fp-right,.form-right,.code-right,.img-right{margin-left:2rem}@media(max-width: 600px){.pos-right,.fp-right,.form-right,.code-right,.img-right{margin-left:0}}.pos-left,.fp-left,.code-left,.img-left{margin-right:2rem}@media(max-width: 600px){.pos-left,.fp-left,.code-left,.img-left{margin-right:0}}.pos-twice.pos-left,.pos-twice.fp-left,.pos-twice.code-left,.pos-twice.img-left{margin-right:1rem}@media(max-width: 600px){.pos-twice.pos-left,.pos-twice.fp-left,.pos-twice.code-left,.pos-twice.img-left{margin-right:0}}.pos-twice.pos-right,.pos-twice.fp-right,.pos-twice.form-right,.pos-twice.code-right,.pos-twice.img-right{margin-left:1rem}@media(max-width: 600px){.pos-twice.pos-right,.pos-twice.fp-right,.pos-twice.form-right,.pos-twice.code-right,.pos-twice.img-right{margin-left:0}}.sz-sm,.form-right{max-width:31.3%}@media(max-width: 600px){.sz-sm,.form-right{max-width:100%}}.sz-hf{width:calc(50% - 1rem)}@media(max-width: 768px){.sz-hf{width:100%}}@media(max-width: 768px){.sz-short.reset{height:auto}}.img,.img-left,.img-right{margin-bottom:1em}@media(max-width: 600px){.img,.img-left,.img-right{margin-bottom:2em}}.code,.code-left,.code-right{margin-bottom:0}@media(max-width: 600px){.code,.code-left,.code-right{margin-bottom:1em}}.form-right{padding:0;margin-left:2.5em}.flex{display:flex;justify-content:space-between}.flex>div{margin:0 1em 0}@media(max-width: 600px){.flex{flex-direction:column}}.is-hidden{display:none}h2.reset-border{border-bottom:none}h2.is-subtitled{margin-bottom:1.3rem}h3.is-subtitled{margin-bottom:2.7rem}.l-grid{display:grid;font-size:.8em;column-gap:1rem;grid-template-columns:repeat(3, 1fr)}.l-grid>div{display:grid;grid-template-rows:subgrid;margin-bottom:1rem}.l-grid.is-titled{padding-top:1rem}@media(max-width: 900px){.l-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 600px){.l-grid{grid-template-columns:repeat(1, 1fr)}}.grid-2-row{grid-area:span 2}.grid-3-row{grid-area:span 3}.grid-4-row{grid-area:span 4}.grid-5-col{grid-template-columns:repeat(5, 1fr)}@media(max-width: 1024px){.grid-5-col{grid-template-columns:repeat(4, 1fr)}}@media(max-width: 900px){.grid-5-col{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 600px){.grid-5-col{grid-template-columns:repeat(2, 1fr)}}.banner{padding:0;clear:both;background-size:cover;background-repeat:no-repeat;background-position:center;-webkit-animation:intro .3s both;animation:intro .3s both;-webkit-animation-delay:.25s;animation-delay:.25s}.banner.banner-dark{margin-bottom:0}.banner-text{padding:3em 3em 3em 1em;color:#fff;margin-left:calc((100% - 1280px)/2);max-width:980px}@media(max-width: 80em){.banner-text{margin-left:0;width:900px}}@media(max-width: 900px){.banner-text{width:100%}}.banner-text h1{margin-top:0;font-size:2.441em}@media(max-width: 37.5em){.banner-text h1{font-size:1.953em}}.banner-text-dark{color:#000}.banner-text-dark .btn{color:#fff;background-color:#000;border:1px solid #000}.banner-text-dark .btn:hover{background-color:rgba(0,0,0,0);color:#000}.banner-text-hero{background-image:linear-gradient(to left, rgba(255, 255, 255, 0) 0em, rgb(9, 65, 31) 2.5em, rgb(9, 65, 31) calc(100% - 2.5em), rgba(255, 255, 255, 0))}.banner-text-hero .btn{background-color:#fff;color:#09411f;border:1px solid #fff}.banner-text-hero .btn:hover{background-color:rgba(0,0,0,0);color:#fff}.banner-lead{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;font-size:1.25em;max-width:768px}.masthead{position:sticky;top:0;background-color:#fff}.masthead__inner-wrap{padding:.5em}.masthead__menu-item:first-of-type a{margin-right:1rem;padding:.5em 1em;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;font-size:.75em;font-weight:bold;text-align:center;text-decoration:none;border-width:0;border-radius:4px;background-color:#ee5f5b;color:#fff}.masthead__menu-item:first-of-type a:before{background:none}.masthead__menu-item:first-of-type a:visited{background-color:#ee5f5b}.masthead__menu-item:first-of-type a:hover{background-color:#b2231f}.l-tire{display:flex;justify-content:space-evenly;flex-direction:row;flex-wrap:wrap}@media(max-width: 768px){.l-tire-full{flex-direction:column;align-content:center}}.tire-content{text-align:center;background-color:#fff;border:1px solid #f2f3f3;border-radius:4px;padding:1em}.tire-content.is-grey{background-color:#f2f3f3}.tire-content ul{text-align:left;list-style:none}.tire-content li::before{content:"";display:inline-block;height:.75em;width:.97em;background-image:url("/assets/images/tick.svg");background-repeat:no-repeat;background-position:left center;background-size:1em;margin-right:.3em}.tire-content form{text-align:left;width:100%}.tire-content form input[type=submit]{text-align:center;margin:0 auto 1.75em auto;display:block}.tire-benefits{font-size:.8em;display:grid;margin-left:1em;margin-right:1em;grid-template-columns:1em 1fr;gap:.7em;text-align:left}.tire-col{margin-bottom:2em}.tire-3-col-fixed,.tire-2-col-fixed{width:16em}.tire-3-col-full{width:calc(33.3333333333% - (1em));margin-left:.5em;margin-right:.5em;margin-bottom:2em}@media(max-width: 38em){.tire-3-col-full{width:calc(50% - (1em))}}@media(max-width: 20em){.tire-3-col-full{width:calc(100% - (1em))}}@media(max-width: 768px){.tire-3-col-full{width:100%}}.tire-2-col-full{width:calc(50% - (1em));margin-left:.5em;margin-right:.5em;margin-bottom:2em}@media(max-width: 20em){.tire-2-col-full{width:calc(100% - (1em))}}@media(max-width: 768px){.tire-2-col-full{width:100%}}.tire-title{font-weight:bold;margin-bottom:2.7rem}.tire-cta{margin-bottom:2.7rem}.tire-price{font-weight:bold;font-size:2.5em}.tire-period{font-size:.9em;font-weight:lighter;margin-bottom:1em}.l-tire-switcher{display:flex;align-items:stretch;justify-content:space-around}.l-tire-switcher svg:hover{cursor:pointer}.l-tire-switcher .svg-box{display:flex;align-items:center}.switcher-title{font-weight:bold;margin-left:10px;margin-right:10px;font-size:1.5em}.pc,.pc-img-right{display:flex;gap:2rem}.pc>img,.pc-img-right>img,.pc div,.pc-img-right div{flex:50%}@media(max-width: 900px){.pc,.pc-img-right{flex-direction:column;align-items:center}}.pc-img-right{flex-direction:row-reverse}@media(max-width: 768px){.pc-img-right{flex-direction:column-reverse}}.punchline{font-size:.8em;text-align:center}.punchline>p{margin-bottom:0}.punchline:not(:first-child){margin-top:5.318rem}.cta-btn{text-align:center;margin:2.6rem 0 1.3rem}.cta-btn:last-child{margin-bottom:0}a.cta{text-decoration:none;color:#09411f;position:relative;width:fit-content}a.cta:before{content:"";position:absolute;background:#09411f;bottom:0;height:2px;left:0;transform:scaleX(0) translate3d(0, 0, 0);transition:all .2s ease-in-out;width:100%}a.cta:after{content:"→"}a.cta:hover:before{transform:scaleX(1)}.l-tiles>div{box-shadow:0 5px 15px rgba(0,0,0,.35);padding:1.5em;border-radius:5px;background-color:#fff}.l-tiles img{height:5em;display:block;margin:0 auto 1.3rem}.l-grid-text h1{text-align:left;margin-bottom:1em}.l-grid-text svg{margin-bottom:1em}.grid-logo{grid-gap:3em}.grid-logo img{margin:auto;max-height:123px}.query{display:flex;flex-flow:row wrap;gap:2rem}.query>div:nth-child(1){flex:0 1 min-content;overflow:scroll;width:min-content;max-height:13.5em}.query>div:nth-child(2){flex:1 1 min-content}.query .highlighter-rouge{margin-bottom:0}.query .btn{margin-bottom:0}.query .btn:hover{cursor:default}@media(max-width: 900px){.query{flex-flow:column wrap}}.query-right-box{display:grid;grid-template-columns:min-content 10px min-content auto;grid-template-rows:min-content 2rem min-content 1.3rem min-content}.query-right-box>div:nth-child(1){grid-area:1/1/2/5;width:min-content}.query-right-box>div:nth-child(2){grid-area:3/1/4/2}.query-right-box>div:nth-child(3){grid-area:3/3/4/4}.query-right-box>div:nth-child(4){grid-area:5/1/6/5}@media(max-width: 900px){.query-right-box>div:nth-child(1){grid-area:3/1/4/5;max-width:90vw;overflow:scroll}.query-right-box>div:nth-child(2){grid-area:1/1/2/2}.query-right-box>div:nth-child(3){grid-area:1/3/2/4}}.chart{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto}.chart p{margin-bottom:0}.x-axis{transform:rotate(-90deg);align-self:center;grid-area:1/1/2/2}.y-axis{margin:1em 0 2.4rem;text-align:center;grid-area:2/2/3/3}.chart>.cta{grid-area:3/2/4/3}.chart-grid{grid-area:1/2/2/3;display:grid;grid-template-columns:2rem auto 2rem auto 2rem auto;grid-template-rows:min-content min-content min-content max-content 2rem;border-bottom:1px solid #000;border-left:1px solid #000}@media(max-width: 900px){.chart-grid{grid-template-columns:10px auto 10px;grid-template-rows:min-content min-content 2rem min-content min-content 2rem min-content min-content 2rem}}.c1-title,.c2-title,.c3-title{border-bottom:2px solid #b6b7b7;border-radius:5px 5px 0 0;padding:.6em 1.2em}.c1-content,.c2-content,.c3-content{border-radius:0 0 5px 5px;padding:1.2em}.c1-title,.c2-title,.c3-title,.c1-content,.c2-content,.c3-content{background-color:#fff}.c1-title{grid-area:3/2/4/3}@media(max-width: 900px){.c1-title{grid-area:7/2/8/3}}.c1-content{grid-area:4/2/5/3}@media(max-width: 900px){.c1-content{grid-area:8/2/9/3}}.c2-title{grid-area:2/4/3/5}@media(max-width: 900px){.c2-title{grid-area:4/2/5/3}}.c2-content{grid-area:3/4/5/5}@media(max-width: 900px){.c2-content{grid-area:5/2/6/3}}.c3-title{grid-area:1/6/2/7}@media(max-width: 900px){.c3-title{grid-area:1/2/2/3}}.c3-content{grid-area:2/6/5/7}@media(max-width: 900px){.c3-content{grid-area:2/2/3/3}}table{font-size:1em;display:table}@media(max-width: 768px){table{overflow:scroll;max-width:90vw;display:block}}table th:first-child{background-color:#fff}table td:first-child{background-color:#f2f3f3}table th:nth-child(n+2),table td:nth-child(n+2){text-align:center}table.light th:first-child,table.light td:first-child{width:49%;padding:.7em 1em}table.light th:nth-child(n+2),table.light td:nth-child(n+2){width:17%}table.wide th:first-child,table.wide td:first-child{width:fit-content;padding:.7em 1em}table td,table th{padding:.7em .5em}table .btn{margin-bottom:0}table img{max-height:1em}
diff --git a/docs/index.html b/docs/index.html
index e0f630d3..ef41c161 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -308,6 +308,502 @@ <h1>
         </div>
        </div>
       </section>
+      <section>
+       <div class="l-fixed-content">
+        <section itemscope itemtype="https://schema.org/Offer">
+         <div class="l-tire">
+          <div class="tire-col tire-content tire-2-col-fixed">
+           <div class="tire-title" itemprop="name">
+            Latest Updates
+           </div>
+           <div class="tire-price" itemprop="price">
+            $15
+           </div>
+           <div class="tire-period" itemprop="eligibleDuration">
+            PER MONTH
+           </div>
+           <a class="tire-cta btn btn--theme btn--primary btn--medium" href="/djongocs/create-account/" id="create-account-3">
+            Create Account
+           </a>
+           <div class="tire-benefits" itemprop="description">
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             Webserver instance running the latest version on Djongo.
+            </div>
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             Supports the latest version of Django, MongoDB.
+            </div>
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             Important bug fixes.
+            </div>
+           </div>
+          </div>
+          <div class="tire-col tire-content tire-2-col-fixed">
+           <div class="tire-title" itemprop="name">
+            Extended Features
+           </div>
+           <div class="tire-price" itemprop="price">
+            $55
+           </div>
+           <div class="tire-period" itemprop="eligibleDuration">
+            PER MONTH
+           </div>
+           <a class="tire-cta btn btn--theme btn--primary btn--medium" href="/djongocs/create-account/?tire=1" id="create-account-4">
+            Create Account
+           </a>
+           <div class="tire-benefits" itemprop="description">
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             Includes Latest updates.
+            </div>
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             MongoDB transactions.
+            </div>
+            <div>
+             <img src="/assets/images/tick.svg">
+            </div>
+            <div>
+             Advanced Fields.
+            </div>
+           </div>
+          </div>
+         </div>
+        </section>
+       </div>
+      </section>
+      <section>
+       <div class="l-fixed-content">
+        <table class="wide">
+         <thead>
+          <tr>
+           <th>
+            &nbsp;
+           </th>
+           <th colspan="4">
+            Djongo on Github
+           </th>
+           <th colspan="6">
+            DjongoCS
+           </th>
+          </tr>
+          <tr>
+           <th>
+            &nbsp;
+           </th>
+           <th colspan="4">
+            &nbsp;
+           </th>
+           <th colspan="3">
+            Latest updates
+           </th>
+           <th colspan="3">
+            Extended features
+           </th>
+          </tr>
+         </thead>
+         <tbody>
+          <tr>
+           <td>
+            Djongo version
+           </td>
+           <td>
+            1.3.4
+           </td>
+           <td>
+            1.3.4
+           </td>
+           <td>
+            1.3.6
+           </td>
+           <td>
+            1.3.6
+           </td>
+           <td>
+            1.3.7
+           </td>
+           <td>
+            1.3.7
+           </td>
+           <td>
+            1.3.7
+           </td>
+           <td>
+            1.3.7
+           </td>
+           <td>
+            1.3.7
+           </td>
+           <td>
+            1.3.7
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Django version
+           </td>
+           <td>
+            2.2.28
+           </td>
+           <td>
+            2.2.28
+           </td>
+           <td>
+            3.1.12
+           </td>
+           <td>
+            3.1.14
+           </td>
+           <td>
+            2.2.28
+           </td>
+           <td>
+            3.1.12
+           </td>
+           <td>
+            3.1.14
+           </td>
+           <td>
+            2.2.28
+           </td>
+           <td>
+            3.1.12
+           </td>
+           <td>
+            3.1.14
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Pymongo version
+           </td>
+           <td>
+            3.7.0
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.7.0
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.7.0
+           </td>
+           <td>
+            3.11.4
+           </td>
+           <td>
+            3.11.4
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Mongodb fields
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/circle.svg">
+           </td>
+           <td>
+            <img src="/assets/images/circle.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Django boot support
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Django migrations
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Django contrib support
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/circle.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Basic operations
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/circle.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Advanced operations
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Special keywords
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+          <tr>
+           <td>
+            Schema generation
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/cross.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+           <td>
+            <img src="/assets/images/tick.svg">
+           </td>
+          </tr>
+         </tbody>
+        </table>
+       </div>
+      </section>
       <section>
        <div class="l-fixed-content">
         <h2 id="prototyping">
@@ -496,82 +992,6 @@ <h2 id="security-and-integrity-checks">
         </p>
        </div>
       </section>
-      <section>
-       <div class="l-fixed-content">
-        <section itemscope itemtype="https://schema.org/Offer">
-         <div class="l-tire">
-          <div class="tire-col tire-content tire-2-col-fixed is-grey">
-           <div class="tire-title" itemprop="name">
-            Latest Updates
-           </div>
-           <div class="tire-price" itemprop="price">
-            $15
-           </div>
-           <div class="tire-period" itemprop="eligibleDuration">
-            PER MONTH
-           </div>
-           <a class="tire-cta btn btn--theme btn--primary btn--medium" href="/djongocs/create-account/" id="create-account-3">
-            Create Account
-           </a>
-           <div class="tire-benefits" itemprop="description">
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             Webserver instance running the latest version on Djongo.
-            </div>
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             Supports the latest version of Django, MongoDB.
-            </div>
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             Important bug fixes.
-            </div>
-           </div>
-          </div>
-          <div class="tire-col tire-content tire-2-col-fixed is-grey">
-           <div class="tire-title" itemprop="name">
-            Extended Features
-           </div>
-           <div class="tire-price" itemprop="price">
-            $55
-           </div>
-           <div class="tire-period" itemprop="eligibleDuration">
-            PER MONTH
-           </div>
-           <a class="tire-cta btn btn--theme btn--primary btn--medium" href="/djongocs/create-account/?tire=1" id="create-account-4">
-            Create Account
-           </a>
-           <div class="tire-benefits" itemprop="description">
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             Includes Latest updates.
-            </div>
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             MongoDB transactions.
-            </div>
-            <div>
-             <img src="/assets/images/tick.svg">
-            </div>
-            <div>
-             Advanced Fields.
-            </div>
-           </div>
-          </div>
-         </div>
-        </section>
-       </div>
-      </section>
       <section>
        <div class="l-fixed-content">
         <h2 id="built-for-enterprises">
@@ -608,143 +1028,6 @@ <h1>
         </div>
        </div>
       </section>
-      <section>
-       <div class="l-fixed-content">
-        <h2 id="products-1">
-         Products
-        </h2>
-        <table class="light">
-         <thead>
-          <tr>
-           <th>
-            &nbsp;
-           </th>
-           <th>
-            Djongo
-           </th>
-           <th>
-            DjongoCS
-           </th>
-           <th>
-            Enterprise
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td>
-            &nbsp;
-           </td>
-           <td>
-            &nbsp;
-           </td>
-           <td>
-            <a class="btn btn--theme btn--primary btn--medium" href="/djongocs/create-account" id="create-account-5">
-             Create Account
-            </a>
-           </td>
-           <td>
-            <a class="btn btn--theme btn--primary btn--medium" href="/djongocs/enterprise" id="more-6">
-             More
-            </a>
-           </td>
-          </tr>
-          <tr>
-           <td>
-            Django MongoDB Connector
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-          <tr>
-           <td>
-            Virtualized Containers
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-          <tr>
-           <td>
-            <a href="/djongocs/products" id="latest-updates">
-             Latest Updates
-            </a>
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-          <tr>
-           <td>
-            <a href="/djongocs/products" id="extended-features">
-             Extended Features
-            </a>
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-          <tr>
-           <td>
-            <a href="/djongocs/enterprise" id="commercial-license">
-             Commercial License
-            </a>
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-          <tr>
-           <td>
-            <a href="/djongocs/enterprise" id="services-1">
-             Services
-            </a>
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/cross.svg">
-           </td>
-           <td>
-            <img src="/assets/images/tick.svg">
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-      </section>
       <section>
        <div class="l-fixed-content">
         <h2 id="djongo-1">