diff --git a/.gitignore b/.gitignore
index 1f01e27e840..3c72ceff0c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,4 @@ js_assets/
 .sass-cache/
 styleguide/build/
 
+npm-debug.log
diff --git a/kitsune/bundles.py b/kitsune/bundles.py
index 867480d42d7..fa88aaeaa31 100644
--- a/kitsune/bundles.py
+++ b/kitsune/bundles.py
@@ -296,7 +296,19 @@
             'sumo/js/instant_search.js',
             'sumo/js/legacy_login_toggle.js',
             'sumo/js/responsive-nav-toggle.js',
-            'sumo/js/profile-avatars.js'
+            'sumo/js/profile-avatars.js',
+            'protocol/js/protocol-base.js',
+            'protocol/js/protocol-utils.js',
+            'protocol/js/protocol-supports.js',
+            'protocol/js/protocol-details.js',
+            'protocol/js/protocol-footer.js',
+            'protocol/js/protocol-menu.js',
+            'protocol/js/protocol-modal.js',
+            'protocol/js/protocol-navigation.js',
+            'protocol/js/protocol-newsletter.js',
+            'protocol/js/protocol-notification-bar.js',
+            'protocol/js/protocol-sidemenu.js',
+            'sumo/js/protocol-nav.js',
         ),
         'output_filename': 'build/common-min.js'
     },
diff --git a/kitsune/landings/jinja2/landings/home.html b/kitsune/landings/jinja2/landings/home.html
index 6a2a7217978..9d7de82562b 100644
--- a/kitsune/landings/jinja2/landings/home.html
+++ b/kitsune/landings/jinja2/landings/home.html
@@ -3,22 +3,43 @@
 {% set styles = ('home',) %}
 {% set canonical_url = canonicalize(viewname='home') %}
 
-{% block content %}
-  <div class="grid_12 search-form-large">
-    <h1>{{ _('Search Mozilla Support') }}</h1>
-    {{ search_box(settings, id='support-search-home', params=search_params) }}
+{% block contentwrap %}
+  <section class="sumo-page-section shade-bg text-center">
+    <div class="mzp-l-content narrow">
+      <h1 class="text-display-xl">{{ _('Search Mozilla Support') }}</h1>
+      {{ search_box(settings, id='support-search-home', params=search_params) }}
+
+      <p class="popular-searches">
+        <span>Popular Searches:</span>
+        <a href="#TODO">Firefox Accounts</a>
+        <a href="#TODO">Log In</a>
+        <a href="#TODO">Item</a>
+        <a href="#TODO">Item</a>
+      </p>
+    </div>
+  </section>
+
+
+
+<section class="mzp-l-content sumo-page-section">
+  <div class="text-center">
+    <h2 class="display-xs">{{ _('Get Help') }}</h2>
+    <p>{{ _('Pick your product') }}</p>
   </div>
-  <div class="grid_12">
-    <h2 class="help-articles-title">{{ _('Help articles') }}</h2>
-    <section id="products-and-services">
-      {{ product_cards(products) }}
-    </section>
+  {{ product_cards(products) }}
+</section>
+
+<section class="mzp-l-content sumo-page-section">
+  <div class="text-center">
+    <h2 class="display-xs">{{ _('Featured Articles & Threads') }}</h2>
   </div>
-  <section id="get-involved-box" class="grid_12">
-    <a class="button" href="{{ url('landings.get_involved') }}">
-      {{ _('Volunteer for Mozilla Support') }}
-    </a>
-  </section>
+  {% include "landings/includes/featured_articles.html" %}
+  <p class="text-right"><strong><a href="#TODO">View More</a></strong></p>
+</section>
+
+<section class="mzp-l-content sumo-page-section">
+  {% include "landings/includes/join-our-community-callout.html" %}
+</section>
 {% endblock %}
 
 {% block outer_side %}
diff --git a/kitsune/landings/jinja2/landings/includes/featured_articles.html b/kitsune/landings/jinja2/landings/includes/featured_articles.html
new file mode 100644
index 00000000000..6af71f016fb
--- /dev/null
+++ b/kitsune/landings/jinja2/landings/includes/featured_articles.html
@@ -0,0 +1,93 @@
+
+  <div class="sumo-card-grid is-four-wide" style="--cg-count: 4;">
+    <div class="scroll-wrap">
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+    </div>
+  </div>
diff --git a/kitsune/landings/jinja2/landings/includes/join-our-community-callout.html b/kitsune/landings/jinja2/landings/includes/join-our-community-callout.html
new file mode 100644
index 00000000000..000844724dc
--- /dev/null
+++ b/kitsune/landings/jinja2/landings/includes/join-our-community-callout.html
@@ -0,0 +1,8 @@
+<div class="card card--callout">
+  <img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
+  <div class="card--details">
+    <h3 class="card--title">{{ _('Join Our Community') }}</h3>
+    <p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
+    <p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
+  </div>
+</div>
diff --git a/kitsune/products/jinja2/products/includes/product_macros.html b/kitsune/products/jinja2/products/includes/product_macros.html
index 07d2c64d202..e40960785b8 100644
--- a/kitsune/products/jinja2/products/includes/product_macros.html
+++ b/kitsune/products/jinja2/products/includes/product_macros.html
@@ -1,20 +1,25 @@
 {% macro product_cards(products, topic=None) -%}
-  <ul id="product-cards" class="card-grid cf">
+<div class="sumo-card-grid" style="--cg-count: {{ products|length }};">
+  <div class="scroll-wrap">
     {% for product in products %}
-      <li>
+      <div class="card card--product">
         {% if topic %}
           {% set prod_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
         {% else %}
           {% set prod_url = url('products.product', slug=product.slug) %}
         {% endif %}
-        <a class="cf" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
-          <div class="icon">
-            <img src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
+
+          <img class="card--icon" src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a class="expand-this-link" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
+                {{ pgettext('DB: products.Product.title', product.title) }}
+              </a>
+            </h3>
+            <p class="card--desc">{{ pgettext('DB: products.Product.description', product.description) }}</p>
           </div>
-          <div class="title">{{ pgettext('DB: products.Product.title', product.title) }}</div>
-          <div class="description">{{ pgettext('DB: products.Product.description', product.description) }}</div>
-        </a>
-      </li>
+      </div>
     {% endfor %}
-  </ul>
+  </div>
+</div>
 {%- endmacro %}
diff --git a/kitsune/products/static/products/img/product_placeholder.png b/kitsune/products/static/products/img/product_placeholder.png
index 0fbd72540d7..6eb2175e43a 100644
Binary files a/kitsune/products/static/products/img/product_placeholder.png and b/kitsune/products/static/products/img/product_placeholder.png differ
diff --git a/kitsune/settings.py b/kitsune/settings.py
index 13e07f1eee8..32b835ad20f 100644
--- a/kitsune/settings.py
+++ b/kitsune/settings.py
@@ -401,6 +401,7 @@ def parse_conn_max_age(value):
 STATIC_URL = config('STATIC_URL', default='/static/')
 STATICFILES_DIRS = (
     path('js_assets'),
+    path('node_modules/@mozilla-protocol/core'),
     path('jsi18n'),  # Collect jsi18n so that it is cache-busted
 )
 STATICFILES_FINDERS = (
diff --git a/kitsune/sumo/jinja2/base.html b/kitsune/sumo/jinja2/base.html
index e82becc4cc6..ca2bca3a209 100644
--- a/kitsune/sumo/jinja2/base.html
+++ b/kitsune/sumo/jinja2/base.html
@@ -1,4 +1,4 @@
-{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, favicon with context %}
+{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, profile_nav, favicon with context %}
 
 {% if request.LANGUAGE_CODE == settings.WIKI_DEFAULT_LANGUAGE and waffle.flag('surveygizmo') %}
   {# allow any artibtrary survey to be loaded via the SurveyGizmo admin #}
@@ -26,11 +26,11 @@
     {% endfor %}
   {% endif %}
 
-  {% stylesheet 'common' %}
+  <!-- {% stylesheet 'common' %}
   {% stylesheet 'print' %}
   {% for style in styles %}
     {% stylesheet style %}
-  {% endfor %}
+  {% endfor %} -->
 
   <link href="{{ STATIC_URL }}build/screen.css" rel="stylesheet" type="text/css" />
 
@@ -110,7 +110,7 @@
 {% if localizable_url %}
   {% set locale_picker_url = locale_picker_url|urlparams(next=localizable_url) %}
 {% endif %}
-<ul id="nav-access">
+<ul class="sumo-nav-access" id="nav-access">
   <li><a href="#main-content">{{ _('Skip to main content') }}</a></li>
   <li><a href="{{ locale_picker_url }}">{{ _('Switch language') }}</a></li>
   <li><a id="skip-to-search" href="#search-q">{{ _('Skip to search') }}</a></li>
@@ -125,23 +125,6 @@
 
 <div class="media-test"></div>
 
-{# These will only be shown on small-ish screens, by media queries. #}
-{% if request.MOBILE %}
-  <div class="mobile-banner" id="mobile-warning">
-    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
-    <a href="javascript: history.back();">
-      {{ _("This page doesn't have a mobile optimized version. Tap here to go back.") }}
-    </a>
-  </div>
-{% else %}
-  <div class="mobile-banner" id="mobile-warning">
-    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
-    <a href="?{{ request.QUERY_STRING }}&amp;mobile=1">
-      {{ _('Tap here to go to the mobile version of the site.') }}
-    </a>
-  </div>
-{% endif %}
-
 {# TrafficCop experiment_fxa_cta_topbar #}
 {% if run_experiments %}
   <div id="promotions" class="hidden">
@@ -170,13 +153,18 @@
 </div>
 
 
-<header class="mzp-c-navigation sumo-nav {{modifier_class}}">
+<header class="mzp-c-navigation sumo-nav">
   <div class="mzp-c-navigation-l-content">
     <div class="sumo-nav--container">
       <div class="sumo-nav--logo">
-        <a href="{{ url('home') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Home"><img src="{{ STATIC_URL }}sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
+        <a href="{{ url('home') }}"><img src="{{ STATIC_URL }}sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
       </div>
-      <button class="mzp-c-navigation-menu-button" type="button" aria-controls="main-navigation">Menu</button>
+
+      <button data-sumo-toggle-nav="#search-navigation" class="sumo-nav--search-button" type="button" aria-controls="search-navigation">Search</button>
+      <button data-sumo-toggle-nav="#main-navigation" class="sumo-nav--toggle-button" type="button" aria-controls="main-navigation">Menu</button>
+      <a class="sumo-nav--avatar-button" data-sumo-toggle-nav="#profile-navigation" aria-controls="profile-navigation" aria-role="button">
+        <img class="avatar" src="{{ profile_avatar(user) }}" alt="Avatar for Username">
+      </a>
       <div class="mzp-c-navigation-items sumo-nav--list-wrap" id="main-navigation">
         <div class="mzp-c-navigation-menu">
           <nav class="mzp-c-menu mzp-is-basic">
@@ -188,6 +176,25 @@
           </nav>
         </div>
       </div>
+
+      <div class="mzp-c-navigation-items sumo-nav--list-wrap-right" id="profile-navigation">
+        <div class="mzp-c-navigation-menu">
+          <nav class="mzp-c-menu mzp-is-basic">
+              {% if not hide_aux_nav %}
+              <ul class="mzp-c-menu-category-list sumo-nav--list">
+                {{ profile_nav(user, hide_aaq_link) }}
+              </ul>
+              {% endif %}
+          </nav>
+        </div>
+      </div>
+      <div class="mzp-c-navigation-items sumo-nav--mobile-search-form" id="search-navigation">
+        <div class="mzp-c-navigation-menu">
+          <nav class="mzp-c-menu mzp-is-basic">
+            {{ search_box(settings, id='mobile-search-results', params=search_params) }}
+          </nav>
+        </div>
+      </div>
     </div>
   </div>
 </header><!--/.mzp-c-navigation -->
@@ -197,6 +204,7 @@
   {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
 {% endblock %}
 
+{% block contentwrap %}
 <div class="container_12 cf {% block base_container_classes %}{% endblock %}" id="main-container">
   <div class="grid_12">
     {% if messages %}
@@ -220,16 +228,15 @@
     </aside>
   {% endblock %}
 
-  <div class="support-search-main cf">
-    <div class="grid_12 search-form-large">
+  <section class="support-search-main cf">
       {{ search_box(settings, id='support-search-results', params=search_params) }}
-    </div>
-  </div>
+  </section>
 
   <main id="main-content" role="main">
     {% block content %}{% endblock %}
   </main>
 </div>
+{% endblock %}
 
 
 <footer class="mzp-c-footer">
@@ -292,21 +299,6 @@ <h5 class="mzp-c-footer-heading">{{ _('Firefox Accounts') }}</h5>
             <!-- form submit button is shown when JavaScript is not enabled -->
             <button type="submit">{{ _('Go') }}</button>
           </form>
-          <script src="../../../assets/protocol/protocol/js/protocol-lang-switcher.js"></script>
-
-          <script>
-            (function() {
-              'use strict';
-              // a custom callback can be passed to the lang switcher for analytics purposes.
-              Mzp.LangSwitcher.init(function(
-                previousLanguage, newLanguage) {
-                console.log('Previous language: ',
-                  previousLanguage);
-                console.log('New language: ',
-                  newLanguage);
-              })
-            })();
-          </script>
           <ul class="mzp-c-footer-links-social">
             <li><a class="twitter" href="https://twitter.com/firefox">Twitter<span>(@firefox)</span></a></li>
             <li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li>
diff --git a/kitsune/sumo/jinja2/includes/common_macros.html b/kitsune/sumo/jinja2/includes/common_macros.html
index 9f35428f241..93b71fa598e 100644
--- a/kitsune/sumo/jinja2/includes/common_macros.html
+++ b/kitsune/sumo/jinja2/includes/common_macros.html
@@ -7,7 +7,7 @@
       {% endfor %}
     {% endif %}
     <input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="{{ _('Find help...')|truncate(12) }}" class="searchbox" id="search-q" />
-    <button type="submit" title="{{ _('Search') }}" class="submit-button">{{ _('Search') }}</button>
+    <button type="submit" title="{{ _('Search') }}" class="search-button">{{ _('Search') }}</button>
   </form>
 {% endmacro %}
 
@@ -116,128 +116,128 @@ <h4 class="mzp-c-menu-item-title">Tools</h4>
   <li class="mzp-c-menu-category">
     <a class="mzp-c-menu-title sumo-nav--link" href="https://www.mozilla.org/">Volunteer</a>
   </li>
+{% endmacro %}
 
-  {% if not hide_locale_switcher %}
-  <li class="mzp-c-menu-category sumo-nav--item-right">
-    <a class="mzp-c-menu-title sumo-nav--link sumo-nav--lang-link" href="{{ locale_picker_url }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{% if request.LANGUAGE_CODE == "en-US"%}EN{% else %}{{ request.LANGUAGE_CODE }}{% endif %}</a>
-  </li>
-  {% endif %}
 
-  <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable {% if hide_locale_switcher %}sumo-nav--item-right{% endif %}">
-    {% if show_header_fx_download() %}
-      {# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
-      <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=header-download-button" class="firefox-download-button hidden sumo-button primary-button button-lg" data-event-category="Download Button" data-event-action="Firefox for Desktop">{{ _('Download Firefox') }}</a>
-    {% endif %}
-    {% if user.is_authenticated() %}
-    <a class="mzp-c-menu-title sumo-nav--link has-avatar" href="#">
-      {{ display_name(user) }}
-      <img class="avatar" src="{{ profile_avatar(user) }}" alt="Avatar for Username">
-    </a>
-    <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-profile">
-      <div class="sumo-nav--dropdown-container">
-        <div class="sumo-nav--dropdown-grid">
-          <button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-profile">Close Firefox menu</button>
+{% macro profile_nav(user, hide_aaq_link=False) %}
+{% if not hide_header_search %}
+<li class="mzp-c-menu-category sumo-nav--item-right">
+  {{ search_box(settings, id='support-search', params=search_params) }}
+</li>
+{% endif %}
+
+{% if not hide_locale_switcher %}
+<li class="mzp-c-menu-category sumo-nav--item-right sumo-nav--item-lang">
+  <a class="mzp-c-menu-title sumo-nav--link sumo-nav--lang-link" href="{{ locale_picker_url }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{% if request.LANGUAGE_CODE == "en-US"%}EN{% else %}{{ request.LANGUAGE_CODE }}{% endif %}</a>
+</li>
+{% endif %}
+
+<li class="mzp-c-menu-category {% if user.is_authenticated() %}mzp-has-drop-down mzp-js-expandable{% endif %} {% if hide_locale_switcher %}sumo-nav--item-right{% endif %}">
+  {% if show_header_fx_download() %}
+    {# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
+    <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=header-download-button" class="firefox-download-button hidden sumo-button primary-button button-lg" data-event-category="Download Button" data-event-action="Firefox for Desktop">{{ _('Download Firefox') }}</a>
+  {% endif %}
+  {% if user.is_authenticated() %}
+  <a class="mzp-c-menu-title sumo-nav--link has-avatar hide-on-mobile" href="#">
+    <span class="sumo-nav--username">{{ display_name(user) }}</span>
+    <img class="avatar" src="{{ profile_avatar(user) }}" alt="Avatar for Username">
+  </a>
+  <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-profile">
+    <div class="sumo-nav--dropdown-container">
+      <div class="sumo-nav--dropdown-grid">
+        <button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-profile">Close Firefox menu</button>
+        <div class="sumo-nav--dropdown-thirds">
+          <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
+            <a class="mzp-c-menu-item-link" href="#TODO">
+              <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M17 17l-1.051 3.154a1 1 0 01-1.898 0L13 17H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2zM7 8h10M7 12h10"/></g></svg>
+              <h4 class="mzp-c-menu-item-title">Profile</h4>
+              <p class="mzp-c-menu-item-desc">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
+              </p>
+            </a>
+            <ul class="mzp-c-menu-item-list sumo-nav--sublist">
+              <li><a href="#">{{ _('Edit Profile') }}</a></li>
+              <li><a href="#">My Questions</a></li>
+            </ul>
+          </section>
+         </div>
+         <div class="sumo-nav--dropdown-thirds">
+           <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
+             <a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
+               <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
+               <h4 class="mzp-c-menu-item-title">Settings</h4>
+               <p class="mzp-c-menu-item-desc">
+                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
+               </p>
+             </a>
+           </section>
+          </div>
           <div class="sumo-nav--dropdown-thirds">
             <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
-              <a class="mzp-c-menu-item-link" href="#TODO">
-                <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M17 17l-1.051 3.154a1 1 0 01-1.898 0L13 17H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2zM7 8h10M7 12h10"/></g></svg>
-                <h4 class="mzp-c-menu-item-title">Profile</h4>
+              <a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
+                <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                <h4 class="mzp-c-menu-item-title">Inbox</h4>
                 <p class="mzp-c-menu-item-desc">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
                 </p>
               </a>
-              <ul class="mzp-c-menu-item-list sumo-nav--sublist">
-                <li><a href="#">{{ _('Edit Profile') }}</a></li>
-                <li><a href="#">My Questions</a></li>
-              </ul>
             </section>
            </div>
-           <div class="sumo-nav--dropdown-thirds">
-             <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
-               <a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
-                 <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                 <h4 class="mzp-c-menu-item-title">Settings</h4>
-                 <p class="mzp-c-menu-item-desc">
-                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-                 </p>
-               </a>
-             </section>
-            </div>
-            <div class="sumo-nav--dropdown-thirds">
-              <section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
-                <a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
-                  <svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 9.5L3 17c-1 1.667-1 3 0 4s2.333.833 4-.5l7.5-7.5c2.333 1.054 4.333.734 6-.96 1.667-1.693 1.833-3.707.5-6.04l-3 3-2.5-.5L15 6l3-3c-2.333-1.333-4.333-1.167-6 .5-1.667 1.667-2.167 3.667-1.5 6z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                  <h4 class="mzp-c-menu-item-title">Inbox</h4>
-                  <p class="mzp-c-menu-item-desc">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-                  </p>
-                </a>
-              </section>
-             </div>
-             <div class="sumo-nav--button-row">
-               <a href="#" class="mzp-c-sumo-button secondary-button button-lg">Sign Out</a>
-
-
-
-
-
-               {% if not user.is_authenticated() %}
-                 <li>
-                   <a href="{{ url('users.auth') }}" class="signin-signup-button register"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Sign In">
-                     {{ _('Log in / Sign up') }}
-                   </a>
-                 </li>
-               {% else %}
-                 <li class="dropdown user-dropdown"><a href="javascript:;" class="user"  data-event-category="navigation" data-event-action="main navigation" data-event-label="User">
-                   <span class="hide-on-mobile">{{ display_name(user) }}
-                     <img class="avatar" src="{{ profile_avatar(user) }}">
-                   </span>
-                   <span class="mobile-only">{{ _('My Profile') }}</span>
+           <div class="sumo-nav--button-row">
+             <a href="#" class="mzp-c-sumo-button secondary-button button-lg">Sign Out</a>
 
+             {% if not user.is_authenticated() %}
+               <li>
+                 <a href="{{ url('users.auth') }}" class="signin-signup-button register"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Sign In">
+                   {{ _('Log in / Sign up') }}
                  </a>
-                   <ul>
-                     <li><a href="{{ profile_url(user) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Profile">{{ _('View Profile') }}</a></li>
-                     <li><a href="{{ url('search')|urlparams(asked_by=user.username, a=1, w=2) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Questions">{{ _('My Questions') }}</a></li>
-                     <li><a href="{{ profile_url(user, edit=True) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Edit Profile">{{ _('Edit Profile') }}</a></li>
-                     <li><a href="{{ url('users.edit_settings') }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Settings">{{ _('Settings') }}</a></li>
-                     <li>
-                       <a href="{{ url('messages.inbox') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Inbox">
-                         {{ _('Inbox') }}
-                         {% if unread_message_count > 0 %}
-                           <span class="unread-message-count">{{ unread_message_count }}</span>
-                         {% endif %}
-                       </a>
-                     </li>
-                     <li>
-                       <form id="sign-out" action="{{ url('users.logout') }}" method="post">
-                         {% csrf_token %}
-                       </form>
-                       <a
-                         data-type="submit"
-                         data-form="sign-out"
-                         href="#sign-out"
-                         data-event-category="navigation"
-                         data-event-action="main navigation"
-                         data-event-label="Sign Out">
-                         {{ _('Sign Out') }}
-                       </a>
-                     </li>
-                   </ul>
-                 </li>
-               {% endif %}
-
+               </li>
+             {% else %}
+               <li class="dropdown user-dropdown"><a href="javascript:;" class="user"  data-event-category="navigation" data-event-action="main navigation" data-event-label="User">
+                 <span class="hide-on-mobile">{{ display_name(user) }}
+                   <img class="avatar" src="{{ profile_avatar(user) }}">
+                 </span>
+                 <span class="mobile-only">{{ _('My Profile') }}</span>
 
-               {% if not hide_header_search %}
-                 {{ search_box(settings, id='support-search', params=search_params) }}
-               {% endif %}
-             </div>
-        </div>
+               </a>
+                 <ul>
+                   <li><a href="{{ profile_url(user) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Profile">{{ _('View Profile') }}</a></li>
+                   <li><a href="{{ url('search')|urlparams(asked_by=user.username, a=1, w=2) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Questions">{{ _('My Questions') }}</a></li>
+                   <li><a href="{{ profile_url(user, edit=True) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Edit Profile">{{ _('Edit Profile') }}</a></li>
+                   <li><a href="{{ url('users.edit_settings') }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Settings">{{ _('Settings') }}</a></li>
+                   <li>
+                     <a href="{{ url('messages.inbox') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Inbox">
+                       {{ _('Inbox') }}
+                       {% if unread_message_count > 0 %}
+                         <span class="unread-message-count">{{ unread_message_count }}</span>
+                       {% endif %}
+                     </a>
+                   </li>
+                   <li>
+                     <form id="sign-out" action="{{ url('users.logout') }}" method="post">
+                       {% csrf_token %}
+                     </form>
+                     <a
+                       data-type="submit"
+                       data-form="sign-out"
+                       href="#sign-out"
+                       data-event-category="navigation"
+                       data-event-action="main navigation"
+                       data-event-label="Sign Out">
+                       {{ _('Sign Out') }}
+                     </a>
+                   </li>
+                 </ul>
+               </li>
+             {% endif %}
+           </div>
       </div>
     </div>
-    {% else %}
-      <a href="{{ url('users.auth') }}" class="sumo-button secondary-button button-lg" data-event-category="navigation" data-event-action="main navigation" data-event-label="Sign In">{{ _('Log in / Sign up') }}</a>
-    {% endif %}
-  </li>
+  </div>
+  {% else %}
+    <a href="{{ url('users.auth') }}" class="sumo-button secondary-button button-lg" data-event-category="navigation" data-event-action="main navigation" data-event-label="Sign In">{{ _('Log in / Sign up') }}</a>
+  {% endif %}
+</li>
 {% endmacro %}
 
 {% macro content_editor(field) %}
diff --git a/kitsune/sumo/static/sumo/img/Mozilla_illustration_placholder2x.png b/kitsune/sumo/static/sumo/img/Mozilla_illustration_placholder2x.png
new file mode 100644
index 00000000000..02782e85638
Binary files /dev/null and b/kitsune/sumo/static/sumo/img/Mozilla_illustration_placholder2x.png differ
diff --git a/kitsune/sumo/static/sumo/js/protocol-nav.js b/kitsune/sumo/static/sumo/js/protocol-nav.js
new file mode 100644
index 00000000000..5244d8da8fa
--- /dev/null
+++ b/kitsune/sumo/static/sumo/js/protocol-nav.js
@@ -0,0 +1,67 @@
+(function() {
+    'use strict';
+    Mzp.Navigation.init();
+    Mzp.Menu.init();
+})();
+
+var toggleNavButtons = document.querySelectorAll('[data-sumo-toggle-nav]');
+
+function resetNavs() {
+  var allNavs = document.querySelectorAll('.mzp-c-navigation-items');
+  // reset all nav menus
+  allNavs.forEach((elm) => {
+    elm.setAttribute('aria-expanded', 'false');
+    elm.classList.remove('mzp-is-open');
+  });
+}
+
+if (toggleNavButtons.length > 0) {
+  toggleNavButtons.forEach((button) => {
+    function toggleMenu() {
+      var toggleThisId = button.dataset.sumoToggleNav;
+      var toggleThisItem = document.querySelector(toggleThisId);
+
+      if (toggleThisItem.getAttribute('aria-expanded') == 'false') {
+        resetNavs();
+        toggleThisItem.classList.add('mzp-is-open');
+        toggleThisItem.setAttribute('aria-expanded', 'true');
+
+        // if profile nav, go straight to subnav
+        if (toggleThisId == "#profile-navigation") {
+          toggleThisItem.querySelector('.mzp-js-expandable').classList.add('mzp-is-selected');
+        }
+
+        // if search nav, focus the field
+        if (toggleThisId == "#search-navigation") {
+          toggleThisItem.querySelector('.searchbox').focus();
+        }
+
+
+      } else {
+        resetNavs();
+      }
+    }
+    button.addEventListener('click', toggleMenu, false);
+  });
+}
+
+// close navs on resize
+var timeout = false;
+window.addEventListener('resize', function() {
+  clearTimeout(timeout);
+  timeout = setTimeout(resetNavs, 250);
+});
+
+
+// lang switcher from protocol. #TODO: test this in app.
+(function() {
+  'use strict';
+  // a custom callback can be passed to the lang switcher for analytics purposes.
+  Mzp.LangSwitcher.init(function(
+    previousLanguage, newLanguage) {
+    console.log('Previous language: ',
+      previousLanguage);
+    console.log('New language: ',
+      newLanguage);
+  })
+})();
diff --git a/kitsune/sumo/static/sumo/scss/base/_typography.scss b/kitsune/sumo/static/sumo/scss/base/_typography.scss
index c2d2fc080f7..78c9235bcc8 100644
--- a/kitsune/sumo/static/sumo/scss/base/_typography.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_typography.scss
@@ -13,7 +13,7 @@
 // to apply to all headings within that context.
 // .alt-heading-font.inverse - Both classes can be used together.
 //
-/* Markup: #{c.$styleguide-path}/typography.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/typography.njk
 //
 // Weight: 1
 //
@@ -29,108 +29,11 @@
 // there's some redundancy at smaller sizes because we don't want things
 // getting too tiny.
 // Example usage:
-//  .title { @include text-display-xl; }
-//  .subtitle { @include text-display-lg; }
-//  .intro { @include text-body-lg; }
+//  .title { @include c.text-display-xl; }
+//  .subtitle { @include c.text-display-lg; }
+//  .intro { @include c.text-body-lg; }
 
-$text-body-line-height: 1.5 !default;
-$text-display-line-height: 1.1 !default;
 
-// display copy: headings, blockquotes, other fancy stuff
-@mixin text-display-xxl { // Use this one sparingly.
-  @include p.font-size(48px);
-  line-height: $text-display-line-height;
-
-  @media #{p.$mq-md} {
-    @include p.font-size(64px);
-    @include c.line-height(72px);
-  }
-}
-
-@mixin text-display-xl {
-  @include p.font-size(40px);
-  line-height: $text-display-line-height;
-
-  @media #{p.$mq-md} {
-    @include p.font-size(56px);
-    @include c.line-height(64px);
-  }
-}
-
-@mixin text-display-lg {
-  @include p.font-size(32px);
-  line-height: $text-display-line-height;
-
-  @media #{p.$mq-md} {
-    @include p.font-size(48px);
-    @include c.line-height(56px);
-  }
-}
-
-@mixin text-display-md {
-  @include p.font-size(24px);
-  line-height: $text-display-line-height;
-
-  @media #{p.$mq-md} {
-    @include p.font-size(40px);
-    @include c.line-height(44px);
-  }
-}
-
-@mixin text-display-sm {
-  @include p.font-size(21px);
-
-  @media #{p.$mq-md} {
-    @include p.font-size(32px);
-    @include c.line-height(36px);
-  }
-}
-
-@mixin text-display-xs {
-  @include p.font-size(18px);
-  line-height: $text-display-line-height;
-
-  @media #{p.$mq-md} {
-    @include p.font-size(24px);
-    @include c.line-height(28px);
-  }
-}
-
-@mixin text-display-xxs {
-  @include p.font-size(20px);
-  @include c.line-height(24px);
-}
-
-@mixin text-display-xxxs {
-  @include p.font-size(16px);
-  @include c.line-height(20px);
-}
-
-// body copy
-@mixin text-body-lg {
-  @include p.font-size(18px);
-  line-height: $text-body-line-height;
-}
-
-@mixin text-body-md {
-  @include p.font-size(16px);
-  line-height: $text-body-line-height;
-}
-
-@mixin text-body-sm {
-  @include p.font-size(14px);
-  line-height: $text-body-line-height;
-}
-
-@mixin text-body-xs {
-  @include p.font-size(12px);
-  line-height: $text-body-line-height;
-}
-
-@mixin text-body-cta {
-  @include p.font-size(16px);
-  line-height: $text-body-line-height;
-}
 
 body {
   color: var(--color-text);
@@ -142,38 +45,42 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 // Type scale defined in includes/mixins/_typography.scss
-h1 {
-  @include text-display-xxl;
+h1,
+.text-display-xxl {
+  @include c.text-display-xxl;
 }
 
-h2 {
-  @include text-display-xl;
+h2,
+.text-display-xl {
+  @include c.text-display-xl;
 }
 
-h3 {
-  @include text-display-lg;
+h3,
+.text-display-lg {
+  @include c.text-display-lg;
 }
 
-h4 {
-  @include text-display-md;
+h4,
+.text-display-md {
+  @include c.text-display-md;
 }
 
-h5, h6 {
+h5, h6, .text-display-sm {
   font-family: var(--base-font-family);
-  @include text-display-sm;
+  @include c.text-display-sm;
 }
 
 .display-xs {
-  @include text-display-xs;
+  @include c.text-display-xs;
 }
 
 
 .display-xxs {
-  @include text-display-xxs;
+  @include c.text-display-xxs;
 }
 
 .display-xxxs {
-  @include text-display-xxxs;
+  @include c.text-display-xxxs;
 }
 
 
diff --git a/kitsune/sumo/static/sumo/scss/base/_utilities.scss b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
index 76517443f3d..0f4d94956ba 100644
--- a/kitsune/sumo/static/sumo/scss/base/_utilities.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
@@ -9,7 +9,7 @@
 // and accessibility reasons, an anchor with complicated nested content is not
 // preferred.
 //
-/* Markup: #{c.$styleguide-path}/expanded-link-utility.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/expanded-link-utility.njk
 //
 // Weight: 4
 //
@@ -28,9 +28,9 @@
 }
 
 
-@media #{p.$mq-md} {
+@media screen and (max-width: 767px) {
   .hide-on-mobile {
-    display: none;
+    display: none !important;
   }
 }
 
@@ -42,8 +42,9 @@
   }
 }
 
-.hidden {
-    display: none !important;
+.hidden,
+.is-hidden {
+  display: none !important;
 }
 
 .m-0 {
@@ -63,3 +64,11 @@
   height: 100vh;
   overflow: hidden;
 }
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss b/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
index 97ae0d88fbc..40b8f23b1f3 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
@@ -24,7 +24,7 @@
 // .reverse-on-desktop.align-full - This is useful when a primary action is first on mobile, and on the right on desktop.
 // .full-width-on-mobile - make buttons stretch to fill the container on mobile
 //
-/* Markup: #{c.$styleguide-path}/button-wrap.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/button-wrap.njk
 //
 // Weight: 2
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss b/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
index 691b3d9d302..8c7d5a11a32 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
@@ -14,14 +14,15 @@
 // .button-lg - large modifier
 // .button-xl - extra large modifier
 // .primary-button    - This is the primary variation.
-// .secondary-button - this is the secondary button.
+// .secondary-button - This is the secondary button.
 //
-/* Markup: #{c.$styleguide-path}/button.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/button.njk
 //
 // Weight: 4
 //
 // Style guide: buttons
 
+
 .sumo-button {
   display:inline-flex;
   justify-content:center;
@@ -32,7 +33,7 @@
   border-radius: var(--global-radius);
   background-color: var(--color-inverse);
 
-  font-family: var(--heading-font-family);
+  font-family: var(--heading-alt-font-family);
   @include p.font-size(14px);
   font-weight:700;
   text-decoration: none;
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss b/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
index 56ae540a434..381dc6d8822 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
@@ -14,7 +14,7 @@
 // Forms are used throughout the system and can be arranged in several ways. The
 // following is an example of how various components are combined.
 //
-/* Markup: #{c.$styleguide-path}/form.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/form.njk
 //
 // Weight: 3
 //
@@ -45,7 +45,7 @@ legend {
 // .has-warning     - Indiciates a field error.
 // .has-success     - Indiciates a field error.
 //
-/* Markup: #{c.$styleguide-path}/field.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field.njk
 //
 // Weight: 1
 //
@@ -171,7 +171,7 @@ textarea {
 // .has-warning     - Indiciates a field error.
 // .has-success     - Indiciates a field error.
 //
-/* Markup: #{c.$styleguide-path}/field_select.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_select.njk
 //
 // Weight: 2
 //
@@ -204,7 +204,7 @@ select,
 // .has-warning     - Indiciates a field error.
 // .has-success     - Indiciates a field error.
 //
-/* Markup: #{c.$styleguide-path}/field_textarea.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_textarea.njk
 //
 // Weight: 3
 //
@@ -223,7 +223,7 @@ textarea {
 // the user focuses the field.
 //
 //
-/* Markup: #{c.$styleguide-path}/field_help_text.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_help_text.njk
 //
 // Weight: 22
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_index.scss b/kitsune/sumo/static/sumo/scss/base/forms/_index.scss
index 54c9ba5a263..36d8ccea9d0 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_index.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_index.scss
@@ -2,5 +2,6 @@
 @forward 'radios-checkboxes';
 @forward 'toggles';
 @forward 'range';
+@forward 'simple-search-form';
 @forward 'buttons';
 @forward 'button-wrap';
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss b/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
index f6724d58153..4e5ef2a07bf 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
@@ -5,7 +5,7 @@
 //
 // .has-disabled  - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
 //
-/* Markup: #{c.$styleguide-path}/field_checkbox.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_checkbox.njk
 //
 // Weight: 4
 //
@@ -81,7 +81,7 @@
 //
 // .has-disabled  - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
 //
-/* Markup: #{c.$styleguide-path}/field_radio.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_radio.njk
 //
 // Weight: 5
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_range.scss b/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
index 8b3db7cd44d..ac4fc7779fb 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
@@ -8,7 +8,7 @@
 //
 // .has-disabled - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
 //
-/* Markup: #{c.$styleguide-path}/field_range.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_range.njk
 //
 // Weight: 7
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss b/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss
new file mode 100644
index 00000000000..17ee9db205d
--- /dev/null
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss
@@ -0,0 +1,53 @@
+@use '../../config' as c;
+@use '../../protocol' as p;
+
+.simple-search-form {
+  position: relative;
+  margin: 0;
+
+  .search-button {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+  }
+}
+
+.search-button {
+  appearance: none;
+  margin-left: 10px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background-image: url('#{p.$image-path}/icons/search.svg');
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  font: 0/0 a;
+  color: transparent;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.mzp-is-active  {
+    background-color: var(--color-link-active-bg);
+  }
+}
+
+.popular-searches {
+  display: none;
+  @media #{p.$mq-lg} {
+    display: block;
+    text-align: center;
+    margin-top: 32px;
+
+    a, span {
+      display: inline-block;
+      padding-right: 8px;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss b/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
index 7cf2dfd2e55..b6089b28b4e 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
@@ -11,7 +11,7 @@
 //
 // .has-disabled - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
 //
-/* Markup: #{c.$styleguide-path}/field_toggle.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/field_toggle.njk
 //
 // Weight: 6
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_card-grid.scss b/kitsune/sumo/static/sumo/scss/components/_card-grid.scss
new file mode 100644
index 00000000000..16965545356
--- /dev/null
+++ b/kitsune/sumo/static/sumo/scss/components/_card-grid.scss
@@ -0,0 +1,88 @@
+@use '../config' as c;
+@use '../protocol' as p;
+
+// Card Grid
+//
+// This collection of cards is presented as a scrollable list on mobile and an
+// array of cards on desktop. Any type of card styles can be used in this layout.
+//
+// .is-four-wide - changes the width of the cards to display in rows of four on desktop
+//
+// Markup: ../../../../../../../styleguide/styleguide-examples/card-grid.njk
+//
+// Weight: 2
+//
+// Style guide: card.grid
+
+:root {
+  --cg-card-width: 80vw;
+  --cg-gutter: #{c.$gutter-width * .5};
+  --cg-count: 3; // This should be set in an inline style with a template tag.
+}
+.sumo-card-grid {
+  padding: calc(var(--cg-gutter) /2) 0 0;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: scroll;
+  scroll-padding-right: var(--cg-gutter);
+  scroll-padding-left: var(--cg-gutter);
+  scrollbar-width: none;
+  scroll-snap-type: x proximity;
+  margin-right: c.$gutter-width * -.5;
+  margin-left: c.$gutter-width * -.5;
+
+  &.is-four-wide {
+    padding-top: var(--cg-gutter);
+  }
+
+  .scroll-wrap {
+    display: flex;
+    width: calc((var(--cg-card-width) + var(--cg-gutter)) * var(--cg-count));
+  }
+
+  .card {
+    margin-top: 0;
+    margin-right: calc(var(--cg-gutter) / 2);
+    margin-bottom: var(--cg-gutter);
+    margin-left: calc(var(--cg-gutter) / 2);
+    width: var(--cg-card-width);
+    scroll-snap-align: start;
+
+    &:first-child {
+      margin-left: c.$gutter-width * .5;
+    }
+
+    &:last-child {
+      margin-right: c.$gutter-width * .5;
+    }
+  }
+
+  @media #{p.$mq-sm} {
+    --cg-card-width: 40vw;
+  }
+
+  @media #{p.$mq-lg} {
+    --cg-gutter: #{c.$gutter-width};
+    overflow: visible;
+    margin-right: 0;
+    margin-left: 0;
+
+    .scroll-wrap {
+      @include c.grid-row;
+      width: auto;
+    }
+
+    .card,
+    .card:first-child,
+    .card:last-child {
+      @include c.col(1, 3); // This should be an 8 col grid, and it should use a 10-col grid at XL
+    }
+
+    &.is-four-wide {
+      .card,
+      .card:first-child,
+      .card:last-child {
+        @include c.col(1, 4);
+      }
+    }
+  }
+}
diff --git a/kitsune/sumo/static/sumo/scss/components/_card.scss b/kitsune/sumo/static/sumo/scss/components/_card.scss
index f8935c6b5cd..974767e1053 100644
--- a/kitsune/sumo/static/sumo/scss/components/_card.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_card.scss
@@ -12,7 +12,7 @@
 // .elevation-03 - large shadow
 // .feature-padding.elevation-01 - Increase the amount of padding, for use with larger cards
 //
-/* Markup: #{$styleguide-path}/card.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/card.njk
 //
 // Weight: 5
 //
@@ -20,15 +20,144 @@
 
 .card {
   @include c.bottomless;
-  padding: p.remify(20px);
+  position: relative;
+  padding: p.remify(24px);
   border-radius: var(--global-radius);
 
   &.feature-padding {
     padding: p.remify(40px);
   }
+
+  &--article {
+    @include c.elevation-01;
+    display: flex;
+    flex-direction: column;
+
+    .card--title {
+      padding-bottom: 32px;
+      margin-bottom: 32px;
+      border-bottom: 1px solid var(--color-heading);
+    }
+
+    .card--desc {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      margin-bottom: 32px;
+    }
+  }
+
+  &--product {
+    @include c.elevation-01;
+    flex-direction: column;
+  }
+
+  &--callout {
+    @include c.elevation-01;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--color-callout-bg);
+    // margin-top: 50px;
+    // margin-bottom: 50px;
+
+    .card--details {
+      text-align: center;
+      flex: 1 1 100%;
+    }
+
+    .card--title {
+      @include c.text-display-sm;
+      font-family: var(--heading-font-family);
+    }
+
+    .card--desc {
+      @include c.text-body-md;
+      margin-bottom: 16px;
+    }
+  }
+
+  &--feature-img {
+    width: 50%;
+    margin-top: -60px;
+    margin-bottom: 20px;
+    margin-right: -20px;
+  }
+
+  // &--details {}
+
+  &--icon {
+    margin-bottom: 10px;
+    width: 48px;
+  }
+
+  &--icon-sm {
+    margin-bottom: 24px;
+    width: 24px;
+  }
+
+  &--title {
+    @include c.text-body-lg();
+    font-family: var(--base-font-family);
+
+    > a {
+      text-decoration: none;
+      color: var(--color-heading);
+
+      &:hover {
+        text-decoration: underline;
+        color: var(--color-heading);
+      }
+    }
+  }
+
+  &--desc {
+    @include c.text-body-sm();
+    margin-bottom: 0;
+    color: var(--color-text);
+  }
+
+  @media #{p.$mq-md} {
+    &--callout {
+      flex-direction: row;
+
+      .card--desc {
+        margin-top: 32px;
+        margin-bottom: 32px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &--feature-img {
+      width: 50%;
+      max-width: 450px;
+      margin-right: 0;
+      margin-left: 60px;
+      margin-top: -80px;
+      margin-bottom: -60px;
+    }
+  }
+
+  @media #{p.$mq-lg} {
+    &--product {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &--icon {
+      width: 72px;
+      margin-right: 20px;
+      margin-bottom: 0;
+    }
+  }
 }
 
-.elevation-00 { @include elevation-00;}
-.elevation-01 { @include elevation-01;}
-.elevation-02 { @include elevation-02;}
-.elevation-03 { @include elevation-03;}
+.elevation-00 { @include c.elevation-00;}
+.elevation-01 { @include c.elevation-01;}
+.elevation-02 { @include c.elevation-02;}
+.elevation-03 { @include c.elevation-03;}
diff --git a/kitsune/sumo/static/sumo/scss/components/_index.scss b/kitsune/sumo/static/sumo/scss/components/_index.scss
index 98f2325547c..cbf56203b71 100644
--- a/kitsune/sumo/static/sumo/scss/components/_index.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_index.scss
@@ -1,3 +1,4 @@
 @forward 'social-links';
 @forward 'sidebar-nav';
 @forward 'card';
+@forward 'card-grid';
diff --git a/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss b/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
index 2af53e87442..63a5a2e6d93 100644
--- a/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
@@ -1,14 +1,14 @@
+@use '../config' as c;
+@use '../protocol' as p;
+
 // Sidebar navigation
 //
-/* Markup: #{c.$styleguide-path}/sidebar-nav.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/sidebar-nav.njk
 //
 // Weight: 3
 //
 // Style guide: nav.sidebar
 
-@use '../config' as c;
-@use '../protocol' as p;
-
 .sidebar-nav {
 
   &--list,
diff --git a/kitsune/sumo/static/sumo/scss/components/_social-links.scss b/kitsune/sumo/static/sumo/scss/components/_social-links.scss
index 58796af3111..188f9acca79 100644
--- a/kitsune/sumo/static/sumo/scss/components/_social-links.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_social-links.scss
@@ -1,16 +1,18 @@
+@use '../config' as c;
+
 // Social Links
 //
 // This component is designed to display HTML content over an image, typically
 // at the beginning of a document. This component can be used on its own, or
 // as an item within a carousel.
 //
-/* Markup: #{config.$styleguide-path}/social-links.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/social-links.njk
 //
 // Weight: 6
 //
 // Style guide: social-links
 
-@use '../config';
+
 
 .social-links {
   margin: 2em 0 0 0;
@@ -21,7 +23,7 @@
     margin-right: 20px;
 
     a {
-      @include config.image-replaced();
+      @include c.image-replaced();
       display: block;
       background-image: url('/static/sumo/img/social-icon-sprite.svg');
 
diff --git a/kitsune/sumo/static/sumo/scss/config/_grid.scss b/kitsune/sumo/static/sumo/scss/config/_grid.scss
index c0581249d16..c5e8bdcea09 100644
--- a/kitsune/sumo/static/sumo/scss/config/_grid.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_grid.scss
@@ -1,5 +1,6 @@
-@use './protocol' as p;
-@use '_variables' as *;
+@use '../protocol' as p;
+@use './variables' as c;
+
 
 // Grid
 //
@@ -35,7 +36,7 @@
 //}
 //```
 //
-/* Markup: #{$styleguide-path}/grid.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/grid.njk
 //
 // Weight: 2
 //
@@ -43,6 +44,7 @@
 
 // Grid columns
 
+
 $gutter-width: 32px !default;
 $max-container-width: 1312px !default;
 
diff --git a/kitsune/sumo/static/sumo/scss/config/_index.scss b/kitsune/sumo/static/sumo/scss/config/_index.scss
index 4581d964ced..5c07f3a3164 100644
--- a/kitsune/sumo/static/sumo/scss/config/_index.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_index.scss
@@ -4,3 +4,4 @@
 @forward 'elevation';
 @forward 'color-swatches';
 @forward 'project-theme';
+@forward 'typography-mixins'
diff --git a/kitsune/sumo/static/sumo/scss/config/_mixins.scss b/kitsune/sumo/static/sumo/scss/config/_mixins.scss
index 66cf6c1f003..fa7020669ad 100644
--- a/kitsune/sumo/static/sumo/scss/config/_mixins.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_mixins.scss
@@ -1,5 +1,5 @@
 @use './color-swatches';
-@use './protocol' as p;
+@use '../protocol' as p;
 @use 'sass:map';
 
 // Think in pixels, but use rems. Takes a whole number.
diff --git a/kitsune/sumo/static/sumo/scss/config/_project-theme.scss b/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
index 0297b179e15..3e31facf08c 100644
--- a/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
@@ -10,6 +10,7 @@
   --color-success: var(--color-green-06);
   --color-warning: var(--color-yellow-03);
   --color-error: var(--color-red-05);
+  --color-shade-bg: var(--color-light-gray-02);
 
 
   --color-inverse-bg: var(--color-ink-08);
@@ -22,25 +23,21 @@
   --color-link-active-bg: var(--color-marketing-gray-02);
   --color-link-inverse-visited: var(--color-purple-02);
   --color-link-inverse-active-bg: #{rgba(c.color('marketing-gray', '02'), 0.2)};
+  --color-border: var(--color-marketing-gray-02);
+  --color-callout-bg: var(--color-marketing-gray-02);
 
   --base-font-family: Inter, X-LocaleSpecific, sans-serif;
   --base-font-size: 1rem; // keep this at 1rem for rem-calc to work correctly.
-  --heading-font-family: Metropolis, Inter, X-LocaleSpecific, sans-serif;
-  --heading-alt-font-family: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif;
-
-
+  --heading-font-family: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif;
+  --heading-alt-font-family: Metropolis, Inter, X-LocaleSpecific, sans-serif;
 
   --global-margin: 1rem;
   --global-radius: 4px;
 
-  // buttons
-  --button-bg: var(--secondary-color);
-  --button-border: var(--global-radius);
-  --button-radius: var(--global-radius);
-  --button-color: var(--color-inverse);
-  --button-font-size: 1em;
-  --button-font-family: var(--base-font-family);
-
   // form fields
   --focus-shadow: 0 0 0 4px rgba(0, 96, 223, 0.3), 0 0 0 2px rgb(0, 138, 234);
 }
+
+.shade-bg {
+  background: var(--color-shade-bg);
+}
diff --git a/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss b/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss
new file mode 100644
index 00000000000..1f26c68e8e8
--- /dev/null
+++ b/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss
@@ -0,0 +1,107 @@
+@use '../protocol' as p;
+@use './mixins' as c;
+
+
+$text-body-line-height: 1.5 !default;
+$text-display-line-height: 1.1 !default;
+
+// display copy: headings, blockquotes, other fancy stuff
+@mixin text-display-xxl { // Use this one sparingly.
+  @include p.font-size(48px);
+  line-height: $text-display-line-height;
+
+  @media #{p.$mq-md} {
+    @include p.font-size(64px);
+    @include c.line-height(72px);
+  }
+}
+
+@mixin text-display-xl {
+  @include p.font-size(40px);
+  line-height: $text-display-line-height;
+
+  @media #{p.$mq-md} {
+    @include p.font-size(56px);
+    @include c.line-height(64px);
+  }
+}
+
+@mixin text-display-lg {
+  @include p.font-size(32px);
+  line-height: $text-display-line-height;
+
+  @media #{p.$mq-md} {
+    @include p.font-size(48px);
+    @include c.line-height(56px);
+  }
+}
+
+@mixin text-display-md {
+  @include p.font-size(24px);
+  font-family: var(--base-font-family);
+  line-height: $text-display-line-height;
+
+  @media #{p.$mq-md} {
+    @include p.font-size(40px);
+    @include c.line-height(44px);
+  }
+}
+
+@mixin text-display-sm {
+  @include p.font-size(21px);
+  font-family: var(--base-font-family);
+
+  @media #{p.$mq-md} {
+    @include p.font-size(32px);
+    @include c.line-height(36px);
+  }
+}
+
+@mixin text-display-xs {
+  @include p.font-size(18px);
+  font-family: var(--base-font-family);
+  line-height: $text-display-line-height;
+
+  @media #{p.$mq-md} {
+    @include p.font-size(24px);
+    @include c.line-height(28px);
+  }
+}
+
+@mixin text-display-xxs {
+  @include p.font-size(20px);
+  @include c.line-height(24px);
+  font-family: var(--base-font-family);
+}
+
+@mixin text-display-xxxs {
+  @include p.font-size(16px);
+  @include c.line-height(20px);
+  font-family: var(--base-font-family);
+}
+
+// body copy
+@mixin text-body-lg {
+  @include p.font-size(18px);
+  line-height: $text-body-line-height;
+}
+
+@mixin text-body-md {
+  @include p.font-size(16px);
+  line-height: $text-body-line-height;
+}
+
+@mixin text-body-sm {
+  @include p.font-size(14px);
+  line-height: $text-body-line-height;
+}
+
+@mixin text-body-xs {
+  @include p.font-size(12px);
+  line-height: $text-body-line-height;
+}
+
+@mixin text-body-cta {
+  @include p.font-size(16px);
+  line-height: $text-body-line-height;
+}
diff --git a/kitsune/sumo/static/sumo/scss/config/_variables.scss b/kitsune/sumo/static/sumo/scss/config/_variables.scss
index 75510b4e259..e69de29bb2d 100644
--- a/kitsune/sumo/static/sumo/scss/config/_variables.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_variables.scss
@@ -1 +0,0 @@
-$styleguide_path: "../../../../../../styleguide/styleguide-examples";
diff --git a/kitsune/sumo/static/sumo/scss/examples/_examples.scss b/kitsune/sumo/static/sumo/scss/examples/_examples.scss
index 0960e134712..7905cc2c5d3 100644
--- a/kitsune/sumo/static/sumo/scss/examples/_examples.scss
+++ b/kitsune/sumo/static/sumo/scss/examples/_examples.scss
@@ -5,7 +5,7 @@
 // This is an example homepage design, complied to display several components
 // working together.
 //
-/* Markup: #{c.$styleguide-path}/example-home.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/example-home.njk
 //
 // Weight: 50
 //
diff --git a/kitsune/sumo/static/sumo/scss/layout/_containers.scss b/kitsune/sumo/static/sumo/scss/layout/_containers.scss
index 1facea4bf42..ba1b8b941ec 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_containers.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_containers.scss
@@ -1,23 +1,30 @@
+@use '../protocol' as p;
+@use '../config' as c;
+
 // Containers
 //
 // This container provides default horizontal margins for the page and a max-width of 1400px.
 //
-// .narrow - 1000px max max-width
-//
-/* Markup: #{$styleguide-path}/containers.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/containers.njk
 //
 // Weight: 20
 //
 // Style guide: containers
 
-@use '../protocol' as p;
-
-.container {
-  margin: 0 auto;
-  padding: 0 20px;
-  max-width: p.remify(1440px);
+.mzp-l-content {
+  @include c.container;
 
   &.narrow {
-    max-width: p.remify(1000px);
+    max-width: 1000px;
+  }
+}
+
+.sumo-page-section {
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  @media #{p.$mq-md} {
+    padding-top: 40px;
+    padding-bottom: 40px;
   }
 }
diff --git a/kitsune/sumo/static/sumo/scss/layout/_footer.scss b/kitsune/sumo/static/sumo/scss/layout/_footer.scss
index 9dc4804b2d2..c264392aac0 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_footer.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_footer.scss
@@ -6,12 +6,13 @@
 // The site footer is a combination of this styleguide's [customized grid](section-grid.html)
 // and [Protocol's footer component.](https://protocol.mozilla.org/patterns/organisms/footer.html)
 //
-/* Markup: #{c.$styleguide-path}/footer.njk */
+// Markup: ../../../../../../styleguide/styleguide-examples/footer.njk
 //
 // Weight: 21
 //
 // Style guide: footer
 
+
 .mzp-c-footer {
   a:link,
   a:visited,
diff --git a/kitsune/sumo/static/sumo/scss/layout/_nav.scss b/kitsune/sumo/static/sumo/scss/layout/_nav.scss
index f2b7a776a21..b94b6785186 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_nav.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_nav.scss
@@ -1,3 +1,6 @@
+@use '../config' as c;
+@use '../protocol' as p;
+
 // Navigation
 //
 // Basic site navigation
@@ -13,15 +16,12 @@
 //
 // Style guide: nav
 
-@use '../config' as c;
-@use '../protocol' as p;
 
-.sumo-nav {
 
+.sumo-nav {
   &--container {
     @include c.container;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 
@@ -52,11 +52,7 @@
 
   }
 
-  &--list-wrap {
-    flex: 1 1 100%;
-  }
-
-  &--item-right {
+  &--list-wrap-right {
     margin-left: auto;
   }
 
@@ -65,15 +61,34 @@
       padding-right: 0;
 
       .avatar {
-        display: none;
+        display: block;
+        margin-top: -6px;
+        margin-bottom: -6px;
+        margin-left: 20px;
+        width: 36px;
+      }
+    }
+  }
+
+  &--avatar-button {
+    display: flex;
+    margin-left: 12px;
+
+    .avatar {
+      width: 32px;
+    }
+
+    @media #{p.$mq-md} {
+      display: none;
+    }
+  }
+
+  &--mobile-search-form {
+
 
-        @media #{p.$mq-md} {
-          display: block;
-          margin-top: -6px;
-          margin-bottom: -6px;
-          margin-left: 20px;
-          width: 36px;
-        }
+    @media #{p.$mq-md} {
+      .js .mzp-c-navigation-l-content & {
+        display: none;
       }
     }
   }
@@ -123,9 +138,9 @@
     }
 
     &-thirds { // This is non-standard.
-      @include c.col;
       @media #{p.$mq-md} {
-        width: c.col-width(2, 6);
+        @include c.col(2, 6);
+        // width: c.col-width(2, 6);
       }
     }
 
@@ -135,11 +150,13 @@
   }
 
   &--button-row {
-    @include c.col; // adds correct margins
     display: flex;
     justify-content: flex-end;
     padding-top: 12px;
-    width: auto;
+
+    @media #{p.$mq-md} {
+      @include c.col; // adds correct margins
+    }
   }
 
   &--sublist {
@@ -165,6 +182,121 @@
       }
     }
   }
+  &--search-button,
+  &--toggle-button {
+    appearance: none;
+    margin-left: 10px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 4px;
+    background-image: url('#{p.$image-path}/icons/menu.svg');
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
+    font: 0/0 a;
+    color: transparent;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &.mzp-is-active  {
+      background-color: var(--color-link-active-bg);
+    }
+
+    @media #{p.$mq-md} {
+      display: none;
+    }
+  }
+
+  &--search-button {
+    margin-left: auto;
+    background-image: url('#{p.$image-path}/icons/search.svg');
+  }
+
+  .simple-search-form {
+    margin-right: 20px;
+  }
+
+  body.scroll-header:not(.lock-body) & {
+    position: fixed;
+    top: -100px;
+    z-index: 97;
+    width: 100%;
+    border: 1px solid var(--color-border);
+    transform: translateY(100px);
+    transition: transform 0.3s;
+
+    .sumo-nav--lang-link {
+      display: none;
+    }
+
+    .sumo-nav--item-lang {
+      margin-left: 0;
+    }
+
+    .sumo-nav--list-wrap-right .sumo-nav--list {
+      padding-top: 0;
+    }
+
+    .simple-search-form {
+      display: block;
+    }
+    .search-button {
+      top: 2px;
+      right: 4px;
+    }
+  }
+
+  .simple-search-form {
+    display: none;
+  }
+
+  .sumo-nav--mobile-search-form {
+    .simple-search-form {
+      margin: 32px 0 0 0;
+      padding: 0 0 32px 0;
+    }
+
+    .searchbox {
+      width: 100%;
+    }
+  }
+
+  .firefox-download-button {
+    margin-right: 24px;
+    margin-left: 8px;
+  }
+
+  .searchbox { // #TODO - remove most of this after old CSS is removed.
+    padding: 0 p.$spacing-sm;
+    width: 300px;
+    height: 36px;
+    box-shadow: none !important;
+    border: 2px solid var(--field-border-color-default) !important;
+    border-radius: var(--global-radius) !important;
+    background-color: var(--color-white);
+    color:#0c0c0d;
+    outline:0;
+    transition-duration:150ms;
+    transition-property:border-color;
+    @include p.font-size(16px);
+
+    &:hover {
+      border-color: var(--field-border-color-hover);
+    }
+
+    &:focus,
+    .has-warning &,
+    .has-error &,
+    .has-success & {
+      border-color: transparent !important;
+    }
+
+    &:focus {
+      box-shadow: var(--focus-shadow)  !important;
+    }
+  }
 
 
   // protocol overrides
@@ -207,3 +339,36 @@
     top: 74px;
   }
 }
+
+.js .mzp-c-navigation-l-content .mzp-c-navigation-items.mzp-is-open {
+  width: 100%;
+}
+
+// accessibility tab links
+
+.sumo-nav-access {
+  position: absolute;
+  top: -20em;
+  z-index: 1001;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  background: #fff;
+
+  a {
+    position: absolute;
+    right: 0;
+    left: 0;
+    margin: 0;
+    padding: 12px 10px;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.9);
+    font-weight: bold;
+    text-align: center;
+
+    &:focus {
+      top: 20em;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/kitsune/sumo/static/sumo/scss/screen.scss b/kitsune/sumo/static/sumo/scss/screen.scss
index 8887ec66673..5914a0b0c72 100644
--- a/kitsune/sumo/static/sumo/scss/screen.scss
+++ b/kitsune/sumo/static/sumo/scss/screen.scss
@@ -2,6 +2,6 @@
 
 @use 'config';
 @use 'base';
-//@use 'layout';
-//@use 'components';
-//@use 'examples/examples'; // styleguide-only comment files
+@use 'layout';
+@use 'components';
+@use 'examples/examples'; // styleguide-only comment files
diff --git a/package-lock.json b/package-lock.json
index a6bea717148..505aa1b1156 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
     "@babel/code-frame": {
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
-      "integrity": "sha1-vAeC9tafe31JUxIZaZuYj2aaj50=",
+      "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
       "dev": true,
       "requires": {
         "@babel/highlight": "^7.0.0"
@@ -159,7 +159,7 @@
     "@babel/highlight": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
-      "integrity": "sha1-VtETEr2SSPphlZHQJHK+boyzJUA=",
+      "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.0.0",
@@ -324,19 +324,19 @@
     "@blakeembrey/deque": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@blakeembrey/deque/-/deque-1.0.5.tgz",
-      "integrity": "sha1-9PoX/F7hgxfsAadj01V4LHs5Xq8=",
+      "integrity": "sha512-6xnwtvp9DY1EINIKdTfvfeAtCYw4OqBZJhtiqkT3ivjnEfa25VQ3TsKvaFfKm8MyGIEfE95qLe+bNEt3nB0Ylg==",
       "dev": true
     },
     "@mozilla-protocol/core": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-10.0.1.tgz",
-      "integrity": "sha1-Q4aWdrIDmD+KjKu/PVUogUXnsew=",
+      "integrity": "sha512-sUvdRyaWhCsLl4o7kDj6hIH83YNcDbIGsrLjaUdST/1frVv+Clg0CbBW6R+b3fsRhMLHFoAXXhA2I6U88yOHNg==",
       "dev": true
     },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -346,19 +346,19 @@
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-      "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha1-KGLz9Yqaf3w+eNefEw3U1xwlwqc=",
+      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
       "dev": true
     },
     "@types/glob": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-      "integrity": "sha1-qlmhxuP7xCHgfM0xqUTDDrpSFXU=",
+      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
       "dev": true,
       "requires": {
         "@types/events": "*",
@@ -369,7 +369,7 @@
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha1-PcoOPzOyAPx9ETnAzZbBJoyt/Z0=",
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
       "dev": true
     },
     "@types/node": {
@@ -381,13 +381,13 @@
     "@types/unist": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
-      "integrity": "sha1-nAiGeYdvN061mD8VDUeHqm+zLX4=",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
       "dev": true
     },
     "@types/vfile": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz",
-      "integrity": "sha1-GcGM0jLfEc5vpq2AJZvIbDZrCbk=",
+      "integrity": "sha512-b3nLFGaGkJ9rzOcuXRfHkZMdjsawuDD0ENL9fzTophtBg8FJHSGbH7daXkEpcwy3v7Xol3pAvsmlYyFhR4pqJw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -431,7 +431,7 @@
     "a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha1-dba2qnJZi0l6El56J3DxT0yKH6c=",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
       "dev": true
     },
     "abab": {
@@ -710,7 +710,7 @@
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha1-bIw/uCfdQ+45GPJ7gngqt2WKb9k=",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
       "dev": true
     },
     "astw": {
@@ -1117,8 +1117,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -1161,8 +1160,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -1173,8 +1171,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -1291,8 +1288,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -1304,7 +1300,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -1334,7 +1329,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -1353,7 +1347,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -1447,7 +1440,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -1533,8 +1525,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -1570,7 +1561,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -1590,7 +1580,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -1634,14 +1623,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -1988,7 +1975,7 @@
         "core-js": {
           "version": "2.6.10",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz",
-          "integrity": "sha1-iluDkfjMcBPacDQRzltYVwYwDX8=",
+          "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==",
           "dev": true
         }
       }
@@ -2088,7 +2075,7 @@
     "bail": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.4.tgz",
-      "integrity": "sha1-cYG2bVCKowVdP2wT8KDHIGQd3ps=",
+      "integrity": "sha512-S8vuDB4w6YpRhICUDET3guPlQpaJl7od94tpZ0Fvnyp+MKW/HyDTcRDck+29C9g+d/qQHnddRH3+94kZdrW0Ww==",
       "dev": true
     },
     "balanced-match": {
@@ -2596,7 +2583,7 @@
     "ccount": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.4.tgz",
-      "integrity": "sha1-nPLeSUyoQGCiqNKFTt1t+wRF84Y=",
+      "integrity": "sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==",
       "dev": true
     },
     "center-align": {
@@ -2642,19 +2629,19 @@
     "character-entities": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.3.tgz",
-      "integrity": "sha1-u+1KUv5++YzHE8bYDZ+qJpFtVOY=",
+      "integrity": "sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==",
       "dev": true
     },
     "character-entities-html4": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.3.tgz",
-      "integrity": "sha1-XObgFhjkcEisIvNPfznbXG/Wee8=",
+      "integrity": "sha512-SwnyZ7jQBCRHELk9zf2CN5AnGEc2nA+uKMZLHvcqhpPprjkYhiLn0DywMHgN5ttFZuITMATbh68M6VIVKwJbcg==",
       "dev": true
     },
     "character-entities-legacy": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz",
-      "integrity": "sha1-PHKZkdkpPaDt5t3crx8s4QCe6LQ=",
+      "integrity": "sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww==",
       "dev": true
     },
     "character-parser": {
@@ -2666,7 +2653,7 @@
     "character-reference-invalid": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz",
-      "integrity": "sha1-Fkf09yZjjT6kp1DPXRl1wceRmoU=",
+      "integrity": "sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==",
       "dev": true
     },
     "chokidar": {
@@ -2757,7 +2744,7 @@
     "clone-regexp": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-      "integrity": "sha1-fWXgCIXNh5ZAXDWnN+eoa3Qp428=",
+      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
       "dev": true,
       "requires": {
         "is-regexp": "^2.0.0"
@@ -2776,7 +2763,7 @@
     "collapse-white-space": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.5.tgz",
-      "integrity": "sha1-wklbaZqx7TgNKaEJHgEGPnXbvjo=",
+      "integrity": "sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==",
       "dev": true
     },
     "collection-visit": {
@@ -2792,7 +2779,7 @@
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "dev": true,
       "requires": {
         "color-name": "1.1.3"
@@ -2977,7 +2964,7 @@
     "cosmiconfig": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-      "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "dev": true,
       "requires": {
         "import-fresh": "^2.0.0",
@@ -3318,8 +3305,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3436,8 +3422,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3479,7 +3464,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3498,7 +3482,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3592,7 +3575,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3678,8 +3660,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3715,7 +3696,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3779,14 +3759,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -4006,7 +3984,7 @@
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
       "dev": true,
       "requires": {
         "nice-try": "^1.0.4",
@@ -4019,7 +3997,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -4068,7 +4046,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
     "cssmin": {
@@ -4333,7 +4311,7 @@
     "dependency-graph": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.8.0.tgz",
-      "integrity": "sha1-LaLTXthS7MJKXWwXeIulfDcIdVs=",
+      "integrity": "sha512-DCvzSq2UiMsuLnj/9AL484ummEgLtZIcRS7YvtO38QnpX3vqh9nJ8P+zhu8Ja+SmLrBHO2iDbva20jq38qvBkQ==",
       "dev": true
     },
     "deps-sort": {
@@ -4418,7 +4396,7 @@
     "dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
-      "integrity": "sha1-+gnwaUFTyJGLGLoN6vrpR2n8UMQ=",
+      "integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
       "dev": true,
       "requires": {
         "path-type": "^3.0.0"
@@ -4483,13 +4461,13 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
     "domhandler": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha1-iAUJfpM9ZehVRvcm1g9euItE+AM=",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
       "dev": true,
       "requires": {
         "domelementtype": "1"
@@ -4498,7 +4476,7 @@
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha1-Vuo0HoNOBuZ0ivehyyXaZ+qfjCo=",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
       "dev": true,
       "requires": {
         "dom-serializer": "0",
@@ -4508,7 +4486,7 @@
     "dot-prop": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-      "integrity": "sha1-HxngwuGqDjJ5fEl5nyg3rGr2nFc=",
+      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
       "dev": true,
       "requires": {
         "is-obj": "^1.0.0"
@@ -4577,7 +4555,7 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc=",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
     "encoding": {
@@ -4591,7 +4569,7 @@
     "entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha1-vfpzUplmTfr9NFKe1PhSKidf6lY=",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
       "dev": true
     },
     "envify": {
@@ -4606,7 +4584,7 @@
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
-      "integrity": "sha1-RoTXF3mtOa8Xfj8AeZb3xnyFJhg=",
+      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -4719,7 +4697,7 @@
     "escodegen": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.12.0.tgz",
-      "integrity": "sha1-92Pa+ECvFyuzorbdchnA4X9/9UE=",
+      "integrity": "sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==",
       "dev": true,
       "requires": {
         "esprima": "^3.1.3",
@@ -4998,7 +4976,7 @@
     "execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha1-xiNqW7TfbW8V6I5/AXeYIWdJ3dg=",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
       "dev": true,
       "requires": {
         "cross-spawn": "^6.0.0",
@@ -5013,7 +4991,7 @@
     "execall": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-      "integrity": "sha1-FqBrX+UJnffQC+XZwG7s3tFmO0U=",
+      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
       "dev": true,
       "requires": {
         "clone-regexp": "^2.1.0"
@@ -5111,7 +5089,7 @@
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-      "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+      "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
       "dev": true,
       "requires": {
         "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -5414,7 +5392,7 @@
         "micromatch": {
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
           "dev": true,
           "requires": {
             "arr-diff": "^4.0.0",
@@ -5549,7 +5527,7 @@
     "flatted": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
-      "integrity": "sha1-aeV8qo8OrLwoHS4stFjUb9tEngg=",
+      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
       "dev": true
     },
     "flux": {
@@ -5621,7 +5599,7 @@
     "fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-      "integrity": "sha1-TxicRKoSO4lfcigE9V6iPq3DSOk=",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -5685,7 +5663,7 @@
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=",
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
       "dev": true
     },
     "get-stdin": {
@@ -5697,7 +5675,7 @@
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha1-wbJVV189wh1Zv8ec09K0axw6VLU=",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
       "dev": true,
       "requires": {
         "pump": "^3.0.0"
@@ -5777,7 +5755,7 @@
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha1-mXYFrSNF8n9RU5vqJldEISFcd4A=",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
       "dev": true,
       "requires": {
         "global-prefix": "^3.0.0"
@@ -5786,7 +5764,7 @@
     "global-prefix": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha1-/IX3MGTfafUEIfR/iD/luRO6m5c=",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
       "dev": true,
       "requires": {
         "ini": "^1.3.5",
@@ -5876,7 +5854,7 @@
     "gonzales-pe": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.4.tgz",
-      "integrity": "sha1-NWrjajEsRv4PECbdbLU5A5+FANI=",
+      "integrity": "sha512-v0Ts/8IsSbh9n1OJRnSfa7Nlxi4AkXIsWB6vPept8FDbL4bXn3FNuxjYtO/nmBGu7GDkL9MFeGebeSu6l55EPQ==",
       "dev": true,
       "requires": {
         "minimist": "1.1.x"
@@ -6094,13 +6072,13 @@
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
       "dev": true
     },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha1-vWedw/WYl7ajS7EHSchVu1OpOS8=",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
       "dev": true,
       "requires": {
         "domelementtype": "^1.3.1",
@@ -6177,7 +6155,7 @@
     "ignore": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-      "integrity": "sha1-hLez2+ZFUrbvDsqZ9nQ9vsbZet8=",
+      "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
       "dev": true
     },
     "image-size": {
@@ -6218,7 +6196,7 @@
     "import-lazy": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
-      "integrity": "sha1-6OtidIOgpD2jwD8+NVSL5csMwVM=",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
       "dev": true
     },
     "imurmurhash": {
@@ -6392,7 +6370,7 @@
     "is-alphabetical": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.3.tgz",
-      "integrity": "sha1-6wTMRyGaiJXYRQrORxWr/yJYofg=",
+      "integrity": "sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==",
       "dev": true
     },
     "is-alphanumeric": {
@@ -6404,7 +6382,7 @@
     "is-alphanumerical": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz",
-      "integrity": "sha1-V64hw3Qnez3v4CdMZApXBLj2ZXw=",
+      "integrity": "sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==",
       "dev": true,
       "requires": {
         "is-alphabetical": "^1.0.0",
@@ -6456,7 +6434,7 @@
     "is-decimal": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.3.tgz",
-      "integrity": "sha1-OBBodZudyAfYwNwL+64raOHaSLc=",
+      "integrity": "sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==",
       "dev": true
     },
     "is-descriptor": {
@@ -6540,7 +6518,7 @@
     "is-hexadecimal": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz",
-      "integrity": "sha1-6KQmppttMUcNOjOke7glzaAlBu4=",
+      "integrity": "sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==",
       "dev": true
     },
     "is-integer": {
@@ -6653,7 +6631,7 @@
     "is-regexp": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-      "integrity": "sha1-zXNKVoZOI7lWv058ZsOWpMCyLC0=",
+      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
       "dev": true
     },
     "is-resolvable": {
@@ -6677,7 +6655,7 @@
     "is-whitespace-character": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz",
-      "integrity": "sha1-s62VRtkW19P/p4IEvKDCa1Ylf6w=",
+      "integrity": "sha512-SNPgMLz9JzPccD3nPctcj8sZlX9DAMJSKH8bP7Z6bohCwuNgX8xbWr1eTAYXX9Vpi/aSn8Y1akL9WgM3t43YNQ==",
       "dev": true
     },
     "is-windows": {
@@ -6689,7 +6667,7 @@
     "is-word-character": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.3.tgz",
-      "integrity": "sha1-Jk0VVBy60LqDPTmSw05rQIc7CKo=",
+      "integrity": "sha512-0wfcrFgOOOBdgRNT9H33xe6Zi6yhX/uoc4U8NBZGeQQB0ctU1dnlNTyL9JM2646bHDTpsDm1Brb3VPoCIMrd/A==",
       "dev": true
     },
     "isarray": {
@@ -6866,7 +6844,7 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha1-u4Z8+zRQ5pEHwTHRxRS6s9yLyqk=",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
     "json-schema": {
@@ -6984,13 +6962,13 @@
     "known-css-properties": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.16.0.tgz",
-      "integrity": "sha1-PwWXIU2xGkYN93zUS8s54mO52mw=",
+      "integrity": "sha512-0g5vDDPvNnQk7WM/aE92dTDxXJoOE0biiIcUb3qkn/F6h/ZQZPlZIbE2XSXH2vFPfphkgCxuR2vH6HHnobEOaQ==",
       "dev": true
     },
     "kss": {
       "version": "3.0.0-beta.25",
       "resolved": "https://registry.npmjs.org/kss/-/kss-3.0.0-beta.25.tgz",
-      "integrity": "sha1-vzYHsh3AbVb8hN1md5yUG4PzNbk=",
+      "integrity": "sha512-jF8zh0HXUZfcysCyyKsftWyLAXkRh1Qt7ikd6WgmfKVhMRygq0x0YUFzTRB/SB57jSyk1DybbfopmFutY6Qo6Q==",
       "dev": true,
       "requires": {
         "bluebird": "^3.3.3",
@@ -7039,15 +7017,13 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
           "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
           "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "asap": {
           "version": "2.0.6",
@@ -7073,7 +7049,6 @@
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha1-WXn9PxTNUxVl5fot8av/8d+u5yk=",
           "dev": true,
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -7092,7 +7067,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -7125,7 +7099,6 @@
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
           "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
           "dev": true,
-          "optional": true,
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -7141,7 +7114,6 @@
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
               "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -7151,7 +7123,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -7161,7 +7132,6 @@
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
               "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -7171,7 +7141,6 @@
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
                   "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
                   "dev": true,
-                  "optional": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -7183,7 +7152,6 @@
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
               "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -7193,7 +7161,6 @@
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
                   "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
                   "dev": true,
-                  "optional": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -7205,7 +7172,6 @@
               "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
               "integrity": "sha1-Nm2CQN3kh8pRgjsaufB6EKeCUco=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-accessor-descriptor": "^0.1.6",
                 "is-data-descriptor": "^0.1.4",
@@ -7216,8 +7182,7 @@
               "version": "5.1.0",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
               "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0=",
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -7226,7 +7191,6 @@
           "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
           "integrity": "sha1-rQD+TcYSqSMuhxhxHcXLWrAoVUM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "array-unique": "^0.3.2",
             "define-property": "^1.0.0",
@@ -7243,7 +7207,6 @@
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
               "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -7253,7 +7216,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -7265,7 +7227,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
           "dev": true,
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -7278,7 +7239,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -7314,8 +7274,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -7358,8 +7317,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7370,8 +7328,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7488,8 +7445,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7501,7 +7457,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7531,7 +7486,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7550,7 +7504,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7644,7 +7597,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7730,8 +7682,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7767,7 +7718,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7787,7 +7737,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7831,14 +7780,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -7897,7 +7844,6 @@
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -7907,7 +7853,6 @@
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -7917,7 +7862,6 @@
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -7928,8 +7872,7 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
           "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
@@ -7952,7 +7895,6 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -7962,7 +7904,6 @@
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -7980,15 +7921,13 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
           "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "kind-of": {
           "version": "6.0.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
           "integrity": "sha1-ARRrNqYhjmTljzqNZt5df8b20FE=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "lcid": {
           "version": "2.0.0",
@@ -8004,7 +7943,6 @@
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -8040,7 +7978,7 @@
         "nunjucks": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.0.tgz",
-          "integrity": "sha1-U+lfQ8lVXoIuiVAAiiAbEALUmTM=",
+          "integrity": "sha512-YS/qEQ6N7qCnUdm6EoYRBfJUdWNT0PpKbbRnogV2XyXbBm2STIP1O6yrdZHgwMVK7fIYUx7i8+yatEixnXSB1w==",
           "dev": true,
           "requires": {
             "a-sync-waterfall": "^1.0.0",
@@ -8098,8 +8036,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "string_decoder": {
           "version": "1.1.1",
@@ -8210,7 +8147,7 @@
     "less": {
       "version": "3.10.3",
       "resolved": "https://registry.npmjs.org/less/-/less-3.10.3.tgz",
-      "integrity": "sha1-QXoJddXu7MUs/0vPo8CdNXgeZ5I=",
+      "integrity": "sha512-vz32vqfgmoxF1h3K4J+yKCtajH0PWmjkIFgbs5d78E/c/e+UQTnI+lWK+1eQRE95PXM2mC3rJlLSSP9VQHnaow==",
       "dev": true,
       "requires": {
         "clone": "^2.1.2",
@@ -8310,7 +8247,7 @@
     "linkify-it": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
-      "integrity": "sha1-47VGl+eL+RXHCjis14/QngBYsc8=",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
       "dev": true,
       "requires": {
         "uc.micro": "^1.0.1"
@@ -8337,7 +8274,7 @@
     "locutus": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/locutus/-/locutus-2.0.11.tgz",
-      "integrity": "sha1-g/hRCZcf091iBIKgQ4GRbkox1PA=",
+      "integrity": "sha512-C0q1L38lK5q1t+wE0KY21/9szrBHxye6o2z5EJzU+5B79tubNOC+nLAEzTTn1vPUGoUuehKh8kYKqiVUTWRyaQ==",
       "dev": true,
       "requires": {
         "es6-promise": "^4.2.5"
@@ -8687,7 +8624,7 @@
     "longest-streak": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.3.tgz",
-      "integrity": "sha1-Peej9H7hjpB03thXW1wJH10KQQU=",
+      "integrity": "sha512-9lz5IVdpwsKLMzQi0MQ+oD9EA0mIGcWYP7jXMTZVXP8D42PwuAk+M/HBFYQoxt1G5OR8m7aSIgb1UymfWGBWEw==",
       "dev": true
     },
     "loud-rejection": {
@@ -8713,7 +8650,7 @@
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha1-fVg6cwZDTAVf5HSw9FB45uG0uSo=",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"
@@ -8743,13 +8680,13 @@
     "markdown-escapes": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.3.tgz",
-      "integrity": "sha1-YVXhBBbvqvq2ZdRmzlmCFjdRlfU=",
+      "integrity": "sha512-XUi5HJhhV5R74k8/0H2oCbCiYf/u4cO/rX8tnGkRvrqhsr5BRNU6Mg0yt/8UIx1iIS8220BNJsDb7XnILhLepw==",
       "dev": true
     },
     "markdown-it": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
-      "integrity": "sha1-OG+YmY3BWjdyKqdyIIT0Agvdm1Q=",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -8762,7 +8699,7 @@
     "markdown-table": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz",
-      "integrity": "sha1-n8tpvP24cXv9A5jG7C2TA2743mA=",
+      "integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==",
       "dev": true
     },
     "marked": {
@@ -8779,7 +8716,7 @@
     "mathml-tag-names": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.1.tgz",
-      "integrity": "sha1-bf9myZ1V7Pc5ylPEkuYm8dEqM8w=",
+      "integrity": "sha512-pWB896KPGSGkp1XtyzRBftpTzwSOL0Gfk0wLvxt4f2mgzjY19o0LxJ3U25vNWTzsh7da+KTbuXQoQ3lOJZ8WHw==",
       "dev": true
     },
     "md5.js": {
@@ -8811,7 +8748,7 @@
     "mem": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha1-Rhr0l7xK4JYIzbLmDu+2m/90QXg=",
+      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
       "dev": true,
       "requires": {
         "map-age-cleaner": "^0.1.1",
@@ -8822,7 +8759,7 @@
     "merge2": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-      "integrity": "sha1-WzZu6DsvFYLEj4fkfPGpNSEDyoE=",
+      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
       "dev": true
     },
     "micromatch": {
@@ -8881,7 +8818,7 @@
     "mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha1-ftLCzMyvhNP/y3pptXcR/CCDQBs=",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
     "minimalistic-assert": {
@@ -8913,7 +8850,7 @@
     "minimist-options": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-      "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+      "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -9179,7 +9116,7 @@
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha1-ozeKdpbOfSI+iPybdkvX7xCJ42Y=",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
     "node-releases": {
@@ -9372,7 +9309,7 @@
     "onchange": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/onchange/-/onchange-6.1.0.tgz",
-      "integrity": "sha1-Yf4vHplLS177Z+ZQM+PVrCf+w0c=",
+      "integrity": "sha512-T0wvi3yzNd+Lut2ymJp2e6fTiob0TLrXnjqGaiK9MAFB8MYo/k/ZClx6ps7YhTtQ88dDm+hDHmtJXP1nJT5WNA==",
       "dev": true,
       "requires": {
         "@blakeembrey/deque": "^1.0.3",
@@ -9388,7 +9325,7 @@
         "anymatch": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-          "integrity": "sha1-xV7PAhheJGklk5kxDBc84xIzsUI=",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
           "dev": true,
           "requires": {
             "normalize-path": "^3.0.0",
@@ -9398,13 +9335,13 @@
         "binary-extensions": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-          "integrity": "sha1-I8DfFPaogHf1+YbA0WfsA8PVU3w=",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
           "dev": true
         },
         "braces": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
           "requires": {
             "fill-range": "^7.0.1"
@@ -9429,7 +9366,7 @@
         "fill-range": {
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
           "dev": true,
           "requires": {
             "to-regex-range": "^5.0.1"
@@ -9445,7 +9382,7 @@
         "glob-parent": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha1-X0wdHnSNMM1zrSlEs1d6gbCB6MI=",
+          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
@@ -9454,13 +9391,13 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "is-binary-path": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
           "dev": true,
           "requires": {
             "binary-extensions": "^2.0.0"
@@ -9484,7 +9421,7 @@
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
           "dev": true
         },
         "minimist": {
@@ -9502,7 +9439,7 @@
         "readdirp": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz",
-          "integrity": "sha1-wwwzNSsSyW37S4lUIaSf1alZODk=",
+          "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==",
           "dev": true,
           "requires": {
             "picomatch": "^2.0.4"
@@ -9511,7 +9448,7 @@
         "supports-color": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -9520,7 +9457,7 @@
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
           "requires": {
             "is-number": "^7.0.0"
@@ -9623,7 +9560,7 @@
     "p-is-promise": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-      "integrity": "sha1-kYzrrqJIpiz3/6uOO8qMX4gvxC4=",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
       "dev": true
     },
     "p-limit": {
@@ -9682,7 +9619,7 @@
     "parse-entities": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
-      "integrity": "sha1-wxvw9lO2ZhNU+Jc1WcuG3R1e31A=",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
       "dev": true,
       "requires": {
         "character-entities": "^1.0.0",
@@ -9823,7 +9760,7 @@
     "postcss-cli": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.3.tgz",
-      "integrity": "sha1-qe7D6c3kqqkBcFRrr3Bvivb47Ow=",
+      "integrity": "sha512-eieqJU+OR1OFc/lQqMsDmROTJpoMZFvoAQ+82utBQ8/8qGMTfH9bBSPsTdsagYA8uvNzxHw2I2cNSSJkLAGhvw==",
       "dev": true,
       "requires": {
         "chalk": "^2.1.0",
@@ -10145,8 +10082,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -10189,8 +10125,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -10201,8 +10136,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -10319,8 +10253,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -10332,7 +10265,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -10362,7 +10294,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -10381,7 +10312,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -10462,8 +10392,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -10475,7 +10404,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -10561,8 +10489,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -10598,7 +10525,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -10618,7 +10544,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -10662,21 +10587,19 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
-          "integrity": "sha1-ngm/cSs2CrkiXoEgSPcf3pyJZXs=",
+          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
           "dev": true
         },
         "glob-parent": {
@@ -10975,7 +10898,7 @@
     "postcss-html": {
       "version": "0.36.0",
       "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
-      "integrity": "sha1-tAkT+U6qzCRT/TChMnrW7h+IsgQ=",
+      "integrity": "sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==",
       "dev": true,
       "requires": {
         "htmlparser2": "^3.10.0"
@@ -10984,7 +10907,7 @@
     "postcss-jsx": {
       "version": "0.36.3",
       "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
-      "integrity": "sha1-yRET6uKTWhyU8ANTt4js6ayuP0Y=",
+      "integrity": "sha512-yV8Ndo6KzU8eho5mCn7LoLUGPkXrRXRjhMpX4AaYJ9wLJPv099xbtpbRQ8FrPnzVxb/cuMebbPR7LweSt+hTfA==",
       "dev": true,
       "requires": {
         "@babel/core": ">=7.2.2"
@@ -10993,7 +10916,7 @@
     "postcss-less": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
-      "integrity": "sha1-Np9YZCtZKO+Jj/vBpuk8lYMExa0=",
+      "integrity": "sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.14"
@@ -11061,7 +10984,7 @@
     "postcss-load-config": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha1-yE1pK3u3tB3c7ZTuYuirMbQXsAM=",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^5.0.0",
@@ -11071,7 +10994,7 @@
     "postcss-markdown": {
       "version": "0.36.0",
       "resolved": "https://registry.npmjs.org/postcss-markdown/-/postcss-markdown-0.36.0.tgz",
-      "integrity": "sha1-fyKEmuDj2xiCC3sNXngz8TpEdWA=",
+      "integrity": "sha512-rl7fs1r/LNSB2bWRhyZ+lM/0bwKv9fhl38/06gF6mKMo/NPnp55+K1dSTosSVjFZc0e1ppBlu+WT91ba0PMBfQ==",
       "dev": true,
       "requires": {
         "remark": "^10.0.1",
@@ -11087,7 +11010,7 @@
     "postcss-reporter": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
-      "integrity": "sha1-fAVRIAYKl8iDe05IIVZhqvt0JF8=",
+      "integrity": "sha512-LpmQjfRWyabc+fRygxZjpRxfhRf9u/fdlKf4VHG4TSPbV2XNsuISzYW1KL+1aQzx53CAppa1bKG4APIB/DOXXw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
@@ -11170,7 +11093,7 @@
     "postcss-safe-parser": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz",
-      "integrity": "sha1-h1bZ5MNv3OLHKwkbvIyhdqsfzeo=",
+      "integrity": "sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.0"
@@ -11307,7 +11230,7 @@
     "postcss-scss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz",
-      "integrity": "sha1-JIsKKK936nsysQEaug9zi9on3qE=",
+      "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.0"
@@ -11386,7 +11309,7 @@
     "postcss-sorting": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-4.1.0.tgz",
-      "integrity": "sha1-oQfwvzhSl3+mTkRCvDQMiNWqzbM=",
+      "integrity": "sha512-r4T2oQd1giURJdHQ/RMb72dKZCuLOdWx2B/XhXN1Y1ZdnwXsKH896Qz6vD4tFy9xSjpKNYhlZoJmWyhH/7JUQw==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.4",
@@ -11461,13 +11384,13 @@
     "postcss-syntax": {
       "version": "0.36.2",
       "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz",
-      "integrity": "sha1-8IV4x9lYNFdOVZOoLfv6ivrjtRw=",
+      "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==",
       "dev": true
     },
     "postcss-value-parser": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-      "integrity": "sha1-SCKCwJpCcG0fyaBptz9E7Ag5Hck=",
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
       "dev": true
     },
     "prelude-ls": {
@@ -11927,7 +11850,7 @@
     "remark": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark/-/remark-10.0.1.tgz",
-      "integrity": "sha1-MFgHbcQXgb9QXYl4wpFIX+R2Z98=",
+      "integrity": "sha512-E6lMuoLIy2TyiokHprMjcWNJ5UxfGQjaMSMhV+f4idM625UjjK4j798+gPs5mfjzDE6vL0oFKVeZM6gZVSVrzQ==",
       "dev": true,
       "requires": {
         "remark-parse": "^6.0.0",
@@ -11938,7 +11861,7 @@
     "remark-parse": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-6.0.3.tgz",
-      "integrity": "sha1-yZExBSgJ2kghCEE/h7Duf1IYCjo=",
+      "integrity": "sha512-QbDXWN4HfKTUC0hHa4teU463KclLAnwpn/FBn87j9cKYJWWawbiLgMfP2Q4XwhxxuuuOxHlw+pSN0OKuJwyVvg==",
       "dev": true,
       "requires": {
         "collapse-white-space": "^1.0.2",
@@ -11969,7 +11892,7 @@
     "remark-stringify": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-6.0.4.tgz",
-      "integrity": "sha1-FqwinU0VkySQGGY8e93yiq/E4Ig=",
+      "integrity": "sha512-eRWGdEPMVudijE/psbIDNcnJLRVx3xhfuEsTDGgH4GsFF91dVhw5nhmnBppafJ7+NWINW6C7ZwWbi30ImJzqWg==",
       "dev": true,
       "requires": {
         "ccount": "^1.0.0",
@@ -12474,7 +12397,7 @@
     "slice-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-      "integrity": "sha1-ys12k0YaY3pXiNkqfdT7oGjoFjY=",
+      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
@@ -12701,7 +12624,7 @@
     "specificity": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
-      "integrity": "sha1-qrXmRQEtsIuhguFRFlc40AiHsBk=",
+      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
       "dev": true
     },
     "split-string": {
@@ -12745,7 +12668,7 @@
     "state-toggle": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.2.tgz",
-      "integrity": "sha1-dek6YZRBFrSVnWZcjbLSQ2Mdbdw=",
+      "integrity": "sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==",
       "dev": true
     },
     "static-extend": {
@@ -12847,7 +12770,7 @@
     "stringify-entities": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz",
-      "integrity": "sha1-qYQX5Ucf0iez5F09sYYcEcr2aPc=",
+      "integrity": "sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==",
       "dev": true,
       "requires": {
         "character-entities-html4": "^1.0.0",
@@ -12897,7 +12820,7 @@
     "stylelint": {
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-11.1.1.tgz",
-      "integrity": "sha1-bbuzSANldqxrAz3f7bpyqHfB1rs=",
+      "integrity": "sha512-Vx6TAJsxG6qksiFvxQTKriQhp1CqUWdpTDITEkAjTR+l+8Af7qNlvrUDXfpuFJgXh/ayF8xdMSKE+SstcsPmMA==",
       "dev": true,
       "requires": {
         "autoprefixer": "^9.5.1",
@@ -13385,13 +13308,13 @@
     "stylelint-config-recommended": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-2.2.0.tgz",
-      "integrity": "sha1-RqsTnbSg5xUf1flK8VVRKIbJbT8=",
+      "integrity": "sha512-bZ+d4RiNEfmoR74KZtCKmsABdBJr4iXRiCso+6LtMJPw5rd/KnxUWTxht7TbafrTJK1YRjNgnN0iVZaJfc3xJA==",
       "dev": true
     },
     "stylelint-config-recommended-scss": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-3.3.0.tgz",
-      "integrity": "sha1-GQ9dCMJIFlYGKxFmy7WksXBRLJA=",
+      "integrity": "sha512-BvuuLYwoet8JutOP7K1a8YaiENN+0HQn390eDi0SWe1h7Uhx6O3GUQ6Ubgie9b/AmHX4Btmp+ZzVGbzriFTBcA==",
       "dev": true,
       "requires": {
         "stylelint-config-recommended": "^2.2.0"
@@ -13400,7 +13323,7 @@
     "stylelint-order": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-1.0.0.tgz",
-      "integrity": "sha1-CJ/D1c3359SsGIL2W2CyXbdQQTw=",
+      "integrity": "sha512-2IVM8GzeKIDQDTETNdmgX99ywGrb7OqFWkniCw7QLqS/xONPGMLY/xAQnvGcUS3oBSo8znsoshsWVBqPz2Kv4Q==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.10",
@@ -13521,7 +13444,7 @@
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
-      "integrity": "sha1-3dduASSyl9QL88yjHIsi7LQ7xh0=",
+      "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.2"
@@ -13601,7 +13524,7 @@
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha1-QwY30ki6d+B4iDlR+5qg7tfGP6I=",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
     "syntax-error": {
@@ -13616,7 +13539,7 @@
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
-      "integrity": "sha1-EpLRlQDOP4YFOwXw6Ofko7shB54=",
+      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
       "dev": true,
       "requires": {
         "ajv": "^6.10.2",
@@ -13634,7 +13557,7 @@
         "emoji-regex": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
           "dev": true
         },
         "is-fullwidth-code-point": {
@@ -13652,7 +13575,7 @@
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -13860,7 +13783,7 @@
     "tree-kill": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.1.tgz",
-      "integrity": "sha1-U5jzdOLykrncx7LnHjClw7tsdDo=",
+      "integrity": "sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==",
       "dev": true
     },
     "trim": {
@@ -13878,13 +13801,13 @@
     "trim-trailing-lines": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz",
-      "integrity": "sha1-0vHhUxYRUunwL6vGcPtAvsLqLjo=",
+      "integrity": "sha512-MUjYItdrqqj2zpcHFTkMa9WAv4JHTI6gnRQGPFLrt5L9a6tRMiDnIqYl8JBvu2d2Tc3lWJKQwlGCp0K8AvCM+Q==",
       "dev": true
     },
     "trough": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.4.tgz",
-      "integrity": "sha1-O1Kx8Tkk9GDD+/0N9ptYfby8di4=",
+      "integrity": "sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==",
       "dev": true
     },
     "try-resolve": {
@@ -13983,7 +13906,7 @@
     "uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw=",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
       "dev": true
     },
     "uglify-js": {
@@ -14067,7 +13990,7 @@
     "unherit": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.2.tgz",
-      "integrity": "sha1-FPHzlyU+5OyVzsFndi5334NnhEk=",
+      "integrity": "sha512-W3tMnpaMG7ZY6xe/moK04U9fBhi6wEiCYHUW5Mop/wQHf12+79EQGwxYejNdhEz2mkqkBlGwm7pxmgBKMVUj0w==",
       "dev": true,
       "requires": {
         "inherits": "^2.0.1",
@@ -14085,7 +14008,7 @@
     "unified": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/unified/-/unified-7.1.0.tgz",
-      "integrity": "sha1-UDLxwe4zZL0J2hLif91KdVPHvhM=",
+      "integrity": "sha512-lbk82UOIGuCEsZhPj8rNAkXSDXd6p0QLzIuSsCdxrqnqU56St4eyOB+AlXsVgVeRmetPTYydIuvFfpDIed8mqw==",
       "dev": true,
       "requires": {
         "@types/unist": "^2.0.0",
@@ -14128,7 +14051,7 @@
     "unist-util-is": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha1-2ehDgcJGjoJinkpb6dfQWi3TJM0=",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
       "dev": true
     },
     "unist-util-remove-position": {
@@ -14152,7 +14075,7 @@
     "unist-util-visit": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha1-RySqqEhububibX/zyGhZYNVgseM=",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
       "dev": true,
       "requires": {
         "unist-util-visit-parents": "^2.0.0"
@@ -14161,7 +14084,7 @@
     "unist-util-visit-parents": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-      "integrity": "sha1-JeQ+VTEhZvM0jK5nQ1iHgdESwek=",
+      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
       "dev": true,
       "requires": {
         "unist-util-is": "^3.0.0"
@@ -14170,7 +14093,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true
     },
     "unset-value": {
@@ -14228,13 +14151,13 @@
     "upath": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha1-j2bbzVWog6za5ECK+LA1pQRMGJQ=",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-      "integrity": "sha1-lMVA4f93KVbiKZUHwBCupsiDjrA=",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
       "dev": true,
       "requires": {
         "punycode": "^2.1.0"
@@ -14308,7 +14231,7 @@
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
-      "integrity": "sha1-4U3jezGm0ZT1aQ1n78Tn9vxqsw4=",
+      "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==",
       "dev": true
     },
     "validate-npm-package-license": {
@@ -14335,7 +14258,7 @@
     "vfile": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-3.0.1.tgz",
-      "integrity": "sha1-RzMdKr4ygkJPSku2rNIKRMQSGAM=",
+      "integrity": "sha512-y7Y3gH9BsUSdD4KzHsuMaCzRjglXN0W2EcMf0gpvu6+SbsGhMje7xDc8AEoeXy6mIwCKMI6BkjMsRjzQbhMEjQ==",
       "dev": true,
       "requires": {
         "is-buffer": "^2.0.0",
@@ -14347,7 +14270,7 @@
         "is-buffer": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha1-PlcvI8hBGlz9lVfISeNmXgspBiM=",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
           "dev": true
         },
         "unist-util-stringify-position": {
@@ -14401,7 +14324,7 @@
     "walk": {
       "version": "2.3.14",
       "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.14.tgz",
-      "integrity": "sha1-YOyGMc/SMnauHnNjzhHWJkUuHvM=",
+      "integrity": "sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==",
       "dev": true,
       "requires": {
         "foreachasync": "^3.0.0"
diff --git a/styleguide/styleguide-examples/card-grid.njk b/styleguide/styleguide-examples/card-grid.njk
new file mode 100644
index 00000000000..c624eb4b694
--- /dev/null
+++ b/styleguide/styleguide-examples/card-grid.njk
@@ -0,0 +1,181 @@
+
+  <div class="sumo-card-grid {{ modifier_class }}" style="--cg-count: 8;">
+    <div class="scroll-wrap">
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+    </div>
+  </div>