/* Saloria website responsive pass: scale, density, and mobile ergonomics. */

:root {
  --page-max: 1240px;
  --page-wide: 1360px;
  --page-pad: 28px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-size: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  text-size-adjust: 100%;
}

a,
button,
p,
h1,
h2,
h3,
span,
li {
  overflow-wrap: anywhere;
}

body section {
  scroll-margin-top: 96px;
}

.wrap,
.wrap-tight,
.wrap-wide {
  padding-inline: var(--page-pad) !important;
}

.wrap {
  max-width: var(--page-max) !important;
}

.wrap-wide {
  max-width: var(--page-wide) !important;
}

.section {
  padding-block: 104px !important;
}

.section-tight {
  padding-block: 72px !important;
}

.section-loose,
section[style*="padding: 120px"],
section[style*="padding: 200px"] {
  padding-block: 120px !important;
}

section h1 {
  font-size: 104px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

section h2 {
  font-size: 64px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

section p {
  font-size: 17px !important;
  line-height: 1.62 !important;
}

.btn-base {
  padding: 14px 22px !important;
  min-height: 48px;
}

.eyebrow {
  letter-spacing: .16em !important;
}

.site-nav {
  padding-block: 16px !important;
}

.site-nav__inner {
  gap: 24px !important;
}

.site-nav__links {
  gap: 24px !important;
  letter-spacing: .12em !important;
}

.site-nav__cta {
  white-space: nowrap;
}

.variant-pill {
  bottom: 18px !important;
  left: 18px !important;
  padding: 10px 14px !important;
}

[style*="cursor: none"] {
  cursor: pointer !important;
}

@media (max-width: 1180px) {
  :root {
    --page-pad: 24px;
  }

  section h1 {
    font-size: 82px !important;
  }

  section h2 {
    font-size: 54px !important;
  }

  .site-nav__links {
    gap: 18px !important;
  }
}

@media (max-width: 900px) {
  :root {
    --page-pad: 22px;
  }

  .section {
    padding-block: 72px !important;
  }

  .section-tight {
    padding-block: 56px !important;
  }

  .section-loose,
  section[style*="padding: 120px"],
  section[style*="padding: 200px"] {
    padding-block: 84px !important;
  }

  section h1 {
    font-size: 60px !important;
  }

  section h2 {
    font-size: 42px !important;
  }

  section p {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .site-nav__inner {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .site-nav__links {
    display: none !important;
  }

  .site-nav__brand img {
    height: 22px !important;
  }

  .site-nav__cta {
    padding: 10px 16px !important;
    min-height: 40px;
    font-size: 12px !important;
  }

  section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  section [style*="grid-column"] {
    grid-column: auto !important;
  }

  section [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  section h1,
  section h2,
  section h3,
  section p {
    width: calc(100vw - 44px) !important;
    max-width: 100% !important;
    text-wrap: auto !important;
  }

  section [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }

  .tablet-frame {
    border-radius: 20px !important;
  }

  .tablet-screen {
    inset: 10px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad: 20px;
  }

  body section {
    scroll-margin-top: 72px;
  }

  .site-nav {
    padding-block: 14px !important;
  }

  .site-nav__inner {
    justify-content: space-between !important;
  }

  .site-nav__cta {
    display: none !important;
  }

  .section,
  .section-tight,
  .section-loose,
  section[style*="padding: 120px"],
  section[style*="padding: 200px"] {
    padding-block: 64px !important;
  }

  section h1 {
    font-size: 46px !important;
    line-height: 1.04 !important;
  }

  section h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  section h3 {
    font-size: 26px !important;
  }

  section p {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .balance,
  .pretty {
    text-wrap: auto !important;
  }

  section [style*="gap: 80px"],
  section [style*="gap: 100px"],
  section [style*="gap: 60px"] {
    gap: 28px !important;
  }

  .btn-base {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    flex: 1 1 100%;
    justify-content: center;
    padding: 13px 18px !important;
    min-height: 46px;
  }

  .tablet-frame,
  section [style*="aspect-ratio"],
  section [style*="aspectRatio"] {
    max-width: calc(100vw - 40px) !important;
  }

  .eyebrow {
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }

  .eyebrow::before {
    width: 18px !important;
  }

  .marquee-track {
    gap: 36px !important;
  }

  .marquee-track > span {
    gap: 36px !important;
    font-size: 24px !important;
  }

  .variant-pill {
    display: none !important;
  }

  .grain-overlay {
    opacity: .12 !important;
  }

  [style*="height: 100vh"],
  [style*="height: 180vh"],
  [style*="height: 480vh"],
  [style*="height: 700vh"],
  .vh-100,
  .vh-200,
  .vh-300 {
    height: auto !important;
    min-height: 0 !important;
  }

  [style*="min-height"] {
    min-height: 0 !important;
  }

  footer [style*="justify-content: space-between"] {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}