/*
	WOULD x SK (2025 PROMO PAGE)
*/
/***
The new CSS Reset - version 1.4.5 (last updated 13.1.2022)
via https://alexclark.co.nz/blog/creating-a-simple-css-slider-with-scroll-snapping
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
  -webkit-tap-highlight-color: transparent;
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)):focus:not(:focus-visible) {
  outline: none;
}

/* Preferred box-sizing value */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, main, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, input, select, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

/* Reapply the pointer cursor for anchor tags */
a {
  cursor: revert;
  text-decoration-line: none;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  display: block;
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

.black-bg {
  background-color: #000;
}

.black-text {
  color: #000;
}

.white-bg {
  background-color: #fff;
}

.white-text {
  color: #fff;
}

.red-bg {
  background-color: #fd0000;
}

.red-text {
  color: #fd0000;
}

.green-bg {
  background-color: #00fd00;
}

.green-text {
  color: #00fd00;
}

.blue-bg {
  background-color: #0000ff;
}

.blue-text {
  color: #0000ff;
}

:root {
  --margin: 2rem;
  --margin-half: 1rem;
  --margin-quarter: 0.5rem;
  --margin-double: 4rem;
  --layout-shift: 769px;
  --trans-time: 0.382s;
}
@media only screen and (min-width: 1024px) {
  :root {
    --margin: 4rem;
    --margin-half: 2rem;
    --margin-quarter: 1rem;
    --margin-double: 8rem;
  }
}

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.0625em;
}

form button, form input, form textarea, body {
  font-family: "Gabarito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

form button, table th, strong, b, .bold, h1, h2, h3 {
  font-weight: 700;
}

:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #0000ff inset;
}

:-moz-autofill { /* Firefox 18- */
  -moz-text-fill-color: #fff;
  -moz-box-shadow: 0 0 0px 1000px #0000ff inset;
}

::-moz-autofill { /* Firefox 19+ */
  -moz-text-fill-color: #fff;
  -moz-box-shadow: 0 0 0px 1000px #0000ff inset;
}

::-webkit-input-placeholder {
  color: inherit;
}

:-moz-placeholder { /* Firefox 18- */
  color: inherit;
  opacity: 0.5;
}

::-moz-placeholder { /* Firefox 19+ */
  color: inherit;
  opacity: 0.5;
}

:-ms-input-placeholder {
  color: #fff;
  overflow: hidden;
}

::selection {
  background: #00fd00;
  color: #000;
  text-shadow: none;
}

::-moz-selection {
  background: #00fd00;
  color: #000;
  text-shadow: none;
}

html {
  width: 100%;
  height: 100%;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-osx-font-smoothing: grayscale; /* fixes FF over-bolding */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  position: relative;
  background-color: #0000ff;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #fff transparent;
}

body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #0000ff;
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: pretty;
}
@media only screen and (min-width: 1024px) {
  body {
    font-size: 1.125rem;
  }
}

h1, h2, h3 {
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h1 {
  font-size: 130%;
}

h2 {
  font-size: 120%;
}

h3 {
  font-size: 110%;
}

a {
  color: inherit;
}
a:hover, a:focus:not(:active) {
  text-decoration-thickness: 0.125em;
}

figure,
svg,
img {
  display: block;
  max-width: 100%;
}

svg {
  overflow: visible;
  fill: currentColor;
}

em, .italic {
  font-style: italic;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 87.5%;
}
table th, table td {
  border: 1px solid currentColor;
  padding: 0.25em 0.5em;
  text-align: left;
}
header .wrap {
  padding-bottom: 0;
}
header .home-link:hover, header .home-link:focus:not(:active) {
  filter: brightness(1.25);
}
header img {
  display: block;
  width: 318px;
  height: auto;
  margin: 0 auto;
}

main {
  flex-grow: 1;
}
main ul, main ol {
  padding-left: 1.5em;
}
main ul {
  list-style: disc;
}
main ol {
  list-style: decimal;
}
main li + li {
  margin-top: 0.25em;
}

.tagline {
  padding: var(--margin-half) var(--margin-half) 0;
  text-align: center;
}

main h1:not(:first-child), main h2:not(:first-child), main h3:not(:first-child), main p:not(:first-child), main ul:not(:first-child), main ol:not(:first-child),
main table:not(:first-child), footer h1:not(:first-child), footer h2:not(:first-child), footer h3:not(:first-child), footer p:not(:first-child), footer ul:not(:first-child), footer ol:not(:first-child),
footer table:not(:first-child) {
  margin-block-start: 1em;
}

footer {
  text-align: center;
  font-size: 87.5%;
}
footer ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--margin-quarter);
}

.wrap {
  max-width: 56em;
  margin: 0 auto;
  padding: var(--margin) var(--margin-half);
}
.wrap + .wrap {
  padding-top: 0;
}
.wrap.narrow {
  max-width: 42em;
}
.wrap.wide {
  max-width: 84em;
}
main .wrap:only-child, .wrap.lite {
  padding-top: var(--margin-half);
  padding-bottom: var(--margin-half);
}

.promo-screens {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--margin-half) 0;
}
.promo-screens .screens-wrap {
  display: flex;
  border-radius: 4.5vmin;
  gap: var(--margin-quarter);
}
.promo-screens .screens-wrap figure {
  flex: 1;
  width: 100%;
  background-color: #000;
  box-shadow: 0 0 2.5vmin #00fd00;
  border-radius: 3.25vmin;
  padding: 5px;
}
.promo-screens .screens-wrap figure img {
  border-radius: 2vmin;
}
@media only screen and (min-width: 1024px) {
  .promo-screens {
    margin: var(--margin-half) var(--margin);
  }
  .promo-screens .screens-wrap {
    gap: var(--margin-half);
  }
  .promo-screens .screens-wrap figure {
    padding: var(--margin-quarter);
    box-shadow: 0 0 5vmin #00fd00;
  }
}

.app-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--margin-half);
}
.app-links img {
  mix-blend-mode: screen;
}
.app-links a:hover img, .app-links a:focus:not(:active) img {
  mix-blend-mode: normal;
}

@media only screen and (max-width: 768px) {
  *:has(> .overflow) {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--margin-half);
  }
  .overflow {
    width: 168.1%;
    height: auto;
  }
}
form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--margin-quarter);
  margin: var(--margin-half) 0;
}
form > div {
  width: 100%;
}
form label {
  display: block;
  margin-bottom: 0.5rem;
}
form input, form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 0.25rem;
  font: inherit;
  background-color: hsla(0, 0%, 100%, 0.1);
}
form input:focus, form textarea:focus {
  outline: 1px solid #fff;
  outline-offset: 2px;
}
form button {
  padding: 0.75rem;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 0.25rem;
  font: inherit;
  background-color: hsla(0, 0%, 100%, 0.2);
  color: inherit;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.05em;
}
form button:hover, form button:focus:not(:active) {
  background-color: #fff;
  color: #0000ff;
  box-shadow: 0 0 10px #fff;
}
form button[disabled] {
  cursor: not-allowed;
  animation: pulse 2s infinite;
  background-color: #fff;
  color: #0000ff;
}
form .honeypot {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 10px #fff;
  }
  50% {
    box-shadow: 0 0 20px #fff;
  }
}
@media only screen and (max-width: 768px) and (max-height: 400px) {
  main {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
.screenreader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}