/* Karatry marketing — the product tour page (tour.html), on top of styles.css.
   Without tour.js the steps stack top to bottom. With it they share one grid
   cell and show one at a time, so the page never jumps between steps, and the
   Back and Next buttons sit at the foot of the step's caption. On a wide
   screen the caption sits left of the screenshot, which is sized to the
   window's height so the whole step fits on one laptop screen. */

.tour-hero{padding:44px 0 4px;}
.tour-hero h1{font-size:44px;max-width:none;}
.tour-hero p.sub{max-width:68ch;font-size:18px;margin-top:16px;}
.tour-sec{padding:30px 0 90px;}
.tour-sec .wrap{max-width:1600px;}
.tour{list-style:none;}
.tour-step{scroll-margin-top:90px;}
.tour-step + .tour-step{margin-top:80px;}

/* the screen, in a dark window frame */
.tour-shot{background:var(--charcoal);border-radius:18px;padding:0 12px 12px;box-shadow:0 40px 80px -40px rgba(28,26,23,.45);max-width:1064px;margin:0 auto;}
.tour-bar{display:flex;align-items:center;gap:7px;padding:11px 4px;}
.tour-bar i{width:10px;height:10px;border-radius:50%;background:#3A352F;display:block;flex:none;}
.tour-bar .tag-example{margin-left:auto;}
.tour-bar a{font-size:12.5px;color:#B9B1A4;margin-left:12px;}
.tour-bar a:hover{color:var(--gold);}
.tour-img{position:relative;border-radius:10px;overflow:hidden;background:#14120F;}
.tour-img img{display:block;width:100%;height:auto;}

/* a gold outline round the thing each step is about (left, top, width and
   height in percent of the screenshot) */
.tour-spot{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:10px;outline:2px solid var(--gold);outline-offset:5px;pointer-events:none;animation:tour-pulse 2.2s ease-out infinite;}
@keyframes tour-pulse{0%{box-shadow:0 0 0 5px rgba(184,149,106,.5);}70%{box-shadow:0 0 0 18px rgba(184,149,106,0);}100%{box-shadow:0 0 0 5px rgba(184,149,106,0);}}

.tour-cap{max-width:62ch;margin:24px auto 0;text-align:center;}
.tour-cap h2{font-size:28px;font-variation-settings:'opsz' 144,'wght' 530;margin-top:10px;}
.tour-cap p{color:var(--muted);font-size:16px;margin-top:12px;}

/* the step dots, then Back and Next */
.tour-nav{display:flex;flex-wrap:wrap;gap:12px;max-width:360px;margin:0 auto;padding-top:22px;}
.tour-nav[hidden],.tour-nav [hidden]{display:none;}
.tour-nav button{font-family:inherit;cursor:pointer;}
.tour-nav .btn{flex:1;justify-content:center;padding:12px 18px;white-space:nowrap;}
.tour-nav .btn-ghost{background:transparent;}
.tour-nav .btn-gold{border:0;}
.tour-nav [aria-disabled="true"]{opacity:.35;cursor:default;}
.tour-nav [aria-disabled="true"]:hover{border-color:#D9D2C5;color:var(--charcoal);}
.tour-dots{display:flex;justify-content:center;width:100%;gap:2px;}
.tour-dot{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0;}
.tour-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#D9D2C5;transition:background .2s;}
.tour-dot:hover::before{background:var(--gold);}
.tour-dot[aria-current="step"]::before{background:var(--gold-deep);}

/* one step at a time, once tour.js runs */
.tour.is-js{display:grid;}
.tour.is-js > .tour-step{grid-area:1/1;margin:0;visibility:hidden;opacity:0;display:flex;flex-direction:column;}
.tour.is-js > .tour-step.is-on{visibility:visible;opacity:1;transition:opacity .3s;}
.tour.is-js .tour-cap{flex:1;display:flex;flex-direction:column;}
.tour.is-js .tour-nav{margin-top:auto;}
.tour.is-js .tour-img{cursor:pointer;touch-action:pan-y pinch-zoom;}
.tour-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.final .final-q{font-size:14.5px;margin-top:22px;}
.final .final-q a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}

/* wide screens: caption left, screenshot right, as large as the window allows */
@media (min-width:1100px){
  .tour-step,.tour.is-js > .tour-step{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,calc((100vh - 150px) * 1.6 + 24px));grid-template-areas:"cap shot";column-gap:44px;justify-content:center;}
  .tour-shot{grid-area:shot;max-width:none;margin:0;align-self:start;}
  .tour-cap{grid-area:cap;max-width:none;margin:0;text-align:left;padding-top:6px;}
  .tour-cap h2{font-size:30px;}
  .tour-nav{margin:0;}
  .tour-dots{justify-content:flex-start;margin-left:-8px;}
}

@media (prefers-reduced-motion:reduce){
  .tour-spot{animation:none;box-shadow:0 0 0 9px rgba(184,149,106,.25);}
  .tour.is-js > .tour-step.is-on{transition:none;}
}
@media (max-width:860px){
  .tour-hero h1{font-size:34px;}
  .tour-cap h2{font-size:24px;}
  .tour-cap p{font-size:15.5px;}
}
@media (max-width:620px){
  .tour-hero{padding:30px 0 0;}
  .tour-hero .sub{font-size:16px;margin-top:14px;}
  .tour-sec{padding:20px 0 60px;}
  .tour-shot{border-radius:12px;padding:0 6px 6px;}
  .tour-bar{padding:8px 4px;}
  .tour-bar i{width:8px;height:8px;}
  .tour-img{border-radius:7px;}
  .tour-spot{border-radius:5px;outline-offset:3px;}
  .tour-cap{margin-top:18px;}
  .tour-nav{padding-top:16px;}
  .tour-nav .btn{padding:11px 14px;font-size:14.5px;}
}