/* KeenAi Demo Home tour, the hero of /keenai-one/ (#demo-home).
   One screen tall, and the page scroll never drives it (John, 2026-10-21): the story plays on a clock
   from the Start button and the controls, and the stop cards are stacked, one shown at a time.
   Everything is scoped under .kh-tour and prefixed .keenai-landing where the site's own
   .keenai-landing h2/h3/p/figure/button rules would otherwise win. */

.kh-tour{
  --ink:#071618; --panel:rgba(7,22,24,.82); --line:rgba(94,234,212,.22);
  --teal:#5EEAD4; --text:#E9F4F2; --dim:#A9C9C4; --warm:#F5C98E; --alert:#F87171; --amber:#FBBF24;
  --display:var(--kb-display,'Lexend',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  --body:var(--kb-text,'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  --pad:clamp(20px,2.6vw,40px);
  --bar:0px;                                   /* the site's fixed mobile Call/Book bar, set below 782px */
  --vh:100vh; --vh:100svh;
  position:relative;height:var(--kh-h,calc(var(--vh) - 64px));min-height:460px;margin:0;overflow:hidden;
  background:linear-gradient(180deg,#06131a 0%,#0c2429 55%,#123331 100%);
  color:var(--text);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;color-scheme:dark;
}

/* ---- the stage: 3D, labels, hotspots, phone, controls ---- */
.kh-tour .kh-pin{position:absolute;inset:0;z-index:0}
.kh-tour .kh-stage{position:absolute;inset:0}
.kh-tour .kh-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.kh-tour.ready .kh-canvas{opacity:1}
.kh-tour .kh-loading{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:opacity .5s}
.kh-tour .kh-loading::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);animation:kh-pulse 1.2s ease-in-out infinite}
.kh-tour.ready .kh-loading,.kh-tour.no3d .kh-loading{opacity:0;visibility:hidden}
.kh-tour.no3d .kh-stage::after{content:"The 3D view needs WebGL. The story and the real app screens below still work.";position:absolute;
  left:50%;top:40%;transform:translate(-50%,-50%);max-width:300px;text-align:center;color:var(--dim)}
@keyframes kh-pulse{50%{opacity:.25;transform:scale(.7)}}

.kh-tour .kh-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kh-tour .tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 11px 5px 9px;border-radius:999px;background:rgba(6,20,22,.84);border:1px solid var(--line);
  font:600 12.5px/1.2 var(--body);color:var(--text);letter-spacing:.01em;opacity:0;will-change:transform,opacity;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.kh-tour .tag i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px currentColor;color:var(--teal);flex:none}
.kh-tour .tag.warn i{background:var(--amber);color:var(--amber)} .kh-tour .tag.bad i{background:var(--alert);color:var(--alert)}
.kh-tour .tag.bad{border-color:rgba(248,113,113,.5)}

.kh-tour .kh-hot{position:absolute;inset:0;z-index:2;pointer-events:none}
.keenai-landing .kh-tour .hot{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px 8px 10px;border-radius:999px;
  font:600 13.5px/1 var(--body);color:var(--ink);background:var(--teal);border:0;cursor:pointer;opacity:0;visibility:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 6px rgba(94,234,212,.18);transition:opacity .25s,visibility .25s;text-transform:none;letter-spacing:0}
.keenai-landing .kh-tour .hot:hover,.keenai-landing .kh-tour .hot:focus{color:var(--ink);background:var(--teal)}
.kh-tour .hot.on{opacity:1;visibility:visible;pointer-events:auto}
.kh-tour .hot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.kh-tour .hot:focus-visible{outline:2px solid var(--warm);outline-offset:3px}

.kh-tour .kh-phone{position:absolute;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);width:clamp(200px,18vw,260px);margin:0;
  transition:opacity .4s ease,visibility .4s}
.kh-tour.exploring .kh-phone{opacity:0;visibility:hidden}
.kh-tour .kh-frame{padding:9px;border-radius:44px;background:#0a0e0f;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(0,0,0,.6)}
.kh-tour .kh-screen{position:relative;aspect-ratio:390/844;border-radius:35px;overflow:hidden;background:#071a1c}
.keenai-landing .kh-tour .kh-screen img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:0;box-shadow:none;opacity:0;transition:opacity .35s ease}
.keenai-landing .kh-tour .kh-screen img.on{opacity:1}
.kh-tour .kh-phone-cap{margin-top:12px;text-align:center;font:600 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.kh-tour .kh-bar{position:absolute;z-index:3;left:var(--pad);bottom:22px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;max-width:calc(100% - 2 * var(--pad) - 300px)}
.kh-tour .kh-rail{display:flex;gap:6px;flex-wrap:wrap}
.kh-tour .kh-ctrl{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(6,20,22,.78);border:1px solid rgba(255,255,255,.1)}
.keenai-landing .kh-tour .kh-ctrl button{display:grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border-radius:50%;border:0;
  background:transparent;color:var(--text);cursor:pointer;transition:background .2s,opacity .2s}
.keenai-landing .kh-tour .kh-ctrl button:hover,.keenai-landing .kh-tour .kh-ctrl button:focus{background:rgba(255,255,255,.1);color:var(--text)}
.keenai-landing .kh-tour .kh-ctrl button:disabled{opacity:.35;cursor:default;background:transparent}
.keenai-landing .kh-tour .kh-ctrl .kh-play{background:var(--teal);color:var(--ink)}
.keenai-landing .kh-tour .kh-ctrl .kh-play:hover,.keenai-landing .kh-tour .kh-ctrl .kh-play:focus{background:#99F6E4;color:var(--ink)}
.kh-tour .kh-play .i-pause,.kh-tour .kh-play.is-playing .i-play{display:none}
.kh-tour .kh-play.is-playing .i-pause{display:block}
.kh-tour .kh-count{min-width:84px;padding:0 10px 0 6px;font:600 12.5px/1 var(--body);letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.kh-tour .kh-ctrl button:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.keenai-landing .kh-tour .kh-rail button{font:600 12.5px/1 var(--body);color:var(--dim);background:rgba(6,20,22,.66);border:1px solid rgba(255,255,255,.08);
  margin:0;padding:8px 12px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;text-transform:none;letter-spacing:0}
.keenai-landing .kh-tour .kh-rail button:hover,.keenai-landing .kh-tour .kh-rail button:focus{color:var(--text);background:rgba(6,20,22,.8);border-color:rgba(255,255,255,.2)}
.keenai-landing .kh-tour .kh-rail button[aria-current="step"]{color:var(--ink);background:var(--teal);border-color:var(--teal)}
.keenai-landing .kh-tour .kh-rail button.skip{color:var(--warm);border-color:rgba(245,201,142,.35)}
.kh-tour .kh-rail button:focus-visible,.kh-tour .kh-cta a:focus-visible{outline:2px solid var(--warm);outline-offset:3px}

/* ---- the story: real page text, one stop shown at a time over the stage ---- */
.kh-tour .kh-stops{position:absolute;inset:0;z-index:1;margin:0;padding:0;pointer-events:none}
.kh-tour .kh-stop{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.kh-tour .kh-stop.on{opacity:1;visibility:visible}
.kh-tour .kh-card{pointer-events:auto;position:absolute;left:var(--pad);top:clamp(24px,9%,84px);max-width:410px;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px 24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;gap:10px;box-sizing:border-box}
.kh-tour .kh-stop:last-child .kh-card{top:auto;bottom:84px}
.keenai-landing .kh-tour .kh-eyebrow{font:600 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--teal);margin:0}
.kh-tour .kh-eyebrow em{font-style:normal;color:var(--warm)}
.keenai-landing .kh-tour h2,.keenai-landing .kh-tour h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;text-wrap:balance;margin:0;color:var(--text);padding:0;border:0}
.keenai-landing .kh-tour h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08}
.keenai-landing .kh-tour h3{font-size:clamp(22px,2.1vw,28px);line-height:1.15}
.keenai-landing .kh-tour .kh-card p{margin:0;color:var(--dim);font-size:16.5px;line-height:1.55;max-width:none}
.keenai-landing .kh-tour .kh-card p strong{color:var(--text);font-weight:600}
.keenai-landing .kh-tour .kh-card a:not(.kh-btn){color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.keenai-landing .kh-tour .kh-said{font:500 17px/1.4 var(--display);color:var(--text);padding-left:12px;border-left:2px solid var(--teal);quotes:none}
.keenai-landing .kh-tour .kh-hint{font:400 14px/1.4 var(--body);color:#8FB0AB}
.kh-tour .kh-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.keenai-landing .kh-tour .kh-cta .kh-btn{font:600 15px/1 var(--body);text-decoration:none;padding:14px 18px;border-radius:12px;margin:0;cursor:pointer;text-transform:none;letter-spacing:0}
.keenai-landing .kh-tour .kh-cta .primary{background:var(--teal);color:var(--ink);border:0}
.keenai-landing .kh-tour .kh-cta .ghost,.keenai-landing .kh-tour .kh-cta .ghost:hover,.keenai-landing .kh-tour .kh-cta .ghost:focus{color:var(--text);border:1px solid var(--line);background:transparent}
.kh-tour .kh-cta button:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.keenai-landing .kh-tour .kh-fine{font-size:13px;color:#8FB0AB}

/* ---- the welcome card carries the page's H1, Start and the first call to action ---- */
.keenai-landing .kh-tour h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.3vw,60px);line-height:1.04;letter-spacing:-.025em;
  text-wrap:balance;margin:0;padding:0;border:0;color:var(--text)}
.kh-tour .kh-stop:first-child .kh-card{max-width:540px;padding:30px 32px 28px;gap:14px}
.keenai-landing .kh-tour .kh-stop:first-child .kh-card p{font-size:17.5px}
.keenai-landing .kh-tour .kh-stop:first-child .kh-card .kh-hint{font-size:14px}
.kh-tour .kh-start{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:6px}
.keenai-landing .kh-tour .kh-go{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--body);margin:0;padding:15px 22px;border:0;border-radius:12px;
  background:var(--teal);color:var(--ink);cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:0 0 0 6px rgba(94,234,212,.16)}
.keenai-landing .kh-tour .kh-go:hover,.keenai-landing .kh-tour .kh-go:focus{background:#99F6E4;color:var(--ink)}
.keenai-landing .kh-tour .kh-book{font:600 15px/1 var(--body);text-decoration:none;padding:14px 18px;border-radius:12px;color:var(--text);border:1px solid var(--line)}
.keenai-landing .kh-tour .kh-book:hover{color:var(--text);border-color:var(--teal)}
.kh-tour .kh-go:focus-visible,.kh-tour .kh-book:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.keenai-landing .kh-tour .kh-go.kh-go-stage{display:none}   /* phones only: Start on the 3D band, visible at load. Needs
   .kh-go's own specificity, or .kh-go's display:inline-flex wins and it shows everywhere (2026-10-22). */

/* phones: phone mock top-right, story card along the bottom, above the site's Call/Book bar */
@media (max-width:781px){
  .kh-tour{--bar:52px}
}
@media (max-width:760px){
  /* Phones stack instead of overlay (John, 2026-10-22: the card covered the house). The 3D band, with the
     app phone and the controls on it, comes first; the story card sits below it. Every stop shares one grid
     cell, so the card area is always as tall as the tallest stop and nothing below jumps as stops change. */
  .kh-tour{--pad:16px;height:auto;min-height:0;display:flex;flex-direction:column}
  .kh-tour .kh-pin{position:relative;inset:auto;height:clamp(260px,40svh,420px);flex:none}
  .kh-tour .kh-stops{position:relative;inset:auto;display:grid;padding:14px 16px 20px;pointer-events:auto}
  .kh-tour .kh-stop{position:relative;inset:auto;grid-area:1/1}
  .kh-tour .kh-card,.kh-tour .kh-stop:first-child .kh-card,.kh-tour .kh-stop:last-child .kh-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    max-width:none;padding:16px 18px 18px;gap:8px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,22,24,.6)}
  .kh-tour .kh-phone{top:12px;right:12px;transform:none;width:min(30vw,124px)}
  .kh-tour .tag{font-size:11.5px;padding:4px 9px 4px 8px}
  .keenai-landing .kh-tour .hot{font-size:12.5px;padding:7px 12px 7px 9px}
  .kh-tour .kh-frame{padding:4px;border-radius:21px}.kh-tour .kh-screen{border-radius:17px}
  .kh-tour .kh-phone-cap,.kh-tour .kh-rail{display:none}
  .kh-tour .kh-bar{left:12px;top:auto;bottom:12px;max-width:none}
  .keenai-landing .kh-tour .kh-card p,.keenai-landing .kh-tour .kh-said{font-size:15.5px}
  .keenai-landing .kh-tour h1{font-size:31px}
  .kh-tour .kh-stop:first-child .kh-card{padding:18px;gap:10px}
  .keenai-landing .kh-tour .kh-stop:first-child .kh-card p{font-size:15.5px}
  .keenai-landing .kh-tour .kh-go{padding:13px 18px}
  .keenai-landing .kh-tour .kh-book{padding:12px 14px}
  .keenai-landing .kh-tour h2{font-size:26px}
  .keenai-landing .kh-tour h3{font-size:22px}
  .keenai-landing .kh-tour .kh-fine{font-size:12.5px;line-height:1.45}
  /* Before the tour starts, Start lives on the 3D band (the welcome card is below the first screen on
     most phones) and the card drops its own Start; once started, the band shows the controls instead. */
  .keenai-landing .kh-tour:not(.started) .kh-go.kh-go-stage{display:inline-flex}
  .kh-tour:not(.started) .kh-ctrl,.keenai-landing .kh-tour .kh-start .kh-go,.keenai-landing .kh-tour .kh-hint{display:none}
  /* The last card stays short: the band's play button replays, and the room buttons explain themselves. */
  .keenai-landing .kh-tour .kh-more,.keenai-landing .kh-tour .kh-again{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kh-tour .kh-loading::before{animation:none}
  .kh-tour .kh-stop{transition:none}
  .keenai-landing .kh-tour .kh-screen img,.kh-tour .kh-canvas{transition:none}
}