:root {
  --bg: #353333;
  --text: #e7e7d8;
  --bg-underline: #35333380;

  --content-desktop: 1512px;

  --focus-style: var(--text);

  --text-large: 1.75rem;
  --text-semi-large: 1.5rem;
  --text-medium: 1.125rem;
  --text-normal: 1rem;
  --text-small: 0.875rem;

  --text-buy: 1.375rem;

  --spacing-quarter: 5px;
  --spacing-half: 10px;
  --spacing: 20px;
  --spacing-double: 40px;
  --spacing-triple: 60px;
  --spacing-quadruple: 120px;

  --content-padding-side: var(--spacing-double);

  --font-primary: 'freight-sans', sans-serif;
  --font-secondary: 'freight-text', serif;

  --header-height: 98px;
  --mobile-header-height: calc(33px + var(--spacing) + var(--spacing));

  --freight-big: #c8c36f;
  --freight-display: #a7a7c6;
  --freight-text: #8eb8bc;
  --freight-sans: #e5a961;
  --freight-macro: #eaa792;
  --freight-micro: #a39482;
  --freight-neo: #71989c;
  --freight-round: #856c7b;

  --white: #ffffff;
  --cream: #e7e7d8;
  --text-dark: #353333;
  --fd-yellow: #ccc76f;
  --fd-yellow-hover: #c0bb64;
  --border-color: #6c6b6b;
  --error-red: #ef4444;
}

:target {
  scroll-margin-top: 110px;
}

.inverse {
  --text: #353333;
  --bg: #e7e7d8;
}

html {
  min-height: 100vh;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

ul,
menu {
  list-style: none;
}

input,
label,
select,
button,
textarea {
  margin: 0;
  border: 0;
  padding: 0;
  white-space: normal;
  background: none;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.inverse input,
.inverse textarea {
  background: var(--white);
}

/* Removing for now and restore styled versions where appropriate */
a:focus,
input:focus,
label:focus,
select:focus,
button:focus,
textarea:focus {
  outline: 0;
}

button {
  cursor: pointer;
}

/* Remove excess padding and border in Firefox 4+ */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

strong {
  font-weight: 600;
}

.freight-big {
  --color: #c8c36f;
}

.freight-display {
  --color: #a7a7c6;
}

.freight-macro {
  --color: #eaa792;
}

.freight-micro {
  --color: #a39482;
}

.freight-sans {
  --color: #e5a961;
}

.freight-text {
  --color: #8eb8bc;
}

.freight-neo {
  --color: #71989c;
}

.freight-round {
  --color: #856c7b;
}

@media screen and (max-width: 700px) {
  :root {
    --content-padding-side: var(--spacing);
  }
}

/**
 * Buttons
 */
.swc-button {
  padding: 15px 30px;
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  border-radius: 0px !important;
  width: 156px;
  height: 49px;
  min-width: 180px;
  color: #353333;
}

@media screen and (min-width: 641px) and (max-width: 1280px) {
  .swc-button {
    min-width: 160px;
  }
}

.swc-button.primary {
  --swc-button-background-color: var(--fd-yellow);
  --swc-button-border: 1px solid var(--fd-yellow);
  --swc-button-color: var(--text-dark);

  --swc-button-background-color-hover: var(--fd-yellow-hover);
  --swc-button-border-hover: 1px solid var(--fd-yellow-hover);
  --swc-button-color-hover: var(--text-dark);
}

.swc-button.secondary {
  --swc-button-background-color: transparent;
  --swc-button-border: 1px solid var(--border-color);
  --swc-button-color: var(--text-dark);

  --swc-button-background-color-hover: var(--text-dark);
  --swc-button-border-hover: 1px solid var(--text-dark);
  --swc-button-color-hover: var(--white);
}

dialog .swc-button.primary {
  --swc-button-background-color: var(--fd-yellow);
  --swc-button-border: 1px solid var(--fd-yellow);
  --swc-button-color: var(--text-dark);

  --swc-button-background-color-hover: var(--fd-yellow-hover);
  --swc-button-border-hover: 1px solid var(--fd-yellow-hover);
  --swc-button-color-hover: var(--text-dark);
}

dialog .swc-button.secondary {
  --swc-button-background-color: transparent;
  --swc-button-border: 1px solid var(--border-color);
  --swc-button-color: var(--text-dark);

  --swc-button-background-color-hover: var(--text-dark);
  --swc-button-border-hover: 1px solid var(--text-dark);
  --swc-button-color-hover: var(--white);
}

.swc-button.confirmation {
  --swc-button-background-color: var(--fd-yellow);
  --swc-button-border: 1px solid var(--fd-yellow);
  --swc-button-color: var(--text-dark);

  --swc-button-background-color-hover: var(--fd-yellow-hover);
  --swc-button-border-hover: 1px solid var(--fd-yellow-hover);
  --swc-button-color-hover: var(--text-dark);

  --swc-button-background-color-disabled: #d1d5db;
  --swc-button-border-disabled: 1px solid #d1d5db;
  --swc-button-color-disabled: #6b7280;
}

.swc-prose p,
.swc-prose ul,
.swc-prose ol {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.swc-prose #overview p {
  font-size: var(--text-semi-large);
}

.swc-prose h1 {
  font-family: var(--font-secondary);
  font-weight: normal;
  font-size: 2em;
  margin-bottom: 1.5rem;
}

.swc-prose #overview h2 {
  display: none;
}

.swc-prose h2 {
  margin-bottom: 0;
  font-size: var(--text-normal);
  font-weight: 600;
}

.swc-prose h3 {
  margin-bottom: 0;
  font-size: var(--text-normal);
  font-weight: 600;
}

.swc-prose ul {
  list-style-type: square;
  padding-left: 1rem;
}

.swc-prose ol {
  padding-left: 1rem;
}

.swc-prose a {
  text-decoration: underline;
}

.swc-prose a:hover {
  color: #000;
}

.swc-prose h2 + p,
.swc-prose h3 + p {
  margin-top: 0;
}

.swc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.swc-prose th,
.swc-prose td {
  border: 1px solid var(--border-color);
  padding: 0.5rem;
}