html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  zoom: 90%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  font-size: inherit;
  line-height: inherit;
  width: auto;
  height: auto;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

.w-code-component > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Looxx palette — mirrors the tokens the app's auth shell defines
   (webapp/index.html #authModal): warm paper ground, warm-black ink and a
   clay accent, instead of the template's pure white / pure black. */
:root {
  --color--background-color: #faf7f2;
  --fonts--main-font: Inter, sans-serif;
  --color--font: #1a1714;
  --fonts--paragraph-font: Inter, sans-serif;
  --color--box-stroke: #1a1714;

  /* Looxx brand additions — used by the brand layer at the end of this file. */
  --looxx--paper: #faf7f2;
  --looxx--ink: #1a1714;
  --looxx--ink-soft: #5a5349;
  --looxx--line: #1a17142e;
  --looxx--clay: #b5794f;
  --looxx--clay-deep: #8f5f37;
  --looxx--clay-tint: #b5794f24;
  --looxx--display-font: "Playfair Display", Georgia, serif;
  --white\<deleted\|variable-67f9a9e3\>: #fff;
  --color--box-color: #fff;
  --color--acent-color\<deleted\|variable-b11cb380-92f0-7b53-a048-2873b207fd9a\>: #e8a051;
  --color--font-gradient-color-02\<deleted\|variable-fa77f4ea-a050-0b0b-442d-bc496cfe2b90\>: #00000080;
  --color--font-gradient-color-01\<deleted\|variable-7747efcb-b240-c0f7-f8d5-e28d44678092\>: #000;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  background-color: var(--color--background-color);
  font-family: var(--fonts--main-font);
  color: var(--color--font);
  font-size: 14px;
  line-height: 1.2;
}

h1 {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 72px;
  font-weight: 500;
  line-height: 1.2;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 64px;
  font-weight: 500;
  line-height: 1.4;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

p {
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

a {
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  text-decoration: none;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

img {
  max-width: 100%;
  display: inline-block;
}

blockquote {
  border-right: 2px solid var(--color--font);
  border-left: 2px solid var(--color--box-stroke);
  font-family: var(--fonts--main-font);
  text-transform: none;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 50px 20px;
  font-size: 20px;
  font-style: normal;
  line-height: 1.7;
}

figure {
  margin-bottom: 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
  font-family: DM Sans;
  font-size: 16px;
}

.white-colors-show-case {
  background-color: #fff;
  border-radius: 300px;
  width: 54px;
  height: 54px;
  box-shadow: 0 0 9px #00000047;
}

.white-colors-show-case.black {
  box-shadow: none;
  background-color: #7d7d7d;
}

.yellow-color-show-case {
  background-color: var(--white\<deleted\|variable-67f9a9e3\>);
  border-radius: 300px;
  width: 54px;
  height: 54px;
}

.color-container {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.center-top {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.black-background {
  background-color: var(--color--box-color);
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 12px;
}

.color-holder {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: flex;
}

._4-col-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.black-background-padding {
  padding: 40px;
}

.container {
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
  position: relative;
}

.container.navbar-container {
  background-color: var(--color--background-color);
  border-radius: 9px;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  display: flex;
  position: relative;
  overflow: visible;
}

.container.no-paddings {
  padding-top: 0;
  padding-bottom: 0;
}

._100width {
  width: 100%;
}

.border-box {
  border: 1px solid #cdcdcd;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.button {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  text-align: center;
  border-radius: 12px;
  padding: 14px 19px;
  font-size: 16px;
  font-weight: 300;
  transition: color .375s, transform .35s cubic-bezier(.68, -.55, .265, 1.55), background-color .45s;
}

.button:hover {
  background-color: var(--color--font);
  color: var(--color--box-color);
  transform: scale(1.05);
}

.button.dark-button {
  border-width: 1px 1px 3px;
  border-color: var(--color--background-color);
  background-color: var(--color--font);
  color: var(--color--background-color);
}

.style-guide-box-holder {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  border-radius: 10px;
  padding: 20px;
}

.style-guide-box-container {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-direction: column;
  display: flex;
}

.colors-buttons {
  grid-column-gap: 90px;
  align-items: center;
  display: flex;
}

.section.dark-section {
  background-color: var(--color--box-stroke);
}

.button-container {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  background-color: var(--color--background-color);
  border: 2px solid #ebebeb;
  border-radius: 20px;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  display: flex;
}

._8-col-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

._6-col-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.cols-text {
  font-size: 15px;
  font-weight: 400;
}

.paragraph-xl {
  font-size: 20px;
  line-height: 1.5;
}

.navbar {
  background-color: #0000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: sticky;
  top: 0;
}

.navbar-holder {
  width: 100%;
  height: 100%;
}

.navbar-container {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.nav-menu-link-holder {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.brand-image {
  width: 100%;
  padding-bottom: 11px;
}

.nav-menu {
  background-color: var(--color--background-color);
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  width: 99%;
  max-height: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  display: flex;
  position: fixed;
  inset: .5% 0% 0%;
  overflow: hidden;
}

.nav-links {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-top: 130px;
  display: flex;
}

.nav-link {
  color: var(--color--font);
  text-align: left;
  border-bottom: 3px solid #fff0;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 6px 12px 3px;
  font-size: 64px;
  font-weight: 600;
  transition: background-color .6s;
  display: flex;
  bottom: -1px;
}

.nav-link.w--current {
  color: #fff;
  background-color: #000;
}

.footer-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footer-content {
  grid-column-gap: 70px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: auto auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.title-small {
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 12px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.footer-link {
  color: var(--color--font);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  text-decoration: none;
  transition: color .475s;
}

.footer-link:hover {
  color: var(--color--font);
}

.footer-divider {
  border-top: 1px solid #dfdfdf;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 120px;
  padding-top: 40px;
  display: flex;
}

.footer-copyright-center {
  font-size: 15px;
}

.black-link {
  color: var(--color--font);
  text-decoration: underline;
  transition: color .375s;
}

.black-link:hover {
  color: var(--color--acent-color\<deleted\|variable-b11cb380-92f0-7b53-a048-2873b207fd9a\>);
}

.title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1.3;
}

.title.white-text {
  color: var(--color--box-color);
}

.black-text {
  color: var(--color--font);
}

.featured-logo-wrapper {
  width: 110px;
}

.title-container {
  max-width: 762px;
}

.paragraph-holder {
  max-width: 465px;
}

.paragraph-holder.xl {
  max-width: 700px;
}

.early-access-card {
  perspective: 1500px;
  width: 100%;
  min-width: 370px;
  position: relative;
}

.early-access-tag-holder {
  grid-column-gap: 10px;
  align-items: center;
  font-family: IBM Plex Sans Hebrew;
  font-size: 18px;
  display: flex;
}

.early-access-title-holder {
  max-width: 349px;
}

.power-feature-card-container {
  background-color: #0d0d0d;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.power-feature-heading {
  font-size: 20px;
}

.testimonial-slide {
  width: 100%;
  height: auto;
  margin-left: 15px;
  margin-right: 15px;
  left: -15px;
}

.hide {
  display: none;
}

.pricing-tag {
  text-transform: uppercase;
  border: 1px solid #fff3;
  border-radius: 100px;
  padding: 9px 16px;
  font-family: IBM Plex Sans Hebrew;
  font-size: 18px;
}

.pricing-header {
  font-size: 42px;
  font-weight: 500;
}

.pricing-list-holder {
  border-top: 1px solid #414142;
  border-bottom: 1px solid #414142;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 55px;
  padding-bottom: 55px;
}

.checked-list-holder {
  grid-column-gap: 18px;
  align-items: center;
  display: flex;
}

.pricing-footer-holder {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cta-form-holder {
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 75px;
  padding-bottom: 32px;
  display: flex;
  position: relative;
}

.cta-form-holder.no-paddings {
  padding-top: 13px;
  padding-bottom: 13px;
}

.text-field {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  border-radius: 14px;
  width: 100%;
  height: 52px;
  margin-bottom: 0;
  font-size: 18px;
  transition: border-color .45s, box-shadow .425s;
}

.text-field:focus {
  border-width: 1px 1px 3px;
  border-color: #616161;
}

.text-field::placeholder {
  color: var(--color--font-gradient-color-02\<deleted\|variable-fa77f4ea-a050-0b0b-442d-bc496cfe2b90\>);
  font-size: 15px;
}

.text-field.invert {
  border-width: 1px 1px 3px;
  border-color: var(--color--background-color);
  background-color: var(--color--box-stroke);
  color: var(--color--background-color);
}

.text-field.invert::placeholder {
  color: #ffffffb0;
  font-weight: 300;
}

.submit-button {
  background-color: var(--color--font);
  background-image: url("../images/icon-submit-arrow.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  padding: 14px 2px 2px;
  transition: background-color .375s;
  position: absolute;
  right: 6px;
}

.submit-button:hover {
  background-color: #0f56c3;
}

.error-message {
  color: #fff;
  text-align: center;
  background-color: #333;
  border: 1px solid #aa5252;
  border-bottom-width: 3px;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 0;
  font-size: 14px;
  box-shadow: 0 4px 4px #0000003d, 0 0 14px #0000003d, 0 21px 36px #ff00041f;
}

.error-message::placeholder {
  color: #7d7d7d;
  font-family: IBM Plex Sans Hebrew;
  font-size: 15px;
}

.help-holder {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.help-container {
  border-right: 1px solid #d8d8d8;
  min-width: 270px;
  padding-top: 80px;
  position: relative;
}

.help-content-holder {
  grid-row-gap: 30px;
  flex-direction: column;
  display: flex;
}

.help-heading-holder {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  flex-flow: column;
  display: flex;
}

.help-back-link-holder {
  grid-column-gap: 8px;
  color: #060606;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  transition: color .4s;
  display: flex;
}

.help-back-link-holder:hover {
  color: var(--color--font-gradient-color-01\<deleted\|variable-7747efcb-b240-c0f7-f8d5-e28d44678092\>);
}

.help-icon-holder {
  width: 8px;
}

.help-icon {
  width: 100%;
}

.help-link-holder {
  grid-row-gap: 36px;
  flex-direction: column;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.help-link-container {
  z-index: 3;
  grid-column-gap: 16px;
  opacity: .5;
  color: var(--color--font);
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
  left: 2px;
}

.help-link-container.w--current {
  border-right: 3px solid var(--color--font);
  opacity: 1;
}

.help-link-icon-holder {
  width: 26px;
}

.help-link-icon {
  filter: invert();
  width: 100%;
}

.help-center-pragraph-holder {
  max-width: 570px;
}

.figma-file-holder {
  margin-top: 40px;
  margin-bottom: 40px;
}

.figma-file-container {
  grid-column-gap: 32px;
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  opacity: 1;
  border-radius: 8px;
  align-items: flex-start;
  padding: 26px;
  display: flex;
  overflow: hidden;
}

.figma-file-container.center {
  white-space: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.figma-file-icon-holder {
  width: 41px;
  min-width: 41px;
  height: 41px;
}

.figla-file-icon {
  filter: invert();
  width: 100%;
}

.figma-file-content-holder {
  grid-row-gap: 10px;
  flex-direction: column;
  display: flex;
}

.figma-header {
  font-size: 24px;
}

.full-width-image-holder {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 14px;
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  display: flex;
}

.full-width-image {
  border-radius: 13px;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 85px;
}

.link {
  text-decoration: underline;
  transition: color .375s;
}

.link:hover {
  color: #afafaf;
}

.change-log-block-holder {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 600px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

._404 {
  grid-column-gap: 30px;
  grid-row-gap: 15px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.menu-button {
  justify-content: center;
  align-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: flex;
}

.menu-button.w--open {
  z-index: 1;
  background-color: #fff0;
}

.brand {
  width: 130px;
}

.brand.w--current {
  z-index: 1;
}

.hero-text-holder {
  flex-direction: column;
  align-items: center;
  max-width: 740px;
  display: flex;
}

.hero-text-holder.small {
  max-width: 600px;
  position: relative;
}

.hero-paragraph-holder {
  max-width: 410px;
}

.hero-paragraph-holder.xl {
  max-width: 600px;
}

.title-holder {
  z-index: 2;
  grid-row-gap: 12px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 60px;
  display: flex;
  position: relative;
}

.reviews-logos-holder {
  align-items: center;
  padding-top: 35px;
  padding-bottom: 35px;
  display: flex;
  overflow: hidden;
}

.reviews-logos-container {
  grid-column-gap: 90px;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

.reviews-logos {
  min-width: 130px;
}

.reviews-logo-image {
  filter: invert(66%);
  width: 100%;
}

.grey-text {
  color: #202020cc;
  font-size: 14px;
}

.grey-text.no-marings {
  margin-bottom: 0;
}

.deploying-app-title-holder {
  max-width: 440px;
  margin-bottom: 20px;
}

.deploying-app-link-holder {
  grid-column-gap: 8px;
  align-items: center;
  margin-top: 32px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  display: flex;
}

.deploying-app-images-holder {
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.deploying-app-paragraph-holder {
  max-width: 530px;
}

.gradient-line {
  opacity: .5;
  background-image: linear-gradient(to right, #ebebeb00, #ebebeb 17% 81%, #ebebeb00);
  width: 100%;
  height: 1px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.tab-link {
  background-color: #19191b;
  border: 1px solid #2f2f2f;
  border-radius: 16px;
  height: 100%;
  padding: 23px;
  transition: border-color .425s;
}

.tab-link:hover {
  border-color: #8a8a8a;
}

.tab-link.w--current {
  background-color: #1b1c1d;
  border-color: #fff;
}

.footer-signup-holder {
  flex-direction: column;
  width: 320px;
  display: flex;
}

.footer-title {
  margin-top: 11px;
  margin-bottom: 24px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.form {
  grid-column-gap: 12px;
  align-items: center;
  width: 100%;
  display: flex;
}

.success-message {
  background-color: var(--color--box-color);
  border: 1px solid #5d5d5d;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
}

.success-message.dark {
  border-color: var(--color--background-color);
  color: var(--color--background-color);
  background-color: #202020;
  border-bottom-width: 3px;
  padding-left: 52px;
  padding-right: 52px;
  font-weight: 400;
}

.form-block {
  width: 100%;
  margin-bottom: 0;
}

.social-media-holder {
  grid-column-gap: 30px;
  align-items: center;
  margin-top: 12px;
  display: flex;
}

.social-media-container {
  width: 24px;
}

.social-media-image {
  filter: invert();
  width: 100%;
}

.footer-holder {
  z-index: 2;
  position: relative;
}

.footer-container {
  z-index: 2;
  background-color: var(--color--background-color);
  padding-top: 50px;
  padding-bottom: 30px;
  position: relative;
}

.grid-simple-feature {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.feature-grid-line {
  background-image: linear-gradient(180deg, #0000, var(--color--font) 25%, var(--color--font) 75%, #fff0);
  opacity: .5;
  width: 2px;
  height: auto;
}

.more-pricing-options {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 40px;
  display: flex;
}

.enterprise-price-holder {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--box-color);
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px;
  display: flex;
}

.enterprise-price-container {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-direction: column;
  display: flex;
}

.enterprise-price-heading {
  font-size: 32px;
}

.faq-title-holder {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 120px;
  display: flex;
}

.faq-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  width: 100%;
  display: flex;
}

.faq-holder {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--box-color);
  font-family: var(--fonts--paragraph-font);
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  padding: 22px;
  transition: border-color .425s, background-color .325s;
}

.faq-holder:hover {
  background-color: var(--color--box-color);
  border-width: 1px 1px 3px;
  border-color: #656565;
}

.faq-question-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.open---close-button {
  filter: invert(53%);
  width: 21px;
}

.faq-answer-holder {
  overflow: hidden;
}

.faq-answer {
  color: #000000bf;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.3;
}

.faq-question {
  color: var(--color--font);
  font-size: 18px;
  font-weight: 500;
}

.featured-blog-wrapper {
  margin-top: 20px;
  margin-bottom: 44px;
}

.featured-blog {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  transition: transform .325s, background-color .325s;
  display: grid;
  overflow: hidden;
}

.featured-blog:hover {
  transform: translate(0, -15px);
}

.featured-blog-content {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: left;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 60px;
  display: flex;
}

.featured-blog-title {
  font-size: 32px;
  font-weight: 500;
}

.featured-blog-title.smaller {
  color: var(--color--font);
  font-size: 22px;
}

.featured-blog-paragraph {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.featured-blog-paragraph.dark {
  color: var(--color--font);
}

.featured-blog-image-holder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 500px;
  display: flex;
}

.featured-blog-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.blog-grid-wrapper {
  margin-top: 30px;
}

.blog-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.blog-grid-link {
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 12px;
  transition: transform .3s;
}

.blog-grid-link:hover {
  transform: translate(0, -8px);
}

.blog-thumbnail {
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 8px;
  width: 100%;
  max-height: 300px;
}

.blog-content-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: left;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  padding: 27px;
  display: flex;
}

.blog-thumbnail-wrapper {
  position: relative;
}

.share-social-media-icon-holder {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  opacity: .51;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  transition: opacity .3s, transform .375s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
}

.share-social-media-icon-holder:hover {
  opacity: 1;
  transform: scale(1.2);
}

.blog-rich-text {
  text-align: left;
}

.blog-rich-text h1 {
  font-size: 52px;
}

.blog-rich-text h2 {
  font-size: 42px;
}

.blog-rich-text h3 {
  font-size: 32px;
}

.blog-rich-text h4 {
  font-size: 28px;
}

.blog-rich-text h5 {
  font-size: 26px;
}

.share-icon {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  filter: invert();
  justify-content: center;
  align-items: center;
  width: 24px;
}

.blog-name-details {
  grid-column-gap: 0px;
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-date {
  color: var(--color--font);
  letter-spacing: .5px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.5px;
}

.blog-details-holder {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 70px;
  display: flex;
}

.blog-details-main-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.share-blog-icons {
  grid-column-gap: 19px;
  grid-row-gap: 19px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-details---title {
  font-size: 42px;
  font-weight: 400;
}

.blog-details-content {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.blog-details-main-image-holder {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  border-radius: 14px;
  width: 70%;
  margin: 60px auto;
  padding: 24px;
  overflow: hidden;
}

.extra-features-perspective {
  perspective: 1500px;
}

.white-paragraph {
  color: var(--color--background-color);
}

._404-logo {
  width: 170px;
  margin-bottom: 24px;
}

.menu-holder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  display: flex;
  position: relative;
}

.desktop-button-holder {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  display: flex;
}

.hero-section-holder {
  height: 220vh;
}

.hero-section-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  display: flex;
  position: sticky;
  top: 0;
}

.hero-heading-holder {
  max-width: 1000px;
}

.hero-title {
  text-align: center;
  font-size: 110px;
  font-weight: 800;
}

.hero-phone-holder {
  width: 100%;
  max-width: 360px;
  position: absolute;
}

.hero-phone-image {
  z-index: 2;
  width: 100%;
  position: relative;
  /* Decorative bezel only - its alpha-transparent screen cutout would
     otherwise still catch clicks meant for the iframe underneath. */
  pointer-events: none;
}

.hero-app-holder {
  /* The screen's shape is taken FROM the artwork instead of being
     approximated on top of it. images/phone-frame.avif is a photograph
     with a transparent screen cutout, and no border-radius can trace a
     photographed corner exactly — an ellipse is either fractionally too
     square (screen content leaks past the bezel) or fractionally too
     round (the page background shows through inside the bezel). Both
     read as "the screen doesn't fit".
     So this polygon is generated from the image's own alpha channel:
     flood-fill the transparent screen cutout (seeded from the centre —
     note the margin *around* the phone is transparent too, which is what
     made naive full-bleed content leak, so it must not be included),
     then grow that region by 8px so the boundary sits UNDER the ~57px
     thick bezel, then trace and simplify the outline to 1px. Being
     under the bezel is what makes this robust: the frame paints over the
     boundary, so a gap is structurally impossible, and there is ~50px of
     slack before it could ever reach the outer transparent margin.
     Percentages (not px) so it scales with the phone as the
     feature-scroll instance grows via transform.
     Regenerate with the same flood-fill+dilate+trace if the phone
     artwork is ever replaced — do not hand-tune it. */
  clip-path: polygon(19.66% 1.85%,16.36% 1.96%,13.29% 2.30%,11.21% 2.76%,9.29% 3.44%,7.37% 4.42%,5.99% 5.51%,5.45% 6.15%,5.07% 6.83%,4.61% 8.38%,4.53% 90.60%,4.84% 92.45%,5.22% 93.32%,5.68% 94.00%,6.30% 94.64%,7.30% 95.39%,9.29% 96.41%,11.21% 97.09%,13.52% 97.58%,16.36% 97.89%,19.97% 98.00%,80.49% 98.00%,83.64% 97.89%,86.48% 97.58%,88.79% 97.09%,90.71% 96.41%,92.32% 95.62%,92.86% 95.28%,94.16% 94.19%,94.62% 93.58%,95.08% 92.68%,95.39% 91.43%,95.47% 9.36%,95.16% 7.40%,94.78% 6.53%,94.32% 5.85%,93.09% 4.72%,92.32% 4.23%,90.71% 3.44%,89.86% 3.10%,88.63% 2.72%,86.48% 2.27%,83.64% 1.96%,80.03% 1.85%);
  /* Deliberately smaller than the cutout's own inset: the screen content
     only has to COVER the clip region, which then cuts the exact shape.
     Overshooting into the bezel is free (the frame hides it), while
     undershooting would leave a gap the clip can't fill back in. Keep
     both values below the clip's own bounds (4.53% / 1.85%).
     Note padding percentages resolve against WIDTH on every side, so the
     vertical value here insets less than it reads — which only adds to
     the coverage margin. */
  padding: 1.5% 4.2%;
  position: absolute;
  inset: 0%;
}

.hero-app {
  object-fit: cover;
  /* No border-radius: .hero-app-holder's clip-path is the single source
     of truth for the screen's shape now. A radius here would be a second,
     less accurate shape fighting the first — it can only ever cut back
     inside the real cutout and reintroduce the gap. */
  width: 100%;
  height: 100%;
}

.fixed-nav {
  z-index: 20;
  position: fixed;
  inset: 0% 0% auto;
}

/* flex-start, not center. .hero-cta is hidden with visibility:hidden, which
   still occupies layout space — and it grew to ~370px when the field, its note
   and the three reassurance points replaced two buttons. Heading + CTA then
   overflow the centered 100vh box and flex centering pushes the overflow out
   BOTH ways, lifting the headline above the padding edge and under the fixed
   header: measured at -15px on a 1440x800 viewport and -33px at 1280x720,
   while 1600x1000 still fit and looked fine. Starting the column at the top
   makes the headline's position the same on every viewport height instead of
   drifting with it.

   padding-top is measured, not derived: 232px puts the headline's box 132px
   down the viewport for ~59px of clear space under the 73px header, on every
   screen height. (The -50px translate on .hero-heading-container and the type's
   own line-box leading both eat into it, so the number is not padding minus
   header.) */
/* height is auto, and the padding-bottom below is what sets the gap between
   the hero and the section after it. That is not obvious, so:

   This element is the one that actually pins (see .hero-section-holder — the
   container above it is 100% of its own parent, so ITS sticky is a no-op).
   It releases at scrollY = holderHeight - thisHeight, while
   .brand-marquee-section starts entering the viewport at
   scrollY = holderHeight - viewportHeight. Work through what each is doing
   before and after that and the settled gap between the CTA's bottom edge
   and the next section comes out as:

       gap = thisHeight - (distance from viewport top to the CTA's bottom
                           edge while pinned)

   Viewport height cancels out entirely, and so does the stage height — which
   is why raising .hero-section-holder never fixed any of this. What was left
   was `height: 100vh` making the left-hand side track the screen while the
   right-hand side stayed a fixed stack of pixels, so the gap swung with
   viewport height: measured +157px at 375x812, +104 at 415x770, and -61 at
   320x568 / -88 at 1366x768, i.e. the CTA ran INTO the next section on short
   screens and left a hole on tall ones.

   Sizing to content instead puts both sides of that subtraction in the same
   units, and the gap becomes a constant: 121px at every size measured from
   320x568 to 1440x900. padding-bottom is therefore the dial for it — it is
   the only part of thisHeight that is not the content itself. */
.hero-heading-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 232px;
  padding-bottom: 150px;
  display: flex;
  position: sticky;
  top: 0;
  /* Sits under the phone in the stack below — see the z-index note on
     .hero-phone-wrapper. */
  z-index: 1;
}

.hero-phone-wrapper {
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 50vh 0% 0%;
  /* Explicit rather than relying on DOM order: on short viewports the
     headline (pushed down by .hero-heading-wrapper's padding-top, added for
     header clearance) can now reach far enough down to overlap the phone at
     rest. When it does, the phone — the thing actually moving — should read
     as in front, not the static wordmark behind it. */
  z-index: 2;
}

.hero-heading-container {
  transform: translate(0, -50px);
}

.features-wrapper {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  padding: 100px 80px;
  display: flex;
  overflow: hidden;
}

.features-wrapper.testimonial-wrapper {
  padding-top: 0;
}

.freatures-grid {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.feature-item-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.feature-icon {
  width: 140px;
  margin-bottom: 24px;
}

.feature-heading {
  color: var(--color--background-color);
  font-size: 22px;
  font-weight: 500;
}

.feature-heading.dark {
  color: var(--color--font);
}

.grey-paragraph {
  opacity: .8;
  color: var(--color--background-color);
}

.feature-scroll-section-holder {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  padding-top: 100px;
  display: flex;
}

.feature-scroll-phone-holder {
  width: 100%;
  max-width: 27%;
}

.hero-phone-holder-normal {
  width: 100%;
  position: sticky;
  top: 90px;
}

.featuer-list-holder {
  grid-column-gap: 280px;
  grid-row-gap: 280px;
  flex-flow: column;
  margin-top: 16%;
  margin-bottom: 16%;
  display: flex;
}

.list-title {
  font-size: 58px;
  font-weight: 600;
}

.feature-item-container {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  max-width: 510px;
  display: flex;
}

.road-map-holder {
  padding-top: 100px;
  padding-bottom: 100px;
}

.center-text {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-holder {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.road-map-grid {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-top: 60px;
}

.roadmap-item {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: column;
  display: flex;
}

.road-map-icon {
  width: 120px;
}

.road-map-icon.arrow {
  width: 70px;
  margin-top: 60px;
  margin-bottom: 24px;
}

.road-map-icon.arrow-down {
  width: 70px;
}

.road-map-icon.arrow-up-mobile {
  display: none;
}

.road-map-icon.middle {
  width: 70px;
  margin-top: 60px;
  margin-bottom: 24px;
}

.road-map-text-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.cta-holder {
  background-color: var(--color--box-stroke);
  text-align: center;
  border-radius: 17px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.cta-content {
  padding-top: 40px;
}

.white-title {
  color: var(--color--background-color);
}

/* The 280px window crops the phone so it reads as rising into the panel from
   below. margin-top drops it further down that panel: the two store badges
   that used to sit between the copy and the phone have moved to the footer,
   and without them the phone sat too close under the email field. */
.cta-phone-holder {
  width: 100%;
  max-width: 310px;
  height: 280px;
  margin-top: 30px;
  overflow: hidden;
}

.form-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  display: flex;
}

.from-cta {
  width: 100%;
  max-width: 400px;
  margin-top: 12px;
  margin-bottom: 36px;
}

.brand-logo {
  width: 100%;
  max-width: 150px;
}

.brand-logo-inside {
  width: 100%;
}

.hero-features-holder {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 75px;
  padding-bottom: 75px;
  display: flex;
}

.hero-title-holder {
  max-width: 830px;
}

.button-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.google-play-button {
  transition: transform .425s cubic-bezier(.175, .885, .32, 1.275);
}

.google-play-button:hover {
  transform: scale(1.1);
}

.phone-wrapper {
  max-width: 450px;
}

.slider {
  background-color: #ddd0;
  height: auto;
}

.mask {
  max-width: 32%;
  height: auto;
  overflow: visible;
}

.slide {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--background-color);
  border-radius: 15px;
  height: auto;
  margin-right: 19px;
  padding: 36px;
}

.slide.dark {
  border-width: 1px 1px 3px;
  border-color: var(--color--font);
  padding: 16px;
}

.left-icon-holder {
  justify-content: center;
  align-items: center;
  transition: transform .325s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
}

.left-icon-holder:hover {
  transform: scale(1.2);
}

.icon {
  width: 50px;
}

.left-arrow {
  background-image: linear-gradient(90deg, #000, #0000);
  justify-content: center;
  align-items: center;
  display: flex;
  left: -80px;
}

.left-arrow.right {
  background-image: linear-gradient(270deg, #000, #0000);
  left: auto;
  right: -80px;
}

.left-arrow.right.white {
  background-image: linear-gradient(270deg, #fff, #fff0);
}

.left-arrow.white {
  background-color: #fff0;
  background-image: linear-gradient(90deg, #fff, #fff0);
}

.bento-grid-holder {
  padding-top: 66px;
  padding-bottom: 66px;
}

.tag {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  text-align: center;
  border-radius: 40px;
  padding: 5px 12px;
  font-size: 16px;
  font-weight: 300;
}

.bento-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-columns: 1.5fr 1fr 1fr;
  margin-top: 40px;
}

.bento-grid-item {
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 12px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.bento-grid-content {
  padding-bottom: 26px;
  padding-left: 32px;
  padding-right: 32px;
}

.pricing-holder {
  padding-top: 60px;
}

.pricing-grid {
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr 1fr;
}

.pricing-grid.list {
  border-bottom: 1px solid #000;
  place-items: center;
  margin-bottom: 32px;
  padding-bottom: 32px;
}

.pricing-heading-content {
  max-width: 70%;
}

.pricing-list-wrapper {
  padding-top: 45px;
}

.pricing-list-text {
  font-size: 22px;
}

.underlink {
  font-weight: 600;
  text-decoration: underline;
}

.about-info {
  grid-column-gap: 90px;
  grid-row-gap: 90px;
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--box-stroke);
  background-color: var(--color--background-color);
  font-family: var(--fonts--paragraph-font);
  color: var(--color--font);
  text-align: center;
  border-radius: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 35px 19px;
  font-size: 16px;
  font-weight: 300;
  transition: color .375s, transform .35s cubic-bezier(.68, -.55, .265, 1.55), background-color .45s;
  display: flex;
}

.tab-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
  display: flex;
}

.tabs-menu {
  grid-column-gap: 23px;
  grid-row-gap: 23px;
  border-left: 2px solid #000;
  flex-flow: column;
  min-width: 50%;
  max-width: 50%;
  display: flex;
}

.tab-link-tab-1 {
  cursor: pointer;
  background-color: #ddd0;
  border-left: 6px solid #0000;
  transition: border-color .325s;
  left: -4px;
}

.tab-link-tab-1.w--current {
  background-color: #ddd0;
  border-left: 6px solid #000;
  left: -4px;
}

.tab-heading {
  grid-column-gap: 42px;
  grid-row-gap: 42px;
  display: flex;
}

.tab-paragraph {
  padding-top: 24px;
  overflow: hidden;
}

.tabs-content {
  width: 100%;
  min-width: 50%;
  padding-left: 30px;
}

.tab-pane-image-holder, .tab-pane-image, .tab-pane-tab-1 {
  width: 100%;
}

.extra-features-grid {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
}

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

.extra-features-image-holder {
  border-style: solid;
  border-width: 1px 1px 3px;
  border-color: var(--color--background-color);
  border-radius: 12px;
  padding: 55px;
}

.extra-features-content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.feature-image {
  width: 100%;
}

.testimonial {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
}

.testimonial-profile-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonial-image {
  object-fit: cover;
  border-radius: 200px;
  width: 60px;
}

.testimonial-info {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.testimonial-name {
  font-size: 16px;
  font-weight: 500;
}

.testimonial-job-position {
  font-size: 15px;
}

.blog-header-icon {
  width: 90px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.blog-header-icon._02 {
  width: 120px;
  inset: auto 13px -100px auto;
}

.blog-header-icon._03 {
  width: 170px;
  inset: auto auto -136px -23px;
}

.header-blog {
  padding-top: 30px;
  padding-bottom: 180px;
}

.more {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 12px;
  display: flex;
}

.nav-link-wrapper {
  border-radius: 8px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 4px;
  transition: background-color .375s;
  display: flex;
}

.nav-link-wrapper:hover {
  background-color: #f0f0f0;
}

.nav-icon {
  width: 70px;
}

.nav-link-container {
  width: 100%;
}

.black-overlay-holder {
  z-index: 2;
  background-color: var(--color--font);
  height: 0%;
  position: absolute;
  inset: 0%;
}

.x-icon {
  opacity: 0;
  width: 31px;
  position: absolute;
}

.features-wrapper-container, .features-conatiner {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  padding: 100px 80px;
  display: flex;
  overflow: hidden;
}

@media screen and (min-width: 1440px) {
  .container {
    max-width: 1340px;
  }

  .featured-logo-wrapper {
    width: 130px;
  }

  .deploying-app-title-holder {
    max-width: 540px;
  }

  .feature-scroll-phone-holder {
    max-width: 26%;
  }

  .featuer-list-holder {
    margin-top: 12%;
    margin-bottom: 12%;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 38px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 20px;
  }

  ._8-col-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .nav-menu {
    padding-top: 10px;
    padding-left: 0;
  }

  .nav-links {
    grid-row-gap: 20px;
    flex-direction: column;
    height: auto;
  }

  .footer-wrapper {
    grid-row-gap: 60px;
    flex-direction: column;
  }

  .footer-content {
    grid-column-gap: 60px;
  }

  .footer-divider {
    margin-top: 60px;
    padding-top: 20px;
  }

  .featured-logo-wrapper {
    width: 150px;
  }

  .help-holder {
    flex-direction: column;
    display: flex;
  }

  .help-container {
    border-right-style: none;
  }

  .help-link-holder {
    grid-column-gap: 30px;
    flex-direction: row;
  }

  .help-link-container.w--current {
    border-right-style: none;
  }

  .menu-button {
    border-radius: 8px;
    padding: 10px;
    transition: background-color .4s;
  }

  .menu-button.w--open {
    border-radius: 8px;
    padding: 10px;
  }

  .hero-text-holder.small {
    max-width: 480px;
  }

  .title-holder {
    padding-top: 30px;
  }

  .grey-text {
    font-size: 14px;
  }

  .deploying-app-title-holder {
    max-width: none;
    margin-bottom: 12px;
  }

  .deploying-app-paragraph-holder {
    max-width: none;
  }

  .footer-container {
    border-radius: 20px;
  }

  .featured-blog {
    flex-direction: column;
    display: flex;
  }

  .featured-blog-image-holder {
    overflow: hidden;
  }

  .hero-title {
    font-size: 80px;
  }

  .features-wrapper {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .freatures-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .feature-icon {
    width: 110px;
  }

  .list-title {
    font-size: 44px;
  }

  .road-map-grid {
    grid-column-gap: 29px;
    grid-row-gap: 29px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .mask {
    max-width: 56%;
  }

  .bento-grid-holder {
    padding-top: 47px;
    padding-bottom: 47px;
  }

  .pricing-list-text {
    text-align: center;
    font-size: 17px;
    font-weight: 300;
  }

  .features-wrapper-container {
    padding-left: 0;
    padding-right: 0;
  }

  .features-conatiner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .border-box {
    padding: 2px;
  }

  ._6-col-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .footer-wrapper {
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }

  .footer-content {
    text-align: left;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .footer-block {
    text-align: left;
    align-items: flex-start;
  }

  .footer-link {
    text-align: left;
  }

  .footer-link:hover {
    color: #1a1b1fbf;
  }

  .footer-divider {
    margin-top: 60px;
  }

  .help-link-holder {
    flex-direction: column;
  }

  .brand {
    width: 80px;
    padding-left: 0;
  }

  .reviews-logos-container {
    grid-column-gap: 30px;
  }

  .reviews-logos {
    min-width: 100px;
  }

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

  .faq-title-holder {
    max-width: 100%;
  }

  .blog-grid {
    flex-direction: column;
    display: flex;
  }

  .blog-thumbnail {
    max-height: 450px;
  }

  .freatures-grid {
    grid-column-gap: 70px;
    grid-row-gap: 70px;
    flex-flow: column;
    display: flex;
  }

  .feature-scroll-section-holder {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .feature-scroll-phone-holder {
    max-width: 42%;
  }

  .featuer-list-holder {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
  }

  .list-title {
    font-size: 30px;
  }

  .road-map-grid {
    grid-template-columns: 1fr 1fr;
  }

  .road-map-icon.arrow {
    margin-top: 50px;
    margin-bottom: 0;
  }

  .road-map-icon.arrow-down {
    display: none;
  }

  .road-map-icon.arrow-up-mobile {
    width: 70px;
    display: block;
    transform: rotate(180deg);
  }

  .road-map-icon.middle {
    margin-top: 142px;
    margin-bottom: 0;
  }

  .cta-content {
    max-width: 80%;
  }

  .mask {
    width: 100%;
    max-width: none;
  }

  .pricing-grid {
    place-items: center start;
  }

  .about-info {
    grid-column-gap: 39px;
    grid-row-gap: 39px;
    justify-content: center;
    align-items: center;
  }

  .tab-wrapper {
    flex-flow: column;
  }

  .tabs-menu {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    min-width: 0%;
    max-width: none;
  }

  .tab-paragraph {
    padding-top: 7px;
  }

  .tabs-content {
    padding-top: 20px;
    padding-left: 0;
  }

  .pricing-heading {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 21px;
  }

  .features-conatiner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 479px) {
  p {
    font-size: 15px;
    font-weight: 400;
  }

  ._4-col-grid {
    grid-template-columns: 1fr 1fr;
  }

  .black-background-padding {
    padding: 7px;
  }

  .container {
    padding-left: 1em;
    padding-right: 1em;
  }

  .container.navbar-container {
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
  }

  .button.nav-button {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 400;
  }

  .style-guide-box-holder {
    padding: 4px;
  }

  .style-guide-box-container {
    grid-row-gap: 7px;
  }

  .colors-buttons {
    flex-direction: column;
    padding-top: 29px;
    padding-bottom: 29px;
  }

  ._8-col-grid {
    grid-template-columns: 1fr 1fr;
  }

  ._6-col-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .nav-menu-link-holder {
    justify-content: space-between;
    align-items: center;
    padding-top: 59px;
  }

  .nav-menu {
    max-height: 80%;
  }

  .nav-links {
    grid-row-gap: 20px;
    justify-content: space-between;
    height: 70%;
    padding: 0 14px 55px 0;
  }

  .nav-link {
    font-size: 30px;
  }

  .footer-divider {
    grid-row-gap: 20px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    padding-top: 20px;
  }

  .title {
    padding-bottom: 0;
  }

  .featured-logo-wrapper {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .early-access-card {
    min-width: 0;
  }

  .power-feature-card-container {
    border-radius: 20px;
  }

  .pricing-list-holder {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .pricing-footer-holder {
    grid-row-gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .help-content-holder {
    padding-top: 27px;
  }

  .help-heading-holder {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    display: flex;
  }

  .help-link-holder {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .figma-file-container {
    grid-row-gap: 32px;
    flex-direction: column;
  }

  .full-width-image {
    border-radius: 7px;
  }

  .change-log-block-holder {
    flex-flow: column;
    display: flex;
  }

  .menu-button {
    order: 1;
  }

  .hero-text-holder.small {
    max-width: 290px;
  }

  .deploying-app-images-holder {
    border-radius: 11px;
  }

  .footer-signup-holder {
    width: 100%;
  }

  .form {
    grid-row-gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .feature-grid-line {
    background-image: linear-gradient(to right, #fff0, #fff 25% 75%, #fff0);
    width: 100%;
    height: 2px;
  }

  .enterprise-price-holder {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .faq-holder {
    padding: 13px;
  }

  .faq-question-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    font-size: 14px;
  }

  .faq-answer {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
  }

  .faq-question {
    font-size: 19px;
  }

  .featured-blog {
    border-width: 3px 3px 6px;
  }

  .featured-blog-content {
    padding: 20px;
  }

  .featured-blog-title {
    font-size: 24px;
  }

  .featured-blog-paragraph {
    font-size: 15px;
    font-weight: 300;
  }

  .blog-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .blog-thumbnail {
    max-height: 300px;
  }

  .blog-details---title {
    font-size: 33px;
  }

  .blog-details-main-image-holder {
    border-radius: 6px;
    width: 100%;
  }

  ._404-logo {
    width: 120px;
  }

  /* Raised from 170vh. The hero block grew when the two buttons and the two
     store badges were replaced by the early-access field, its note and the
     three reassurance points: ~390px of content on a phone, against the ~250px
     of clearance 170vh left before the brand marquee scrolled up into it. The
     block and the marquee overlapped by ~140px on a 844px-tall phone — and by
     ~86px even before the reassurance row, so this was already tight. Runway is
     what buys the clearance; see the short-phone override further down. */
  .hero-section-holder {
    height: 197vh;
  }

  .hero-section-container {
    justify-content: flex-start;
    align-items: center;
  }

  .hero-title {
    font-size: 43px;
  }

  .hero-phone-holder.animate-on-load-02 {
    align-self: center;
    max-width: 262px;
    top: 49.45px;
  }

  .hero-heading-wrapper {
    /* Same reasoning as the base rule, sized for the 59px mobile header — but
       a phone cannot absorb the desktop drop. 128px buys the headline clear
       of the header (it was 6px behind it) without spending room the block
       below needs.

       No height here: it inherits the base rule's `auto`, which is what makes
       the gap to the next section a constant rather than something that
       swings with viewport height. See the note on that rule — the mistake
       worth not repeating is reaching for a vh height on this element, since
       it is the one whose height sets that gap. padding-bottom is inherited
       from there too, so the dial stays in one place. */
    justify-content: flex-start;
    align-items: center;
    padding-top: 128px;
    top: 34px;
  }

  .hero-phone-wrapper {
    justify-content: center;
    align-items: flex-end;
    height: 57vh;
  }

  .hero-heading-container {
    position: relative;
    /* This is a flex item under .hero-heading-wrapper's align-items: center,
       so without a width it is shrink-to-fit — sized to its widest child's
       MIN-content, not to the screen. That was harmless while the email rail
       stacked into a column here, but the rail is one row at every width now
       (see css/early-access.css), and a row's min-content is icon + field +
       button side by side. At 320px that came to 334px: the container, the
       headline inside it and the page all overflowed by 7px. 340px and up
       already resolve to the full width on their own, so this only bites at
       the very bottom of the range — but it costs nothing to state, and
       stating it is what keeps the rail free to stay a single row. */
    width: 100%;
  }

  .features-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .feature-icon {
    width: 80px;
    margin-bottom: 12px;
  }

  .feature-heading.dark {
    font-size: 20px;
  }

  .feature-scroll-section-holder {
    flex-flow: column;
  }

  .feature-scroll-phone-holder {
    max-width: 80%;
  }

  .featuer-list-holder {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .road-map-holder {
    padding-top: 43px;
    padding-bottom: 43px;
  }

  .road-map-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .roadmap-item {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    display: flex;
  }

  .roadmap-item._03 {
    margin-top: -91px;
  }

  .roadmap-item._02, .roadmap-item._04 {
    margin-top: 56px;
  }

  .roadmap-item._05 {
    margin-top: -155px;
  }

  .road-map-icon {
    width: 100px;
  }

  .road-map-icon.arrow {
    width: 50px;
    margin-top: 0;
  }

  .road-map-icon.arrow-up-mobile {
    align-self: center;
    width: 50px;
  }

  .road-map-icon.middle {
    width: 50px;
    margin-top: 0;
  }

  .cta-content {
    padding-top: 12px;
  }

  .cta-phone-holder {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .form-holder {
    flex-flow: column;
  }

  .slider {
    width: 100%;
    padding-bottom: 67px;
  }

  .slide {
    padding: 21px;
  }

  .left-arrow {
    justify-content: flex-start;
    align-items: center;
    padding: 11px;
    inset: auto auto 0% 0%;
  }

  .left-arrow.right {
    inset: auto auto 0% 67px;
  }

  .left-arrow.right.white {
    inset: auto 0% 0% auto;
  }

  .bento-grid-holder {
    padding-top: 33px;
    padding-bottom: 10px;
  }

  .tag {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
  }

  .bento-grid {
    flex-flow: column;
    display: flex;
  }

  .bento-grid-content {
    padding: 17px;
  }

  .pricing-holder {
    padding-top: 34px;
  }

  .pricing-header-wrapper {
    background-color: var(--color--background-color);
    padding-top: 11px;
    padding-bottom: 11px;
    position: sticky;
    top: 59px;
  }

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

  .pricing-grid.list {
    border-bottom-color: #ccc;
    grid-template-columns: 1.5fr 1fr;
    place-items: center start;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .pricing-heading-content {
    display: none;
  }

  .card-holder, .card-image {
    width: 100%;
  }

  .pricing-list-wrapper {
    padding-top: 24px;
  }

  .pricing-list-text {
    font-family: var(--fonts--paragraph-font);
    text-align: center;
    font-size: 16px;
  }

  .pricing-list-text.title {
    font-size: 18px;
    font-weight: 500;
  }

  .underlink {
    font-size: 15px;
    font-weight: 400;
  }

  .about-info {
    flex-flow: column;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .tab-link-tab-1 {
    padding-right: 0;
  }

  .tab-info {
    width: 100%;
  }

  .tab-heading {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: space-between;
    width: 100%;
  }

  .extra-features-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    display: flex;
  }

  .extra-features-image-holder {
    order: -1;
  }

  .blog-header-icon {
    width: 50px;
    left: 20px;
  }

  .blog-header-icon._02 {
    width: 50px;
    bottom: -39px;
    right: 39px;
  }

  .blog-header-icon._03 {
    width: 80px;
    bottom: -60px;
    left: 10px;
  }

  .header-blog {
    padding-bottom: 68px;
  }

  .nav-icon {
    width: 50px;
  }

  .pricing-heading {
    display: none;
  }

  .features-conatiner {
    padding-left: 0;
    padding-right: 0;
  }
}

#w-node-e92bf484-a605-4132-f141-4518468af7e2-468af7d9, #w-node-e92bf484-a605-4132-f141-4518468af7ef-468af7d9, #w-node-e92bf484-a605-4132-f141-4518468af7fa-468af7d9, #w-node-_1a28ebeb-9162-d3cb-8468-7300a05229ba-749087d5, #w-node-_8595b4cc-f73c-3ac7-f9ab-37cddb2978a1-749087d6, #w-node-_63c7100f-9342-3d29-c1e8-a026ad70c2f3-749087d7, #w-node-_50d429f7-a276-3f83-9b9a-bc93d36794c4-749087d8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b894a5fe-f86c-a319-2754-9c68f095fdc2-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdc5-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdc8-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdcb-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdce-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdd1-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdd4-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdd7-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fddc-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fddf-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fde2-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fde5-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fde8-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdeb-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdf0-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdf3-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdf6-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fdf9-749087d8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-b894a5fe-f86c-a319-2754-9c68f095fdfe-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fe02-749087d8 {
  grid-area: span 1 / span 4 / span 1 / span 4;
  align-self: center;
}

#w-node-a7ce066c-b439-c169-e96a-793f7f664a4a-749087da {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-a4cc8159-69ac-1c5f-f63f-87633b104475-749087da {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-bc7378cb-3eac-53cc-83ce-59ec6df218ae-749087da, #w-node-_391b89a6-779c-4f8b-8fa8-78bc9dc8bd01-749087da, #w-node-_125233a6-a29a-eee0-a584-78d591454c1b-749087da, #w-node-_6b9afabb-dfa7-a06f-21f0-2785d4f2c167-749087da, #w-node-_1fbe4475-1f7b-2bfb-d526-bd586214039c-749087da, #w-node-df16fef3-a566-a2f8-bd24-bcf6cb8b0019-749087da, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeeaa-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeeb4-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeebb-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec2-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec9-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeed0-749087db {
  justify-self: start;
}

@media screen and (max-width: 767px) {
  #w-node-dc89dae5-5e3d-90b1-da82-83290f0e6236-749087d2 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-b894a5fe-f86c-a319-2754-9c68f095fdfe-749087d8, #w-node-b894a5fe-f86c-a319-2754-9c68f095fe02-749087d8 {
    grid-column: span 2 / span 2;
  }

  #w-node-bc7378cb-3eac-53cc-83ce-59ec6df218ae-749087da, #w-node-_391b89a6-779c-4f8b-8fa8-78bc9dc8bd01-749087da {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-_391b89a6-779c-4f8b-8fa8-78bc9dc8bd03-749087da {
    justify-self: center;
  }

  #w-node-_125233a6-a29a-eee0-a584-78d591454c1b-749087da {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-_125233a6-a29a-eee0-a584-78d591454c1d-749087da, #w-node-_125233a6-a29a-eee0-a584-78d591454c1f-749087da {
    justify-self: center;
  }

  #w-node-_6b9afabb-dfa7-a06f-21f0-2785d4f2c167-749087da {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-_6b9afabb-dfa7-a06f-21f0-2785d4f2c169-749087da, #w-node-_6b9afabb-dfa7-a06f-21f0-2785d4f2c16b-749087da {
    justify-self: center;
  }

  #w-node-_1fbe4475-1f7b-2bfb-d526-bd586214039c-749087da {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-_1fbe4475-1f7b-2bfb-d526-bd586214039e-749087da, #w-node-_1fbe4475-1f7b-2bfb-d526-bd58621403a0-749087da {
    justify-self: center;
  }

  #w-node-df16fef3-a566-a2f8-bd24-bcf6cb8b0019-749087da, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeeaa-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeeb4-749087db {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeeb6-749087db {
    justify-self: center;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeebb-749087db {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeebd-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeebf-749087db {
    justify-self: center;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec2-749087db {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec4-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec6-749087db {
    justify-self: center;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeec9-749087db {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeecb-749087db, #w-node-eb8892d0-e2d4-a906-7239-118f7acdeecd-749087db {
    justify-self: center;
  }

  #w-node-eb8892d0-e2d4-a906-7239-118f7acdeed0-749087db {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }
}

/* Brand marquee — replaces the black feature band below the hero.
   Ported from the PressStrip carousel in the Looxx React app
   (src/components/PressStrip.jsx). Illustrative brand wordmarks only —
   not a claim of confirmed live partnerships. */
/* Spacing only. This used to carry a large, viewport-height-tiered
   top padding whose real job was keeping the hero's CTA from colliding
   with the kicker; that is handled at its source now, on
   .hero-heading-wrapper's height (see the note there), so the gap this
   section opens above itself is a constant regardless of screen size and
   this number only has to look right. */
.brand-marquee-section {
  background-color: var(--color--background-color);
  padding: 56px 0 56px;
  overflow: hidden;
}

.brand-marquee-kicker {
  text-align: center;
  font-family: var(--fonts--main-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 32px;
}

.brand-marquee-viewport {
  position: relative;
  overflow: hidden;
}

.brand-marquee-track {
  display: flex;
  width: max-content;
  animation: brand-marquee-scroll 32s linear infinite;
}

@keyframes brand-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.brand-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
}

.brand-wordmark {
  white-space: nowrap;
  font-family: var(--fonts--main-font);
  font-size: 1.8rem;
  color: var(--color--font);
  opacity: .78;
  padding: 0 28px;
}

.brand-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background-color: #c8b9a9;
}

.brand-marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
}

.brand-marquee-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--color--background-color), transparent);
}

.brand-marquee-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--color--background-color), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  .brand-wordmark {
    font-size: 1.4rem;
    padding: 0 18px;
  }
}

/* Feature-scroll finale — the sticky phone in the "how it works" list
   grows into a large centered phone once the visitor scrolls past the
   three feature bullets. The spacer below adds the extra scroll runway
   the sticky phone needs to stay pinned long enough to animate;
   js/feature-phone-expand.js drives the actual scale/position via scroll
   fraction. Below 480px .feature-scroll-section-holder switches to a
   stacked flex column (see max-width: 479px above), so the phone no
   longer stretches to the list's height and sticky has nothing to pin
   against — the spacer collapses there so it doesn't add a dead scroll
   gap with no phone in view. */
#feature-scroll-phone {
  will-change: transform;
  /* Top-anchored, not center: the phone is `position: sticky; top: 90px`,
     right below the fixed nav bar. Scaling from the center would push
     the phone's top edge upward past that 90px anchor and behind the
     nav as it grows. Anchoring at the top keeps the top edge fixed in
     place and lets it grow downward only. */
  transform-origin: 50% 0%;
}

.feature-phone-expand-spacer {
  width: 100%;
  height: 220vh;
}

@media screen and (max-width: 991px) {
  .feature-phone-expand-spacer {
    height: 170vh;
  }
}

@media screen and (max-width: 767px) {
  .feature-phone-expand-spacer {
    height: 110vh;
  }
}

@media screen and (max-width: 479px) {
  .feature-phone-expand-spacer {
    height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-phone-expand-spacer {
    height: 0;
  }
}

/* Screenshot -> live iframe crossfade, inside the same phone that grows
   above (no second "demo phone" — one continuous object). Both layers
   sit stacked on top of each other in .hero-app-holder and
   js/feature-phone-expand.js toggles which one is on top once the phone
   finishes growing. The iframe stays pointer-events: none (and
   non-interactive) until active, so scrolling over the phone mid-grow
   doesn't get captured by the embedded page.
   The screen's shape comes from .hero-app-holder's clip-path (see there);
   these two only have to COVER that clip region. They can't inherit the
   holder's padding to do it: they're position: absolute, and an
   absolutely positioned child's inset resolves against the *padding box*
   of its ancestor, so the padding never shrinks them — left at
   `inset: 0` they rendered edge-to-edge across the whole phone.
   The inset is deliberately a little wider than the real cutout for the
   same reason as the holder's padding: overshoot is hidden by the frame,
   undershoot would leave a gap. It's kept close to the true screen size
   rather than just using inset: 0 so the embedded demo lays out against
   a viewport the size of the screen it appears in.
   width/height must be restated: .hero-app sets a flat 100%, which on a
   box that also has all four inset sides over-constrains it — the
   browser then honours left/top and silently drops right/bottom, so the
   element overflowed by exactly the inset amount. `auto` isn't a clean
   fix either (img/iframe are replaced elements, so auto sizing falls
   back to their intrinsic aspect ratio rather than filling the space).
   calc() from the same values leaves nothing to resolve. */
.feature-scroll-screenshot,
.feature-scroll-iframe {
  position: absolute;
  inset: 1.5% 4.2%;
  width: calc(100% - 4.2% - 4.2%);
  height: calc(100% - 1.5% - 1.5%);
  transition: opacity 0.45s ease;
}

.feature-scroll-screenshot {
  opacity: 1;
}

.feature-scroll-screenshot.is-swapped {
  opacity: 0;
}

.feature-scroll-iframe {
  opacity: 0;
  overflow: hidden;
  /* Don't add a border-radius here to round the screen — the corners come
     from .hero-app-holder's clip-path, which traces the artwork exactly.
     A radius on this element can only cut back inside that shape. */
  background-color: #fff;
  pointer-events: none;
}

.feature-scroll-iframe.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* The embedded app is a normal responsive page with its own mobile
   breakpoints. If the iframe's actual box just shrank along with the
   phone mockup, a small mockup would push the app into its own narrower
   layout and it'd visibly reflow inside the frame instead of just
   looking smaller. js/feature-iframe-scale.js pins the iframe's real
   rendered size to one fixed "design" viewport (so the app inside always
   lays out the same way) and scales that fixed-size box down with a CSS
   transform to fit whatever size the mockup currently is - the transform
   only resizes the painted result, it doesn't affect the iframe's
   internal layout viewport. */
.feature-scroll-iframe-inner {
  display: block;
  border: 0;
  transform-origin: top left;
  background-color: #fff;
}

@media (prefers-reduced-motion: reduce) {

  .feature-scroll-screenshot,
  .feature-scroll-iframe {
    transition: none;
  }
}

/* "Try it yourself" — kicker + stacked title + a hand-drawn curved
   arrow pointing at the phone, echoing the doodle-style arrows already
   used in the roadmap section (images/roadmap-arrow-reverse.svg etc.)
   so it reads as part of this site's own visual language rather than a
   generic label. Sits to the left of the grown phone, positioned via
   `left`/`top` set directly in js/feature-phone-expand.js every frame
   from the phone's own live getBoundingClientRect(), since the phone's
   on-screen size and position change continuously as it grows. Must be
   `position: fixed` relative to the true viewport, not a transformed
   ancestor — it's placed as a sibling of .feature-scroll-phone-holder
   rather than a descendant of #feature-scroll-phone specifically
   because that element's `transform` would otherwise turn it into the
   containing block for a fixed child. */
.feature-demo-caption {
  position: fixed;
  z-index: 6;
  max-width: 300px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.feature-demo-caption.is-active {
  opacity: 1;
}

.feature-demo-kicker {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 10px;
}

.feature-demo-title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.08;
  color: var(--color--font, #1a1a1a);
}

.feature-demo-arrow {
  margin-top: 12px;
}

@media screen and (max-width: 1439px) {
  .feature-demo-title {
    font-size: 34px;
  }
}

/* Below 480px .feature-scroll-section-holder stacks into a single column
   (see max-width: 479px above) and the phone sits at 80% of it, edge to
   edge — there's no side gutter left for this caption to sit in.
   js/feature-phone-expand.js's positionCaption() clamps its `left` to a
   minimum instead of disappearing, which at this width put the caption
   directly on top of the phone glass instead of beside it. Hiding it
   outright here is simpler and more robust than teaching the JS a second
   layout: the caption was always a side-annotation for the wide layout,
   not something with a sensible fallback spot on a single narrow column. */
@media screen and (max-width: 479px) {
  .feature-demo-caption {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-demo-caption {
    transition: none;
  }
}

/* ==========================================================================
   Looxx brand layer
   Kept as an override block at the end of the file rather than edited into
   the Webflow rules above, so the template's own CSS stays untouched and
   the branding is easy to see, tune or lift out in one piece.
   Reference: the app's auth shell in webapp/index.html — Playfair Display
   for display type over Inter for UI/body, warm paper ground, clay accent.
   ========================================================================== */

/* --- Display typography -------------------------------------------------- */

.hero-title,
.title,
.white-title,
.list-title,
.feature-demo-title {
  font-family: var(--looxx--display-font);
  letter-spacing: -.01em;
}

/* Playfair only ships 400/600 here; the template's 800 would synthesise a
   smeared faux-bold, so the display sizes step down to the real weight. */
.hero-title,
.list-title,
.feature-demo-title {
  font-weight: 600;
}

.title,
.white-title {
  font-weight: 600;
}

/* The app sets its display line ("Curated matches. Zero noise.") in roman
   Playfair and saves italic for accents only — the hero follows that, so the
   italic in the wordmark stays the thing that catches the eye. */
.hero-title {
  line-height: 1.02;
}

p,
.grey-paragraph {
  color: var(--looxx--ink-soft);
}

.white-paragraph,
.grey-paragraph {
  color: #ffffffc4;
}

/* --- Buttons ------------------------------------------------------------- */

.button {
  border-color: var(--looxx--clay-deep);
  color: var(--looxx--clay-deep);
}

.button:hover {
  background-color: var(--looxx--clay);
  border-color: var(--looxx--clay);
  color: #fff;
}

/* Nav sign-up and the CTA submit are the two primary actions on the page —
   solid clay so the accent lands somewhere deliberate rather than on every
   button at once. */
.button.nav-button,
.button.dark-button {
  background-color: var(--looxx--clay);
  border-color: var(--looxx--clay-deep);
  color: #fff;
}

.button.nav-button:hover,
.button.dark-button:hover {
  background-color: var(--looxx--clay-deep);
  border-color: var(--looxx--clay-deep);
  color: #fff;
}

.text-field:focus {
  border-color: var(--looxx--clay);
}

/* --- CTA panel ----------------------------------------------------------- */

/* Same duotone-plus-grain treatment as the app's auth aside, in place of the
   template's flat black block. */
.cta-holder {
  position: relative;
  background-color: #2b241f;
  background-image:
    radial-gradient(120% 140% at 15% -10%, #7a5136 0%, transparent 55%),
    linear-gradient(165deg, #2b241f 0%, #4a3527 55%, #6b4b34 100%);
}

.cta-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* The panel's own children need to sit above the grain overlay. */
.cta-content,
.cta-holder .fade-in-on-scroll {
  position: relative;
  z-index: 1;
}

/* --- Small accents ------------------------------------------------------- */

.brand-marquee-kicker,
.feature-demo-kicker {
  color: var(--looxx--clay-deep);
}

.feature-demo-arrow path {
  stroke: var(--looxx--clay);
}

.footer-divider {
  border-color: var(--looxx--line);
}

/* ==========================================================================
   Imported header + footer — ported from the production React site
   (Looxx website netlify/src/components/{Header,Footer}.jsx and src/index.css).

   The source is Tailwind + CRA; this prototype has no build step, so the
   utility classes are resolved by hand here. Values are the literal Tailwind
   scale from the source (gap-10 = 2.5rem, h-16 = 4rem, max-w-7xl = 80rem,
   lg = 1024px, md = 768px, sm = 640px) so the two stay comparable.

   The brand tokens below are the canonical ones, taken from the source's
   src/index.css :root. They differ from the values inferred earlier in this
   prototype from the webapp auth modal — see the --looxx--clay note above.
   ========================================================================== */

:root {
  /* Surfaces */
  --silk: #faf8f5;
  --warm-white: #f3f0ec;
  --alabaster: #fcfbfa;

  /* Text */
  --looxx-black: #171717;
  --charcoal: #242424;
  --stone: #77716b;

  /* Accent. The source carries an explicit a11y note on these: never as body
     text on Silk (3.1:1) — large text and UI elements only. */
  --taupe: #c8b9a9;
  --taupe-dark: #b8a48f;

  --mist: #ded9d3;
}

/* --- Shared primitives (src/index.css) ----------------------------------- */

.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.75rem;
  border-radius: 999px;
  background: var(--looxx-black);
  color: var(--silk);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.005em;
  border: 1px solid var(--looxx-black);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
}

.lx-btn:hover {
  background: #2c2c2c;
  transform: translateY(-1px);
}

.lx-btn:active {
  transform: translateY(0);
}

.marker {
  font-family: Inter, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.marker::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--taupe-dark);
  flex: none;
}

.hairline {
  width: 100%;
  height: 1px;
  background: var(--mist);
}

.lx-icon {
  width: 20px;
  height: 20px;
}

.lx-icon--sm {
  width: 16px;
  height: 16px;
}

/* --- Header -------------------------------------------------------------- */

/* The source starts transparent and swaps to this blurred silk bar once
   scrolled past 20px, driven by React state. With no JS yet the blurred state
   is the resting one — which is also what this page needs, since its hero
   begins right under the bar rather than behind a full-bleed image. */
.lx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #faf8f5d9;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid #0000000d;
  transition: background-color .5s, border-color .5s;
}

.lx-header__inner {
  max-width: 80rem;
  height: 4rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}

/* The logo PNG is a 490x491 square that is mostly transparent padding, so it
   is deliberately set taller than the bar and pulled back with negative
   margins — the padding absorbs the overflow and the LOOXX wordmark ends up
   optically centred. Same trick as the source h-28 / -my-6. */
.lx-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.lx-logo img {
  height: 7rem;
  width: auto;
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}

.lx-nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

/* Scoped: the Webflow stylesheet above already defines a .nav-link for the
   old 64px overlay menu, which would otherwise capture these. */
.lx-header .nav-link {
  position: relative;
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: .35rem 0;
  bottom: auto;
  font-family: Inter, sans-serif;
  font-size: .9rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  color: var(--stone);
  transition: color .2s ease;
}

.lx-header .nav-link:hover {
  color: var(--looxx-black);
}

.lx-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--looxx-black);
  transition: width .3s ease;
}

.lx-header .nav-link:hover::after {
  width: 100%;
}

/* webflow.js stamps .w--current on a nav link once it matches the location,
   and the Webflow rule for that paints it white-on-black — a filled block
   sitting in the middle of the imported bar. The imported header has no
   active-link treatment (neither does the source), so it is neutralised here
   rather than restyled. */
.lx-header .nav-link.w--current {
  background-color: #0000;
  color: var(--stone);
}

.lx-header .nav-link.w--current:hover {
  color: var(--looxx-black);
}

/* The Webflow reset strips focus outlines site-wide; keyboard users still
   need to see where they are in the imported chrome. */
.lx-header a:focus-visible,
.lx-header button:focus-visible,
.lx-footer a:focus-visible,
.lx-cookie button:focus-visible,
.lx-cookie-prefs button:focus-visible {
  outline: 2px solid var(--looxx-black);
  outline-offset: 3px;
  border-radius: 4px;
}

.lx-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.lx-lang {
  display: none;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid #0000001a;
  border-radius: 999px;
  background: #ffffff99;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lx-lang__btn {
  padding: .25rem .75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: Inter, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--stone);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}

.lx-lang__btn:hover {
  color: #000;
}

.lx-lang__btn.is-active {
  background: #000;
  color: #fff;
}

.lx-btn--header {
  display: none;
}

.lx-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--looxx-black);
  cursor: pointer;
  transition: background-color .2s;
}

.lx-menu-toggle:hover {
  background: #0000000d;
}

.lx-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .5rem 1.5rem 1.5rem;
  background: #faf8f5f2;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid #0000000d;
}

/* An author `display` declaration outranks the UA rule the `hidden` attribute
   relies on, so the panel needs to opt back out explicitly — otherwise it
   renders permanently open. It stays closed until the toggle is wired. */
.lx-mobile-menu[hidden] {
  display: none;
}

.lx-mobile-link {
  padding: .5rem 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.125rem;
  color: var(--charcoal);
  text-decoration: none;
}

.lx-mobile-lang {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: 1rem;
  color: var(--stone);
}

.lx-mobile-lang .lx-lang__btn {
  border: 1px solid #0000001a;
}

.lx-mobile-lang .lx-lang__btn.is-active {
  border-color: #000;
}

.lx-mobile-menu .lx-btn {
  margin-top: 1rem;
}

@media screen and (min-width: 640px) {
  .lx-lang {
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  .lx-btn--header {
    display: inline-flex;
  }
}

@media screen and (min-width: 1024px) {
  .lx-header__inner {
    height: 5rem;
    padding: 0 2.5rem;
  }

  .lx-logo img {
    height: 9rem;
    margin-top: -2rem;
    margin-bottom: -2rem;
  }

  .lx-nav {
    display: flex;
  }

  .lx-menu-toggle,
  .lx-mobile-menu {
    display: none;
  }
}

/* --- Footer -------------------------------------------------------------- */

.lx-footer {
  padding: 5rem 0 2.5rem;
  border-top: 1px solid #00000014;
  background: #f3f0ec80;
}

.lx-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lx-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.lx-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.lx-footer__logo img {
  height: 4rem;
  width: auto;
}

.lx-footer__tagline {
  max-width: 28rem;
  margin: 1rem 0 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
  line-height: 1.625;
  color: var(--stone);
}

.lx-socials {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
}

.lx-social {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0000001a;
  border-radius: 999px;
  color: var(--charcoal);
  transition: background-color .2s, color .2s;
}

.lx-social:hover {
  background: #000;
  color: #fff;
}

.lx-footer__col .marker {
  margin-bottom: 1.25rem;
}

.lx-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-footer__links li + li {
  margin-top: .75rem;
}

/* Also targets the <li> itself, not just <a>: the Contact column's location
   line is plain text (nothing to link to), and without this it fell back to
   the page's bold default instead of matching the links around it. */
.lx-footer__links a,
.lx-footer__links li {
  font-family: Inter, sans-serif;
  font-weight: 300;
  color: var(--charcoal);
  text-decoration: none;
  transition: color .2s;
}

.lx-footer__links a:hover {
  color: #000;
}

.lx-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
}

.lx-footer__copy,
.lx-footer__made {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .025em;
  color: var(--stone);
}

.lx-footer__made {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}

@media screen and (min-width: 640px) {
  .lx-footer__bottom {
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
  .lx-footer__inner {
    padding: 0 2.5rem;
  }

  .lx-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   Cookie consent + header interaction states
   Ported alongside src/components/CookieConsent.jsx. Framer Motion drives the
   enter/exit transitions in the source; here they are plain CSS animations,
   which is why the markup toggles `hidden` rather than mounting/unmounting.
   ========================================================================== */

/* --- Header: transparent at rest, blurred once scrolled ------------------ */

/* The source starts the bar transparent and swaps to blurred silk past 20px
   (js/site.js mirrors that threshold). The blurred rule already lives in the
   import block above; this makes the resting state transparent again now that
   there is JS to switch between the two. */
.lx-header {
  background: #0000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: #0000;
}

.lx-header.is-scrolled {
  background: #faf8f5d9;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom-color: #0000000d;
}

/* Open state for the hamburger, so the control reads as active while the
   panel is down. */
.lx-menu-toggle.is-open {
  background: #0000000d;
}

/* --- Cookie bar ---------------------------------------------------------- */

.lx-cookie {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  max-width: 56rem;
  margin: 0 auto;
  animation: lx-cookie-in .55s cubic-bezier(.16, 1, .3, 1) both;
}

.lx-cookie[hidden] {
  display: none;
}

@keyframes lx-cookie-in {
  from {
    opacity: 0;
    transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lx-cookie__card {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #00000014;
  border-radius: 1rem;
  background: #fffffff2;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 60px -20px #0000002e;
}

.lx-cookie__text {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.lx-cookie__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #c8b9a940;
  color: var(--charcoal);
}

.lx-cookie__icon svg {
  width: 18px;
  height: 18px;
}

.lx-cookie__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--looxx-black);
}

.lx-cookie__body {
  margin: .25rem 0 0;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.625;
  color: var(--stone);
}

.lx-cookie__learn {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lx-cookie__learn:hover {
  color: #000;
}

.lx-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.lx-cookie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border: 1px solid #0000;
  border-radius: 999px;
  background: none;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.lx-cookie__btn:hover {
  background: #0000000d;
}

.lx-cookie__btn--outline {
  border-color: #00000026;
  background: none;
}

.lx-cookie__btn--outline:hover {
  border-color: #00000066;
  background: none;
}

.lx-cookie__btn--solid {
  padding: .625rem 1.25rem;
  border-color: #000;
  background: #000;
  color: #fff;
}

.lx-cookie__btn--solid:hover {
  background: #262626;
  border-color: #262626;
}

@media screen and (min-width: 1024px) {
  .lx-cookie__card {
    flex-flow: row;
    align-items: center;
    padding: 1.5rem 2rem;
  }

  .lx-cookie__actions {
    flex: none;
    gap: .75rem;
  }
}

/* --- Preferences overlay -------------------------------------------------- */

.lx-cookie-prefs {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: #00000066;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lx-fade-in .3s ease both;
}

.lx-cookie-prefs[hidden] {
  display: none;
}

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

.lx-cookie-prefs__panel {
  width: 100%;
  max-width: 36rem;
  border: 1px solid #00000014;
  border-radius: 1rem;
  background: var(--silk);
  box-shadow: 0 25px 50px -12px #00000040;
  animation: lx-panel-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lx-panel-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lx-cookie-prefs__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #00000014;
}

.lx-cookie-prefs__title {
  margin: .5rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--looxx-black);
}

.lx-cookie-prefs__close {
  padding: .5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color .2s;
}

.lx-cookie-prefs__close:hover {
  background: #0000000d;
}

.lx-cookie-prefs__body {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

.lx-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.lx-pref-row__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--looxx-black);
}

.lx-pref-row__desc {
  margin: .25rem 0 0;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.625;
  color: var(--stone);
}

.lx-switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d4d4d4;
  cursor: pointer;
  transition: background-color .2s;
}

.lx-switch.is-on {
  background: #000;
}

.lx-switch[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.lx-switch__knob {
  position: absolute;
  top: .125rem;
  left: .125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px #0000001a;
  transition: transform .2s;
}

.lx-switch.is-on .lx-switch__knob {
  transform: translateX(1.25rem);
}

.lx-cookie-prefs__foot {
  display: flex;
  flex-flow: column;
  gap: .75rem;
  padding: 1.5rem;
  border-top: 1px solid #00000014;
  background: #ffffff99;
  border-radius: 0 0 1rem 1rem;
}

.lx-cookie-prefs__foot .lx-cookie__btn {
  flex: 1;
  padding: .75rem 1rem;
}

@media screen and (min-width: 640px) {
  .lx-cookie-prefs__foot {
    flex-flow: row;
  }
}

@media screen and (min-width: 1024px) {
  .lx-cookie-prefs {
    align-items: center;
  }

  .lx-cookie-prefs__head,
  .lx-cookie-prefs__body,
  .lx-cookie-prefs__foot {
    padding: 2rem;
  }

  .lx-cookie-prefs__title {
    font-size: 1.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-cookie,
  .lx-cookie-prefs,
  .lx-cookie-prefs__panel {
    animation: none;
  }
}

/* ==========================================================================
   Legal shell — the static counterpart of src/components/LegalShell.jsx and
   the .legal-prose block in the source's src/index.css.
   ========================================================================== */

/* The landing page's own background comes from the Webflow body rules; the
   legal pages sit directly on the brand canvas. */
.legal-body {
  background: var(--silk);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Clears the fixed header (pt-36 / lg:pt-44 in the source). */
.legal-main {
  flex: 1;
  padding: 9rem 0 6rem;
}

.legal-container {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  color: var(--stone);
  text-decoration: none;
  transition: color .2s;
}

.legal-back:hover {
  color: #000;
}

.legal-title {
  margin: 1rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--looxx-black);
}

.legal-updated {
  margin: 1rem 0 0;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  letter-spacing: .025em;
  color: var(--stone);
}

.legal-rule {
  margin: 3rem 0;
}

/* Straight port of .legal-prose from the source's src/index.css. */
.legal-prose {
  font-family: Inter, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: var(--charcoal);
}

.legal-prose section {
  margin-bottom: 2.5rem;
}

.legal-prose h2 {
  margin: 2rem 0 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--looxx-black);
}

.legal-prose p {
  margin-bottom: 1rem;
  color: var(--charcoal);
}

.legal-prose a {
  color: var(--looxx-black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-prose a:hover {
  color: var(--stone);
}

.legal-prose ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style: disc;
}

.legal-prose li {
  margin-bottom: .5rem;
  color: var(--charcoal);
}

/* The reset-preferences button on the cookie policy page. */
.lx-btn--ghost {
  background: #0000;
  color: var(--looxx-black);
  border-color: #17171738;
}

.lx-btn--ghost:hover {
  background: #1717170b;
  border-color: #17171738;
  color: var(--looxx-black);
}

@media screen and (min-width: 640px) {
  .legal-title {
    font-size: 3rem;
  }
}

@media screen and (min-width: 1024px) {
  .legal-main {
    padding: 11rem 0 6rem;
  }

  .legal-container {
    padding: 0 2.5rem;
  }

  .legal-title {
    font-size: 3.75rem;
  }
}

/* ==========================================================================
   Hero lede + dual CTA
   The hero is a 220vh stage: the headline is sticky and centred while the
   phone scrolls up past it and off the top. This block belongs to the state
   after that pass, when the space under the headline is finally empty.

   It is absolutely positioned rather than placed in flow on purpose — in flow
   it would re-centre the headline group and change the hero's opening
   composition, which is not what was asked for. Anchored to the heading
   container instead, it inherits the headline's drift for free and the hero
   at rest looks exactly as it did.
   ========================================================================== */

/* In normal flow, not absolutely anchored under the headline. A Webflow
   interaction drifts the heading container downward by ~110px over the pinned
   scroll; anchored to it, the block inherited that drift and slid out of the
   bottom of the 100vh sticky wrapper and into the section below — measured at
   148px of overlap on a 360x640 viewport, where it never became visible at
   all. In flow, the wrapper centres headline and block as one group, so the
   drift moves them together and the group always has room beneath it. */
.hero-cta {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;

  /* Hidden rather than merely transparent, so the two buttons are out of the
     tab order and off the accessibility tree until they are actually on
     screen. js/site.js drives the opacity and adds .is-revealed. */
  opacity: 0;
  visibility: hidden;
}

.hero-cta.is-revealed {
  visibility: visible;
}

/* ~30rem holds the lede to roughly 50-60 characters a line, so it sets as the
   two or three lines the headline can carry without competing with it. */
/* Widened from 30rem so the English lede sets as two lines instead of three,
   which keeps the block above the form compact. 38rem is the ceiling, not the
   measure: `balance` finds the narrowest width that still fits two lines and
   splits them evenly, landing around 66 characters a line — inside the 60-75
   that stays comfortable to read. Dutch runs ~20% longer and takes three
   lines here; that is the right trade, since forcing two would push its
   measure past what reads well. */
.hero-cta__lede {
  max-width: 38rem;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  color: var(--stone);
}

/* Buttons + store badges as one cluster: a tighter internal gap than
   .hero-cta uses between the lede and this group, so the badges read as a
   footnote on the buttons rather than a third paragraph-level element. */
.hero-cta__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.hero-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

/* Store badges — official Apple/Google artwork, sitting under the two
   buttons as the "also available on" line. */
.lx-store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem;
}

.lx-store-badges img {
  display: block;
  height: 44px;
  width: auto;
}

.lx-store-badges a {
  line-height: 0;
  border-radius: 6px;
  transition: opacity .2s ease;
}

.lx-store-badges a:hover {
  opacity: .82;
}

/* One primary action. "View demo" is the same pill at the same size so the
   pair reads as a set, but unfilled — subordinate without being timid. */
.hero-cta .lx-btn {
  padding: .85rem 1.6rem;
}

.hero-cta a:focus-visible {
  outline: 2px solid var(--looxx-black);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Short viewports: the headline is centred in 100vh, so the room underneath is
   what is left over. Tighten the block rather than let it run past the fold. */
@media screen and (max-height: 760px) {
  .hero-cta {
    margin-top: 1.75rem;
    gap: 1.25rem;
  }

  .hero-cta__lede {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Very short viewports: the block has to clear the next section while the
   headline is still pinned, and there is only so much room under a centred
   headline. Trimming it here is what buys that clearance. */
@media screen and (max-height: 680px) {
  .hero-cta {
    margin-top: 1.25rem;
    gap: 1rem;
  }

  .hero-cta__lede {
    font-size: .9375rem;
    line-height: 1.55;
  }

  .hero-cta .lx-btn {
    padding: .7rem 1.4rem;
  }
}

@media screen and (max-width: 991px) {
  .hero-cta {
    margin-top: 2rem;
    gap: 1.5rem;
  }
}

@media screen and (max-width: 479px) {
  .hero-cta {
    margin-top: 1.5rem;
    gap: 1.25rem;
  }

  .hero-cta__lede {
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.65;
  }

  /* Full-width stacked targets read better than two shrunken pills here. */
  .hero-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(20rem, 78vw);
  }
}

/* Short phones need more of a run-up. The mobile hero stage is 170vh, which on
   a 640px-tall viewport leaves only ~340px of pinned scroll — less than the
   ~520px the phone needs to travel clear of the lede and buttons, so the state
   this block belongs to never arrived and it showed at a third of its opacity
   before the hero handed over. Extra runway is what buys that state; taller
   phones already have it and are left alone. */
@media screen and (max-width: 479px) and (max-height: 700px) {
  .hero-section-holder {
    height: 258vh;
  }
}

/* The phone is anchored in vh, so it rides up as the viewport shortens while
   the headline's offset from the header does not. At 232px of padding on a
   720px-tall window the phone covered ~80px of the 100px "Looxx it." line,
   burying the wordmark instead of layering over it. Easing the drop keeps the
   overlap to a deliberate-looking third.

   min-width is NOT optional here: `max-height: 760px` on its own matches
   nearly every phone in portrait, and these rules sit after the
   `max-width: 479px` block — so without it this silently overrode the mobile
   padding and pushed the hero block back into the brand marquee. */
@media screen and (min-width: 480px) and (max-height: 760px) {
  .hero-heading-wrapper {
    padding-top: 196px;
  }
}

/* ==========================================================================
   How-it-works: step badges + section kicker
   The three step "icons" are numbered placeholders (see the comment in
   index.html above #how) standing in for whatever picture is added per step —
   a plain circled numeral rather than an invented icon, since the content is
   a genuine three-step sequence and the number itself carries information.
   ========================================================================== */

.how-kicker {
  margin-bottom: 20px;
  font-family: var(--fonts--main-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
}

/* A large outline numeral rather than a circled badge — the circled-number
   treatment is the generic "SaaS features list" default, and reads that way
   regardless of the copy next to it. This borrows from an editorial page
   number instead: big, quiet, and hollow rather than boxed in. The stroke
   width is unitless-ish (thin) but the size does the work; -webkit-text-stroke
   is supported in every evergreen engine, and the plain `color` fallback
   below still reads as a large pale numeral where it isn't. */
.step-number {
  display: block;
  font-family: var(--looxx--display-font);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: var(--taupe-dark);
  -webkit-text-stroke: 1.5px var(--taupe-dark);
  -webkit-text-fill-color: transparent;
}

/* The hero's one deliberate flourish, carrying the exact gradient sampled
   from images/looxx-logo.png (violet #c65cfc to pink #ea6cee, left to right)
   so the wordmark in the corner and the one in the headline read as the same
   mark. color/-webkit-text-fill-color:transparent is required alongside
   background-clip for the gradient to actually show through the glyphs; the
   solid violet `color` above that is the fallback for a browser that ignores
   background-clip: text; and never shows since every current browser supports it. */
.hero-title em {
  font-style: italic;
  color: #c65cfc;
  background: linear-gradient(90deg, #c65cfc, #ea6cee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   FAQ accordion
   Reuses the roadmap's centered kicker/.title pattern and the footer's own
   .hairline divider — no new visual language, just a new arrangement of it.
   ========================================================================== */

.lx-faq {
  padding-top: 60px;
  padding-bottom: 40px;
}

.lx-faq__list {
  max-width: 720px;
  margin: 48px auto 0;
}

.lx-faq__item {
  padding: 22px 0;
}

.lx-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--looxx-black);
  text-align: left;
  cursor: pointer;
}

.lx-faq__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--stone);
  transition: transform .3s ease;
}

.lx-faq__item.is-open .lx-faq__chevron {
  transform: rotate(180deg);
  color: var(--looxx-black);
}

/* Collapsed via grid-template-rows 0fr→1fr rather than height/max-height —
   animates smoothly without knowing the answer's rendered height up front,
   and needs no JS beyond toggling the one class. */
.lx-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.lx-faq__answer > p {
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  max-width: 60ch;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--stone);
}

.lx-faq__item.is-open .lx-faq__answer {
  grid-template-rows: 1fr;
}

.lx-faq__item.is-open .lx-faq__answer > p {
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-faq__chevron,
  .lx-faq__answer {
    transition: none;
  }
}

@media screen and (max-width: 479px) {
  .lx-faq__question {
    font-size: 18px;
    gap: 16px;
  }
}

/* ==========================================================================
   CTA store badges — bigger than anywhere else on the page (this is the
   page's actual final ask), plain artwork with no box or backdrop around it.
   ========================================================================== */

.lx-store-badges--cta {
  margin-top: 8px;
  margin-bottom: 36px;
}

.lx-store-badges--cta img {
  height: 56px;
}

/* ==========================================================================
   Footer newsletter — relocated here from the final CTA panel, which now
   uses the store badges as its only action. Kept deliberately small: a
   secondary option for a visitor who isn't ready to download yet, not a
   second competing CTA.
   ========================================================================== */

/* ==========================================================================
   Testimonials — a fanned deck of three cards beside a left-hand editorial
   rail, in the Looxx brand layer's own type and colour (Playfair display,
   Inter for UI, paper ground, clay accent).

   The cards are stacked in ONE css-grid cell rather than absolutely
   positioned, so the tallest card sets the deck's height and the quotes can
   grow when the real ones arrive without anyone re-tuning a fixed height.
   Which card sits in front is driven entirely by the data-pos attribute that
   js/site.js rewrites — 0 is the front card, 1 the one to its right, 2 the
   one to its left.
   ========================================================================== */

.lx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.lx-testimonials {
  display: grid;
  grid-template-columns: minmax(260px, 30%) 1fr;
  gap: 56px;
  align-items: center;
}

/* --- Left rail ----------------------------------------------------------- */

.lx-testimonials__kicker {
  font-family: var(--fonts--main-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--looxx--clay-deep);
  margin: 0 0 20px;
}

.lx-testimonials__title {
  font-family: var(--looxx--display-font);
  font-weight: 600;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--looxx--ink);
  margin: 0 0 24px;
}

.lx-testimonials__lede {
  font-family: var(--fonts--paragraph-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--looxx--ink-soft);
  max-width: 34ch;
  margin: 0;
}

/* The annotation and its doodle arrow sit on a diagonal, pointing from the
   end of the lede across to the deck. */
.lx-testimonials__join {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 0;
  color: var(--looxx--clay);
}

.lx-testimonials__join-text {
  font-family: var(--looxx--display-font);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--looxx--ink);
  transform: rotate(-6deg);
}

.lx-testimonials__join-arrow {
  width: 78px;
  height: auto;
  flex: none;
  transform: translateY(6px);
}

/* --- Deck ---------------------------------------------------------------- */

/* Clipped horizontally only: the side cards run past the column on narrow
   viewports, but the cards' drop shadows still need room above and below. */
.lx-testimonials__stage {
  overflow-x: clip;
  padding: 28px 0 0;
}

.lx-testimonials__deck {
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12px 0;
}

.lx-testimonials__deck:focus-visible {
  outline: 2px solid var(--looxx--clay-deep);
  outline-offset: 12px;
  border-radius: 8px;
}

.lx-testimonial {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 258px;
  margin: 0;
  padding: 14px 14px 18px;
  background: var(--color--box-color);
  border: 1px solid var(--looxx--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px -24px #1a171436;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              opacity .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.lx-testimonial[data-pos="0"] {
  transform: translateX(0) rotate(0) scale(1);
  z-index: 3;
  opacity: 1;
  box-shadow: 0 30px 60px -28px #1a17144d;
}

/* Offset just past the card's own width so the front card clips only the
   outer edge of each neighbour and all three quotes stay readable. Dropping
   the pair 22px is what makes the middle card read as lifted. */
.lx-testimonial[data-pos="1"] {
  transform: translateX(86%) translateY(22px) rotate(3.5deg) scale(.9);
  z-index: 2;
  opacity: .92;
  cursor: pointer;
}

.lx-testimonial[data-pos="2"] {
  transform: translateX(-86%) translateY(22px) rotate(-3.5deg) scale(.9);
  z-index: 1;
  opacity: .92;
  cursor: pointer;
}

.lx-testimonial[data-pos="1"]:hover,
.lx-testimonial[data-pos="2"]:hover {
  opacity: 1;
}

/* Empty portrait slot. Intentionally reads as unfinished — a tinted panel
   with a camera glyph and a label — so a placeholder card can never be
   mistaken for a finished one. Replace the whole block with an <img>. */
.lx-testimonial__photo {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--looxx--clay-tint);
  color: var(--looxx--clay-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.lx-testimonial__photo svg {
  width: 30px;
  height: 30px;
}

.lx-testimonial__photo-label {
  font-family: var(--fonts--main-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The template styles every blockquote with 2px side rules and 50px of
   padding (see the base rule far above) — none of which belongs on a card. */
.lx-testimonial__quote {
  border: 0;
  margin: 0 0 20px;
  padding: 0 6px;
}

.lx-testimonial__quote p {
  font-family: var(--looxx--display-font);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--looxx--ink);
  margin: 0;
}

.lx-testimonial__quote p::before { content: "\201C"; }
.lx-testimonial__quote p::after  { content: "\201D"; }

.lx-testimonial__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

.lx-testimonial__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--looxx--clay-tint);
  border: 1px solid var(--looxx--line);
  flex: none;
}

.lx-testimonial__name {
  font-family: var(--fonts--main-font);
  font-size: .875rem;
  font-weight: 500;
  color: var(--looxx--ink-soft);
}

/* --- Dots ---------------------------------------------------------------- */

.lx-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 28px;
}

/* The button carries the hit area (min-* so the template's button rules
   can't shrink it under the WCAG 2.2 target-size floor of 24px); the 7px
   dot inside is the only part that gets painted. */
.lx-testimonials__dot {
  min-width: 32px;
  min-height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.lx-testimonials__dot span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--looxx--line);
  transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
}

.lx-testimonials__dot:hover span {
  background: var(--looxx--ink-soft);
}

.lx-testimonials__dot[aria-current="true"] span {
  width: 20px;
  background: var(--looxx--clay);
}

.lx-testimonials__dot:focus-visible {
  outline: 2px solid var(--looxx--clay-deep);
  outline-offset: 1px;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .lx-testimonials {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lx-testimonials__lede {
    max-width: 46ch;
  }

  /* The arrow points down the page at the deck below it once the columns
     stack, instead of across to a column that is no longer there. */
  .lx-testimonials__join {
    margin-top: 28px;
  }

  .lx-testimonials__join-arrow {
    width: 68px;
    transform: rotate(24deg);
  }

  /* Rotating the arrow leaves dead space under its bounding box; pull the
     deck back up into it so the annotation still points at something close. */
  .lx-testimonials__stage {
    padding-top: 0;
    margin-top: -24px;
  }
}

@media screen and (max-width: 767px) {
  .lx-testimonial {
    max-width: 268px;
  }

  /* One card at a time, its neighbours only peeking — three fanned cards
     have nowhere to go at this width. */
  .lx-testimonial[data-pos="1"] {
    transform: translateX(72%) translateY(16px) rotate(3deg) scale(.86);
    opacity: .5;
  }

  .lx-testimonial[data-pos="2"] {
    transform: translateX(-72%) translateY(16px) rotate(-3deg) scale(.86);
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lx-testimonial,
  .lx-testimonials__dot span {
    transition: none;
  }
}

/* ==========================================================================
   Narrow phones (< 480px)
   ==========================================================================
   Everything from 480px up is deliberately tuned and is left alone. This
   block only covers the widths below it, where three things that work on a
   wider screen stop working rather than just getting smaller:

   1. The headline stopped filling its column. .hero-title dropped from 80px
      to a flat 43px at a 1px breakpoint - the type went from covering ~61%
      of the text column to ~43% of it, so "See it. Looxx it." read as small
      print rather than as the page's opening statement, and the gradient
      wordmark - the one flourish the hero has - shrank with it.
   2. The hero phone stopped eclipsing the headline. At 480px the phone is
      67.5% of the viewport and bleeds off the bottom edge, so it passes over
      the wordmark as a full-bleed object. Below 480px it was 63% and ~100px
      shorter, which left it floating mid-screen over a large empty gap with
      the headline already gone above it.
   3. The live demo became unreachable. .feature-scroll-section-holder stacks
      to a column here, which collapses .feature-scroll-phone-holder's height
      onto the phone's own height - and that height IS the runway its
      position: sticky needs. Measured: a 569px holder around a 569px phone,
      against 2091px at 480px. So the phone scrolled away before the first
      step was read, and js/feature-phone-expand.js swapped in the live
      iframe while the phone sat ~1800px above the viewport. The hero's "try
      the demo first" link pointed into the same dead space.

   The fix for (3) is not to rebuild the sticky runway - on one narrow column
   there is no side room for a phone to sit beside anything, so the
   phone-follows-the-bullets idea has nothing to be beside. The section is
   reordered instead: the three steps read as a plain numbered list at full
   width, and the phone arrives after them as the thing they were leading to,
   with the demo already live inside it. Same single phone element, same
   markup, same JS - only the order and the size change.
   ========================================================================== */

@media screen and (max-width: 479px) {

  /* --- Hero ------------------------------------------------------------- */

  /* Fluid rather than another fixed step, so the headline keeps filling the
     same share of the column at every width instead of snapping. 17.6vw is
     derived, not picked: the face sets at ~3.42px of ink per px of font
     size, so 17.6vw lands the two lines at ~66% of the column - matching the
     proportion 480px already has. The 5rem ceiling is the 80px the next
     breakpoint up uses, so the two meet without a visible step at 479/480,
     and the 3.4rem floor keeps a 320px screen readable.

     Set as a custom property, not a plain font-size, because
     .hero-phone-holder below needs the same curve. The phone's rest
     position used to be one fixed `top` (49.45px, tuned for the flat 43px
     title this replaced) - fine when the title never moved, but now that
     it grows and shrinks with the viewport, a fixed anchor left the phone
     behind: the gap under the headline measured 143px at 480px and grew to
     193px at 320px as the title's own bottom edge climbed. Driving both
     from one variable keeps them moving together at every width in
     between, so the gap stays put instead of opening up on narrow phones -
     which is also what was making the phone read as not reaching back to
     the headline at all: with the gap that wide, the phone needed far more
     scroll before it ever reached the text, when the point of the exercise
     is for it to pass over and hide it.

     Set on .hero-section-container, not .hero-heading-container: the
     phone lives in .hero-phone-wrapper, a sibling of .hero-heading-wrapper
     one level up, so the variable has to start above both to reach it. */
  .hero-section-container {
    --hero-fluid-fs: clamp(3.4rem, 17.6vw, 5rem);
  }

  .hero-title {
    font-size: var(--hero-fluid-fs);
  }

  /* Same join at the top: 360px is the base rule's max-width, so at 479px
     this resolves to exactly what 480px renders. Below that it tracks the
     viewport instead of sitting at a fixed 262px, which is what kept the
     phone from reaching the bottom edge. (html carries a site-wide
     `zoom: 90%`, so every rendered px here is 0.9 of the CSS px this rule
     is written in - already folded into the constants below.) */
  .hero-phone-holder.animate-on-load-02 {
    max-width: min(84vw, 360px);
    /* Coefficients fitted to two measured rest points (the title's own
       bottom edge at 320px and at the 480px hand-off) so this tracks
       --hero-fluid-fs at the same rate the title's height does, landing a
       constant ~140px gap under it at every width in between. Re-fit
       against fresh measurements if the title's font, line-height or the
       site-wide zoom ever change - these numbers are measured, not
       derived from first principles. */
    top: calc(-126px + 2.065 * var(--hero-fluid-fs));
  }

  /* --- How it works: steps first, demo last ----------------------------- */

  /* DOM order is phone, caption, list. On one column the phone reads as a
     decorative duplicate of the hero's if it opens the section, and the
     caption has nothing to annotate. Reversed, the section builds: the three
     steps explain it, then the phone shows it running. */
  .feature-scroll-section-holder {
    align-items: center;
    /* 100px in the base rule, where it separates this section from the
       marquee above AND balances the phone standing beside the list. Here
       the phone has moved to the bottom (see the order swap below), so it
       is only doing the first job - and the marquee already contributes its
       own 56px of bottom padding to that same gap. 100px on top of that put
       ~200px between the brand track and "How it works", roughly double the
       ~95px this section's own kicker gets above it. 48px evens the two. */
    padding-top: 48px;
  }

  .featuer-list-holder {
    order: 1;
    width: 100%;
    margin-top: 0;
    margin-bottom: 2.5rem;
  }

  .feature-scroll-phone-holder {
    order: 3;
    max-width: min(76vw, 290px);
  }

  /* The sticky here has no runway left once the section is a column (the
     holder is exactly as tall as the phone), so it only ever read as the
     phone scrolling away early. In normal flow it stays where it is put.
     Scoped to the id, not the shared .hero-phone-holder-normal class: the
     closing panel further down the page reuses that same class on its own
     phone, inside a 280px overflow:hidden window that relies on this
     element staying sticky (top: 90px) to crop the correct part of the
     screen. Selecting the class here made that phone lose its offset and
     scroll to the top of the crop, showing the middle of the app screen
     poking out above the bezel. */
  #feature-scroll-phone {
    position: static;
  }

  /* The hero's "try the demo first" link targets #demo, which is the
     zero-height spacer at the end of the list - now directly above the
     caption and phone. Clear the 59px mobile header plus a little air. */
  .feature-phone-expand-spacer {
    scroll-margin-top: 84px;
  }

  /* --- The demo caption, stacked ---------------------------------------- */

  /* Beside the phone this is a fixed side-annotation placed every frame from
     the phone's live rect (see js/feature-phone-expand.js). There is no side
     gutter to place it in here, so it becomes an ordinary centered block in
     the flow above the phone - which also means the JS never needs to
     position it: its positionCaption() only runs on the wide branch. */
  .feature-demo-caption {
    order: 2;
    display: flex;
    position: static;
    max-width: none;
    transform: none;
    align-items: center;
    text-align: center;
    opacity: 1;
    margin-bottom: 1.25rem;
  }

  .feature-demo-title {
    font-size: 2rem;
  }

  /* The arrow points right at the phone beside it in the wide layout. Here
     the phone is below, so it turns to point down at it. */
  .feature-demo-arrow {
    width: 64px;
    height: auto;
    margin-top: 14px;
    transform: rotate(58deg);
  }

  /* --- The demo itself --------------------------------------------------- */

  /* No grow step happens at this width, so there is no "finished growing"
     moment for the screenshot/iframe crossfade to hang off - the live app is
     simply what this phone shows. Both the plain and .is-active forms are
     restated so the class js/feature-phone-expand.js toggles cannot put the
     static screenshot back. */
  .feature-scroll-screenshot,
  .feature-scroll-screenshot.is-swapped {
    opacity: 0;
  }

  .feature-scroll-iframe,
  .feature-scroll-iframe.is-active {
    opacity: 1;
    /* Interaction stays off until the visitor asks for it - see the tap
       target below. An interactive iframe sitting in the scroll path on a
       touch screen swallows the swipe that was meant to scroll the page. */
    pointer-events: none;
  }

  .hero-phone-holder-normal.is-demo-live .feature-scroll-iframe,
  .hero-phone-holder-normal.is-demo-live .feature-scroll-iframe.is-active {
    pointer-events: auto;
  }
}

/* The tap target that hands the scroll over to the embedded app. Hidden
   outside narrow widths, where a pointer can leave the frame whenever it
   likes and the demo is reached by scrolling rather than by tapping.
   display: none also keeps it out of the tab order and the a11y tree there.
   It sits inside .hero-app-holder so the phone's clip-path trims it to the
   screen's exact shape, same as the screenshot and the iframe. */
.feature-demo-tap {
  display: none;
}

@media screen and (max-width: 479px) {
  .feature-demo-tap {
    display: flex;
    position: absolute;
    inset: 1.5% 4.2%;
    z-index: 3;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 6%;
    border: 0;
    border-radius: 0;
    /* Just enough to seat the pill - the live app behind it is the thing
       worth looking at, so the scrim stays clear across the top two thirds
       and only gathers under the label. */
    background: linear-gradient(to bottom, #fbf8f400 66%, #fbf8f499 86%, #fbf8f4d9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .3s ease;
  }

  .hero-phone-holder-normal.is-demo-live .feature-demo-tap {
    opacity: 0;
    pointer-events: none;
  }

  .feature-demo-tap__label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* 44px minimum touch height, met by padding rather than a fixed height
       so the label can wrap if the copy is ever translated longer. */
    min-height: 44px;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    background: var(--looxx--ink, #1a1a1a);
    color: #fbf8f4;
    font-family: var(--fonts--main-font, Inter, sans-serif);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
  }

  /* Ink rather than clay: the ring traces the screen's edge, so it is drawn
     over the light app behind it, where clay only reaches ~3.3:1. */
  .feature-demo-tap:focus-visible {
    outline: 3px solid var(--looxx--ink, #1a1714);
    outline-offset: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-demo-tap {
    transition: none;
  }
}