/* /audit: the free site audit landing page (trade-show QR target). Loaded on that page only.
   Markup: content/landing/audit.html, built into site/audit.html by scripts/landing.mjs, which also appends
   the homepage's "Let's talk." section and the site footer (styled by the template, not here).
   Colours are the brand swatches (brand kit 03-Brand-Colors): #0B0B0B ink, #F5F5F5 paper, #1C1C1C, #999999. */
/* tokens live on :root because the Let's talk section and the footer sit outside <main class="lp"> */
:root {
  --lp-ink: #050505;                      /* the site's --black; #0b0b0b read grey next to it */
  --lp-paper: #f5f5f5;
  --lp-mute: #4d4d4d;
  --lp-line: #d0d0d0;
  --lp-soft: rgba(245, 245, 245, .72);
  --lp-rule: rgba(255, 255, 255, .1);
  --lp-error: #b3261e;
  --lp-pad: 3.5vw;
  --lp-logo-top: calc(7.78vw + 2rem);     /* clears the fixed logo, whose band is 7.78vw tall */
  --lp-nav-clear: calc(10vh + 5rem);      /* the site nav floats over the bottom 10% of the viewport on desktop */
}
.lp {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--lp-paper);
  background: var(--lp-ink);
}

/* ═══ hero ═══════════════════════════════════════════════════════════════════════════════ */
.lp-hero { position: relative; overflow: hidden; }

/* background: one photo, zooming in slowly. Only transform animates; the shade on top is static. */
.lp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--lp-ink); }
.lp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 62%;
  transform-origin: 50% 62%;
  animation: lp-zoom 45s cubic-bezier(.33, 0, .2, 1) both;
  will-change: transform;
}
@keyframes lp-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.16); }
}
.lp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .62) 0%, rgba(8, 8, 8, .22) 42%, rgba(8, 8, 8, .18) 60%, rgba(8, 8, 8, .55) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, 0) 24%, rgba(8, 8, 8, 0) 68%, rgba(8, 8, 8, .85) 100%);
}

/* form box left, vertically centred between the fixed logo and the floating nav; logos right */
.lp-grid {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: max(8rem, var(--lp-logo-top)) var(--lp-pad) var(--lp-nav-clear);
}

/* ── the form box */
.lp-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 28rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  scroll-margin-top: 5.5rem;
}
.lp-title {
  margin: 0 0 .6rem;
  color: var(--lp-ink);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
}
.lp-lede { margin: 0 0 1.25rem; color: var(--lp-mute); font-size: .95rem; font-weight: 400; line-height: 1.5; }

.lp-form { margin: 0; }
.lp-field { margin-bottom: .8rem; min-width: 0; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
.lp-field label {
  display: block;
  margin: 0 0 .35rem;
  color: #1c1c1c;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
}
.lp-opt { color: #6b6b6b; font-weight: 400; }
.lp-field input {
  display: block;
  width: 100%;
  height: 2.9rem;
  margin: 0;
  padding: 0 .85rem;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  background: #fff;
  color: var(--lp-ink);
  font: inherit;
  font-size: 16px;        /* 16px minimum: iOS zooms the page into smaller inputs */
  font-weight: 400;
  line-height: 1.2;
  transition: border-color .2s ease;
}
.lp-field input::placeholder { color: #9a9a9a; opacity: 1; }
.lp-field input:focus { outline: 2px solid var(--lp-ink); outline-offset: 1px; border-color: var(--lp-ink); }
.lp-field input:user-invalid { border-color: var(--lp-error); }

/* optional fields: always shown on desktop; folded behind a toggle on phones (see the 991px block) */
.lp-more { display: none; }

.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 3.25rem;
  margin-top: .4rem;
  border: 0;
  border-radius: 100px;
  background: var(--lp-ink);
  color: var(--lp-paper);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.lp-submit:active { transform: scale(.98); }
.lp-submit:disabled { opacity: .7; cursor: default; }
.lp-submit:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
.lp-submit-icon { width: 1rem; height: 1rem; filter: invert(1); }   /* the glyph ships near-black */

.lp-privacy { margin: .75rem 0 0; color: #5c5c5c; font-size: .75rem; font-weight: 400; line-height: 1.45; }
.lp-card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.lp-done { display: none; }
.lp-done-title {
  margin: 0 0 .5rem;
  color: var(--lp-ink);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  outline: none;
}
.lp-done p { margin: 0; color: var(--lp-mute); font-size: .95rem; font-weight: 400; line-height: 1.5; }
.lp-fail { display: none; margin: .75rem 0 0; color: var(--lp-error); font-size: .85rem; font-weight: 400; line-height: 1.45; }

/* ── logos: two columns, one moving up, one moving down, no cards.
   Each track holds its list twice; moving it by -50% is exactly one list, so the loop is seamless.
   The columns dissolve at both ends and the bottom fade finishes above the fixed nav. The mask is static
   and only `transform` animates beneath it, so the compositor moves the logos without repainting. */
.lp-logos {
  --lp-fade-top: 16%;
  --lp-fade-bottom: calc(10vh + 5.5rem);
  position: absolute;
  z-index: 1;
  top: 0;
  right: var(--lp-pad);
  bottom: 0;
  width: min(28rem, 32vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--lp-fade-top), #000 calc(100% - var(--lp-fade-bottom) - 5rem), transparent calc(100% - var(--lp-fade-bottom)));
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--lp-fade-top), #000 calc(100% - var(--lp-fade-bottom) - 5rem), transparent calc(100% - var(--lp-fade-bottom)));
  animation: lp-fade-in 1.4s ease both .2s;
}
@keyframes lp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lp-col { position: relative; min-width: 0; overflow: hidden; }
.lp-track { display: flex; flex-direction: column; animation: lp-up 48s linear infinite; will-change: transform; }
.lp-col-down .lp-track { animation-name: lp-down; animation-duration: 54s; }
.lp-logos.is-paused .lp-track { animation-play-state: paused; }
@keyframes lp-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes lp-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.lp-set {
  display: flex;
  flex-direction: column;       /* the template gives every <ul> a gap and padding; reset them here */
  gap: 4.25rem;
  margin: 0;
  padding: 0 0 4.25rem;
  list-style: none;
}
.lp-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  color: var(--lp-paper);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
}
.lp-logo img { width: 2.75rem; height: 2.75rem; object-fit: contain; }

/* ═══ below the hero: three stacked cards (Ads, Funnel, Sold), then the FAQ ═══════════════════
   Stacking: osmo:stacking-cards-parallax. Cards sit in normal flow, each overlapping the one before by its
   rounded top edge; js/landing-motion.js drifts the covered card down and tilts its photo as the next one
   slides over it. The parent must not be display:flex (Osmo's note), so .lp stays a block. */
.lp-section { position: relative; padding: 7.5rem var(--lp-pad); border-top: 1px solid rgba(255, 255, 255, .06); background: var(--lp-ink); }
.lp-wrap { max-width: 76rem; margin: 0 auto; }
.lp-h2 {
  margin: 0 0 1rem;
  color: var(--lp-paper);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: none;
}
.lp-body { margin: 0 0 1.5rem; color: var(--lp-soft); font-size: 1.05rem; font-weight: 300; line-height: 1.6; }

.lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 100px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, transform .15s ease;
}
.lp-cta::after {
  content: "";
  width: .9rem;
  height: .9rem;
  background: url(../images/arrow_outward.svg) center / contain no-repeat;
}
.lp-cta:active { transform: scale(.98); }
.lp-cta:focus-visible { outline: 2px solid var(--lp-paper); outline-offset: 3px; }

.lp-stack { position: relative; }
.lp-stack-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -1.5rem;
  padding: 6rem var(--lp-pad) calc(10vh + 4rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--lp-ink);
  box-shadow: 0 -2rem 4rem rgba(0, 0, 0, .55);
  will-change: transform;
}
.lp-stack-card:first-child { margin-top: 0; border-top-color: rgba(255, 255, 255, .06); }
.lp-stack-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5vw; align-items: center; width: 100%; }
.lp-stack-step { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1.25rem; color: var(--lp-soft); font-size: .95rem; font-weight: 400; }
.lp-stack-step span { color: var(--lp-paper); font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.lp-stack-h {
  max-width: 14ch;
  margin: 0 0 1.5rem;
  color: var(--lp-paper);
  font-size: clamp(2.6rem, 5vw, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: none;
}
.lp-stack-copy .lp-body { max-width: 34rem; }
.lp-stack-media { margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5; }
.lp-stack-media img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }

.lp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 2rem 0 2.25rem; }
.lp-facts div { padding-top: 1rem; border-top: 1px solid var(--lp-rule); }
.lp-facts dt { color: var(--lp-paper); font-size: 1.45rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.lp-facts dd { margin: .35rem 0 0; color: var(--lp-soft); font-size: .85rem; font-weight: 400; line-height: 1.45; }

/* the six stages, inside the Sold card: pills on a rule; Sold is filled. With motion on
   (js/landing-motion.js adds .is-animated) a line fills along the rule and each stage lights up in turn. */
.lp-stage-row {
  --lp-progress: 0;
  position: relative;
  display: flex;
  flex-direction: row;       /* the template sets flex-flow: column on every <ol> */
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
.lp-stage-row li {
  position: relative;
  z-index: 1;
  padding: .6rem .95rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  background: var(--lp-ink);
  color: var(--lp-paper);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}
.lp-stage-row li.is-final { background: var(--lp-paper); border-color: var(--lp-paper); color: var(--lp-ink); font-weight: 500; }
.lp-stage-row.is-animated li { color: rgba(245, 245, 245, .38); border-color: rgba(255, 255, 255, .1); }
.lp-stage-row.is-animated li.is-final { background: var(--lp-ink); }
.lp-stage-row.is-animated li.is-lit { color: var(--lp-paper); border-color: rgba(255, 255, 255, .6); }
.lp-stage-row.is-animated li.is-final.is-lit { background: var(--lp-paper); border-color: var(--lp-paper); color: var(--lp-ink); }

/* FAQ: a sticky head beside the questions */
.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; }
.lp-split-head { position: sticky; top: 3rem; }
.lp-q { border-top: 1px solid var(--lp-rule); }
.lp-q:last-child { border-bottom: 1px solid var(--lp-rule); }
.lp-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  color: var(--lp-paper);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::after {            /* a plus that turns into a cross */
  content: "";
  flex: none;
  width: .85rem;
  height: .85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .25s ease;
}
.lp-q[open] summary::after { transform: rotate(45deg); }
.lp-q summary:focus-visible { outline: 2px solid var(--lp-paper); outline-offset: 4px; }
.lp-q .lp-body { max-width: 40rem; margin: -.4rem 0 1.6rem; }

/* headings that rise in line by line (js/landing-motion.js; SplitText masks each line) */
[data-lp-reveal] .lp-line { will-change: transform; }

/* phones only: a bottom bar with the action, shown once the form has scrolled away (js/landing.js) */
.lp-sticky { display: none; }

@media (hover: hover) and (pointer: fine) {
  .lp-submit:hover { background: #262626; }
  .lp-cta:hover { background: #fff; }
}

/* ── short laptop screens (1280×720, 1366×768): tighten the box so it fits between logo and nav */
@media (min-width: 992px) and (max-height: 860px) {
  .lp-grid { padding-top: max(6.5rem, calc(7.78vw + .75rem)); padding-bottom: calc(10vh + 3.5rem); }
  .lp-card { padding: 1.35rem 1.5rem; }
  .lp-title { font-size: 1.6rem; margin-bottom: .45rem; }
  .lp-lede { font-size: .9rem; margin-bottom: .9rem; }
  .lp-field { margin-bottom: .6rem; }
  .lp-field label { margin-bottom: .25rem; }
  .lp-field input { height: 2.6rem; }
  .lp-submit { height: 2.9rem; }
  .lp-privacy { margin-top: .5rem; }
}

/* ── tablets and phones: the Webflow nav becomes the top bar with the burger */
@media (max-width: 991px) {
  :root { --lp-pad: 1rem; }
  .lp-bg { bottom: auto; height: 100vh; height: 100svh; }      /* the photo sits behind the form; the logos below sit on ink */
  .lp-bg::after {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, .2) 30%, rgba(8, 8, 8, .35) 70%, var(--lp-ink) 100%);
  }
  .lp-grid { display: block; min-height: 0; padding: 5.25rem var(--lp-pad) 3rem; }
  .lp-card { max-width: 34rem; margin: 0 auto; padding: 1.35rem 1.25rem 1.25rem; }
  .lp-title { font-size: 1.55rem; }
  .lp-lede { font-size: .9rem; margin-bottom: 1rem; }

  /* optional fields fold away so the button sits in the first screen */
  .lp-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    margin: -.2rem 0 .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lp-ink);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
  }
  .lp-more::before {
    content: "";
    width: .7rem;
    height: .7rem;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  }
  .lp-optional { display: none; }
  .lp-form.is-more .lp-optional { display: block; }
  .lp-form.is-more .lp-more { display: none; }

  .lp-logos {
    --lp-fade-top: 14%;
    --lp-fade-bottom: 0px;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 34rem;
    height: 24rem;
    margin: 2.5rem auto 0;
  }
  .lp-set { gap: 3rem; padding-bottom: 3rem; }
  .lp-logo { font-size: .9rem; gap: .6rem; }
  .lp-logo img { width: 2.25rem; height: 2.25rem; }

  .lp-section { padding-top: 5rem; padding-bottom: 5rem; }
  .lp-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-split-head { position: static; }
  .lp-stack-card { min-height: 0; margin-top: -1.25rem; padding: 4.5rem var(--lp-pad) 4.5rem; border-radius: 1.25rem 1.25rem 0 0; }
  .lp-stack-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .lp-stack-media { order: -1; aspect-ratio: 4 / 3; }        /* the photo leads on phones */
  .lp-stack-h { font-size: clamp(2.3rem, 10vw, 3rem); }
  .lp-facts { grid-template-columns: 1fr 1fr; }

  .lp-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    padding: 1.5rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, .92) 45%);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
  }
  .lp-sticky.is-visible { transform: none; visibility: visible; }
  .lp-sticky .lp-cta { width: 100%; }
}
@media (max-width: 479px) {
  .lp-row { grid-template-columns: 1fr; gap: 0; }
  .lp-facts { gap: 1.25rem 1.25rem; }
  .lp-facts dt { font-size: 1.35rem; }
  .lp-q summary { font-size: 1.1rem; }
}
@media (pointer: coarse) {
  .lp-q summary { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-bg-img { animation: none; transform: scale(1.04); }
  .lp-track, .lp-logos { animation: none; }
  .lp-submit, .lp-cta, .lp-field input, .lp-q summary::after, .lp-sticky, .lp-stage-row li { transition: none; }
}