/* The launch tour page (/tour): the launch video, open without a login, for the link in the owner's WhatsApp status and
   chats. A slim orange launch bar across the top, the video's own orange with its headline and live dot, and the video
   right under it. The site's colours as styles.css names them: words on the orange dark (--on-orange), orange words the
   deeper orange (--action). Every movement stops for a visitor who asks for reduced motion. */
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--text:#1d1d1f;--cream:#fff6f0;--orange:#fc8623;--orange-dark:#e5750f;--on-orange:#1d1d1f;--action:#c2410c;--slate:#374957;--line:#efe3d9;--green:#059669;
  --ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream)}
body{min-height:100vh;display:flex;flex-direction:column;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:hidden;overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The launch bar: "Our new website is live" as a slim bar across the top, so the page opens on the video (the owner,
   30 September 2026: "make this just a nav bar thing but smaller, im not liking it this big" and "i want people to land
   directly here not the big block"). Hotspot Distributors at the left, the headline in the middle with its words rising
   one after another and the live dot after LIVE, the Live now pill at the right. The bar is 56 pixels plus its 3-pixel
   rule; a narrower screen drops the pill (the headline's own dot says live), then the name. */
.launch{background:var(--orange);color:var(--on-orange);border-bottom:3px solid var(--on-orange);overflow-x:hidden;overflow-x:clip}
.launch-bar{max-width:1200px;height:56px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.launch-brand{justify-self:start;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.launch-title{font-size:24px;font-weight:900;letter-spacing:-.035em;line-height:1;text-transform:uppercase;white-space:nowrap}
.launch-title>span{display:inline-block;animation:rise .8s var(--ease) backwards}
.launch-title>span:nth-child(2){animation-delay:.08s} .launch-title>span:nth-child(3){animation-delay:.16s} .launch-title>span:nth-child(4){animation-delay:.24s}
.launch-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--on-orange)}
.launch-dot{display:inline-block;position:relative;width:.24em;height:.24em;margin-left:.08em;border-radius:50%;background:var(--on-orange)}
.launch-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--on-orange);animation:ping 1.6s ease-out 1s infinite}
.launch-live{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--text);color:var(--cream);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.launch-live i{position:relative;width:9px;height:9px;border-radius:50%;background:#34d399;display:block}
.launch-live i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #34d399;animation:ping 1.6s ease-out infinite}
@media (max-width:859px){.launch-bar{grid-template-columns:auto auto;justify-content:space-between}.launch-live{display:none}}
@media (max-width:599px){.launch-bar{grid-template-columns:auto;justify-content:center;padding:0 16px}.launch-brand{display:none}.launch-title{font-size:clamp(17px,5.6vw,24px)}}

.tour{flex:1;width:100%;max-width:600px;margin:0 auto;padding:28px 20px 34px;display:flex;flex-direction:column;gap:46px;overflow-x:hidden;overflow-x:clip}
h2{font-size:clamp(30px,8vw,44px);font-weight:880;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
h2 span{color:var(--action)}

/* The video on a warm glow, in a dark frame like a phone; the glow breathes past the frame, so .tour clips it at the page's sides.
   The first screen holds the video whole under the bar and its heading: the video is at most as tall as the screen less
   278 pixels (the bar and its rule 59, the space above the heading 28, the heading's two lines 92, the gaps 40, Tap play
   19, 20 to spare, and the frame's own 20 around the video); the frame is at most 400 pixels wide and never under 220. */
.watch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.screen{position:relative;width:min(100%,400px,max(220px,calc((100vh - 278px) * 9 / 16 + 20px)));width:min(100%,400px,max(220px,calc((100svh - 278px) * 9 / 16 + 20px)));
  padding:10px;border-radius:34px;background:var(--text);box-shadow:0 30px 70px -28px rgba(120,50,0,.6)}
.screen::before{content:"";position:absolute;inset:-56px -14px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(252,134,35,.55),rgba(252,134,35,0));animation:breathe 4s ease-in-out infinite}
.tour-video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:26px;background:var(--text)}
.watch-hint{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
/* Play me!: a bubble that pops out of the video's top corner where the video waits for a click (the owner, 30 September
   2026: "add a pop of just for the comupter which says play me!"). It pops in once the page has built and bobs gently;
   a click on it plays the video (tour.js), and once the video has played, however it started, it pops away for good
   (.tour-played). A phone starts the video by itself, so the bubble never shows there; a window too narrow for it to
   stick out keeps it inside the frame. */
.play-me{position:absolute;top:13%;right:-62px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:var(--text);color:var(--cream);
  font:inherit;font-size:17px;font-weight:850;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;box-shadow:0 14px 28px -12px rgba(0,0,0,.55);
  transform:rotate(-6deg);animation:play-me-pop .7s var(--ease) 1.4s backwards,play-me-bob 2.6s ease-in-out 2.1s infinite}
.play-me::before{content:"";position:absolute;left:20px;bottom:-6px;width:14px;height:14px;border-radius:3px;background:inherit;transform:rotate(45deg);z-index:-1}
.play-me svg{width:28px;height:28px;padding:7px;border-radius:50%;background:var(--orange);color:var(--on-orange);fill:currentColor}
.play-me:hover{background:#000}
.play-me:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.tour-played .play-me{visibility:hidden;pointer-events:none;animation:play-me-away .3s ease}
@media (max-width:559px){.play-me{right:10px}}

/* What is inside: six tiles, popping in */
.features{display:flex;flex-direction:column;gap:18px}
.features-title{text-align:center}
.feature-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-grid li{display:flex;flex-direction:column;gap:12px;padding:18px 16px;border-radius:22px;background:#fff;border:1.5px solid var(--line);font-size:17px;font-weight:820;letter-spacing:-.02em;line-height:1.15;
  box-shadow:0 18px 40px -28px rgba(150,70,10,.45);animation:pop .7s var(--ease) both}
.feature-grid li:nth-child(2){animation-delay:.06s} .feature-grid li:nth-child(3){animation-delay:.12s} .feature-grid li:nth-child(4){animation-delay:.18s}
.feature-grid li:nth-child(5){animation-delay:.24s} .feature-grid li:nth-child(6){animation-delay:.3s}
.feature-grid .f-deal{background:#fff0e3;border-color:#fed7b5}
.f-ic{width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
.f-ic svg,.rep-ic svg,.tour-login svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Ready to order. The Log in to order button beats like a heart, lub-dub and a rest, with a ring going out on the first
   beat (the owner, 30 September 2026: "make the log in to order button pulse like hear beat to grab attention"). It
   rests while the video plays (tour.js sets .tour-playing), so the beat never pulls the eye off the video, and beats
   again when the video is paused or ends; it rests under the pointer or the keyboard's focus, and for a visitor who asks
   for reduced motion. */
.start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.tour-login{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:62px;padding:0 36px;border-radius:999px;background:var(--orange);color:var(--on-orange);font-size:20px;font-weight:850;
  text-decoration:none;box-shadow:0 16px 32px -14px rgba(229,117,15,.85);animation:heartbeat 1.5s ease-in-out 1s infinite}
.tour-login::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:beat-ring 1.5s ease-out 1s infinite}
.tour-playing .tour-login,.tour-playing .tour-login::after,.tour-login:hover,.tour-login:hover::after,.tour-login:focus-visible,.tour-login:focus-visible::after{animation:none}
.tour-login:hover{background:var(--orange-dark)}
.rep{width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:22px;background:#fff;border:3px solid var(--orange);text-align:left;font-size:18px;line-height:1.25}
.rep-ic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
.tour-help{font-size:16px;color:var(--slate)}
.tour-help a{color:var(--action);font-weight:760}
.tour-login:focus-visible,.tour-help a:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.tour-foot{padding:18px 20px 26px;text-align:center;font-size:13px;color:var(--slate);border-top:1px solid var(--line)}

/* On a computer the video sits at the left and What's inside and Ready to order stand beside it at the right (the owner,
   30 September 2026: "how about we nudge this on the left side" and "on the right side, right next to the video"), so
   the first screen holds the video and the Log in to order button together. The right column is centred on the video's
   height: the empty rows above and below it share what is left. Its tiles lie flat (the icon beside the words) to fit.
   On a screen taller than all that, the two columns sit in the middle between the bar and the footer, the same room
   above as below (the owner: "can nudge everything down so it looks symmetrical from top and bottom"). A narrower
   screen keeps everything under the video, as before. */
@media (min-width:1040px){
  .tour{max-width:1100px;padding-bottom:28px;display:grid;grid-template-columns:460px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(40px,5vw,72px);row-gap:0;align-content:center}
  .watch{grid-column:1;grid-row:1/-1;align-self:center}
  .features,.start{grid-column:2;align-items:flex-start;text-align:left}
  .features{grid-row:2}
  .start{grid-row:3;margin-top:36px}
  .features-title,.start h2{font-size:34px;text-align:left}
  .feature-grid{width:100%;gap:10px}
  .feature-grid li{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;font-size:16px}
  .f-ic{flex:none;width:40px;height:40px}
  .f-ic svg{width:20px;height:20px}
  .rep{font-size:17px;padding:14px 18px}
}

@keyframes rise{from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0)}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ping{from{transform:scale(1);opacity:.85}to{transform:scale(3.2);opacity:0}}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes heartbeat{0%{transform:scale(1)}7%{transform:scale(1.08)}14%{transform:scale(1)}21%{transform:scale(1.06)}32%,100%{transform:scale(1)}}
@keyframes beat-ring{0%{box-shadow:0 0 0 0 rgba(252,134,35,.6)}40%,100%{box-shadow:0 0 0 16px rgba(252,134,35,0)}}
@keyframes play-me-pop{from{opacity:0;transform:rotate(-6deg) scale(.2)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes play-me-bob{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-5px)}}
@keyframes play-me-away{from{visibility:visible;opacity:1;transform:rotate(-6deg)}to{visibility:visible;opacity:0;transform:rotate(-6deg) scale(.4)}}
/* On a phone the page opens as the video itself, edge to edge (the owner: "if someone opens it on the phone immediatly it
   should open the video on fullscreen, but on a comupter it should open the normal webpage the way it is now"). The
   launch bar and the video's heading step aside for it; What's inside and Ready to order follow below it. The whole video shows (a tall phone would crop its sides, and the words near its edges), from
   the top, with the Tap for sound button in the dark band under it. This is laid out before any script runs, so the page never shows the computer layout first;
   tour.js starts the video and adds the Tap for sound button (.tour-sound). */
@media (max-width:699px) and (pointer:coarse){
  .launch,.watch h2,.watch-hint,.play-me{display:none}
  .tour{padding-top:0}
  .watch{margin:0 -20px;gap:0}
  .screen{width:100vw;height:100vh;height:100svh;padding:0;border-radius:0;box-shadow:none;background:var(--text)}
  .screen::before{display:none}
  .tour-video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:50% 0;border-radius:0}
}
.tour-sound{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px 0 20px;border:0;border-radius:999px;
  background:var(--cream);color:var(--text);font:inherit;font-size:17px;font-weight:850;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 34px -12px rgba(0,0,0,.65);cursor:pointer}
.tour-sound[hidden]{display:none}
.tour-sound svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tour-sound::after{content:"";position:absolute;inset:0;border-radius:inherit;border:3px solid var(--orange);animation:halo 1.8s ease-out infinite}
.tour-sound:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@keyframes halo{from{transform:scale(1);opacity:.9}to{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}