/* front-door.css: the tools marquee, the AI Makeovers rail and the free-audit close on
   sunnymfmoney.com. Loaded after sot-skin.css so it reads in the same brand.
   Rebuilt 2026-10-08 on Sunny's brief: marquee under the fold, the makeovers scroll right
   under it, book and 7-Day Install removed. */

/* HERO: the copy on the left, and on the right the centre photo from Sunny's AI Makeover
   episode with his own photos floating round it, the same composition as scaleontime.com */
.hero__copy{max-width:min(40rem,48vw)}
.hero__copy h1{font-size:clamp(2.4rem,1.2rem + 3.9vw,4.9rem);line-height:.98;max-width:none;letter-spacing:-.005em}
.hero__copy .kick{letter-spacing:.18em}
.hero__copy .stats{margin:var(--sc-6) 0 0}
.hero-stage{position:absolute;z-index:2;right:clamp(1rem,3vw,3rem);top:52%;translate:0 -50%;
  width:min(46vw,44rem);height:min(78vh,44rem);pointer-events:auto}
.hero-stage .mk-hero{width:clamp(14rem,19vw,19rem)}
.hero-stage .mk-a{left:0;top:0;width:clamp(9rem,11vw,11rem);aspect-ratio:3/4}
.hero-stage .mk-b{right:0;top:4%;width:clamp(11rem,15vw,15rem)}
.hero-stage .mk-c{right:0;bottom:24%;width:clamp(8rem,10vw,10rem);aspect-ratio:3/4}
.hero-stage .mk-d{left:6%;bottom:20%;width:clamp(8rem,10vw,10rem);aspect-ratio:3/4}
.hero-stage .mk-e{left:6%;bottom:-4%;width:clamp(7rem,8.5vw,8.5rem);aspect-ratio:1}
.hero-stage .mk-f{right:6%;top:auto;bottom:-2%;width:clamp(7rem,8vw,8rem);aspect-ratio:1;transform:rotate(3deg);z-index:4}

/* THE TOOLS MARQUEE, directly under the fold. Same mechanism as scaleontime.com: the track
   holds the list twice and travels exactly -50%, the only offset that loops without a jump.
   Pauses on hover and touch; under reduced motion it stops and wraps into rows. */
.tools-band{position:relative;z-index:1;padding:clamp(1.25rem,3vw,2.25rem) 0 clamp(1.75rem,4vw,3rem)}
.tools__label{margin:0 0 1rem;text-align:center}
.tools__window{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tools__track{display:flex;width:max-content;animation:tools-marquee 46s linear infinite}
.tools__window:hover .tools__track,.tools__window:active .tools__track{animation-play-state:paused}
.tools__item{display:inline-flex;align-items:center;gap:.65rem;padding:.6rem 0;margin-right:clamp(2.25rem,4vw,3.75rem);
  color:rgba(244,241,234,.78);font:600 15px/1 Inter,sans-serif;letter-spacing:.01em;white-space:nowrap}
.tools__item img{width:22px;height:22px;filter:invert(1) brightness(.95);opacity:.85}
@keyframes tools-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tools__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:.75rem;padding-inline:var(--sc-gutter)}
  .tools__track [aria-hidden="true"]{display:none}
}

/* THE AI MAKEOVERS RAIL. A pinned sideways pan, one scene per business, ported from the
   installs rail on scaleontime.com: story card on one side, the hero frame, floating cards. */
.mk-lead{width:min(24rem,80vw)}
.mk-scene{flex:0 0 auto;width:min(92vw,78rem);height:min(78vh,46rem);display:grid;
  grid-template-columns:minmax(16rem,22rem) 1fr;gap:clamp(1rem,3vw,3rem);align-items:center}
.mk-story{padding:clamp(1.1rem,2vw,1.6rem)}
.mk-meta{margin:0 0 .6rem;font:500 10px/1.3 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mk-story h3{margin:0;font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);line-height:1.05}
.mk-brand{margin:.3rem 0 .9rem;color:var(--muted);font-size:.85rem}
.mk-story p:not(.mk-meta):not(.mk-brand){margin:0 0 .75rem;color:rgba(244,241,234,.74);font-size:.95rem;line-height:1.55}
.mk-built b{color:var(--text)}
.mk-stage{position:relative;height:100%}
.mk-card{position:absolute;margin:0;border-radius:10px;overflow:hidden;background:#0d0d0e;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform 380ms var(--ease)}
.mk-card img{width:100%;height:100%;object-fit:cover;display:block}
.mk-card figcaption{position:absolute;left:10px;bottom:8px;font:600 9.5px/1 Inter,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,241,234,.9);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.mk-card:hover{transform:translateY(-6px) rotate(0deg)!important}
.mk-hero{left:50%;top:50%;width:clamp(15rem,24vw,22rem);aspect-ratio:3/4;transform:translate(-50%,-50%);z-index:3;
  box-shadow:0 44px 100px rgba(0,0,0,.8),0 0 0 1px rgba(249,115,22,.5),0 0 46px rgba(249,115,22,.2)}
.mk-hero:hover{transform:translate(-50%,calc(-50% - 6px))!important}
.mk-a{left:4%;top:4%;width:clamp(8rem,11vw,10rem);aspect-ratio:3/4;transform:rotate(-3deg);z-index:2}
.mk-b{right:0;top:12%;width:clamp(12rem,17vw,16rem);aspect-ratio:16/10;transform:rotate(2deg);z-index:2}
.mk-c{right:6%;bottom:6%;width:clamp(8rem,10vw,9.5rem);aspect-ratio:1;transform:rotate(3deg);z-index:2}
.mk-d{left:2%;bottom:8%;width:clamp(8rem,10.5vw,10rem);aspect-ratio:3/4;transform:rotate(-2deg);z-index:2}
.mk-e{left:38%;bottom:-2%;width:clamp(7rem,8vw,8rem);aspect-ratio:1;transform:rotate(-4deg);z-index:4}
.mk-f{right:28%;top:0;width:clamp(7rem,8vw,8rem);aspect-ratio:1;transform:rotate(2deg);z-index:1}
.mk-w{aspect-ratio:16/10}
.mk-out{list-style:none;margin:.2rem 0 .9rem;padding:0;display:grid;gap:.35rem}
.mk-out li{font:600 .9rem/1.35 Inter,sans-serif;color:var(--accent)}
.mk-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 0!important}
.mk-end{display:grid;gap:1.25rem;justify-items:start}
.mk-end p{font-size:clamp(1.4rem,1rem + 1.2vw,2rem)!important;font-family:var(--display);font-weight:700;color:var(--text)}

@media (max-width:860px){
  .mk-scene{width:88vw;height:auto;grid-template-columns:1fr;gap:1rem}
  .mk-stage{height:52svh}
  .mk-story{order:2}
  .mk-a,.mk-d{display:none}
  .mk-hero{width:min(58vw,15rem)}
  .mk-b{width:40vw;top:4%}
  .mk-c{width:26vw}
  .mk-e{width:24vw;left:4%;bottom:4%}
}

/* THE CLOSE: one ask, the free audit, with the paid plan stated plainly */
.close__inner{padding-top:clamp(5rem,9vh,7rem)}
.close__lede{max-width:44ch;margin:0 auto;color:rgba(244,241,234,.74);line-height:1.55;text-align:center}
.foot small a{color:inherit}

/* NAV: three links and the button. On a phone Recognition drops so the button stays on screen */
.pill a,.hero__links a{white-space:nowrap}
@media (max-width:520px){
  .pill a[href="#recognition"]{display:none}
  .pill a{letter-spacing:.1em;padding:10px 8px}
}

/* The close scrolls rather than pins: pinned at one viewport, the CTA pushed the YouTube
   line and the footer below the fold where nothing could reach them. */
#watch .close{height:auto;min-height:100svh;padding-bottom:1rem}

/* The makeovers rail is about 10,000px wide. As one will-change layer, Chrome stops
   rasterising its far end, so later scenes (Pao, Celine) painted blank. Let each scene
   be its own paint area instead. */
.mk-rail{will-change:auto}
.mk-scene{contain:layout}


/* PHONE (iPhone 15 Pro is 393 wide). Rebuilt 2026-10-08 after Sunny checked it on his phone:
   the hero photos sat on top of the headline and the rail cards spilled into each other.
   Hero: photos in the top band, copy in the bottom band, never overlapping.
   Rail: one scene per screen, three photos, a compact story card under them. */
@media (max-width:860px){
  .hero-stage{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 4.5rem);translate:none;
    width:100%;height:36svh;z-index:2}
  .hero-stage .mk-hero{width:min(38vw,10.5rem)}
  .hero-stage .mk-a{left:5%;top:6%;width:min(25vw,6.6rem);aspect-ratio:3/4}
  .hero-stage .mk-c{right:5%;top:4%;bottom:auto;width:min(25vw,6.6rem);aspect-ratio:3/4}
  .hero-stage .mk-e{left:9%;bottom:0;top:auto;width:min(21vw,5.6rem);aspect-ratio:1}
  .hero-stage .mk-f{right:9%;bottom:0;top:auto;width:min(21vw,5.6rem);aspect-ratio:1}
  .hero-stage .mk-b,.hero-stage .mk-d{display:none}
  .hero-stage figcaption{display:none}
  .hero__copy{max-width:none;bottom:clamp(1.25rem,4svh,2.5rem)}
  .hero__copy .kick{font-size:10px;letter-spacing:.14em;margin-bottom:.7rem;justify-content:center}
  .hero__copy h1{font-size:clamp(2.05rem,9.4vw,2.6rem);max-width:none;line-height:1.02}
  .hero__sub{font-size:.98rem;margin-top:.8rem;max-width:30ch}
  .hero__cta{margin:1.1rem 0 0;gap:.4rem;flex-direction:column}
  .hero__cta .btn--lg{padding:15px 26px}
  .hero__copy .stats{display:none}
  .hero__scrim{height:60%}

  .mk-rail{gap:6vw}
  .mk-scene{width:calc(100vw - 2 * var(--sc-gutter));height:auto;grid-template-columns:1fr;gap:.9rem;align-content:center}
  .mk-stage{height:min(40svh,22rem);order:1}
  .mk-story{order:2;padding:1rem 1.1rem}
  .mk-scene .mk-a,.mk-scene .mk-d,.mk-scene .mk-e,.mk-scene .mk-f{display:none}
  .mk-scene .mk-hero{width:min(46vw,12.5rem)}
  .mk-scene .mk-b{right:0;top:2%;width:min(34vw,9.5rem);aspect-ratio:4/3}
  .mk-scene .mk-c{left:0;right:auto;bottom:4%;width:min(28vw,7.5rem)}
  .mk-scene figcaption{font-size:8.5px}
  .mk-meta{display:none}
  .mk-story h3{font-size:1.3rem}
  .mk-brand{margin:.15rem 0 .55rem;font-size:.8rem}
  .mk-story p:not(.mk-meta):not(.mk-brand){font-size:.86rem;line-height:1.45;margin-bottom:.5rem;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .mk-story .mk-built{-webkit-line-clamp:2!important}
  .mk-out{margin:.1rem 0 .5rem}.mk-out li{font-size:.8rem}
  .mk-links .chip{padding:6px 10px}
  .mk-lead{width:calc(100vw - 2 * var(--sc-gutter))}
  .mk-end{width:calc(100vw - 2 * var(--sc-gutter))}
}
@media (max-width:860px) and (max-height:700px){
  .hero-stage{height:30svh;top:calc(env(safe-area-inset-top,0px) + 4rem)}
  .hero__sub{display:none}
  .mk-stage{height:34svh}
}

/* RECOGNITION ON A PHONE: the proof first (Iman Gadzhi's leaderboard), then a headline that
   fits in three lines instead of filling the screen. */
@media (max-width:860px){
  #recognition .rec__head{display:flex;flex-direction:column;gap:1.1rem}
  #recognition .rec__photo{order:-1;width:100%;margin:0}
  #recognition .rec__photo figcaption{font-size:.74rem;margin-top:.5rem}
  #recognition h2{font-size:clamp(1.85rem,8.2vw,2.3rem);line-height:1.05;margin-top:.6rem}
  #recognition .lede{font-size:.95rem;line-height:1.5;margin-top:.8rem}
  #recognition .rec__cols{margin-top:1.4rem;gap:1.2rem}
}

/* HERO, SIMPLIFIED (Sunny 2026-10-08): "one picture with smaller pictures (very small)
   surrounding it, a maximum of four", headline at the top. Overrides the earlier stage. */
.hero-stage{width:min(40vw,36rem);height:min(70vh,40rem)}
.hero-stage .mk-hero{width:clamp(15rem,21vw,21rem)}
.hero-stage .mk-card:not(.mk-hero){width:clamp(4.6rem,5.6vw,5.8rem);aspect-ratio:1;z-index:4}
.hero-stage .mk-card:not(.mk-hero) figcaption{display:none}
.hero-stage .mk-a{left:6%;right:auto;top:14%;bottom:auto;transform:rotate(-4deg)}
.hero-stage .mk-c{right:4%;left:auto;top:38%;bottom:auto;transform:rotate(3deg)}
.hero-stage .mk-f{left:12%;right:auto;bottom:12%;top:auto;transform:rotate(2deg)}

@media (max-width:860px){
  .hero__copy{top:calc(env(safe-area-inset-top,0px) + 4.6rem);bottom:auto}
  .hero__copy .kick{margin-bottom:.6rem}
  .hero-stage{top:auto;bottom:clamp(.75rem,3svh,2rem);height:34svh;width:100%}
  .hero-stage .mk-hero{width:min(36vw,9.5rem)}
  .hero-stage .mk-card:not(.mk-hero){width:min(15vw,3.9rem);display:block}
  .hero-stage .mk-a{left:16%;top:10%}
  .hero-stage .mk-c{right:16%;top:30%}
  .hero-stage .mk-f{left:20%;bottom:6%}
  .hero__scrim{display:none}
}
@media (max-width:860px) and (max-height:700px){
  .hero-stage{height:28svh;top:auto;bottom:.75rem}
  .hero__sub{display:none}
}