/* TazzoGram Tour (TZ-231, TZ-234, TZ-235; 2026-09-24). Shared by login.html and index.html with js/tz-tour.js.
   Sized in container units (cqw) of .tzshot, so one layout reads at any width and bigger when enlarged.
   "Soft clay" bubbles (Harding's pick): mint gradient, puffy inner light, green icon chip, dotted leader lines. */
.tzshot{position:relative;width:100%;container-type:inline-size;font-family:Inter,"Segoe UI",Arial,sans-serif;}
.tzshot-stage{position:relative;width:100%;aspect-ratio:1000/580;}
.tzshot .shot-frame{position:absolute;left:20%;top:21.72%;width:60%;background:#0B1D33;border:1px solid rgba(255,255,255,0.10);
  border-radius:1.2cqw;box-shadow:0 2.5cqw 6cqw rgba(0,0,0,0.5);overflow:hidden;}
.tzshot .browser-bar{box-sizing:border-box;display:flex;align-items:center;height:2.4cqw;padding:0 1.1cqw;gap:.55cqw;
  background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08);}
.tzshot .browser-bar .dot{width:.7cqw;height:.7cqw;border-radius:50%;}
.tzshot .browser-bar .url{font-size:.9cqw;margin-left:.6cqw;color:rgba(255,255,255,0.45);font-family:"JetBrains Mono",Consolas,monospace;}
.tzshot .app-full{position:relative;display:block;line-height:0;}
.tzshot .app-full img{display:block;width:100%;height:auto;}
.tzshot-img2{position:absolute;left:0;top:0;opacity:0;transition:opacity .6s ease;}
.tzshot-img2.is-on{opacity:1;}
.tzshot-spot{position:absolute;opacity:0;border-radius:.8cqw;border:2px solid #bfe8da;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(3,10,20,0.55),0 0 1.6cqw rgba(191,232,218,0.8);transition:all .6s ease;}
.tzshot.is-step .tzshot-spot{opacity:1;}
.tzshot.is-cta .tzshot-spot{border-color:transparent;box-shadow:0 0 0 200vmax rgba(3,10,20,0.55);}
.tzshot-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.tzb{position:absolute;box-sizing:border-box;display:flex;gap:.9cqw;align-items:flex-start;padding:1.05cqw 1.25cqw;line-height:normal;
  border-radius:2.2cqw;background:linear-gradient(160deg,#e9f7f2,#bfe8da);color:#0f2e26;text-align:left;
  box-shadow:0 1.1cqw 2.4cqw rgba(0,0,0,0.35),inset 0 -0.5cqw 1cqw rgba(29,158,117,0.25),inset 0 0.5cqw 0.8cqw rgba(255,255,255,0.9);}
.tzb-ic{flex:0 0 auto;width:3.3cqw;height:3.3cqw;border-radius:1cqw;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,#27b48a,#157a5b);box-shadow:inset 0 .2cqw .3cqw rgba(255,255,255,0.5),0 .35cqw .7cqw rgba(0,0,0,0.2);}
.tzb-ic svg{width:62%;height:62%;}
.tzb-tx{display:flex;flex-direction:column;min-width:0;flex:1;}
.tzb-t{font-weight:700;font-size:1.45cqw;line-height:1.15;letter-spacing:-0.01em;}
.tzb-s{font-size:1.12cqw;line-height:1.25;color:#2d5c4f;margin-top:.2cqw;}
@container (max-width:880px){ .tzb-ov .tzb-s{display:none;} .tzb-ov .tzb-t{font-size:1.75cqw;} .tzb-ov{padding:.9cqw 1cqw;} }
.tzb-ov{transition:opacity .4s ease;}
.tzshot.is-step .tzb-ov{opacity:0;visibility:hidden;}
.tzb-step{opacity:0;visibility:hidden;width:20%;transition:opacity .4s ease,top .6s ease,left .6s ease;z-index:2;}
.tzshot.is-step .tzb-step{opacity:1;visibility:visible;}
.tzb-more{display:none;font-size:1.05cqw;line-height:1.4;color:#1f4a3f;margin-top:.7cqw;}
.tzb-step.is-open .tzb-more{display:block;}
.tzb-step.is-open{width:30%;}
.tzb-plus{display:none;flex:0 0 auto;align-self:flex-start;width:2.4cqw;height:2.4cqw;min-width:22px;min-height:22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  align-items:center;justify-content:center;color:#ffffff;background:linear-gradient(160deg,#27b48a,#157a5b);box-shadow:0 .3cqw .6cqw rgba(0,0,0,0.25);}
.tzb-step.has-more .tzb-plus{display:flex;}
.tzb-plus svg{width:70%;height:70%;} .tzb-plus-off{display:none;}
.tzb-step.is-open .tzb-plus-on{display:none;} .tzb-step.is-open .tzb-plus-off{display:flex;}
/* Harding 2026-09-24: the "+" and "-" sat off centre, same cause as the shrink icon. Each span fills the circle. */
.tzb-plus>span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.tzb-plus>span.tzb-plus-off{display:none;}
.tzb-step.is-open .tzb-plus>span.tzb-plus-on{display:none;} .tzb-step.is-open .tzb-plus>span.tzb-plus-off{display:flex;}
.tzb-plus:focus-visible,.tzb-cta:focus-visible,.tzshot-btn:focus-visible,.tzshot-dots button:focus-visible{outline:3px solid #1D9E75;outline-offset:3px;}
.tzb-cta{display:none;margin-top:1cqw;align-self:flex-start;border:0;border-radius:99px;cursor:pointer;font:inherit;font-weight:800;font-size:1.3cqw;
  padding:.9cqw 1.8cqw;color:#1a1a18;background:linear-gradient(180deg,#ffd27a,#f6b73c);box-shadow:0 .5cqw 1.2cqw rgba(0,0,0,0.3),inset 0 .2cqw 0 rgba(255,255,255,0.6);}
.tzshot.is-cta .tzb-cta{display:inline-block;}
.tzshot.is-cta .tzb-step{width:32%;}
.tzshot.is-cta .tzb-step .tzb-t{font-size:2cqw;} .tzshot.is-cta .tzb-step .tzb-s{font-size:1.3cqw;}
.tzshot-dots{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);display:flex;gap:.8cqw;z-index:3;}
.tzshot-dots button{width:1.1cqw;height:1.1cqw;min-width:9px;min-height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;background:rgba(191,232,218,0.35);transition:all .3s ease;}
.tzshot-dots button.is-on{width:3cqw;background:linear-gradient(160deg,#e9f7f2,#bfe8da);}
.tzshot-btn{position:absolute;right:.6%;top:1%;z-index:4;width:4.2cqw;height:4.2cqw;min-width:34px;min-height:34px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#0f2e26;background:linear-gradient(160deg,#e9f7f2,#bfe8da);
  box-shadow:0 .8cqw 1.8cqw rgba(0,0,0,0.35),inset 0 -.35cqw .7cqw rgba(29,158,117,0.25),inset 0 .35cqw .6cqw rgba(255,255,255,0.9);}
.tzshot-btn svg{width:58%;height:58%;}
/* Harding 2026-09-24: the icon sat off centre. Each icon span now fills the button and centres its svg. */
.tzshot-btn>span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.tzshot-btn>span.tzshot-ic-close{display:none;}
.tzshot-ic-close{display:none;}
.tzshot.is-full .tzshot-ic-open{display:none;} .tzshot.is-full .tzshot-btn>span.tzshot-ic-close{display:flex;}
.tzshot-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(4,12,24,0.86);backdrop-filter:blur(4px);}
/* Enlarged, or the in-app panel: the picture fills the space; only the current bubble shows, inside it. */
.tzshot.is-full{position:fixed;z-index:9999;left:50%;top:50%;transform:translate(-50%,-50%);width:min(98vw, calc((97vh - 2.6vw) * 1600 / 787));}
.tzshot.is-standalone{width:min(92vw, calc((90vh - 2.6vw) * 1600 / 787));}
.tzshot.is-full .tzshot-stage{aspect-ratio:auto;}
.tzshot.is-full .shot-frame{position:relative;left:0;top:0;width:100%;border-radius:1cqw;box-shadow:0 2cqw 6cqw rgba(0,0,0,0.6);}
.tzshot.is-full .tzb-ov,.tzshot.is-full .tzshot-lines{display:none;}
.tzshot.is-full .tzb-step{width:28%;padding:1.2cqw 1.4cqw;}
.tzshot.is-full .tzb-step.is-open{width:38%;}
.tzshot.is-full .tzb-step .tzb-t{font-size:1.5cqw;} .tzshot.is-full .tzb-step .tzb-s{font-size:1.15cqw;}
.tzshot.is-full .tzb-step .tzb-more{font-size:1.1cqw;}
.tzshot.is-full .tzb-step .tzb-ic{width:3.2cqw;height:3.2cqw;}
.tzshot.is-full.is-cta .tzb-step{width:36%;}
.tzshot.is-full .tzshot-btn{right:1%;top:4.5%;width:3.4cqw;height:3.4cqw;}
.tzshot.is-full .tzshot-dots{bottom:1.8%;padding:.6cqw 1cqw;border-radius:99px;background:rgba(4,12,24,0.6);}
.tzshot.is-full .tzshot-dots button:first-child{display:none;}
@media (prefers-reduced-motion:no-preference){
  .tzb-ov{transition:opacity .4s ease,transform .2s ease;} .tzb-ov:hover{transform:translateY(-2px);}
  .tzshot-btn:hover{transform:scale(1.06);}
  @keyframes tzPulse{0%,100%{box-shadow:0 0 0 200vmax rgba(3,10,20,0.55),0 0 0 0 rgba(191,232,218,0.7);}50%{box-shadow:0 0 0 200vmax rgba(3,10,20,0.55),0 0 0 .9cqw rgba(191,232,218,0);}}
  .tzshot.is-step:not(.is-cta) .tzshot-spot{animation:tzPulse 1.8s ease-in-out infinite;}
  /* Harding 2026-09-24: the "+" breathes gently, an invitation to read more; it stops once opened. */
  @keyframes tzPlusGlow{0%,100%{box-shadow:0 .3cqw .6cqw rgba(0,0,0,0.25),0 0 0 0 rgba(29,158,117,0.55);transform:scale(1);}
    50%{box-shadow:0 .3cqw .6cqw rgba(0,0,0,0.25),0 0 0 .7cqw rgba(29,158,117,0);transform:scale(1.08);}}
  .tzb-step.has-more:not(.is-open) .tzb-plus{animation:tzPlusGlow 2.2s ease-in-out infinite;}
}