*,
*::before,
*::after {
  box-sizing: border-box;
}

::-moz-selection {
  background-color: #184a00;
  background-color: var(--main-color);
  color: #fff;
  color: var(--background-color);
  text-shadow: none;
}

::-moz-selection,
::selection {
  background-color: #184a00;
  background-color: var(--main-color);
  color: #fff;
  color: var(--background-color);
  text-shadow: none;
}

/* ::focus { */
/*   outline: 2px ridge var(--accent-color); */
/*   outline-offset: 4px; */
/* } */

:root {
  --default-fonts-serif:
    Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen,
    serif "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --default-fonts-sans-serif:
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --emoji-fonts: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --font-family-sans-serif: "";
  --font-family-stylized: "Kalam";
  --font-family-serif: "Plex";
  --font-family-monospace: monospace;

  --base-font-size: 1rem;

  --text-block-width: 55rem;

  --h1: 1.6em;
  --h2: 1.4em;
  --h3: 1.2em;
  --h4: 1.1em;
  --t1: 1.1em;
  --t2: 1em;
  --lh1: 32px;
  --lh2: 24px;
  --lh3: 20px;

  --main-color: #184a00;

  --color1: #c4f5e6;
  --color2: #00734f;
  --color3: #8d8980;
  --color4: #575267;
  --color5: #222035;
  --color6: #0c0a11;

  --background-color: #fff;

  --accent-bg-color: var(--color1);
  --accent-fg-color: var(--color2);

  --accent-color: var(--accent-fg-color);
  --accent-color2: #8d8980;

  --color-hue: 171;
}

@supports (font-variation-settings: normal) {
  :root {
    /* --font-family-serif: "PublicSans var"; */
    /* --font-family-sans-serif: "PublicSans var"; */
    /* --font-family-sans-serif: "Inter var"; */
  }
}

@media (color-index: 48) {
  :root {
    --color1: #a0ffe3;
    --color2: #65dc98;
    --color2: #4bfcab;
    --color3: #8d8980;
    --color4: #575267;
    --color5: #222035;
    --color6: #0c0a11;

    --background-color: #0c0a11;

    --accent-bg-color: #222035;
    --accent-fg-color: var(--color2);

    --accent-color2: #8d8980;

    --main-color: #fff;
  }
}

@media (color: 48842621) {
  :root {
    --color1: #a0ffe3;
    --color2: #65dc98;
    --color2: #4bfcab;
    --color3: #8d8980;
    --color4: #575267;
    --color5: #222035;
    --color6: #0c0a11;

    --background-color: #0c0a11;

    --accent-bg-color: #222035;
    --accent-fg-color: var(--color2);

    --accent-color2: #8d8980;

    --main-color: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color1: #a0ffe3;
    --color2: #65dc98;
    --color2: #4bfcab;
    --color3: #8d8980;
    --color4: #575267;
    --color5: #222035;
    --color6: #0c0a11;

    --background-color: #0c0a11;

    --accent-bg-color: #222035;
    --accent-fg-color: var(--color2);

    --accent-color2: #8d8980;

    --main-color: #fff;
  }
}

@media (min-width: 480px) {
  :root {
    --base-font-size: 1.1rem;
  }
}

@media (orientation: portrait) and (max-width: 480px) {
  :root {
    --base-font-size: 1rem;
  }
}

@media (max-height: 640px) {
  :root {
    --base-font-size: 1rem;
  }
}

html {
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern", "liga", "clig", "liga", "clig", "kern";
  font-kerning: normal;
}

body {
  background-color: #fff;
  background-color: var(--background-color);
  color: #184a00;
  color: var(--main-color);
  font-family:
    -apple-system, BlinkMacSystemFont, Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen,
    serif "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-family:
    -apple-system, BlinkMacSystemFont, var(--default-fonts-serif),
    var(--emoji-fonts);
  font-size: 1rem;
  font-size: var(--base-font-size);
  line-height: 1.75;
  margin: 0;
}

html,
body {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    -apple-system, BlinkMacSystemFont, "",
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-family:
    -apple-system, BlinkMacSystemFont, var(--font-family-sans-serif),
    var(--default-fonts-sans-serif), var(--emoji-fonts);
  line-height: 1.2em;
  color: #00734f;
  color: var(--accent-color);
  font-weight: bold;
}

h1,
h2,
h3 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Kalam",
    "", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-family:
    -apple-system, BlinkMacSystemFont, var(--font-family-stylized),
    var(--font-family-sans-serif), var(--default-fonts-sans-serif),
    var(--emoji-fonts);
  transform-origin: bottom left;
  transform: rotate(-0.5deg) skew(0.5deg) translateY(0.3em);
}

p {
  line-height: 1.6;
  margin-bottom: 2em;
}

a {
  color: inherit;
  color: var(--color, inherit);
  background-color: inherit;
  transition:
    background-color ease-in 540ms,
    color ease-in 96ms,
    all ease-out 96ms;
  text-decoration-color: rgba(0,0,0,0.8);
}

@media (color-index: 48) {
  a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

@media (color: 48842621) {
  a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

@media (color-index: 48) {
  a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

@media (color: 48842621) {
  a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

@media (prefers-color-scheme: dark) {
  a {
    text-decoration-color: rgba(255,255,255,0.6);
  }
}

a:hover {
  color: #fff;
  color: var(--background-color);
  background-color: #00734f;
  background-color: var(--accent-color);
  outline: 5px solid #00734f;
  outline: 5px solid var(--accent-color);
  text-shadow: none;
  text-decoration: none;
}

a[focus-within],
a:focus {
  color: #fff;
  color: var(--background-color);
  background-color: #00734f;
  background-color: var(--accent-color);
  outline: 5px solid #00734f;
  outline: 5px solid var(--accent-color);
  text-shadow: none;
  text-decoration: none;
}

a[focus-within],
a:focus {
  color: #fff;
  color: var(--background-color);
  background-color: #00734f;
  background-color: var(--accent-color);
  outline: 5px solid #00734f;
  outline: 5px solid var(--accent-color);
  text-shadow: none;
  text-decoration: none;
}

a:focus-within,
a:focus {
  color: #fff;
  color: var(--background-color);
  background-color: #00734f;
  background-color: var(--accent-color);
  outline: 5px solid #00734f;
  outline: 5px solid var(--accent-color);
  text-shadow: none;
  text-decoration: none;
}

hr {
  border: none;
  border-bottom: 2px solid #c4f5e6;
  border-bottom: 2px solid var(--accent-bg-color);
  margin: 16px 0;
}

p,
li {
  line-height: inherit;
}

input,
textarea {
  background-color: #fff;
  background-color: var(--background-color);
  border: 2pt inset #c4f5e6;
  border: 2pt inset var(--accent-bg-color);
  /* box-shadow: 0 0 4px 2px var(--accent-bg-color); */
  color: #184a00;
  color: var(--main-color);
  font-size: 1em;
  box-sizing: border-box;
  font-family: var(--default-font-family-sans-serif);
}

input.focus-visible,
textarea.focus-visible {
  border: 2pt solid transparent;
  outline: thick inset #00734f;
  outline: thick inset var(--accent-fg-color);
}

input.focus-visible,
textarea.focus-visible {
  border: 2pt solid transparent;
  outline: thick inset #00734f;
  outline: thick inset var(--accent-fg-color);
}

input:focus-visible,
textarea:focus-visible {
  border: 2pt solid transparent;
  outline: thick inset #00734f;
  outline: thick inset var(--accent-fg-color);
}

label {
  font-family: "";
  font-family: var(--font-family-sans-serif);
  /* box-shadow: 0 0 4px 2px var(--accent-bg-color); */
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  display: grid;
  align-items: center;
  grid-gap: 16px;
  padding: 16px 0;
  justify-items: center;
  grid-template-columns: 1fr;
  transition:
    box-shadow ease-in-out 96ms,
    grid-template-columns ease-in-out 96ms,
    grid-template-rows ease-in-out 96ms;
  /* border-radius: 0 0.8rem; */
  max-width: 100vw;
  margin: 8px 0;
  /* text-align: center; */
  cursor: pointer;
}

@media (min-width: 640px) {
  label {
    font-size: 0.9em;
    padding: 16px;
    justify-items: flex-end;
    grid-template-columns: 1fr auto;
    transition:
      box-shadow ease-in-out 96ms,
      grid-template-columns ease-in-out 240ms,
      grid-template-rows ease-in-out 240ms;
  }
}

label:hover,
label:focus {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  outline: 2px solid #00734f;
  outline: 2px solid var(--accent-fg-color);
  cursor: pointer;
}

label input[type="text"],
label input[type="password"] {
  width: 100%;
}

/* HEADER */

nav ul {
  font-family: "Plex";
  font-family: var(--font-family-serif);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* HEADER ELEMENTS */

h1 {
  font-size: 1.6em;
  font-size: var(--h1);
  font-weight: 900;
  text-overflow: ellipsis;
  overflow: hidden;
}

h2 {
  font-size: 1.4em;
  font-size: var(--h2);
}

h3 {
  font-size: 1.2em;
  font-size: var(--h3);
}

h4 {
  font-size: 1.1em;
  font-size: var(--h4);
}

pre,
code {
  background-color: #fff;
  background-color: var(--background-color);
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

table {
  border: 1px solid #00734f;
  border: 1px solid var(--accent-color);
  border-spacing: 0;
}

th {
  background-color: #00734f;
  background-color: var(--accent-color);
  color: #fff;
  color: var(--background-color);
}

td {
  border: 1px solid #00734f;
  border: 1px solid var(--accent-color);
  padding: 0.3em;
}

figcaption {
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
}

a:hover figcaption {
  color: #00734f;
  color: var(--accent-color);
}

.logo {
  display: grid;
  align-items: center;
}

.logo figcaption {
  font-size: 1.2em;
  font-weight: bold;
  font-style: normal;
}

.logo picture {
  display: grid;
  align-items: center;
  justify-content: center;
}

.logo picture img {
  width: 2em;
  height: auto;
  aspect-ratio: 1 / 1;
}

fieldset {
  border: 2pt solid #00734f;
  border: 2pt solid var(--accent-color);
  border-left: none;
  border-right: none;
  display: grid;
}

[dir="ltr"] blockquote {
  margin-left: 1.8em;
}

[dir="rtl"] blockquote {
  margin-right: 1.8em;
}

[dir="ltr"] blockquote {
  margin-right: 1.8em;
}

[dir="rtl"] blockquote {
  margin-left: 1.8em;
}

/* buttons */

button,
.button {
  min-height: 44px;
  min-width: 44px;
  transition: box-shadow 240ms ease-in-out;
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  padding: 0.5em 1em;
  border: none;
  color: var(--color);
  border-radius: 0 0.8rem;
  cursor: pointer;
  font-family: "Plex";
  font-family: var(--font-family-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  text-decoration: underline;
}

button:hover,
.button:hover,
button:focus,
.button:focus {
  box-shadow: 0 0 5px 5px gold;
  outline: 2px solid #184a00;
  outline: 2px solid var(--main-color);
}

.primary {
  transition:
    box-shadow 240ms ease-in-out,
    color 96ms ease-out;
  border-radius: 0 0.8rem;
  cursor: pointer;
  background: linear-gradient(#00ffcf, #0f0);
  border: none;
  padding: 0.5em 1em;
  color: #0b4a3b;
  text-decoration: none;
}

@media (min-width: 640px) {
  .primary {
    font-size: 1.1em;
  }
}

.primary:hover,
.primary:focus {
  color: #03241c;
  box-shadow: 0 0 5px 5px gold;
  outline: 2px solid #184a00;
  outline: 2px solid var(--main-color);
}

.primary:focus {
  color: #03241c;
  outline: 2px solid #184a00;
  outline: 2px solid var(--main-color);
}

.primary:active {
  box-shadow: 2pt 2pt 0 transparent;
}

@media (min-width: 480px) {
  .primary {
    padding: 0.5em 1.5em;
  }
}

button.secondary,
input.secondary,
a.secondary {
  border: none;
  background: linear-gradient(#00ffbb, #0decb1);
  color: #000303;
  border-radius: 0 0.8rem;
  padding: 0.5em 1em;
  min-width: 6em;
  text-shadow: none;
  font-size: 1em;
  transition:
    box-shadow 240ms ease-in-out,
    color 96ms ease-out;
  text-decoration: none;
}

@media (min-width: 640px) {
  .secondary {
    font-size: 1.3em;
  }
}

.secondary:hover,
.secondary:focus {
  color: #03241c;
  box-shadow: 0 0 5px 5px gold;
  /* outline: 2px solid var(--main-color); */
}

.justify-right {
  justify-content: right;
}

.full {
  max-width: 100%;
  padding: 0;
}

.action-container {
  justify-content: center;
}

.container {
  width: 95%;
  max-width: 80em;
  display: grid;
  justify-content: center;
  margin: 0 auto;
}

/* section.container { */
/*   padding: 4vh 2vw; */
/* } */

/* .grid > * { */
/*   transition: all 96ms ease-in; */
/* } */

.justify-center > figure > * {
  justify-self: center;
}

/* 
* primary-text
*
* Wrapping main text blocks for content pages, blog, features, pricing
**/

.primary-text {
  background-color: #fff;
  background-color: var(--background-color);
  padding: 0 8px;
  /* transition: all 300ms ease-in-out; */
  margin: 0;
  margin: 2vh 2vw;
}

.primary-text img,
.primary-text figure,
.primary-text video {
  /* max-height: 90vh; */
  /* max-width: 100%; */
  width: 100%;
  height: auto;
}

.primary-text iframe {
  max-width: 100%;
}

.primary-text figure {
  margin: 3em 0;
}

.primary-text table {
  margin: 0 auto;
}

.primary-text time {
  display: inline-block;
  /*  transform: translateX(-8%);*/
}

@media (min-width: 900px) {
  .primary-text {
    padding: 1em;

    /* padding: 0 3em 3em 3em; */

    width: 55rem;

    width: var(--text-block-width);
    max-width: 100%;
  }

  .primary-text > ul {
    padding: 0 5rem;
  }

  .primary-text figure {
    margin: inital;
    padding: 0;
  }
}

@media (min-width: 1000px) {
  .primary-text {
    margin: 0 3rem;
  }
}

@media (min-width: 1200px) {
  .primary-text time {
    display: inline-block;
    transform: translateX(-8%);
  }
}

@media (min-width: 1400px) {
  .primary-text p img,
  .primary-text aside,
  .primary-text time,
  .primary-text pre,
  .primary-text figure,
  .primary-text video {
    max-height: none;
    max-height: initial;
  }
}

@media (min-height: 800px) {
  .primary-text {
    font-size: 1.2em;
  }
}

/** give extra space to each section for visual clarity */
.text-list > div {
  margin: 15vh 0;
}

.text {
  padding: 4vh 0;
}

/**
 * Grids
 */

.grid-items {
  display: grid;
  justify-content: center;
  /* padding: 8px; */
  /* max-width: 100%; */

  grid-gap: 0;
}

.grid-items figure {
  width: 100%;
}

.grid-items img {
  width: 100%;
}
.three-items {
  grid-template-columns: initial;
}

.three-items > * {
  justify-self: center;
}

.three-items > div {
  border: 2px solid #c4f5e6;
  border: 2px solid var(--accent-bg-color);
  border-radius: 0 0.8rem;
  display: grid;
  grid-template-rows: auto auto 2fr auto 0.6fr;
  grid-gap: 1em;
  min-width: 100%;
  background: linear-gradient(#fff, #c4f5e6);
  background: linear-gradient(var(--background-color), var(--accent-bg-color));
}

.three-items h4,
.three-items > div > div {
  text-align: center;
}

.three-items h4 {
  font-size: 1.5em;
  margin: 0;
  padding: 0.75em 0;
}

.three-items ul {
  width: 90%;
}

.two-items {
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .grid-items {
    grid-gap: 16px;
  }

  .three-items {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .two-items {
    grid-template-columns: 1fr 1fr;
  }
}

.fifty-percent {
  width: 50%;
}

.justify-center > figure {
  justify-self: center;
  padding: 8px;
  border-radius: 0 0.8rem;
  display: grid;
}

.align-center > figure {
  align-self: center;
}

.features-comparison {
  font-size: 0.8em;
  max-width: 100%;
}

.features-comparison .feather-check-square {
  color: #00734f;
  color: var(--accent-fg-color);
}

@media (min-width: 640px) {
  .features-comparison {
    font-size: 1em;
  }
}

.icon {
  width: 24px;
  height: 24px;
}

.icon-2x {
  width: 48px;
  height: 48px;
}

.flex-center {
  display: flex;
  justify-content: center;
}

/* Grid */

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 8px;
  justify-content: space-between;
}

.grid > *[focus-within],
.grid > *:hover {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  border-radius: 0 0.8em;
  box-shadow: 0 0 0 8px var(--accent-color-20);
}

.grid > *[focus-within],
.grid > *:hover {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  border-radius: 0 0.8em;
  box-shadow: 0 0 0 8px var(--accent-color-20);
}

.grid > *:focus-within,
.grid > *:hover {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  border-radius: 0 0.8em;
  box-shadow: 0 0 0 8px var(--accent-color-20);
}

/** Tippy */
.tippy-box {
  background-color: #00734f;
  background-color: var(--accent-color);
}

.tippy-arrow {
  color: #00734f;
  color: var(--accent-color);
}

.item {
  padding: 1em;
  border: 1px solid #00734f;
  border: 1px solid var(--accent-fg-color);
  width: 100%;
  max-width: 640px;
}

/**
* Social
*/

.socials {
  width: 100%;
  max-width: 1166px;
}

.socials ul {
  list-style: none;
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  grid-gap: 1em;
  gap: 1em;
  justify-content: center;
}

.socials li a {
  display: inline-block;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.socials li {
  justify-self: center;
}

@media (min-width: 480px) {
  .socials ul {
    gap: 3em;

    padding: 1em;
  }
}

@media (min-width: 640px) {
  .socials ul {
    gap: 2em;

    padding: 0;
  }
}

/**
* Subscribe 
*/

.subscribe-form {
  width: 95vw;
  max-width: 100%;
  padding: 10vh 4vw;
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  display: grid;
  justify-content: center;
}

.subscribe-form form {
  width: 100%;
  max-width: 25em;
}

.subscribe-form h2 {
  margin: 0.5em 0;
}

.subscribe-form input {
  width: 100%;
}

.subscribe-form .portrait {
  width: 100px;
  height: auto;
}

.checkbox {
  display: grid;
  grid-template-columns: 48px auto;
}

/*
 * Container border
 */
.primary-text,
.container-border {
  border: medium none currentColor;
  border: initial;
  box-shadow: none;
  box-shadow: initial;
  background-color: #fff;
  background-color: var(--background-color);
  border-radius: 0;
  border-radius: initial;
}

@media (min-width: 800px) {
  .primary-text,
  .container-border {
    border: 2pt solid var(--accent-color-80);
    box-shadow:
      0 0 2px 6px var(--accent-color2-60),
      0 0 12px 6px var(--accent-color2-40);
    border-radius: 0 0.8rem;
  }
}

/**
* Tags
*/

ul.tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-list {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.tags-list li {
  font-size: 0.8em;
  justify-self: center;
}

@media (min-width: 480px) {
  .tags-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*** Pagination */
.pagination {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  justify-content: center;
}

.pagination .page-item {
  padding: 16px;
}

.pagination .page-item a {
  padding: 16px;
  border-radius: 0 16px;
}

.pagination .disabled {
  opacity: 0.3;
}

@media (min-width: 480px) {
  .pagination {
    grid-template-columns: initial;
    grid-auto-flow: column;
  }
}

/**
* footer
*/
.footer {
  margin-bottom: 25vh;
  padding-bottom: 10em;
}

/**
* embeds
*/

.youtube-embed {
  max-width: 100%;
}

.youtube-embed iframe {
  max-width: 100%;
}

.background-shapes {
  background-image:
    url(/svg/objects/small-tree.svg), url(/svg/objects/deciduous-tree.svg),
    url(/svg/objects/evergreen-tree.svg), url(/svg/objects/small-tree.svg),
    url(/svg/objects/perennial.svg), url(/svg/objects/perennial.svg),
    url(/svg/objects/perennial.svg);
  background-size:
    150px 150px,
    300px 300px,
    300px 300px,
    150px 150px,
    50px 50px,
    50px 50px,
    50px 50px;
  background-repeat: no-repeat;
  background-position:
    left 5% bottom 120px,
    right 120px top 120px,
    right 120px top 1800px,
    right 60px top 120px,
    right 75px top 250px,
    right 85px top 290px,
    right 110px top 330px;
}

/* .features { */
/*   display: grid; */
/* } */

/* .features > * { */
/*   display: grid; */
/* } */

.cards {
  padding: 4vh 4vw;
}

.cards > div {
  border: 2px solid #c4f5e6;
  border: 2px solid var(--accent-bg-color);
  padding: 32px;
}

.cards h2 {
  margin: 0;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .cards > div {
    padding: 4vh 2vw;
  }
}

.four-wide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  grid-gap: 2px;
  justify-content: center;
  text-align: center;
}

.four-wide > div {
  padding: 8px;

  background-color: #fff;

  background-color: var(--background-color);
}

@media (min-width: 420px) {
  .four-wide {
    grid-template-columns: repeat(4, 1fr);
  }
}

/** 
 * Sections
 */

.sections {
  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 8px;

  width: 100%;
  /* padding: 8px; */
}

.sections figure {
  margin: 0;
}

@media (min-width: 480px) {
  .sections {
    grid-gap: 32px;
    /* padding: 2vh 2vw; */
  }
}

@media (min-width: 720px) {
  .sections {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

.sections--small {
  justify-content: center;
  grid-template-columns: repeat(3, 3em);

  grid-gap: 32px;
  /* padding: 2vh 2vw; */
}

@media (min-width: 720px) {
  .sections--small {
    grid-template-columns: repeat(3, 64px);

    grid-gap: 16px;
    padding: none;
  }
}

.two-sections {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2em;
}

.list-section > *:nth-child(1) {
  justify-self: center;
  padding: 16px 16px;
}

@media (min-width: 640px) {
  .list-section > *:nth-child(1) {
    justify-self: flex-end;
    padding: 2vh 2vw;
  }

  .two-sections {
    grid-template-columns: 1fr 1fr;
  }
}
.cross-platform {
  padding: 16vh 0;
  grid-gap: 32px;
}

.cross-platform .two-sections {
  padding: 32px 0;
}

.sectors {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  grid-gap: 16px;
  padding: 16px;
}

.sectors div {
  padding: 4%;
  text-align: center;
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  border-radius: 0 0.8rem;
}

.sectors div:hover,
.sectors div:focus {
  background-color: #8d8980;
  background-color: var(--accent-color2);
}

@media (min-width: 640px) {
  .sectors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    grid-gap: 32px;
    padding: 32px 0;
  }

  .sectors div {
    padding: 15%;
  }
}

/**
 * Offer
 */

.offer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  padding: 2vh 2vw;
  justify-content: center;
}

.offer__features {
  order: 2;
}

img.portrait {
  width: 150px;
  border-radius: 50%;
}

em.notice {
  font-size: 0.8em;
  font-family: monospace;
  font-family: var(--font-family-monospace);
  color: #00734f;
  color: var(--accent-fg-color);
  opacity: 0.8;
  font-style: normal;
}

.complex-form {
  border: 2px solid #00734f;
  border: 2px solid var(--accent-fg-color);
  padding: 2vmin;
}

.form-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
}

.form-items > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}

@media (min-width: 550px) {
  .form-items > div {
    grid-template-columns: 1fr 1fr;
  }
}

.form-items > div > div {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr;
}

/**
 * Ladder
 */

.ladder {
  display: grid;
  width: 100%;
  max-width: 80em;
}

.ladder > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  font-size: 1.25em;
}

.ladder .feature {
  /* display: grid; */
  /* justify-content: center; */
  /* align-items: flex-start; */
  /* grid-auto-rows: auto; */
  padding: 12%;
}

.ladder .graphic {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  padding: 4vh 4vw;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ladder .graphic img,
.ladder .graphic svg {
  max-width: 100%;
  max-height: 80vh;
}

.ladder > div:nth-of-type(odd) {
  grid-template-columns: 1fr;
}

.ladder > div:nth-of-type(odd) .graphic {
  order: 1;
}
.ladder > div:nth-of-type(odd) .feature {
  order: 2;
}

@media (min-width: 720px) {
  .ladder > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 32px;
    padding: 16vh 0;
    font-size: 1.25em;
  }

  .ladder .graphic {
    padding: 8vh;
  }

  .ladder > div:nth-of-type(odd) {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .ladder > div {
    grid-template-columns: 16fr 9fr;
  }

  .ladder > div:nth-of-type(odd) {
    grid-template-columns: 9fr 16fr;
  }

  .ladder > div:nth-of-type(odd) .graphic {
    order: 2;
  }

  .ladder > div:nth-of-type(odd) .feature {
    order: 1;
  }
}

/* .ladder > div:nth-child(2) { */

/*  grid-column: 2; */
/*   grid-row: 1; */
/* 	/1* gap: 16px; *1/ */
/* 	/1* /2* grid-template-columns: 16fr minmax(320px,9fr); *2/ *1/ */
/* 	/1* flex-direction: column-reverse; *1/ */
/* } */

.file-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 8px;
  justify-content: center;
  align-items: center;
}

.file-formats > * {
  text-align: center;
  padding: 50px 0;
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  font-family: monospace;
  font-family: var(--font-family-monospace);
}

/** features */

.why,
.features {
  display: grid;

  grid-gap: 16px;
}

.why {
  grid-template-columns: 1fr 1fr;
}

.features {
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .features {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.why > div {
  border: 2px solid #c4f5e6;
  border: 2px solid var(--accent-bg-color);
  padding: 1em;
}

.features > div {
  border: 2px solid #c4f5e6;
  border: 2px solid var(--accent-bg-color);
  padding: 1em;
}

.features > div > .graphic {
  order: 2;
}

.features .feature {
  padding: 2vh 2vw;
}

.customer-marketing {
  display: grid;
  grid-template-columns: 1fr;
  padding: 8vh 2vw;
  grid-gap: 16px;
}

@media (min-width: 800px) {
  .customer-marketing {
    grid-template-columns: 1fr 1fr;
  }
}

.free-design-hook {
  padding: 4vh 4vw;
}

.screenshots {
  padding: 16vh 4vw;
}

.screenshots > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}

@media (min-width: 480px) {
  .screenshots > div {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.screenshots img {
  width: 100%;
  max-width: 100%;
}

.accent {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
}

.jumbo {
  padding: 2em 0;
}

@media (min-width: 800px) {
  .jumbo {
    padding: 16vh 4vw;
  }
}

.error {
  background-color: rgba(255,0,0,0.74902);
  color: white;
  border-radius: 4px;
  font-family: sans-serif;
  padding: 0 8px;
}

/** 
* Testimonials 
* */
.testimonial {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  padding: 4vh 4vw;
  display: grid;
  justify-content: center;
}

.testimonial > div {
  max-width: 50em;
}

[dir="ltr"] .testimonial blockquote {
  margin-left: 0;
}

[dir="rtl"] .testimonial blockquote {
  margin-right: 0;
}

[dir="ltr"] .testimonial blockquote {
  margin-right: 0;
}

[dir="rtl"] .testimonial blockquote {
  margin-left: 0;
}

.testimonial blockquote {
  font-size: 1.3em;
}

.testimonial__footer {
  display: grid;
  grid-template-columns: 1fr 12fr;
  grid-gap: 16px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 480px) {
  [dir="ltr"] .testimonial blockquote {
    margin-left: 1.8em;
  }
  [dir="rtl"] .testimonial blockquote {
    margin-right: 1.8em;
  }
  [dir="ltr"] .testimonial blockquote {
    margin-right: 1.8em;
  }
  [dir="rtl"] .testimonial blockquote {
    margin-left: 1.8em;
  }
}

/**
* FAQ
*/
.faq {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 32px;
}

@media (min-width: 640px) {
  .faq {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1120px) {
  .faq {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.faq > div {
  background-color: #fff;
  background-color: var(--background-color);
  padding: 32px;
  border-radius: 0 0.8rem;
}

/**
* Intro
*/

.intro {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  grid-gap: 4vh 4vw;
  padding: 16px;

  font-size: 1rem;
}

.intro .graphic img {
  max-height: 100%;
  width: 100%;
}

.intro .graphic {
  order: 2;
}

.intro h1 {
  margin-top: 0;
}

@media (min-height: 320px) {
  .intro {
    font-size: 1rem;
    padding: 16px;
  }

  .intro h1 {
    font-size: 1.6em;
  }

  .intro .primary {
    font-size: 1em;
  }
}

@media (min-height: 480px) {
  .intro {
    font-size: 1em;
  }
}
@media (min-width: 480px) {
  .intro {
    grid-template-columns: 1fr;
    grid-gap: 32px;
    padding: 32px;
    font-size: 1em;
  }
}

@media (min-width: 680px) {
  .intro .graphic img {
    width: 320px;
  }

  .intro {
    grid-template-columns: 1fr 320px;
    grid-gap: 32px;
  }
}

@media (min-width: 920px) {
  .intro h1 {
    font-size: 2em;
  }

  .intro .graphic img {
    width: 468px;
  }

  .intro {
    font-size: 1.1em;
    grid-template-columns: 1fr 468px;
    grid-gap: 32px;
    grid-template-rows: auto;
    padding: 4vh 4vw;
  }
}

.account {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4vh 4vw;
  width: 95vw;
}

@media (min-width: 640px) {
  .account {
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
  }
}

ul.order-history {
  padding: 0;
}

.order-history li {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 5em auto auto;
  justify-content: flex-start;
  justify-items: center;
}

.order-history li > * {
  padding: 8px;
}

.highlight {
  background-color: #c4f5e6;
  background-color: var(--accent-bg-color);
  transform: rotate(-1deg);
}

.toc {
  position: static;
  position: initial;
  padding: 1em;
  width: 20em;
  max-width: 20em;
}

@media (min-width: 1676px) {
  .toc {
    position: fixed;
    left: 1em;
  }
}

#TableOfContents {
  font-size: 0.8em;
}

/** 
* https://www.jonoalderson.com/conjecture/its-time-for-modern-css-to-kill-the-spa/
*/
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.3s ease both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}