@charset "UTF-8";
@font-face {
  font-family: QuadSans;
  src: url(/fonts/EOT/QuadSans-Bold.eot);
  src: url(/fonts/EOT/QuadSans-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/WOFF2/QuadSans-Bold.woff2) format("woff2"), url(/fonts/WOFF/QuadSans-Bold.woff) format("woff"), url(/fonts/OTF/QuadSans-Bold.otf) format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: QuadSans;
  src: url(/fonts/EOT/QuadSans-BoldItalic.eot);
  src: url(/fonts/EOT/QuadSans-BoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/WOFF2/QuadSans-BoldItalic.woff2) format("woff2"), url(/fonts/WOFF/QuadSans-BoldItalic.woff) format("woff"), url(/fonts/OTF/QuadSans-BoldItalic.otf) format("truetype");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: QuadSans;
  src: url(/fonts/EOT/QuadSans-Book.eot);
  src: url(/fonts/EOT/QuadSans-Book.eot?#iefix) format("embedded-opentype"), url(/fonts/WOFF2/QuadSans-Book.woff2) format("woff2"), url(/fonts/WOFF/QuadSans-Book.woff) format("woff"), url(/fonts/OTF/QuadSans-Book.otf) format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: QuadSans;
  src: url(/fonts/EOT/QuadSans-BookItalic.eot);
  src: url(/fonts/EOT/QuadSans-BookItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/WOFF2/QuadSans-BookItalic.woff2) format("woff2"), url(/fonts/WOFF/QuadSans-BookItalic.woff) format("woff"), url(/fonts/OTF/QuadSans-BookItalic.otf) format("truetype");
  font-weight: 500;
  font-style: italic; }

:root {
  --font-family: QuadSans,Georgia,sans-serif;
  --font-weight: 500;
  --font-size-xxxs: 0.05rem;
  --font-size-xxs: 0.3rem;
  --font-size-xs: 0.35rem;
  --font-size-sm: 0.45rem;
  --font-size-md: 0.6rem;
  --font-size-lg: 0.8rem;
  --font-size-xl: 1rem; }

body > header {
  position: sticky;
  top: 0;
  z-index: 100; }

body > header {
  background: var(--color-dark-gray); }

@media (max-width: 768px) {
  body > header {
    position: static; } }

body > header .navbar {
  grid-template-columns: repeat(6, 1fr);
  background: inherit; }

@media (max-width: 768px) {
  body > header .navbar {
    grid-template-columns: repeat(2, 1fr);
    width: 100vw;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    position: fixed;
    grid-gap: 0;
    z-index: 100; } }

body > header .logo {
  grid-column: span 1; }

@media (max-width: 768px) {
  body > header .logo {
    width: 110px; } }

body > header .logo img {
  width: 100%;
  height: 100%;
  padding: .44rem .22rem; }

body > header .menu {
  grid-column: 3 / span 4;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--tile-width);
  align-items: center;
  justify-items: center; }

@media (max-width: 768px) {
  body > header .menu {
    grid-area: 2 / span 6;
    display: flex;
    justify-content: space-between; } }

.dropdown {
  font-size: var(--font-size-md);
  font-weight: 700;
  padding: var(--space-lg) 0; }
  .dropdown a:not(:has(> strong)) {
    color: var(--color-white); }
  .dropdown a:not(:has(> strong)):hover {
    color: var(--color-accent-light); }
  .dropdown input {
    display: none; }
  .dropdown label {
    display: inline-block;
    position: relative;
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center; }
  .dropdown label a svg {
    display: none;
    height: 22px;
    fill: var(--color-white);
    transition: fill var(--hover-transition); }
  .dropdown label a:hover svg {
    fill: var(--color-accent-light); }
  .dropdown nav {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background: var(--color-darker-gray);
    min-width: var(--column-width);
    max-width: min-content;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    padding: var(--space-md);
    font-weight: 500;
    margin-top: var(--space-lg);
    transition: opacity .2s ease-in-out,visibility .2s ease-in-out;
    font-size: var(--font-size-sm);
    z-index: 4; }
  .dropdown nav::before {
    content: "▴";
    color: var(--color-darker-gray);
    position: absolute;
    display: block;
    margin-top: -46px;
    font-size: 50px; }
  .dropdown nav > a:first-child {
    display: none; }
  .dropdown nav > a {
    display: block; }
  .dropdown nav > a:not(:first-child) + a {
    padding-top: var(--space-md); }

.dropdown:hover nav {
  visibility: visible;
  opacity: 1; }

@media (max-width: 768px) {
  .dropdown {
    font-weight: 500;
    font-size: var(--font-size-sm);
    padding: var(--space-xxs) 0; }
    .dropdown input:checked ~ nav {
      visibility: visible;
      opacity: 1; }
    .dropdown label a {
      pointer-events: none; }
    .dropdown label a svg {
      display: block; }
    .dropdown nav {
      position: fixed;
      left: 0;
      right: 0;
      min-width: 100vw;
      margin-top: var(--space-xxs); }
    .dropdown nav::before {
      content: ""; }
    .dropdown nav > a:first-child {
      display: block;
      color: var(--color-accent-light); }
    .dropdown nav > a:first-child + a {
      padding-top: var(--space-md); } }

body > header .languages {
  grid-column: -1; }

@media (max-width: 768px) {
  header .languages {
    grid-area: 1 / -1; } }

body > header .languages {
  align-content: center; }
  body > header .languages summary {
    text-transform: uppercase;
    background: var(--color-dark-gray);
    border: 2px solid var(--color-light-gray);
    padding: var(--space-xs); }
  body > header .languages div {
    position: absolute; }
  body > header .languages nav {
    background: var(--color-dark-gray);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--border-radius-default);
    margin-top: 5px;
    position: relative;
    z-index: 4; }
  body > header .languages nav > a {
    display: block;
    color: var(--color-white);
    padding: var(--space-xs); }
  body > header .languages nav > a:hover {
    background: var(--color-darker-gray); }

/* ip showcase */
body > header .ip-showcase > .container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr); }
  body > header .ip-showcase > .container h2:nth-of-type(1) {
    grid-area: 1 / 2; }
  body > header .ip-showcase > .container h2:nth-of-type(2) {
    grid-area: 1 / 4; }
  body > header .ip-showcase > .container li {
    list-style: none; }
  body > header .ip-showcase > .container li:nth-of-type(1) {
    grid-area: 2 / 2; }
  body > header .ip-showcase > .container li:nth-of-type(2) {
    grid-area: 2 / 3; }
  body > header .ip-showcase > .container li:nth-of-type(3) {
    grid-area: 2 / 4; }
  body > header .ip-showcase > .container li:nth-of-type(4) {
    grid-area: 2 / 5; }
  body > header .ip-showcase > .container .more {
    grid-area: span 2 / -2;
    place-content: center; }

@media (max-width: 768px) {
  body > header .ip-showcase {
    position: relative;
    /* XXX: this depends on the height of the navbar */
    top: calc(122px + 1.8vw);
    z-index: 99; }
    body > header .ip-showcase > .container .more {
      height: var(--font-size-md); } }

@media (max-width: 768px) {
  body > header .ip-showcase > .container {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--space-md);
    grid-row-gap: var(--space-xxxs); }
    body > header .ip-showcase > .container h2:nth-of-type(1) {
      grid-area: 1 / span 2; }
    body > header .ip-showcase > .container h2:nth-of-type(2) {
      grid-area: 3 / span 2; }
    body > header .ip-showcase > .container li:nth-of-type(1) {
      grid-area: 2 / 1; }
    body > header .ip-showcase > .container li:nth-of-type(2) {
      grid-area: 2 / 2; }
    body > header .ip-showcase > .container li:nth-of-type(3) {
      grid-area: 4 / 1; }
    body > header .ip-showcase > .container li:nth-of-type(4) {
      grid-area: 4 / 2; }
    body > header .ip-showcase > .container .more {
      grid-area: span 2; } }

body > header .ip-showcase {
  background: var(--color-darker-gray);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  font-size: var(--font-size-sm);
  line-height: 1; }

body > header .ip-showcase h2 {
  color: var(--color-accent-light);
  font-weight: var(--font-weight);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-4xs);
  margin-top: 0; }

body > header .ip-showcase li {
  font-weight: 700; }

body > header .ip-showcase .more {
  font-size: var(--font-size-xs); }

footer {
  padding: calc(var(--tile-width) / 2) 0;
  background: var(--color-darker-gray); }

@media (max-width: 768px) {
  footer .grid {
    display: block; }
  footer > * + *,
  footer .grid > * + * {
    margin-top: var(--space-md); } }

footer .address {
  grid-column: span 5; }

footer .address pre {
  font-family: var(--font-family); }

footer .grid:last-of-type {
  display: flex;
  justify-content: space-between; }

@media (max-width: 768px) {
  footer .grid:last-of-type {
    flex-direction: column-reverse; } }

footer .copyright {
  color: var(--color-light-gray);
  font-size: var(--font-size-xs); }

footer .copyright img {
  margin-bottom: -2px;
  margin-right: 4px; }

footer .socials a svg {
  fill: var(--color-light-gray); }

footer .socials a:hover svg {
  fill: var(--color-accent-light); }

.socials {
  display: flex;
  gap: .2rem; }
  .socials a svg {
    height: 20px;
    width: 20px;
    fill: var(--color-accent-light);
    transition: fill var(--hover-transition); }
  .socials a:hover svg {
    fill: var(--color-accent); }

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button {
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius-default);
  padding: var(--space-xs) var(--space-md);
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center; }

option {
  background-color: var(--color-dark-gray); }

.contact-form label.required::after {
  content: ' *'; }

.contact-form input[type=email],
.contact-form input[type=text],
.contact-form select,
.contact-form textarea {
  border: 2px solid var(--color-light-gray);
  border-radius: var(--border-radius-default);
  background-color: transparent;
  padding: var(--space-xs);
  color: var(--color-white);
  outline: 0;
  width: 100%;
  line-height: unset; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--color-accent) !important; }

.contact-form .form-error {
  display: none; }

.contact-form :invalid ~ .form-error,
.contact-form :required:placeholder-shown ~ .form-error {
  display: block; }

.contact-form .form-error {
  font-size: var(--font-size-xs);
  color: var(--color-accent); }

.contact-form .form-row {
  margin-bottom: var(--space-md); }

.contact-form .form-row-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-md); }

.council-section {
  display: grid;
  grid-template-columns: calc(var(--tile-width) + (var(--tile-width) * 6)) 1fr;
  column-gap: var(--tile-width);
  padding-bottom: var(--space-lg); }

@media (max-width: 768px) {
  .council-section {
    display: block; } }

.council-section img {
  object-fit: contain; }

.council-section h3 {
  margin-top: 0; }

.council-section p {
  margin-block-start: 0; }

.domain-tester {
  background: var(--color-darker-gray);
  padding: var(--tile-width) 0; }
  .domain-tester > h3, .domain-tester > p {
    margin-bottom: var(--space-xs); }
  .domain-tester > p {
    font-size: var(--font-size-xs); }
  .domain-tester form .searchbox {
    display: flex;
    width: 100%; }
  .domain-tester form .searchbox input {
    width: 100%;
    margin-right: var(--space-xxs); }
  .domain-tester form fieldset {
    display: block;
    margin-top: var(--space-md);
    border: 2px solid var(--color-dark-gray); }
    .domain-tester form fieldset legend {
      padding: 0;
      white-space: normal; }
    .domain-tester form fieldset .result__container {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: var(--space-xxs); }
      .domain-tester form fieldset .result__container span {
        display: block; }
    .domain-tester form fieldset .result__not-blocked {
      color: #74d99f;
      fill: #74d99f; }
    .domain-tester form fieldset .result__is-blocked {
      color: #e16364;
      fill: #e16364; }
      .domain-tester form fieldset .result__is-blocked .result__data,
      .domain-tester form fieldset .result__is-blocked .result__false {
        margin-top: var(--space-md);
        color: var(--color-white); }
      .domain-tester form fieldset .result__is-blocked p {
        margin: 0; }
      .domain-tester form fieldset .result__is-blocked .result__data ul {
        padding-left: 0;
        list-style: none; }
        .domain-tester form fieldset .result__is-blocked .result__data ul span::before {
          content: '▸ '; }
      .domain-tester form fieldset .result__is-blocked .result__false {
        font-size: var(--font-size-xs); }

@media (max-width: 768px) {
  .grid:has(> .home-section) {
    display: block; } }

main > .grid + .grid {
  margin-bottom: var(--inter-section-space); }

.home-section {
  grid-column: 2 / -1; }

.home-section h3 {
  margin-top: 0; }

.home-section.hero {
  grid-column: 2 / 5;
  margin-top: var(--inter-section-space); }

.home-section:has(> .metrics-showcase) {
  grid-column: 5;
  padding-top: var(--inter-section-space); }

@media (max-width: 768px) {
  .home-section {
    padding: var(--space-sm) 0; }
  .home-section.hero {
    margin-top: unset; }
  .home-section.hero h1 {
    margin-top: calc(var(--tile-width) / 2); }
  .home-section:has(> .metrics-showcase) {
    padding-top: unset; } }

.home-section.watch-setup-video {
  grid-column: 2 / 6;
  padding-top: 0; }

.home-section.title {
  grid-column: 1;
  margin-top: 0; }

.home-section.privacy,
.home-section.security,
.home-section.participate {
  columns: 2; }
  .home-section.privacy h3,
  .home-section.security h3,
  .home-section.participate h3 {
    break-before: column; }

@media (max-width: 768px) {
  .home-section {
    columns: 1 !important; }
    .home-section h3 {
      break-before: avoid !important; } }

.home-section.testimonials {
  grid-column: 1 / 7; }

.home-section.search {
  grid-column: 1 / 7;
  background: var(--color-darker-gray); }

.locations-map iframe {
  height: 60vh;
  min-height: 600px;
  margin-bottom: var(--space-md); }

.locations-map-legend {
  display: flex;
  width: 100%;
  justify-content: space-between; }
  .locations-map-legend div {
    text-align: center;
    flex: 1; }
  .locations-map-legend p {
    font-size: var(--font-size-xxs);
    line-height: 1.3; }

.metrics-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-darker-gray);
  border-radius: var(--border-radius-default);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .metrics-showcase div {
    padding: var(--space-sm); }
  .metrics-showcase p {
    margin: 0; }
  .metrics-showcase .label {
    color: var(--color-accent-light);
    font-weight: 700;
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-4xs);
    line-height: 1.3; }
  .metrics-showcase .value {
    font-weight: 700;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xxxs); }

/*
  adapt the common metrics-showcase widget to index usage
*/
.home-section > .metrics-showcase {
  display: block; }
  .home-section > .metrics-showcase div + div {
    border-top: 2px solid var(--color-darkest-gray); }

@media (min-width: 769px) {
  main.news {
    grid-column: 2 / 5; }
    main.news p img {
      width: 100%;
      height: 100%;
      object-fit: cover; } }

main.news article {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: var(--tile-width);
  align-items: center;
  margin-bottom: var(--space-xxl); }

main.news article:first-of-type {
  display: block; }
  main.news article:first-of-type figure {
    height: calc(var(--tile-width) * 9); }

@media (max-width: 768px) {
  main.news article {
    display: block; } }

main.news article div {
  grid-area: 1 / 1; }

main.news article.no-figure div {
  grid-area: 1 / span 2; }

main.news article figure {
  grid-area: 1 / 2;
  height: calc(var(--tile-width) * 6);
  margin-bottom: var(--space-xxs); }

@media (max-width: 769px) {
  main.news article figure {
    height: calc(var(--tile-width) * 4) !important; } }

main.news figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

main.news p img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

main.news article h2 {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xxs);
  margin-top: 0; }

main.news article .summary {
  color: var(--color-lighterish-gray);
  margin-bottom: var(--space-xxs);
  font-size: var(--font-size-xs); }

main.news header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-xxs); }
  main.news header time {
    color: var(--color-lighter-gray); }
  main.news header span {
    color: var(--color-lighter-gray);
    text-transform: capitalize;
    border-bottom: 3px solid var(--color-lighter-gray);
    display: inline-block;
    height: var(--font-size-md); }

aside.news-categories {
  grid-column: span 1;
  margin-top: calc(var(--font-size-lg) + var(--space-md));
  margin-bottom: var(--space-lg); }
  aside.news-categories ul {
    list-style: none;
    padding: 0; }
    aside.news-categories ul a {
      color: var(--color-lighter-gray); }
    aside.news-categories ul a[data-active] {
      font-weight: 700; }

@media (max-width: 768px) {
  aside.news-categories {
    display: none; } }

main.news figure.content-image {
  height: calc(var(--tile-width) * 9);
  margin-bottom: var(--space-md); }

main.news .pagination {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-xxl); }
  main.news .pagination li {
    display: inline-block; }
  main.news .pagination li.disabled {
    display: none; }
  main.news .pagination li.active {
    font-weight: 700; }
  main.news .pagination li + li {
    margin-right: var(--space-xs); }
  main.news .pagination li:has(> a[aria-label="Previous"]) a::after {
    content: '◂'; }
  main.news .pagination li:has(> a[aria-label="Next"]) a::after {
    content: '▸'; }
  main.news .pagination li:has(> a[aria-label="Previous"]) span,
  main.news .pagination li:has(> a[aria-label="Next"]) span {
    display: none; }
  main.news .pagination li:has(> a[aria-label="Last"]),
  main.news .pagination li:has(> a[aria-label="First"]) {
    display: none; }

.partners-widget {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--tile-width);
  border: 2px solid var(--color-normal-gray);
  border-radius: var(--border-radius-default);
  padding: var(--space-sm);
  background: var(--color-white);
  align-items: center; }

@media (max-width: 768px) {
  .partners-widget {
    grid-template-columns: repeat(2, 1fr); } }

.partners-widget img {
  width: 100%;
  padding: var(--space-sm);
  border-style: none; }

.pehr-section img {
  max-height: 200px; }

.privacy-toc {
  list-style: none;
  padding-left: 0; }

.privacy-toc li::before {
  content: '▸ '; }

/*
* NOTE: the class names here are required becuse ublock will remove elements
* that have "sponsors" in the name :)
*/
/* sponsors carousel (in footer) */
footer .spnsrs {
  margin-bottom: var(--space-xs); }
  footer .spnsrs > div {
    display: flex;
    align-items: center;
    gap: 8px; }
  footer .spnsrs button {
    padding: unset;
    border: unset;
    background: unset;
    color: var(--color-light-gray);
    font-size: var(--font-size-md); }
  footer .spnsrs button.prev::before {
    content: '◂'; }
  footer .spnsrs button.next::before {
    content: '▸'; }
  footer .spnsrs .scrollbox {
    width: 135px;
    gap: 0; }
  footer .spnsrs h3 {
    margin-top: 0; }
  footer .spnsrs a > img {
    object-fit: contain;
    width: 135px; }

/* sponsors shortcode */
.spnsrs-widget {
  background-color: var(--color-darker-gray);
  border-radius: var(--border-radius-default);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* XXX: this only works for up to 6 elements */ }
  .spnsrs-widget input[type=radio] {
    position: absolute;
    left: -200vw; }
  .spnsrs-widget label {
    position: relative;
    display: inline-block;
    padding: 16px;
    cursor: pointer;
    font-weight: 600;
    margin: auto; }
  .spnsrs-widget label img {
    width: 175px;
    transition: transform .3s ease; }
  .spnsrs-widget label img:hover {
    transform: scale(1.1); }
  .spnsrs-widget .tabs {
    width: 100%; }
  .spnsrs-widget .tab {
    display: none; }
  .spnsrs-widget input:nth-of-type(1):checked ~ .tabs > .tab:nth-child(1),
  .spnsrs-widget input:nth-of-type(2):checked ~ .tabs > .tab:nth-child(2),
  .spnsrs-widget input:nth-of-type(3):checked ~ .tabs > .tab:nth-child(3),
  .spnsrs-widget input:nth-of-type(4):checked ~ .tabs > .tab:nth-child(4),
  .spnsrs-widget input:nth-of-type(5):checked ~ .tabs > .tab:nth-child(5),
  .spnsrs-widget input:nth-of-type(6):checked ~ .tabs > .tab:nth-child(6) {
    display: block; }

.support-search ul.search-results {
  margin-top: 0.5rem;
  padding: 0 var(--space-sm);
  list-style-type: none;
  border-radius: var(--border-radius-default);
  font-size: 1.1em;
  background: var(--color-darker-gray);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); }
  .support-search ul.search-results li {
    padding: var(--space-sm) 0; }
  .support-search ul.search-results span.source {
    color: var(--color-white);
    text-decoration: underline; }
  .support-search ul.search-results span.question::before {
    content: '▸ '; }

.support-faqs-overview {
  background: var(--color-darker-gray);
  padding: var(--tile-width) 0; }
  .support-faqs-overview .faqs-row {
    display: grid;
    grid-gap: var(--tile-width);
    grid-template-columns: repeat(6, 1fr); }
  .support-faqs-overview .faqs-category {
    grid-column: span 2; }
  .support-faqs-overview ul {
    padding: 0;
    list-style-type: none; }
    .support-faqs-overview ul li {
      margin-bottom: var(--space-xs);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .support-faqs-overview ul a:not(:has(> strong)) {
      color: var(--color-white); }

.support-contact .contact-cards {
  display: flex;
  width: 100%; }
  .support-contact .contact-cards > * {
    flex: 1;
    font-size: var(--font-size-sm); }

.support-faqs > div {
  display: flex;
  width: 100%; }

.support-faqs aside {
  flex: 1; }
  .support-faqs aside .faq-category {
    margin-bottom: var(--space-lg); }
  .support-faqs aside ul {
    list-style: none;
    padding: 0; }
  .support-faqs aside a {
    display: inline-block;
    margin-bottom: var(--space-xxs);
    font-size: var(--font-size-xs);
    color: var(--color-lighter-gray); }

.support-faqs main {
  flex: 2; }

.team-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tile-width);
  margin-bottom: var(--space-xl); }

@media (max-width: 768px) {
  .team-section {
    display: flex;
    flex-flow: row wrap; } }

.team-member {
  grid-column: span 1; }

.team-member img {
  border-radius: var(--border-radius);
  filter: saturate(0);
  max-width: 220px;
  vertical-align: bottom;
  margin-bottom: var(--space-sm); }

.team-member h3 {
  margin-top: 0; }

.testimonials {
  background: var(--color-darker-gray); }

.testimonials .container {
  min-height: 527px;
  gap: calc(var(--tile-width) / 2);
  align-items: center; }

.testimonials .scrollbox > * {
  width: 50%; }

.testimonials blockquote > p {
  text-indent: -0.45em; }

.testimonials blockquote > p::before {
  content: open-quote; }

.testimonials blockquote > p::after {
  content: close-quote; }

@supports (hanging-punctuation: first) {
  .testimonials blockquote > p {
    text-indent: 0;
    hanging-punctuation: first; } }

.testimonials blockquote aside {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-gap: var(--space-sm);
  align-items: center; }
  .testimonials blockquote aside img {
    height: 48px;
    width: 48px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid var(--color-white); }
  .testimonials blockquote aside p {
    margin: 0; }

:root {
  --container-width: 1400px;
  --total-tiles: 43;
  --tile-width: calc(min(var(--container-width), 100vw) / var(--total-tiles));
  --column-width: calc(var(--tile-width) * 6);
  --inter-section-space: calc(var(--tile-width) * 2);
  --border-radius-default: 2px;
  --color-white:#fff;
  --color-normal-gray: #8a8a8a;
  --color-light-gray:#636363;
  --color-lighter-gray: #c9c9c9;
  --color-lighterish-gray: #e4e4e4;
  --color-lightest-gray: #f6f6f6;
  --color-dark-gray:#383838;
  --color-darker-gray: #292929;
  --color-darkest-gray: #111;
  --color-accent:#db1f5d;
  --color-accent-light:#f098b5;
  --space-4xs: 2px;
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 96px;
  --hover-transition: .2s ease-in-out; }

@media (max-width: 768px) {
  :root {
    --total-tiles: 7;
    --inter-section-space: var(--space-xl); } }

html {
  width: 100vw;
  overflow-x: hidden;
  height: 100%; }

@media screen and (min-width: 320px) {
  html {
    /* TODO: what are those magic numbers? */
    font-size: calc(25.85185px + 1.2963vw); } }

@media screen and (min-width: 1400px) {
  html {
    font-size: 44px; } }

html,
body {
  margin: 0; }

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-sm);
  line-height: 1.5em;
  width: 100%; }

html,
body {
  background: var(--color-dark-gray);
  color: var(--color-white); }

:root {
  --pattern-edge-height: calc(var(--tile-width) * 48 / 147); }

.pattern-background {
  background: var(--color-dark-gray);
  background-image: url(/images/background/pattern.png);
  background-image: linear-gradient(180deg, rgba(61, 60, 62, 0), var(--color-dark-gray) 50vh), url(/images/background/pattern.png);
  background-position-x: center;
  background-size: var(--tile-width); }

.pattern-background-edge {
  height: var(--pattern-edge-height);
  background: var(--color-dark-gray);
  background-image: url(/images/background/pattern_top.png);
  background-position-x: center;
  background-size: var(--tile-width);
  position: relative; }

@media (max-width: 768px) {
  .layout {
    margin-block-start: 135px; } }

.container {
  max-width: var(--container-width);
  padding: 0 var(--tile-width);
  margin: auto; }

@media (max-width: 768px) {
  .container {
    padding: 0 calc(var(--tile-width) / 2); } }

.container > main {
  margin-block-start: var(--space-xxxl);
  margin-block-end: var(--space-xxxl); }

/* grid */
.grid {
  display: grid;
  grid-gap: var(--tile-width);
  grid-template-columns: repeat(6, 1fr); }

main {
  grid-column: 2 / 6; }

@media (max-width: 768px) {
  main {
    grid-column: 1 / -1; } }

.card, main .ip {
  margin: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-darker-gray);
  border-radius: var(--border-radius-default);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  font-size: var(--font-size-xs); }

@media (max-width: 768px) {
  .card, main .ip {
    margin: 0; } }

.scrollbox {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: var(--space-sm); }

.scrollbox {
  scrollbar-width: none;
  -ms-overflow-style: none; }

.scrollbox::-webkit-scrollbar {
  display: none; }

.scrollbox > * {
  display: inline-block;
  flex-shrink: 0;
  scroll-snap-align: center; }

/* reset */
*, :after, :before {
  box-sizing: border-box;
  margin: 0; }

h4, h5, h6, p {
  margin-top: var(--font-size-md);
  margin-bottom: var(--font-size-xs);
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto; }

/* headings */
h1 {
  font-size: var(--font-size-lg);
  line-height: 1.3em; }

@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-md); } }

h2, h3 {
  line-height: 1.3em; }

h2 {
  font-size: var(--font-size-md);
  margin-top: var(--font-size-xl);
  margin-bottom: var(--font-size-md); }

h3 {
  font-size: var(--font-size-sm);
  margin-top: var(--font-size-lg);
  margin-bottom: var(--font-size-sm); }

/* title heading */
.title::before {
  content: '▸';
  margin-right: 1ex; }

main h1:first-child {
  padding-bottom: var(--space-lg); }

/* links */
a {
  text-decoration: none;
  color: var(--color-accent-light);
  transition: color var(--hover-transition); }

a:hover {
  color: var(--color-accent); }

a.backlink {
  margin-bottom: var(--space-lg);
  font-weight: 700;
  display: block; }

a.backlink::before {
  content: '◂'; }

/* strong links (followed by > marker) */
a > strong {
  font-weight: unset; }

a > strong::after {
  margin-left: 1ex;
  content: '▸'; }

table {
  table-layout: fixed;
  border-collapse: collapse; }
  table tr:nth-child(2n) {
    background-color: var(--color-darker-gray); }
  table td {
    word-wrap: break-word; }
  table td, table th {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 2px solid var(--color-light-gray); }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid var(--color-light-gray);
  margin: 1em 0;
  padding: 0; }

input {
  border: 2px solid var(--color-light-gray);
  border-radius: var(--border-radius-default);
  background-color: transparent;
  padding: var(--space-xs);
  color: var(--color-white);
  outline: 0;
  width: 100%;
  line-height: unset; }

/* ip settings */
main .ip {
  padding: var(--space-sm);
  width: calc(var(--tile-width)* 13);
  display: inline-block; }
  main .ip h2 {
    font-size: var(--font-size-xs);
    color: var(--color-accent-light);
    margin: 0; }
  main .ip li {
    font-weight: bold;
    font-size: var(--font-size-md);
    word-break: break-word;
    hyphens: auto;
    display: block; }

@media (max-width: 768px) {
  main .ip {
    width: 100%; } }