@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-Light.woff2') format('woff2'),
  url('/fonts/saans/Saans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-LightItalic.woff2') format('woff2'),
  url('/fonts/saans/Saans-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-Regular.woff2') format('woff2'),
  url('/fonts/saans/Saans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-RegularItalic.woff2') format('woff2'),
  url('/fonts/saans/Saans-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-SemiBold.woff2') format('woff2'),
  url('/fonts/saans/Saans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-SemiBoldItalic.woff2') format('woff2'),
  url('/fonts/saans/Saans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-Bold.woff2') format('woff2'),
  url('/fonts/saans/Saans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-BoldItalic.woff2') format('woff2'),
  url('/fonts/saans/Saans-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-Heavy.woff2') format('woff2'),
  url('/fonts/saans/Saans-Heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('/fonts/saans/Saans-HeavyItalic.woff2') format('woff2'),
  url('/fonts/saans/Saans-HeavyItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: fallback;
}

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

input,
button,
textarea,
select
{
  font: inherit;
}

:target {
  scroll-margin-block: 5.5ch;
}

:root
{
    --purple: rgb(108,0,255);
    --purple2: #a26cf7;
    --gridpurple: rgba(126, 0, 255, 1);
    --lightcyan: rgb(176, 252, 255);
    --cyan: rgb(0, 246, 255);
    --lightpink: rgb(229, 145, 255);
    --pink: rgb(255, 0, 255);
    --green: rgb(0,255,156);
    --darkblue: #0d1628;
    --bluegray: rgb(51, 56, 65);
    --midbluegray: rgb(89, 90, 92);
}

@supports (color: color(display-p3 1 1 1 / 1))
{
  :root
  {
    --purple: color(display-p3 0.424 0 1);
    --purple2: color(display-p3 0.635 0.424 0.969);

    --gridpurple: color(display-p3 0.494 0.078 1 / 1);
    --lightcyan: color(display-p3 0.69 0.988 1);
    --cyan: color(display-p3 0 0.965 1);
    --lightpink: color(display-p3 0.898 0.569 1);
    --pink: color(display-p3 1 0 1);
    --green: color(display-p3 0 1 0.612);
    --darkblue: color(display-p3 0.051 0.085 0.157);
    --bluegray: color(display-p3 0.2 0.219 0.255);
    --midbluegray: color(display-p3 0.35 0.353 0.36);
  }
}

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

a
{
  color: inherit;
  text-decoration: underline;
}

input
{
  font: inherit;
}

/* ! Begin JS-enabled styles */

html.nojs
{
  font-size: 18px;
  padding: 3ch;
}

html.nojs body
{
  font-family: var(--prompt-mono);
  font-variant-ligatures: none;
  background-color: #16161d;
  color: var(--green);
  display: grid;
  justify-items: center;
  margin: 0 auto;
}

html.nojs *
{
  font-size: inherit;
  font-weight: normal;
}

html.nojs body::before
{
content:"\
========================================== \a\
    ____  ____  ____  __  _______  ______\a\
   / __ \\/ __ \\/ __ \\/  |/  / __ \\/_  __/\a\
  / /_/ / /_/ / / / / /\|_/ / /_/ / / /   \a\
 / ____/ _, _/ /_/ / /  / / ____/ / /    \a\
/_/   /_/ |_|\\____/_/  /_/_/     /_/     \a\
\a\
==========================================";
content: "\
==========================================\a\
 ____  ____   ___  __  __ ____ _____ _____\a\
|  _ \\|  _ \\ / _ \\|  \\/  |  _ \\_   _|___ /\a\
| |_) | |_) | | | | |\\/| | |_) || |   |_ \\\a\
|  __/|  _ <| |_| | |  | |  __/ | |  ___)|\a\
|_|   |_| \\_\\\\___/|_|  |_|_|    |_| |____/\a\
\a\
==========================================";
  white-space: pre-wrap;
  margin: 0;
  color: var(--pink);
}

html.nojs hr
{
  border: 0;
  text-align: center;
}

html.nojs hr::before
{
  display: block;
  margin: 1ch 0;
  content:"==========================================";
  color: var(--pink);
}

html.nojs #header
{
  color: white;
}

html.nojs #header h1,
html.nojs #download-button
{
  display: none;
}

html.nojs #header em
{
  color: var(--green);
}

html.nojs #trailer
{
  max-width: 42ch;
  margin: auto;
}

html.nojs #trailer video
{
  max-width: 100%;
}

html.nojs #introduction
{
  display: block;
  margin: 1em 0;
  padding: 0;
  color: var(--cyan);
  position: relative;
}

html.nojs #introduction em
{

  color: var(--green);
  font-weight: bold;
}

html.nojs span.rating
{
  color: var(--green);
  display: inline-block;
  margin: 0 -0.175ch;
  font-size: 1em;
}

html.nojs .hardwrapped
{
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

html.nojs .hardwrapped dt,
html.nojs .hardwrapped dd
{
  display: inline;
  padding: 0;
  margin: 0;
  color: white;
}

html.nojs #help form
{
  display: none;
}

html.nojs .hardwrapped dt
{
  text-transform: uppercase;
  color: var(--pink);
}

html.nojs nav ul
{
  padding: 0;
  list-style: none;
  max-width: 42ch;
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 1em auto;
  padding: 0;
}

html.nojs nav li
{
  flex: 0 1 auto;
  margin: 0;
  padding: 0.5em;
  border: 0.0625em solid;
  position: relative;
}

html.nojs nav li:hover
{
  border-color: var(--cyan);
  color: var(--pink);
}

html.nojs nav li a
{
  text-decoration: none;
}

html.nojs nav li a::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

html.nojs #screenshots ul
{
  margin: 1em auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: auto;
}

html.nojs #screenshots ul li
{
  margin: 0 auto;
  position: relative;
  width: 42ch;
  height: calc(42ch * .75);
}

html.nojs #screenshots li a
{
  cursor: pointer;
}

html.nojs #screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.2em;
  -webkit-object-fit: cover;
  object-fit: cover;
  border: .125rem solid transparent;
  background-color: transparent;
  filter: drop-shadow(0 0 1ch var(--purple));
}

html.nojs .section-header
{
  text-transform: uppercase;
  margin: 1ch auto 2ch auto;
  max-width: 42ch;
}

html.nojs .section#help
{
  max-width: 42ch;
  margin: auto;
}

html.nojs #footer ul
{
  margin: 1em auto;
  list-style: none;
  padding: 0;
}


/* ! Begin JS-enabled styles */

html.js
{
  margin: 0;
  padding: 0;
}

html.js body
{
  font-family: var(--prompt-mono);
  font-variant-ligatures: none;
  line-height: 1.2;
  background-color: var(--darkblue);
  color: var(--cyan);
  margin: 0;
  padding: 0;
  position: relative;
}

html.js body::before
{
  width: 150vw;
  height: 150vh;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  position: fixed;
  background-color: var(--gridpurple);
  -webkit-mask-image: url("../img/checker.png");
  -webkit-mask-repeat: repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 3ch;
  transform: translate(-50%, -50%) rotate(8deg);
  opacity: 0.2;
}

/* html.js body::before
{
  animation-name: bright;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

@keyframes bright
{
  from { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  to { filter: brightness(1); }
} */



html.js hr
{
  display: none;
}

html.js .container
{
  display: grid;
  overflow-x: hidden;
}

html.js .hardwrapped
{
  width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

html.js #header { order: 2; }
html.js #topNav { order: 1; }
html.js #main { order: 3; }
html.js #bottomNav { order: 4; }
html.js #footer { order: 5; }

html.js #topNav
{
  position: fixed;
  width: 100%;
  top: 0;
  max-width: unset;
  transition: 300ms ease-in-out;
  transition-property: border-bottom, background-color;
  z-index: 50;
  padding: 1ch 0;
}

html.js.scrolled #topNav
{
  border-bottom: 0.2rem solid var(--purple);
  background-color: var(--darkblue);
  box-shadow: 0 0 1rem rgba(0,0,0,0.5);
}

html.js #topNav ul
{
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-gap: 1ch;
  font-family: var(--sans-serif);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: calc(28ch * 1.65);
}

html.js.scrolled #topNav ul
{
  grid-template-columns: 1fr auto auto auto;
}

html.js #topNav li
{
  padding: .5ch 0;
  margin: 0;
  display: flex;
  align-items: center;
}

html.js #topNav li a
{
  text-decoration: inherit;
  color: inherit;
  font-weight: 600;
}

html.js #topNav li::before
{
  width: 2ch;
  height: 2ch;
  content: "";
  top: 0;
  left: 0;
  margin-right: 0.5ch;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

html.js #topNav li#nav-home a
{
  text-transform: uppercase;
  font-style: italic;
  color: white;
  font-weight: 300;
}

html.js #topNav li#nav-home::before
{
  background-image: url("../img/panic.svg");
}

html.js #topNav li#nav-help
{
  color: var(--green);
}

html.js #topNav li#nav-help::before
{
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-image: url("../img/nav-help.svg");
  background-color: var(--green);
}

html.js #topNav li#nav-download
{
  width: 12ch;
  height: 4ch;
  overflow: hidden;
  color: transparent;
  background-image: url("../img/app-store-button.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

html.js.scrolled #topNav li#nav-download
{
 display: block;
 width: 31rem;
 background-image:url("../img/app-store-button.png"),  url("../img/prompt-icon-dark.png");
 background-position: right center, left center;
 background-size: auto 100%, auto 100%;
 background-repeat: no-repeat;
}

html.js div#download-button
{
  position: relative;
  font-size: 1.65em;
  width: 28ch;
  margin: .5em auto;
  color: transparent;
  background-image: url("../img/prompt-icon-dark.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 4.5ch;
  left: -1.5rem;
  }

html.js div#download-button a
{
  display: block;
  width: 8ch;
  height: 4ch;
  background-image: url("../img/app-store-button.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

html.js div#download-button a::after
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}


/* Header */
html.js #header
{
  margin-top: 8rem;
  position: relative;
}

html.js #header .hardwrapped
{
  font-size: 1.65em;
  max-width: 28ch;
  font-style: italic;
  color: white;
  margin: 0 auto;
}

html.js #header .hardwrapped em
{
  color: var(--green);
}

html.js #header div.video
{
  position: relative;
}

html.js #header div.video
{
  margin: 1em auto 0 auto;
  position: relative;
  width: 100vw;
  max-width: 130rem;
  height: calc(100vw * .94);
  max-height: calc(100rem * .94);
}

html.js #header div.video::before
{
  height: 130rem;
  width: 130rem;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--cyan), transparent, transparent);
  opacity: 0.15;
  pointer-events: none;
}

html.js #header div.video::after
{
  content: "";
  width: 100%;
  height: 100%;
  background-image:  url("../img/desktop.png"), url("../img/tablet.png"), url("../img/phone.png");
  background-size: auto 100%, 25.25rem auto, 8rem auto;
  background-position: center center, calc(50% - 30.25rem) 62.75rem, calc(50% + 32rem) 61rem;
  background-repeat: no-repeat;
  color: transparent;
  user-select: none;
  pointer-events: none;
  position: absolute;
  z-index: 30;
}

html.js #header #trailer
{
  width: 63rem;
  height: calc(.5625 * 63rem);
  position: absolute;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

html.js #header p
{
  color: var(--cyan);
  font-weight: 500;
  position: relative;
  margin: 0;
}

html.js .section
{
  display: grid;
  margin: 0 auto;
  position: relative;
}

html.js .section-header
{
  font-weight: 400;
  color: white;
  font-style: italic;
  margin: 1em auto;
  text-align: center;
  font-size: 1.25em;
}

html.js .section-header::after
{
  display: block;
  margin: 0.125em 0;
  width: 100%;
  height: 0.2rem;
  background-color: var(--purple);
  content: "";
  box-shadow: 0 0 .5rem var(--purple);
}


/* Introduction */

html.js #introduction
{
  display: block;
  margin: 0 auto;
  padding: 0;
  color: var(--cyan);
  position: relative;
}

html.js #introduction em
{

  color: var(--green);
  font-weight: bold;
}

html.js span.rating
{
  color: var(--green);
  display: inline-block;
  margin: 0 -0.175ch;
  font-size: 1em;
}

/* Promo Video */

html.js #promo
{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  width: calc(100vw + 1rem);
  height: calc(56.25vw + 1rem);
  max-height: 23.625ch;
  max-width: 42ch;
  cursor: pointer;
  color: transparent;
  background-color: black;
  margin: 2em auto 1em auto;
  position: relative;
  filter: drop-shadow(0 0 0.125em var(--purple));
  border-radius: 0.5ch;
  }

html.js #promo iframe
{
  transition: 1000ms all ease;
  overflow: hidden;
  object-fit: fill;
  border-radius: 0.5ch;
}

html.js #promo.poster iframe
{
  opacity: 0;
}

html.js #promo.poster,
html.js #promo.loading
{
  background-image: url("../img/poster-frame.jpg");
}

html.js #promo.loading
{
  animation-name: pulse;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

html.js #promo.playing
{
  animation-name: none;
  z-index: 100;
  position: relative;
}

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

html.js #promo.playing iframe
{
  opacity: 1;
}


/* Feature List */

html.js #features
{
  --resize: .8;
  --width: 42ch;
}

html.js #features dl
{
  font-size: calc(var(--resize) * 1em);
}

html.js #features dl
{
  margin: 1.5em auto;
  display: block;
  position: relative;
  width: var(--width);
}

html.js #features dl::before
{
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: calc( var(--width) / var(--resize) * 1.0625 - var(--width));
  height: calc( var(--width) / var(--resize) * 1.0625 - var(--width));
  top: 50%;
  transform: translateY(-50%);
}

html.js #features dl#feature-mouse-support::before { background-size: 70% auto; }
html.js #features dl#feature-dark-icon::before { background-size: 80% auto; }


html.js #features dl:nth-child(even)
{
  right: calc( -.5 * (var(--width) / var(--resize) - var(--width)));
}

html.js #features dl:nth-child(odd)
{
  left: calc( -.5 * (var(--width) / var(--resize) - var(--width)));
}

html.js #features dl:nth-child(even)::before
{
  left: calc( -1 * (var(--width) / var(--resize) * 1.0625 - var(--width)));
}

html.js #features dl:nth-child(odd)::before
{
  right: calc( -1 * (var(--width) / var(--resize) * 1.0625 - var(--width)));
}

html.js #features dl#feature-platforms::before { background-image: url("../img/feature-platforms.png"); }
html.js #features dl#feature-ssh::before { background-image: url("../img/feature-ssh.png"); }
html.js #features dl#feature-new-terminals::before { background-image: url("../img/feature-new-terminals.png"); }
html.js #features dl#feature-clips::before { background-image: url("../img/feature-clips.png"); }
html.js #features dl#feature-customizable::before { background-image: url("../img/feature-customizable.png"); }
html.js #features dl#feature-panic-sync::before { background-image: url("../img/feature-sync.png"); }
html.js #features dl#feature-security::before { background-image: url("../img/feature-security.png"); }
html.js #features dl#feature-jump-hosts::before { background-image: url("../img/feature-jump-hosts.png"); }
html.js #features dl#feature-emulation::before { background-image: url("../img/feature-emulation.png"); }
html.js #features dl#feature-mouse-support::before { background-image: url("../img/feature-mouse-support.png"); }
html.js #features dl#feature-dark-icon::before { background-image: url("../img/prompt-icon-dark.png"); }


html.js dl.hardwrapped dt,
html.js dl.hardwrapped dd
{
  display: inline;
  margin: 0;
  padding: 0;
}

html.js dl.hardwrapped dt
{
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
}

html.js dl.hardwrapped dd
{
  color: white;
  font-weight: 400;
}

html.js #trailer video
{
  overflow: hidden;
  object-fit: fill;
  width: 100%;
  height: 100%;
}

html.js #screenshots ul
{
  margin: 1em auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 2em;
  grid-template-columns: auto;
  filter: drop-shadow(0 0 0.125em var(--purple));
}

html.js #screenshots ul li
{
  margin: 0;
  position: relative;
  width: 80rem;
  height: calc(80rem * .75);
  transition: 250ms transform ease;
}

@media (min-width: 670px)
{
  html.js #screenshots ul
  {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  html.js #screenshots ul li
  {
    width: 38rem;
    height: calc(38rem * .75);
    overflow: hidden;
  }
}

html.js #screenshots li a
{
  cursor: pointer;
}

html.js #screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 250ms border-color ease;
  transition-property: box-shadow, border-color;
  -webkit-object-fit: cover;
  object-fit: cover;
  border-radius: .25em;
}

html.js #viewer
{
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 100;
}

html.js #viewer #image
{
  display: block;
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 100vw;
  max-height: 100vh;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
}

html.js body.viewer
{
  overflow: hidden;
  pointer-events: none;
}

html.js body.viewer #viewer
{
  opacity: 1;
  pointer-events: all;
}

html.js body.viewer #viewer #image
{
  transform: scale(1);
}

html.js body[data-viewer="screenshot-01"] #viewer #image { background-image: url("../img/prompt3-screenshot-01.png"); }
html.js body[data-viewer="screenshot-02"] #viewer #image { background-image: url("../img/prompt3-screenshot-02.png"); }
html.js body[data-viewer="screenshot-03"] #viewer #image { background-image: url("../img/prompt3-screenshot-03.png"); }
html.js body[data-viewer="screenshot-04"] #viewer #image { background-image: url("../img/prompt3-screenshot-04.png"); }
html.js body[data-viewer="screenshot-05"] #viewer #image { background-image: url("../img/prompt3-screenshot-05.png"); }

html.js .screenshot label,
html.js #viewer label
{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
}

html.js .screenshot label+a
{
  display: contents;
  pointer-events: none;
}

.hidden
{
  position: absolute !important;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  margin: 0;
}

/* Help Form */

html.js #help
{
  max-width: calc(1.65 * 28ch);
  margin: 0 auto;
}

.email-link
{
  text-align: center;
}

html.js #prompt-help-form
{
  display: grid;
}

html.js fieldset
{
    display: contents;
    border: 0;
}

html.js input,
html.js textarea,
html.js select
{
    border: 0.2rem solid var(--purple);
    border-radius: 0;
    outline: 0;
    -webkit-appearance: none;
    font: inherit;
    background-color: var(--darkblue);
    color: rgba(255,255,255,1);
}

html.js input:focus,
html.js textarea:focus,
html.js select:focus
{
    border-color: var(--green) !important;
    opacity: 1;
}

html.js input[disabled]
{
  opacity: 0.35;
}

html.js .more
{
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  justify-contents: start;
  margin: 1em auto;
  grid-gap: 0.5em;
}

html.js label[for="optout"]
{
  display: flex;
  align-content: center;
  align-items: center;
  color: white;
  grid-row: 1;
  grid-column: 2;
  cursor: pointer;
}

html.js input#optout
{
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: inline-block;
  margin-right: 0.5ch;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain, 0;
  transition-property: background-size;
  transition-duration: 100ms;
  transition-timing-function: ease-in-out;
  background-image: url("../img/form-checkbox.svg"), url("../img/form-checkbox-check.svg");
  border-color: transparent;
  cursor: pointer;

}

html.js input#optout:checked
{
    background-size: contain, .75ch !important;
}

html.js input#optout+#diagnostics
{
  opacity: 0;
  pointer-events: none;
  grid-column: 1 / span 2;
  grid-row: 2;
  transition-duration: 250ms;
  transition-property: opacity, max-height;
  transition-timing-function: ease-in-out;
  max-height: 0;
  overflow: hidden;
}

html.js input#optout:checked+#diagnostics
{
  opacity: 1;
  pointer-events: all;
  max-height: 100rem;
}

html.js #category
{
  background-color: var(--purple);
  background-image: url("../img/disclosure-arrow.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 1ch) 50%;
  background-size: 0.65em;
  color: white;
  position: relative;
  line-height: inherit;
  cursor: pointer;
}

html.js div.submit-button
{
    text-align: center;
}

html.js div.submit-button input[type=submit]
{
    display: inline-block;
    justify-self: center;
    background-color: var(--purple);
    color: white;
    font-family: inherit;
    font-weight: 400;
    padding: 0.25em 2em 0.5em 2em;
    width: intrinsic;
}

html.js div.textarea,
html.js div.submit-button,
html.js div.instructions,
html.js div.more,
html.js div.file-attachment,
html.js div.labeled-text.serial,
html.js div.labeled-text.ext
{
  grid-column: 1 / span 10;
}

html.js div.instructions
{
  text-align: center;
  font-size: 1.25em;
}

html.js div.instructions ul
{
  margin: 0;
  display: inline-block;
}

html.js div.instructions li
{
  margin: 0;
}

html.js div.instructions a
{
  text-decoration: underline;
}

html.js .labeled-text.name
{
  grid-column: 1 / span 5;
  margin-right: 0.25em;
}

html.js .labeled-text.email
{
  grid-column: 6 / span 5;
  margin-left: 0.25em;
}

html.js div.file-attachment
{
  display: grid;
}

html.js div.file-attachment label[for="files"]
{
  display: inline-block;
  position: relative;
  padding: 0.35em 1em 0.35em 1em;
  background: var(--cyan);
  color: black;
  cursor: pointer;
  width: auto;
  justify-self: flex-start;
}

html.js div.file-attachment input
{
  opacity: 0;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

html.js #attachedFiles
{
  color: white;
  font-size: 0.85em;
  padding: 0;
}

html.js #attachedFiles li
{
  color: white;
}

html.js div.labeled-text,
html.js div.file-attachment,
html.js div.textarea,
html.js div.submit-button,
html.js div.labeled-select
{
    grid-column: 1 / span 10;
    margin: 0.25em 0;
}

html.js div.labeled-text label,
html.js div.labeled-text input,
html.js div.textarea label,
html.js div.textarea textarea,
html.js div.file-attachment label,
html.js div.file-attachment input,
html.js div.labeled-select label,
html.js div.labeled-select select
{
    display: block;
    width: 100%;
}

html.js div.labeled-text label,
html.js div.textarea label,
html.js div.file-attachment label,
html.js div.labeled-select label
{
    font-size: 0.85em;
    color: var(--green);
    margin-bottom: .25em
}

html.js div.labeled-text input,
html.js div.textarea textarea,
html.js div.labeled-select select
{
    font-size: 1em;
    padding: 0.5em;
    font-family: inherit;
}

html.js div.textarea p,
html.js div.textarea ul
{
    color: white;
}

html.js p.helper-text
{
    margin: 2rem 0 0 0;
    padding: 0;
    grid-column: 1 / span 4;
    align-self: center;
    text-align: left;
}

html.js div.textarea textarea
{
    height: 20ch;
    padding: 1ch;
}

.website input
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

html.js #container-city
{
    grid-column: 1 / span 5;
    margin-right: 0.25em;
}

html.js #container-state
{
    grid-column: 6 / span 4;
}

html.js #container-country
{
    grid-column: 1 / span 6;
    margin-right: 0.25em;
}

html.js #container-zip
{
    grid-column: 7 / span 3;
}

html.js #footer
{
  max-width: calc(28ch * 1.65);
  margin: 2em auto;
  position: relative;
  color: white;
}

html.js #footer .hardwrapped
{
  width: 100%;
}

html.js #footer::before
{
  width: 6ch;
  height: 6ch;
  background-color: white;
  content: "";
  display: block;
  margin: 0 auto;
  -webkit-mask-image: url("../img/panic.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

html.js #footer ul,
html.js #footer li
{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-style: italic;
}

html.js #footer li:first-child
{
  font-weight: 800;
  margin: 0 auto 0.5em auto;
  font-size: 1.65em;
  font-family: var(--sans-serif);
  font-style: normal;
  position: relative;
  right: -.15em;
}

html.js #footer li:first-child span
{
  font-size: .35em;
  position: relative;
  top: -1em;
}


html.js #footer li
{
  font-size: .85em;
  margin: 0.15em auto;
}


/* Page Scaling */

@media (min-width: 240px)
{
  html.js
  {
    font-size: 1vw;
  }

  html.js body
  {
    font-size: 3rem;
  }
}

@media (min-width: 800px)
{
  html.js
  {
    font-size: 8px;
  }

  html.js body
  {
    font-size: 3rem;
  }
}