@font-face {
font-family: 'PT Sans';
src: url('font/pt-sans.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
color: #000;
color: #333;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.25em;
font-family: 'PT Sans', Tahoma, Verdana, Arial, sans-serif;
font-size: 18px;
}

@media (max-width: 48em) {
  body {font-size: 1.2em;}
}

body, main nav {background-color: #fff;}
h1, h2, h3, h4, strong {color: #000; line-height: normal;}
h3, h4 {margin: .5em 0;}
h3 > svg {width: 2.5em; height: 2.5em;}

body {padding: 0; margin: 0;}
body > footer, header aside, main > section, body > section {padding: 0 .75em;}
header a { display: block; }
section {margin: 0; display: block;}

@media (min-width: 48em) {
  body > footer, main > section, body > section {padding: 0 3em;}
}

header {background-color: #fff;}

/* top navigation */
header {position: sticky; top: 0; z-index: 1;}
/* header > h2, header nav > label {padding: 0 1em; margin: 0 0; height: 4rem; line-height: 4rem;} */
header > h2 {display: none;}
header {text-align: center;}
header nav {padding: 0 1em;}
header nav ul {list-style: none; padding: 0 0; margin: 0 0; display: block;}
header nav ul > li {display: block; padding: 0 0; margin: 0 0;}
header nav ul > li > a {display: block; padding: 1em 0;}
nav > label {cursor: pointer; padding: 1em 0;}

@media (min-width: 48em) {
  header {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: start; column-gap: .5em;}
  header h2 {display: block; line-height: 3em; padding: 0 2em; margin: 0 0;}
  header {align-items: center;}
  header nav {text-align: end;}
  header nav {padding: 0 2em; font-size_: 1.2em;}
  header nav ul {line-height: 1; display: block;}
  header nav ul > li {display: inline-block; vertical-align: middle; line-height: normal; box-sizing: border-box;}
  header nav ul {margin-left: -.25rem; margin-right: -.25rem;}
  header nav ul > li {padding-left: .25rem; padding-right: .25rem;}
  header nav ul > li > a {padding: .5em 1em;}
}

@media (min-width: 48em) {
  .xl-hide {display: none;}
}

/* responsive navigation */
nav label {display: none;}
nav input[type=checkbox] {display: none;}
@media (max-width: 48em) {
  nav > label {display: block;}
  nav input[type=checkbox] ~ * {display: none;}
  nav input[type=checkbox]:checked ~ * {display: block;}
}

header nav a {color: #000; text-decoration: none; border-radius: .25em;}
header nav a.order {background-color: #96f; color: #fff;}
header nav a:hover {background-color: #eee; box-shadow:0 2px 4px 0 rgba(0,0,0,.2);}
header nav a.order {box-shadow:0 2px 4px 0 rgba(0,0,0,.2);}
header nav a.order:hover {box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.15); background-color: #63f;}

.small {font-size: .9em;}
.center {text-align: center;}
p.hero {font-size: 1.25em; line-height: 1.5em; padding: 1.5em 0;}
section.hero {padding: 1em 0; margin-top: 2em;}
.bg {background-color: #96f; color: #fff;}
.bg a {color: #fff;}

h2 {color: #9c0; font-weight: normal; color: #690;}
h3 {color: #06c; font-weight_: normal;}
.bg h3 {color: #fff;}

@media (min-width: 48em) {
  .grid-2 {display: grid; column-gap: .5em; align-items: start; grid-template-columns: repeat(2, 1fr);}
  .grid-3 {display: grid; column-gap: .5em; align-items: start; grid-template-columns: repeat(3, 1fr);}
}

body > footer {margin-top: 2em;}
body > footer {text-align: center;}
body > footer {font-size: .9em; background-color: #333; color: #ccc; padding-bottom: 2em; padding-top: 1em;}
body > footer a {color: #ccc;}

body > footer nav ul {list-style: none; padding: 0 0; margin: 0 0; display: block;}
body > footer nav ul > li {display: block; padding: 0 0; margin: 0 0;}
body > footer nav ul > li > a {display: block; padding: .5em 0;}
body > footer nav + nav {margin-top: 1em;}

@media (min-width: 48em) {
  body > footer nav {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .5em;}
  body > footer nav {padding: 0 2em; }
  body > footer nav ul {line-height: 1; display: block;}
  body > footer nav ul > li {display: inline-block; vertical-align: middle; line-height: normal; box-sizing: border-box;}
  body > footer nav ul {margin-left: -.25rem; margin-right: -.25rem;}
  body > footer nav ul > li {padding-left: .25rem; padding-right: .25rem;}
  body > footer nav ul > li > a {padding: .25em .5em;}
}

a.hero-order {border-radius: .25em; text-decoration: none; padding: .5em 1em; margin: 0 1em;}
a.hero-order {background-color: #96f; color: #fff; }
.bg a.hero-order {background-color: #9c0; color: #fff; }

table {width: 100%; border-collapse: collapse;}
th, td {padding: .5em;}
th {font-weight: normal;}
tbody td {border: #ccc 1px solid;}
/* td, th {border: #ccc 1px solid;} */
th[scope=row] {width: 12em; text-align: right;}
/* tfoot td, tfoot th {border-width: 0;} */
td h3, td h2, th h3, th h2 {margin: 0; padding: 0;}
td a.hero-order {display: block;} 

article.order {display: block;}
.order ul {list-style-type: none; display: block; padding: 0; margin: 0;}
.order ul li {list-style-type: none; display: block; margin: .5em 0; padding: 0;}
/* .order b {color: #9c0; color: #690; color: #360; font-weight: normal;} */

ul.spacing-l li + li {margin-top: .5em;}

/* svg {display: block; margin: 0 0; border: red 1px solid;} */
section.bg, svg.arrow-bg {display: block; margin: 0 0;}

section.bg p {display: block; margin: 0 0;}
p + p, section.bg p + p {margin-top: 1em;}

.flex {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; align-items: start; column-gap: .5em;}
.screenshots {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; align-items: start; column-gap: 1em;}
.screenshots_item {width: 12em;}
.screenshots_item figure {padding: 1em; margin: 0;}
.screenshots_item figure img {width: 100%;}
.screenshots_item figcaption {font-size: .9em;}