/* A2-83 Studio — rebuilt from the Webflow site (Oct 2026). No framework, no tracking. */

:root {
  --grey: #323232;
  --dark-grey: #141415;
  --dark-black: #212121;
  --light-grey: #787878;
  --light-blue: #f4f8fb;
  --gradient1-left: #fa5853;
  --gradient1-middle: #f46692;
  --gradient1-right: #ffc444;
  --gradient2-left: #60aef8;
  --gradient2-middle: #f46692;
  --gradient2-right: #f3a562;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: 75px;
  color: var(--grey);
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  overflow-x: hidden;
}
img { max-width: 100%; vertical-align: middle; display: inline-block; border: 0; }
a { color: var(--grey); text-decoration: none; transition: color .2s; }
a:hover { color: var(--dark-grey); text-decoration: underline; }
p { margin: 0 0 10px; }
strong { font-weight: 700; }
ul { margin: 0 0 10px; padding-left: 30px; }
li { margin-bottom: 8px; }

h1, h2, h3, h4, h5, h6 { font-family: Manrope, sans-serif; margin: 20px 0 10px; }
h1 { font-size: 75px; font-weight: 800; line-height: 1.2; }
h2 { font-size: 70px; font-weight: 800; line-height: 1.2; }
h3 { font-size: 50px; font-weight: 700; line-height: 1.3; }
h4 { font-size: 32px; font-weight: 800; line-height: 1.3; margin-top: 10px; }
h5 { font-size: 25px; font-weight: 800; line-height: 1.3; margin-top: 10px; }
h6 { font-size: 20px; font-weight: 700; line-height: 1.2; margin-top: 10px; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

/* ---------- Layout ---------- */
.container { max-width: 1170px; margin: 0 auto; padding: 3rem 1em; }
.small-container { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
.small-container.left-align { align-items: flex-start; }
.section.light-blue-bg { background-color: var(--light-blue); }
.section.second { margin-top: 50vh; }
.text-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.text-container { max-width: 50%; padding-bottom: 40px; }
.text-xl { font-size: 24px; }
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Nav ---------- */
.fixed-nav {
  position: fixed; inset: 0 0 auto; z-index: 10; height: 75px;
  background: #fff; box-shadow: 0 1px #f1f1f1;
}
.nav-container { display: flex; align-items: center; height: 100%; padding-top: 0; padding-bottom: 0; }
.nav-logo { height: 32px; width: auto; }

/* ---------- Gradients ---------- */
.text-gradient-1, .text-gradient-2, .trusted-no, .hero-text-new {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-1 { background-image: linear-gradient(111deg, var(--gradient1-left), var(--gradient1-middle) 50%, var(--gradient1-right)); }
.text-gradient-2 { background-image: linear-gradient(111deg, var(--gradient2-left), var(--gradient2-middle) 50%, var(--gradient2-right)); }

/* ---------- Hero ---------- */
.section-hero { position: relative; padding-top: 3em; }
.ellipses-holder { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ellipse-left, .ellipse-right { position: absolute; z-index: -1; background-size: cover; background-position: 50% 50%; }
.ellipse-left { background-image: url("../images/ellipse-1.webp"); width: 520px; height: 650px; top: 5em; left: -430px; }
.ellipse-right { background-image: url("../images/ellipse-2.webp"); width: 650px; height: 650px; top: 0; right: -530px; }

.main-hero-container { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 70vh; overflow: hidden; }
.app-icon-holder { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; padding: 20px; }
.app-icon { width: auto; max-width: 200%; overflow: visible; }
.main-heading { margin-top: 20px; }
.hero-description { grid-column: 3 / 9; }
.grid-10-columns { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; width: 100%; }

.download-buttons { display: flex; margin: 2em 0 3em; }
.download-button { margin-right: 30px; }
.download-button.last { margin-right: 0; }
.button.download {
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px;
  min-width: 180px; padding: 13px 20px; border-radius: 8px;
  background-color: var(--dark-grey); color: #fff;
  font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 400; text-decoration: none;
  transition: background-color .3s;
}
.button.download:hover { background-color: var(--dark-black); color: #fff; text-decoration: none; }
.download-button-icon { width: auto; height: 24px; }

/* Big "Pollen | Know Your Enemy" split heading */
.hero-text-sticky { position: sticky; top: 75px; display: flex; justify-content: center; width: 99vw; }
.hero-text-holder { position: absolute; top: 200px; display: flex; justify-content: space-between; width: 99vw; overflow: hidden; }
.hero-text-holder-1 { width: 50vw; text-align: right; overflow: hidden; }
.hero-text-holder-2 { text-align: left; overflow: hidden; }
.hero-text-new { margin: 0; font-size: 210px; font-weight: 800; line-height: 1.2; overflow: hidden; }
.hero-text-new._1 {
  background-image: linear-gradient(90deg, var(--gradient1-left), var(--gradient1-middle));
  text-align: right; padding-right: 1rem; font-size: 150px; line-height: .8;
}
.hero-text-new._2 {
  background-image: linear-gradient(90deg, var(--gradient1-middle), var(--gradient1-right));
  text-align: left; width: 48vw; padding-left: 1rem; font-size: 100px; line-height: 1.1;
  transform: translateX(-100%);
  animation: slideIn 1.2s cubic-bezier(.2,.7,.2,1) .6s forwards;
}
.hero-text-holder-1, .hero-text-holder-2 { will-change: transform; }
@keyframes slideIn { to { transform: translateX(0); } }
.hero-text-line {
  position: relative; width: 3px; height: 160px; margin-top: 60px; border-radius: 20px;
  background-image: linear-gradient(to right, var(--gradient1-left), var(--gradient1-middle) 50%, var(--gradient1-right));
}

/* Phone demo */
.hero-product-demo { position: relative; display: block; width: 100%; height: 160vh; }
.product-demo-sticky { position: sticky; top: 110px; z-index: 1; }
.product-container { position: relative; top: -30px; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 1em 0; overflow: hidden; }
.product-phone-image-holder { position: relative; width: 400px; }
.product-phone-image { width: 100%; height: auto; }
.product-phone-content { position: absolute; inset: 36px 37px 35px 36px; z-index: -1; overflow: hidden; border-radius: 36px; }
.product-phone-content img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone-lock-screen-image { z-index: 1; border-radius: 36px; transform: translateY(var(--lock-y, 0%)); will-change: transform; }

/* ---------- Features ---------- */
.grid-6-col { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1em; width: 100%; }
.trusted-content { position: relative; padding: 5rem 0; }
.trusted-content.intro { grid-column: 1 / 4; }
.trusted-content.trusted-list { grid-column: 4 / 7; padding-top: 25vh; }
.content-sticky { position: sticky; top: 100px; }
.heading { line-height: 1.1; }
.screens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0; }
.screens-grid img { width: 100%; height: auto; }

.trusted-overlay-container { position: absolute; inset: 0 0 auto; width: 1px; height: 100%; pointer-events: none; }
.trusted-white-overlay {
  position: sticky; top: 75px; width: 49vw; height: 10em; z-index: 2;
  background-image: linear-gradient(#fff, rgba(255,255,255,0));
}
.trusted-white-overlay.bottom {
  top: 80vh; height: 20vh;
  background-image: linear-gradient(to top, #fff, rgba(255,255,255,.27) 73%, rgba(255,255,255,0));
}
.trusted-item { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20vh; }
.trusted-item.last { margin-bottom: 0; }
.trusted-item-header { display: flex; align-items: center; }
.trusted-item-header h3 { font-size: 25px; font-weight: 800; margin: 10px 0; line-height: 1.3; }
.trusted-no {
  margin: 0 10px 0 0; font-family: Manrope, sans-serif; font-size: 70px; font-weight: 800; line-height: 1.2;
  background-image: linear-gradient(128deg, var(--gradient2-left), var(--gradient1-middle) 50%, var(--gradient1-right));
}

/* ---------- Legal pages ---------- */
.legal-header h1 { margin-bottom: 10px; }
.legal-header .updated { font-family: Manrope, sans-serif; font-size: 20px; font-weight: 700; font-style: italic; margin: 10px 0; }
.legal { max-width: 900px; line-height: 1.5; }
.legal h2 { font-size: 50px; font-weight: 700; line-height: 1.3; margin: 1.5em 0 .4em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 32px; font-weight: 800; line-height: 1.3; margin: 1em 0 .4em; }
.legal p { margin-bottom: 1em; }
.legal ul { margin-bottom: 1em; }
.legal a { text-decoration: underline; word-break: break-word; }

/* ---------- Footer ---------- */
.footer { margin-top: auto; }
.footer .container { padding-top: 2em; border-top: 1px solid #d5d7db; }
.footer-flex-container { display: flex; justify-content: flex-end; text-align: left; }
.footer-brand-content { display: flex; flex: 1 1 0%; flex-direction: row; justify-content: flex-start; align-items: center; padding-right: 50px; }
.footer-logo-link { max-width: 130px; margin: 0 2em 1em 0; }
.footer-image { width: 100%; height: auto; }
.footer-list { display: flex; flex-direction: row; list-style: none; padding: 0; margin: 0; }
.footer-list-item { margin: 0; padding-right: 1em; font-size: 15px; }
.link { position: relative; display: inline-block; padding-bottom: 5px; overflow: hidden; text-decoration: none; }
.link:hover { text-decoration: none; }
.link-underline {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background-image: linear-gradient(to right, var(--gradient2-left), var(--gradient2-middle) 50%, var(--gradient2-right));
  transform: translateY(102%); transition: transform .3s ease;
}
.link:hover .link-underline, .link:focus-visible .link-underline, .link[aria-current="page"] .link-underline { transform: translateY(0); }
.footer-copyright { display: flex; align-items: center; justify-content: flex-end; }
.grey-text { color: var(--light-grey); font-size: 15px; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.load-in { opacity: 0; transform: translateY(20px); animation: loadIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.load-in.skew { transform: translateY(20px) skew(-3deg, -3deg); }
.load-in.pop { transform: scale(.7); }
.load-in.d1 { animation-delay: .15s; } .load-in.d2 { animation-delay: .3s; } .load-in.d3 { animation-delay: .45s; }
@keyframes loadIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .load-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-text-new._2, .iphone-lock-screen-image { transform: none !important; }
}

/* ---------- Responsive (Webflow breakpoints) ---------- */
@media (min-width: 1280px) { .container { max-width: 1280px; } }

@media (max-width: 991px) {
  h1 { font-size: 60px; } h2 { font-size: 55px; }
  .section-hero { padding-top: 1em; }
  .main-hero-container { padding: 0 1em; }
  .small-container { max-width: 100%; }
  .text-container { max-width: 70%; }
  .grid-10-columns { grid-template-columns: repeat(6, 1fr); }
  .hero-description { grid-column: 1 / -1; }
  .ellipse-left { left: -450px; } .ellipse-right { right: -560px; }
  .download-buttons { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .download-button { margin-right: 0; }
  .hero-text-new { font-size: 100px; }
  .hero-text-line { height: 90px; margin-top: 25px; }
  .trusted-no { font-size: 55px; }
  .footer-flex-container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
  h1 { font-size: 55px; } h2 { font-size: 45px; } h3 { font-size: 40px; } h4 { font-size: 30px; } h5 { font-size: 24px; }
  .section.second { margin-top: 400px; }
  .text-container { max-width: 100%; }
  .grid-10-columns { grid-template-columns: 1fr; }
  .download-buttons { flex-direction: column; align-items: center; }
  .download-button { width: 100%; }
  .button.download { width: 100%; }
  .hero-text-holder { flex-direction: column; align-items: center; }
  .hero-text-holder-1, .hero-text-holder-2 { width: 100%; text-align: center; }
  .hero-text-new._1, .hero-text-new._2 { width: 100%; padding: 0; text-align: center; }
  .hero-text-line { width: 30%; height: 2px; margin-top: 0; }
  .hero-product-demo { height: 130vh; }
  .grid-6-col { grid-template-columns: 1fr; }
  .trusted-content.intro, .trusted-content.trusted-list { grid-column: 1 / -1; }
  .trusted-content { padding: 0 0 3rem; }
  .trusted-content.trusted-list { padding-top: 0; }
  .content-sticky { position: static; }
  .trusted-overlay-container { display: none; }
  .trusted-item { margin-bottom: 3em; }
  .trusted-no { font-size: 45px; }
  .legal h2 { font-size: 34px; } .legal h3 { font-size: 24px; }
  .footer-brand-content { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .footer-list { flex-direction: column; }
  .footer-list-item { margin-bottom: 10px; }
  .footer-copyright { padding-top: 1em; }
}

@media (max-width: 479px) {
  h1 { font-size: 44px; } h2 { font-size: 38px; } h3 { font-size: 30px; font-weight: 500; } h4 { font-size: 28px; }
  .section.second { margin-top: 50vh; }
  .hero-text-new { font-size: 80px; }
  .hero-text-new._1 { font-size: 80px; } .hero-text-new._2 { font-size: 60px; }
  .hero-product-demo { height: 80vh; }
  .ellipse-left { width: 320px; height: 350px; top: 30%; left: -60%; }
  .ellipse-right { width: 350px; height: 350px; top: 30%; left: 75vw; right: auto; }
  .app-icon-holder { width: 80px; height: 80px; }
  .product-phone-image-holder { width: 300px; }
  .product-phone-content { inset: 26px 27px; border-radius: 30px; }
  .iphone-lock-screen-image { border-radius: 30px; }
  .trusted-no { font-size: 38px; }
}