@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-semibold.woff?v1-9d25802ddfa1ab9b3e0b3a793c4136b2) format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-regular.woff?v1-711584ccb5e518d75d946557b4cd5372) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-light.woff?v1-9b57dafe26a9f1e5a142ff2a55a27bc5) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-semiboldit.woff?v1-9694d75f9468a04e4028618387d95e8f) format("woff");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-regularit.woff?v1-7dfc525dd7e87c76256dcea0abf9ce1a) format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "ProximaNova";
  src: url(https://assets.pocketsmith.com/fonts/proximanova-lightit.woff?v1-8580c500ddb1be9351efb113dc358938) format("woff");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "ProximaVara";
  src: url(https://assets.pocketsmith.com/fonts/proximavara.woff2?v1-467915bbf9aa5b0d9c96f92c3c74b29b) format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-display: swap;
  font-synthesis: none;
}
@font-face {
  font-family: "ProximaVara";
  src: url(https://assets.pocketsmith.com/fonts/proximavara.woff2?v1-467915bbf9aa5b0d9c96f92c3c74b29b) format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-display: swap;
  font-synthesis: none;
  font-style: italic;
  font-variation-settings: "ital" 125;
}
@font-face {
  font-family: "Raleway";
  src: url(https://assets.pocketsmith.com/fonts/raleway-light.woff?v1-e0621c851c98d15e3d225b58e60b1df3) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Raleway";
  src: url(https://assets.pocketsmith.com/fonts/raleway-regular.woff?v1-592669e43599a61f742748fe415baba8) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Raleway";
  src: url(https://assets.pocketsmith.com/fonts/raleway-semibold.woff?v1-246f2e0bc10f22ec86399ca930b67537) format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "RalewayVara";
  font-weight: 100 900;
  font-display: swap;
  font-synthesis: none;
  src: url(https://assets.pocketsmith.com/fonts/ralewayvara.woff2?v1-6d2e91f3fab4e2b9abab842c0f2a9c2e) format("woff2-variations");
}
@font-face {
  font-family: "Bely";
  src: url(https://assets.pocketsmith.com/fonts/bely-regular.woff2?v1-61c7e339a39158816d53ca1b4e88e0c7) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bely";
  src: url(https://assets.pocketsmith.com/fonts/bely-regularit.woff2?v1-cce67d32e19cf5e3942b903872abcd9e) format("woff2");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Bely";
  src: url(https://assets.pocketsmith.com/fonts/bely-bold.woff2?v1-94d32ef0091e749371ac580e4580084f) format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Bely";
  src: url(https://assets.pocketsmith.com/fonts/bely-boldit.woff2?v1-f8fe7d536122b52e4d6be3b270521547) format("woff2");
  font-weight: bold;
  font-style: italic;
}
.typography-alt h1, .typography-alt h2, .typography-alt h3, .typography-alt h4, .typography-alt h5, .typography-alt h6 {
  font-weight: bold;
}
.typography-alt {
  font-family: "ProximaNova", sans-serif;
}
@supports (font-variation-settings: normal) {
  .typography-alt {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    font-family: "ProximaVara", sans-serif;
  }
}
.typography-alt {
  font-size: 18px;
  line-height: 24px;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: normal;
}
.typography-alt em,
.typography-alt i {
  font-variation-settings: "ital" 125;
}
.typography-alt strong {
  font-weight: bold;
}
.typography-alt h1 {
  font-size: 70px;
  line-height: 72px;
  margin: 0;
}
.typography-alt h2 {
  font-size: 58px;
  line-height: 62px;
  margin: 0;
}
.typography-alt h3 {
  font-size: 48px;
  line-height: 54px;
  margin: 0;
}
.typography-alt h4 {
  font-size: 40px;
  line-height: 44px;
  margin: 0;
}
.typography-alt h5 {
  font-size: 34px;
  line-height: 40px;
  margin: 0;
}
.typography-alt h6 {
  font-size: 28px;
  line-height: 32px;
  margin: 0;
}
.typography-alt h1 + p, .typography-alt h2 + p, .typography-alt h3 + p, .typography-alt h4 + p, .typography-alt h5 + p, .typography-alt h6 + p {
  margin: 0;
}
.typography-alt .heading--xxl {
  font-size: 70px;
  line-height: 72px;
}
.typography-alt .heading--xl {
  font-size: 58px;
  line-height: 62px;
}
.typography-alt .heading--lg {
  font-size: 48px;
  line-height: 54px;
}
.typography-alt .heading--md {
  font-size: 40px;
  line-height: 44px;
}
.typography-alt .heading--sm {
  font-size: 34px;
  line-height: 40px;
}
.typography-alt .heading--xs {
  font-size: 28px;
  line-height: 32px;
}
.typography-alt .heading--proxima {
  font-family: "ProximaNova", sans-serif;
}
@supports (font-variation-settings: normal) {
  .typography-alt .heading--proxima {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    font-family: "ProximaVara", sans-serif;
  }
}
.typography-alt .heading--proxima {
  letter-spacing: normal;
}
.typography-alt .heading--bely {
  font-family: "Bely", sans-serif;
  letter-spacing: 0.02em;
}
.typography-alt .heading--bold {
  font-weight: bold;
}
.typography-alt .heading--regular {
  font-weight: normal;
}
.typography-alt .heading--italic {
  font-style: italic;
  font-variation-settings: "ital" 125;
}
.typography-alt .heading--cap {
  text-transform: uppercase;
}
.typography-alt .body--lg {
  font-size: 20px;
  line-height: 26px;
}
.typography-alt .body--md {
  font-size: 18px;
  line-height: 24px;
}
.typography-alt .body--sm {
  font-size: 16px;
  line-height: 20px;
}
.typography-alt .body--xs {
  font-size: 14px;
  line-height: 18px;
}

body {
  font-family: "ProximaNova", sans-serif;
}
@supports (font-variation-settings: normal) {
  body {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    font-family: "ProximaVara", sans-serif;
  }
}
body {
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p {
  margin-bottom: 2rem;
  margin-top: 0;
}

strong,
b {
  font-weight: 600;
}

em,
i {
  font-variation-settings: "ital" 125;
}

a,
.faux-link {
  color: var(--colour-text-link);
}

.faux-link {
  text-decoration: underline;
}
.faux-link:disabled {
  color: #666;
}
.faux-link:not(:disabled) {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
th,
.h1,
.h2,
.h3,
.h4,
.h5,
.th {
  font-weight: 300;
}

h1,
.h1 {
  font-size: 2.4rem;
}

h2,
.h2 {
  font-size: 1.6rem;
  margin-bottom: 2.7rem;
  margin-top: 1rem;
}

h3,
.h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

small {
  font-size: 1.1rem;
}

input,
textarea,
select {
  font-family: inherit;
}

html,
body {
  font-family: "ProximaNova", sans-serif;
}
@supports (font-variation-settings: normal) {
  html,
  body {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    font-family: "ProximaVara", sans-serif;
  }
}
html,
body {
  font-weight: 300;
  font-size: 14px;
  box-sizing: border-box;
}

body * {
  box-sizing: inherit;
}

body {
  text-align: center;
  background: url(https://assets.pocketsmith.com/images/blurred-scene.jpg?v1-dd0964b9b7ce468279090ec1d6e18331);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

h1 {
  color: var(--colour-text-accent);
  font-weight: 600;
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0.67em;
}

p {
  line-height: 1.3em;
}

a {
  color: var(--colour-text-accent);
}

.button {
  border-radius: 2px;
  background-color: #009E79;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: normal;
  display: block;
  float: right;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.panel {
  display: inline-block;
  max-width: 500px;
  margin: 10% 50px 50px;
  padding: 40px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  color: #4c3d2c;
  text-align: left;
}

.panel::after {
  content: "";
  display: table;
  clear: both;
}

.towtruck {
  position: relative;
  z-index: 0;
  width: 80%;
  max-width: 580px;
  margin-top: -90px;
  margin-bottom: 50px;
}

.dashboard {
  float: right;
  padding: 8px 16px;
  position: relative;
  z-index: 1;
}