/* sales: his methodology. The route diagram beside the words (above them on phones); the scroll drives the build. */
#sales {
  height: auto;
  padding: clamp(104px, 17svh, 180px) max(var(--pad), env(safe-area-inset-right)) clamp(88px, 15svh, 160px) max(var(--pad), env(safe-area-inset-left));
}
#sales .s-wrap {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "fig" "text";
  row-gap: clamp(26px, 5vw, 44px);
}
#sales .s-head { grid-area: head; }
#sales .s-figcol { grid-area: fig; }
#sales .s-text { grid-area: text; }

/* heading */
#sales .s-title {
  font-weight: 800; letter-spacing: -0.045em; line-height: .96;
  font-size: clamp(54px, 15vw, 150px);
}
#sales .s-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em 0; margin-right: -.06em; }
#sales .s-mask > b { display: inline-block; font-weight: inherit; will-change: transform; }
#sales .s-sub {
  margin-top: clamp(8px, 1.4vw, 16px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--soft);
  font-size: clamp(22px, 5.6vw, 36px);
}

/* the route diagram */
#sales .s-fig {
  position: relative; width: min(100%, calc(40svh * 640 / 440)); aspect-ratio: 640 / 440;
  --hair: 1px; --bold: 2px;
}
#sales .s-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
#sales .s-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sales .s-c { stroke: rgba(243, 245, 248, .3); stroke-width: var(--hair); }
#sales .s-c2 { stroke: rgba(243, 245, 248, .2); stroke-width: var(--hair); stroke-dasharray: 2 7; }
#sales .s-best { stroke: var(--bulb); stroke-width: var(--bold); opacity: .92; }
#sales .s-trail { stroke: #fff; stroke-width: calc(var(--bold) * 1.9); opacity: 0; }
#sales .s-dimline, #sales .s-dimtick { stroke: rgba(243, 245, 248, .34); stroke-width: var(--hair); }
#sales .s-ring { fill: none; stroke: rgba(243, 245, 248, .55); stroke-width: var(--hair); }
#sales .s-dot { fill: var(--bulb); }
#sales .s-goal .s-dot { fill: var(--bulb); opacity: 0; }
#sales .s-ripple { fill: none; stroke: var(--bulb); stroke-width: var(--hair); opacity: 0; }
#sales .s-bulb-ring { fill: none; stroke: rgba(244, 247, 255, .5); stroke-width: var(--hair); }
#sales .s-bulb-dot { fill: #fff; }
#sales .s-bulb { opacity: 0; }
#sales .s-block-ring { fill: none; stroke: rgba(255, 74, 94, .5); stroke-width: var(--hair); }
#sales .s-block-dot { fill: var(--bulb-red); }

#sales .s-lb {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
#sales .s-lb-today { left: 10%; top: calc(44.55% + 20px); }
#sales .s-lb-goal  { left: 90%; top: calc(44.55% + 20px); }
#sales .s-lb-gap   { left: 50%; bottom: calc(3.6% + 10px); font-weight: 500; color: var(--soft); }

/* the math */
#sales .s-math { margin: clamp(30px, 5vw, 46px) 0 clamp(8px, 1.2vw, 14px); }
#sales .s-bar { display: grid; grid-template-columns: clamp(108px, 30%, 136px) minmax(0, 1fr); align-items: center; }
#sales .s-bl { font-size: 15px; font-weight: 500; color: var(--soft); letter-spacing: -0.005em; padding: 8px 0; }
#sales .s-track { position: relative; display: block; height: 28px; border-left: 1px solid var(--line); }
#sales .s-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--ink); opacity: .9; }
#sales .s-miss { position: absolute; top: 50%; height: 0; border-top: 1px dashed rgba(243, 245, 248, .38); }
#sales .s-leak { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--bulb-red); opacity: 0; }

/* the words */
#sales .s-p {
  font-weight: 400; letter-spacing: -0.012em; color: var(--ink);
  font-size: 17px; line-height: 1.68; max-width: 52ch;
}
#sales .s-p + .s-p, #sales .s-math + .s-p { margin-top: 1.5em; }
#sales .s-math + .s-p { margin-top: clamp(26px, 4vw, 40px); }

@media (min-width: 560px) and (max-width: 1079px) {
  #sales .s-p { font-size: 19px; line-height: 1.65; }
  #sales .s-lb { font-size: 16px; }
  #sales .s-fig { width: min(100%, 620px, calc(46svh * 640 / 440)); }
}

@media (min-width: 1080px) {
  #sales .s-wrap {
    grid-template-columns: minmax(0, min(46%, 540px)) minmax(0, 1fr);
    grid-template-areas: "head fig" "text fig";
    column-gap: clamp(48px, 7vw, 120px);
    row-gap: clamp(36px, 6svh, 64px);
    align-items: start;
  }
  #sales .s-figcol { align-self: stretch; }
  #sales .s-fig {
    position: sticky; width: 100%; max-width: min(760px, calc((100svh - 200px) * 640 / 440)); margin-left: auto;
    top: max(92px, calc((100svh - var(--figh, 460px)) / 2));
  }
  #sales .s-title { font-size: clamp(80px, 9.4vw, 150px); }
  #sales .s-sub { font-size: clamp(24px, 2.4vw, 38px); }
  #sales .s-p { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.6; }
  #sales .s-lb { font-size: 16px; }
  #sales .s-bl { font-size: 16px; }
}

/* the fixed nav has no backing: while this scene holds the screen a soft fade under it keeps text from running through the name and link */
#sales .s-fade {
  position: fixed; left: 0; right: 0; top: 0; height: 88px; z-index: 4; pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
  background: linear-gradient(180deg, rgba(1, 6, 19, .96) 0%, rgba(1, 6, 19, .88) 55%, rgba(1, 6, 19, 0) 100%);
}
#sales .s-fade.is-on { opacity: 1; }