.elementor-3360 .elementor-element.elementor-element-5a77046e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--overflow:hidden;--overlay-opacity:0.5;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-5a77046e:not(.elementor-motion-effects-element-type-background), .elementor-3360 .elementor-element.elementor-element-5a77046e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b590461 );}.elementor-3360 .elementor-element.elementor-element-5a77046e::before, .elementor-3360 .elementor-element.elementor-element-5a77046e > .elementor-background-video-container::before, .elementor-3360 .elementor-element.elementor-element-5a77046e > .e-con-inner > .elementor-background-video-container::before, .elementor-3360 .elementor-element.elementor-element-5a77046e > .elementor-background-slideshow::before, .elementor-3360 .elementor-element.elementor-element-5a77046e > .e-con-inner > .elementor-background-slideshow::before, .elementor-3360 .elementor-element.elementor-element-5a77046e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3360 .elementor-element.elementor-element-3ccf0386{--display:flex;}.elementor-3360 .elementor-element.elementor-element-5072ef9{--display:flex;}.elementor-3360 .elementor-element.elementor-element-74f6491 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-3360 .elementor-element.elementor-element-74f6491{text-align:center;}.elementor-3360 .elementor-element.elementor-element-74f6491 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:14px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.6em;letter-spacing:0.01em;color:#20212485;}.elementor-3360 .elementor-element.elementor-element-da84056{--e-image-carousel-slides-to-show:10;}.elementor-3360 .elementor-element.elementor-element-da84056 > .elementor-widget-container{margin:0% 0% 0% 0%;padding:0% 0% 0% 0%;}.elementor-3360 .elementor-element.elementor-element-3a8daef7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--overflow:hidden;--overlay-opacity:0;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-3a8daef7::before, .elementor-3360 .elementor-element.elementor-element-3a8daef7 > .elementor-background-video-container::before, .elementor-3360 .elementor-element.elementor-element-3a8daef7 > .e-con-inner > .elementor-background-video-container::before, .elementor-3360 .elementor-element.elementor-element-3a8daef7 > .elementor-background-slideshow::before, .elementor-3360 .elementor-element.elementor-element-3a8daef7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3360 .elementor-element.elementor-element-3a8daef7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3360 .elementor-element.elementor-element-50dd887c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-5f53f3b5{--display:flex;--justify-content:flex-start;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-5f53f3b5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb{width:var( --container-widget-width, 85% );max-width:85%;--container-widget-width:85%;--container-widget-flex-grow:0;text-align:start;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:50px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;text-shadow:0px 0px 5px rgba(0,0,0,0.3);color:var( --e-global-color-text );}.elementor-3360 .elementor-element.elementor-element-6ea58448{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-1df94770{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}body.elementor-page-3360:not(.elementor-motion-effects-element-type-background), body.elementor-page-3360 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7ECFE;background-image:url("https://website.suitesflow.realestate/wp-content/uploads/2025/05/kc5iCPmYDq-150x150.jpg");background-repeat:repeat;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-3360 .elementor-element.elementor-element-5a77046e{--padding-top:70px;--padding-bottom:70px;--padding-left:30px;--padding-right:30px;}.elementor-3360 .elementor-element.elementor-element-74f6491 .elementor-heading-title{font-size:15px;}.elementor-3360 .elementor-element.elementor-element-da84056{--e-image-carousel-slides-to-show:8;}.elementor-3360 .elementor-element.elementor-element-3a8daef7{--padding-top:70px;--padding-bottom:70px;--padding-left:30px;--padding-right:30px;}.elementor-3360 .elementor-element.elementor-element-50dd887c{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3360 .elementor-element.elementor-element-5f53f3b5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb{--container-widget-width:75%;--container-widget-flex-grow:0;width:var( --container-widget-width, 75% );max-width:75%;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb .elementor-heading-title{font-size:36px;}.elementor-3360 .elementor-element.elementor-element-6ea58448{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-1df94770{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-3360 .elementor-element.elementor-element-5a77046e{--content-width:1350px;}.elementor-3360 .elementor-element.elementor-element-3a8daef7{--content-width:1350px;}}@media(max-width:767px){.elementor-3360 .elementor-element.elementor-element-5a77046e{--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:70px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-3360 .elementor-element.elementor-element-74f6491 .elementor-heading-title{font-size:15px;}.elementor-3360 .elementor-element.elementor-element-da84056{--e-image-carousel-slides-to-show:3;}.elementor-3360 .elementor-element.elementor-element-3a8daef7{--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-3360 .elementor-element.elementor-element-5f53f3b5{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-3360 .elementor-element.elementor-element-1a82e5cb .elementor-heading-title{font-size:30px;}.elementor-3360 .elementor-element.elementor-element-1df94770{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-ce75fb5 */<style>
  #kickoffDisplay ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 10px;
    line-height: 1.6;
  }

  #kickoffDisplay li {
    margin-bottom: 6px;
  }
</style>/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-da84056 */.elementor-3360 .elementor-element.elementor-element-da84056 .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}/* End custom CSS */
/* Start custom CSS */<script>
  (function() {
    const root = document.getElementById('sf-calc-embed');
    if (!root) return;

    // Inputs
    const unitsEl = root.querySelector('#sf-units');
    const navEl = root.querySelector('#sf-nav');
    const typeEls = root.querySelectorAll('input[name="sf-type"]');

    // Outputs
    const setupEl = root.querySelector('#sf-setup');
    const perEl = root.querySelector('#sf-perunit');
    const monEl = root.querySelector('#sf-monthly');
    const featEl = root.querySelector('#sf-features');

    // Chart
    const canvas = root.querySelector('#sf-decayChart');
    const ctx = canvas.getContext('2d');

    // --- Pricing rules --- 
    // NOW depends on Classic vs Signature
    function tier(units, type) {
      if (type === 'Signature') {
        // Signature tiers
        if (units <= 200) return { segment: 1, setup: 25000, per: 22.00 };
        if (units <= 500) return { segment: 2, setup: 35000, per: 21.00 };
        return { segment: 3, setup: 50000, per: 20.00 };
      } else {
        // Classic tiers (default)
        if (units <= 200) return { segment: 1, setup: 10000, per: 6.00 };
        if (units <= 500) return { segment: 2, setup: 15000, per: 5.50 };
        return { segment: 3, setup: 25000, per: 5.00 };
      }
    }

    function navSetupDelta(segment, navMode) {
      if (navMode === 'overview') {
        if (segment === 1) return 5000;
        if (segment === 2) return 7500;
        return 10000;
      }
      return 0;
    }

    const baseFeatures = [
      "Plan-built tours (not filmed) for all units in scope",
      "Remote Touring (FaceTime-like guidance)",
      "Snapshots & video recording inside the tour",
      "In-tour questions → instant lead to your team",
      "Per-unit floorplans & building overview",
      "Verified window-view accuracy",
      "Embeds, standard CRM sync & analytics",
      "Transferable with the building"
    ];

    function realSchedule(basePer) {
      const schedule = [];
      const startDecayYear = 3;
      const endDecayYear = 10;
      const longTermPrice = 2.00;

      for (let i = 0; i < startDecayYear; i++) {
        schedule.push(basePer);
      }

      for (let i = startDecayYear; i < endDecayYear; i++) {
        const year = i + 1;
        const decaySteps = endDecayYear - startDecayYear;
        const progress = (year - startDecayYear) / decaySteps;
        const decayedPrice = basePer - (progress * (basePer - longTermPrice));
        schedule.push(decayedPrice);
      }

      return schedule;
    }

    const usd = n => n.toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 2
    });

    function drawChart(realArr) {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = canvas.clientWidth * dpr;
      canvas.height = canvas.clientHeight * dpr;
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.scale(dpr, dpr);

      const w = canvas.clientWidth,
            h = canvas.clientHeight;
      if (!w || !h) return;

      const left = 48,
            right = 16,
            top = 18,
            bottom = 32;
      const innerW = w - left - right,
            innerH = h - top - bottom;

      ctx.clearRect(0, 0, w, h);
      ctx.font = '12px system-ui,-apple-system,Segoe UI,Roboto,Arial';

      const years = Array.from({ length: 10 }, (_, i) => i + 1);
      const maxVal = Math.max(...realArr) * 1.08;
      const minVal = Math.min(...realArr) * 0.92;

      const yTo = v => top + innerH - ((v - minVal) / (maxVal - minVal)) * innerH;
      const xTo = i => left + (i / (years.length - 1)) * innerW;

      // grid + y labels
      ctx.strokeStyle = '#ececec';
      ctx.lineWidth = 1;
      for (let i = 0; i <= 5; i++) {
        const y = top + (i / 5) * innerH;
        ctx.beginPath();
        ctx.moveTo(left, y);
        ctx.lineTo(w - right, y);
        ctx.stroke();
        const val = minVal + (1 - i / 5) * (maxVal - minVal);
        ctx.fillStyle = '#6b6b6b';
        ctx.fillText(val.toFixed(2), 6, y + 4);
      }

      // x labels
      years.forEach((yr, i) => {
        const label = (yr === 1 || yr === 4 || yr === 10) ? `Y${yr}` : '';
        if (label) {
          ctx.fillStyle = '#6b6b6b';
          ctx.fillText(label, xTo(i) - 10, h - 8);
        }
      });

      // line
      ctx.strokeStyle = '#C28A3F';
      ctx.lineWidth = 2;
      ctx.beginPath();
      realArr.forEach((v, i) => {
        const x = xTo(i),
              y = yTo(v);
        i ? ctx.lineTo(x, y) : ctx.moveTo(x, y);
      });
      ctx.stroke();
      ctx.fillStyle = '#C28A3F';
      realArr.forEach((v, i) => {
        const x = xTo(i),
              y = yTo(v);
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI * 2);
        ctx.fill();
      });

      // key annotations
      [['Y1', 0], ['Y4', 3], ['Y10', 9]].forEach(([lbl, i]) => {
        const x = xTo(i),
              y = yTo(realArr[i]);
        const txt = `${lbl}: ${usd(realArr[i])}`;
        ctx.fillStyle = '#1d1d1f';
        ctx.fillText(txt, Math.min(x + 8, w - 140), y - 6);
      });
    }

    function activeType() {
      let v = 'Classic';
      typeEls.forEach(el => {
        if (el.checked) v = el.value;
      });
      return v;
    }

    function render() {
      const units = Math.max(1, parseInt(unitsEl.value || '1', 10));
      const nav = navEl.value;
      const type = activeType();                 // <-- use selected type
      const t = tier(units, type);               // <-- pass type into tier()

      let setup = t.setup + navSetupDelta(t.segment, nav);
      const per = t.per;
      const monthly = units * per;

      setupEl.textContent = usd(setup);
      perEl.textContent = usd(per);
      monEl.textContent = usd(monthly);

      // features
      const list = [...baseFeatures];
      if (nav === 'grid') {
        list.unshift("Navigator: Grid (beta) — tour previews grid (no setup fee during beta)");
      } else if (nav === 'overview') {
        const add = navSetupDelta(t.segment, 'overview');
        list.unshift(`Navigator: 3D Overview — interactive building navigation (+${usd(add)} setup)`);
      } else {
        list.unshift("Navigator: not included (you can add it later anytime)");
      }
      featEl.innerHTML = '';
      list.forEach(txt => {
        const li = document.createElement('li');
        li.textContent = txt;
        featEl.appendChild(li);
      });

      // chart
      const real = realSchedule(per);
      requestAnimationFrame(() => drawChart(real));
    }

    // Bind + initial render
    ['input', 'change', 'keyup'].forEach(evt => root.addEventListener(evt, render, true));
    window.addEventListener('resize', render);
    if (window.ResizeObserver) {
      const ro = new ResizeObserver(() => requestAnimationFrame(render));
      ro.observe(root);
    }
    requestAnimationFrame(render);
  })();
</script>/* End custom CSS */