/* App tour (tour.js): a ring around the menu item, a light scrim, and one card beside it.
   Each card opens with a small looping picture made of the app's own icons. */
#tour .tour-block { position: fixed; inset: 0; z-index: 60; }
#tour .tour-ring { position: fixed; z-index: 61; border-radius: 10px; box-shadow: 0 0 0 3px var(--blue), 0 0 0 9999px rgba(15,18,54,.28); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
#tour.no-target .tour-ring { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(15,18,54,.38); }
#tour .tour-card { position: fixed; z-index: 62; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)); background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-xl); }
#tour .tour-card.beside { transform: none; transition: top .2s; }
#tour .tour-card.beside::before { content: ""; position: absolute; left: -7px; top: var(--ay, 30px); width: 14px; height: 14px; margin-top: -7px; background: var(--white); transform: rotate(45deg); border-radius: 2px; }
#tour .tour-art { position: relative; display: grid; align-content: center; gap: 12px; min-height: 168px; padding: 18px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(160deg, var(--blue-wash), #F7F7FD 70%); overflow: hidden; }
#tour .tour-art .yt-box { margin: 0; }
#tour .tour-body { padding: 16px 20px 18px; }
#tour .tour-dots { display: flex; gap: 4px; margin-bottom: 12px; }
#tour .tour-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
#tour .tour-dots i.on { background: var(--blue); }
#tour h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0 0 4px; }
#tour .tour-text { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.45; }
#tour .tour-watches { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
#tour .tour-watch { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; color: var(--ink); font: 600 13px Inter, sans-serif; cursor: pointer; }
#tour .tour-watch:hover { border-color: var(--blue); color: var(--blue); }
#tour .tour-watch .ti { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #f00; fill: #fff; stroke: none; }
#tour .tour-btns { display: flex; align-items: center; gap: 8px; }
#tour .tour-back { padding-inline: 12px; }

/* picture parts */
#tour .ti { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#tour .ti.tbig { width: 52px; height: 52px; color: var(--blue); stroke-width: 1.5; }
#tour .ti.tlogo { width: 46px; height: 46px; stroke: none; }
#tour .ts { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 92px; }
#tour .tnets { display: flex; gap: 8px; }
#tour .tnets.col { flex-direction: column; gap: 5px; }
#tour .tnets .ni { animation: t-pop .5s calc(var(--i) * .08s) both; }
#tour .tchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#tour .tchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pill); background: #fff; box-shadow: var(--sh-sm); border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 600; }
#tour .tchip .ti { width: 15px; height: 15px; color: var(--blue); }
#tour .tchip .ni { width: 18px; height: 18px; }

#tour .ts-welcome { flex-direction: column; gap: 16px; }
/* one post fans out to every network */
#tour .tpost { display: grid; gap: 6px; width: 74px; padding: 12px 10px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-md); }
#tour .tpost i { height: 6px; border-radius: 3px; background: var(--blue-tint); }
#tour .tpost i:first-child { background: var(--blue); width: 70%; }
#tour .tpost i:last-child { width: 55%; }
#tour .tlines { position: relative; width: 64px; height: 150px; }
#tour .tlines b { position: absolute; left: 0; top: calc(var(--i) * 33px + 13px); width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-soft) 0 6px, transparent 6px 10px); transform-origin: left; animation: t-draw 2.4s calc(var(--i) * .12s) infinite; }
#tour .ts-fan { gap: 6px; }
/* tiles */
#tour .ts-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
#tour .ts-tiles.three { grid-template-columns: repeat(3, 1fr); }
#tour .ttile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-sm); font-size: 12px; font-weight: 600; text-align: center; animation: t-pop .45s calc(var(--i) * .1s) both; }
#tour .ttile .ti { color: var(--blue); width: 22px; height: 22px; }
/* week */
#tour .ts-week { gap: 6px; }
#tour .tday { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 34px; height: 92px; padding-top: 6px; border-radius: 6px; background: #fff; box-shadow: var(--sh-sm); }
#tour .tday small { color: var(--soft); font-size: 10px; font-weight: 700; }
#tour .tday em { width: 24px; height: 14px; border-radius: 4px; background: var(--blue); animation: t-pop .5s calc(var(--i) * .15s + .2s) both; }
/* list */
#tour .ts-rows { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
#tour .trow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-sm); font-size: 13px; font-weight: 600; animation: t-slide .45s calc(var(--i) * .1s) both; }
#tour .trow i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
#tour .trow.drf i { background: var(--soft); }
#tour .trow.snt i { background: var(--ok); }
#tour .trow.bad i { background: var(--bad); }
/* inbox */
#tour .ts-inbox .tnets { flex-direction: column; gap: 5px; }
#tour .tbubbles { display: grid; gap: 8px; }
#tour .tbubbles span { display: grid; place-items: center; width: 30px; height: 26px; color: var(--blue); animation: t-fly 2.4s calc(var(--i) * .4s) infinite; }
/* dates, media, bars */
#tour .tdate { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-sm); color: var(--blue); animation: t-pop .45s calc(var(--i) * .12s) both; }
#tour .tdate .ti:first-child { width: 30px; height: 30px; }
#tour .tdate .tsmall { position: absolute; right: 6px; top: 6px; width: 16px; height: 16px; color: var(--warn); }
#tour .ts-grid { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
#tour .ts-grid span { display: grid; place-items: center; height: 44px; border-radius: 6px; background: linear-gradient(135deg, var(--blue-tint), var(--blue-soft)); color: #fff; animation: t-pop .4s calc(var(--i) * .07s) both; }
#tour .ts-grid .ti { stroke: #fff; }
#tour .ts-bars { align-items: flex-end; gap: 10px; height: 92px; }
#tour .ts-bars b { width: 20px; height: var(--h); border-radius: 4px 4px 0 0; background: var(--blue); transform-origin: bottom; animation: t-grow .6s calc(var(--i) * .08s) both; }
#tour .ts-bars b:nth-child(odd) { background: var(--blue-soft); }
/* groups, AI */
#tour .ts-group { flex-direction: column; gap: 12px; }
#tour .tfolder { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-md); font-weight: 600; color: var(--blue); animation: t-pop .5s .5s both; }
#tour .tbrand { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--sh-md); }
#tour .tbrand svg { width: 26px; height: 26px; }
#tour .tbrand.claude svg { fill: #D97757; }
#tour .tbrand.chatgpt svg { fill: #000; }
#tour .tarrow { width: 50px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-soft) 0 6px, transparent 6px 10px); animation: t-draw 2.4s infinite; transform-origin: left; }
#tour .tdone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); animation: t-pop .5s both; }
#tour .tdone .ti { width: 32px; height: 32px; stroke: #fff; stroke-width: 2.6; }
#tour .ts-one .ni-lg { width: 64px; height: 64px; border-radius: 18px; }

@keyframes t-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes t-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes t-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes t-draw { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes t-fly { 0% { opacity: 0; transform: translateX(-18px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(18px); } }

@media (max-width: 860px) {
  #tour .tour-card { top: auto; bottom: 16px; transform: translateX(-50%); }
  #tour .tour-art { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) { #tour *, #tour *::before { animation: none !important; transition: none !important; } }

/* card opens to the left of its target (the chat bubble on the right edge) */
#tour .tour-card.beside.left::before { left: auto; right: -7px; }
/* connect: each network goes from grey with a + to its colours with a green check, then lands in a group */
#tour .tconnect { gap: 10px; }
#tour .tconn { position: relative; display: inline-grid; }
#tour .tconn .ni { animation: t-colour 4s calc(var(--i) * .35s) infinite; }
#tour .tconn i { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
#tour .tconn i .ti { width: 11px; height: 11px; stroke-width: 3; }
#tour .tconn .tplus { background: var(--blue); color: #fff; animation: t-out 4s calc(var(--i) * .35s) infinite; }
#tour .tconn .tok { background: var(--ok); color: #fff; animation: t-in 4s calc(var(--i) * .35s) infinite; }
#tour .tok .ti, #tour .tplus .ti { stroke: #fff; }
@keyframes t-colour { 0%, 22% { filter: grayscale(1); opacity: .4; } 32%, 100% { filter: none; opacity: 1; } }
@keyframes t-out { 0%, 22% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes t-in { 0%, 26% { opacity: 0; transform: scale(.4); } 34%, 100% { opacity: 1; transform: none; } }
/* plans: three sizes, the middle one picked */
#tour .ts-plans { gap: 10px; align-items: flex-end; }
#tour .tplan { position: relative; display: grid; justify-items: center; gap: 2px; width: 78px; padding: 12px 6px 10px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); border: 1px solid var(--line); color: var(--muted); animation: t-pop .45s calc(var(--i) * .12s) both; }
#tour .tplan .ti { color: var(--blue); }
#tour .tplan b { font: 700 22px/1 Outfit, Inter, sans-serif; color: var(--ink); }
#tour .tplan small { font-size: 11px; }
#tour .tplan.pick { padding-block: 18px 14px; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), var(--sh-md); animation: t-pop .45s .12s both, t-lift 2.6s 1s ease-in-out infinite; }
#tour .tplan .tok { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px #fff; }
#tour .tplan .tok .ti { width: 13px; height: 13px; stroke-width: 3; }
@keyframes t-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
/* training: watch and learn, then the following grows */
#tour .ts-learn { gap: 12px; }
#tour .tvid { position: relative; display: grid; place-items: center; width: 70px; height: 52px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-md); }
#tour .tvid .tcap { position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--ink); color: #fff; stroke: #fff; }
#tour .tgrow { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 80px; padding: 0 4px; }
#tour .tgrow b { width: 12px; height: var(--h); border-radius: 3px 3px 0 0; background: var(--ok); opacity: .85; transform-origin: bottom; animation: t-grow .5s calc(var(--i) * .07s + .1s) both; }
#tour .tgrow .tupi { position: absolute; right: -14px; top: -10px; color: var(--ok); stroke-width: 2.4; animation: t-pop .4s .6s both; }
/* chat bubble: a little conversation, then the bubble it lives in */
#tour .ts-chat { gap: 16px; align-items: flex-end; }
#tour .tchatwin { display: grid; gap: 8px; width: 150px; padding: 12px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-md); }
#tour .tmsg { height: 20px; width: 70%; border-radius: 10px 10px 10px 3px; background: var(--blue-wash); animation: t-pop .4s .2s both; }
#tour .tmsg.me { justify-self: end; width: 60%; border-radius: 10px 10px 3px 10px; background: var(--blue); animation-delay: 0s; }
#tour .tmsg:not(.me) { display: flex; align-items: center; gap: 4px; padding-left: 10px; width: 58px; }
#tour .tmsg i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft); animation: t-dot 1.2s infinite; }
#tour .tmsg i:nth-child(2) { animation-delay: .2s; } #tour .tmsg i:nth-child(3) { animation-delay: .4s; }
#tour .tbubble { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: var(--sh-lg); animation: t-lift 2.6s ease-in-out infinite; }
#tour .tbubble .ti { stroke: #fff; fill: #fff; }
@keyframes t-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #tour .tconn .ni { filter: none; opacity: 1; } #tour .tconn .tplus { display: none; } #tour .tconn .tok { opacity: 1; } }

/* v4 pictures (Ty 11-07: more motion everywhere) */
#tour .tchip.tbigchip { padding: 6px 14px; background: var(--blue); border-color: var(--blue); color: #fff; font-size: 13px; letter-spacing: .02em; }
#tour .tchip.tbigchip .ti { color: #fff; stroke: #fff; }
/* Content studio: a wand writes seven posts */
#tour .ts-week7 { gap: 5px; }
#tour .twand { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; animation: t-wand 2.8s ease-in-out infinite; }
#tour .twand .ti { stroke: #fff; fill: #fff; width: 18px; height: 18px; }
#tour .tmini { display: grid; gap: 3px; width: 30px; padding: 3px; border-radius: 5px; background: #fff; box-shadow: var(--sh-sm); animation: t-pop .35s calc(var(--i) * .16s + .2s) both; }
#tour .tmini i { height: 18px; border-radius: 3px; background: linear-gradient(135deg, var(--blue-soft), var(--blue)); }
#tour .tmini b { height: 3px; border-radius: 2px; background: var(--blue-tint); }
#tour .tmini b:last-child { width: 60%; }
@keyframes t-wand { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) translateY(-3px); } }
/* Media: one photo, reused in three posts */
#tour .ts-reuse { gap: 10px; }
#tour .tsrc { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--r); background: linear-gradient(135deg, var(--blue-tint), var(--blue)); box-shadow: var(--sh-md); }
#tour .tsrc .ti, #tour .tpic .ti { stroke: #fff; }
#tour .trep { color: var(--blue); animation: t-spin 2.4s linear infinite; }
#tour .trep .ti { width: 26px; height: 26px; stroke-width: 2.2; }
#tour .tposts { display: grid; gap: 6px; }
#tour .tpost2 { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 3px 6px; width: 92px; padding: 5px; border-radius: 6px; background: #fff; box-shadow: var(--sh-sm); animation: t-slide .4s calc(var(--i) * .3s + .3s) both; }
#tour .tpic { grid-row: span 2; display: grid; place-items: center; height: 22px; border-radius: 4px; background: linear-gradient(135deg, var(--blue-tint), var(--blue)); }
#tour .tpic .ti { width: 13px; height: 13px; }
#tour .tpost2 b { height: 4px; align-self: center; border-radius: 2px; background: var(--blue-tint); }
#tour .tpost2 b:last-child { width: 60%; }
@keyframes t-spin { to { transform: rotate(360deg); } }
/* Connect AI: brands light up as they connect, then the link to BluePostr draws */
#tour .ts-ai .tconnect { gap: 12px; }
#tour .tconn .tbrand { width: 44px; height: 44px; border-radius: 13px; animation: t-colour 4s calc(var(--i) * .45s) infinite; }
#tour .tbrand.other { color: var(--blue); }
#tour .tbrand.other .ti { width: 24px; height: 24px; }
#tour .tdest { animation: t-beat 4s 1.6s infinite; }
@keyframes t-beat { 0%, 40%, 100% { transform: none; } 48% { transform: scale(1.18); } 56% { transform: none; } }
/* Training: views and followers climbing */
#tour .tstats { display: grid; gap: 8px; }
#tour .tstat { position: relative; display: grid; grid-template-columns: 18px 58px auto; align-items: end; gap: 6px; }
#tour .tstat > .ti:first-child { width: 18px; height: 18px; color: var(--blue); align-self: center; }
#tour .tstat small { align-self: center; font-size: 11px; font-weight: 700; color: var(--muted); }
#tour .tline { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
#tour .tline b { width: 9px; height: var(--h); border-radius: 2px 2px 0 0; background: var(--ok); transform-origin: bottom; animation: t-regrow 3.2s calc(var(--r) * .3s + var(--i) * .08s) infinite; }
#tour .tstat .tupi { position: absolute; right: -16px; top: -4px; width: 16px; height: 16px; color: var(--ok); stroke-width: 2.6; animation: t-pop .4s calc(var(--r) * .3s + .7s) both; }
@keyframes t-regrow { 0% { transform: scaleY(0); } 25%, 85% { transform: none; } 100% { transform: scaleY(0); } }
/* Help: typing dots, a page turning, the compass needle */
#tour .thelp .ttile { position: relative; }
#tour .tdots { position: absolute; top: 15px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); }
#tour .tdots i { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); animation: t-dot 1.2s infinite; }
#tour .tdots i:nth-child(2) { animation-delay: .2s; } #tour .tdots i:nth-child(3) { animation-delay: .4s; }
#tour .t-book .ti { animation: t-flip 2.6s ease-in-out infinite; }
#tour .t-compass .ti { animation: t-spin 3s ease-in-out infinite; }
#tour .t-chat .ti { animation: t-lift 2.6s ease-in-out infinite; }
@keyframes t-flip { 0%, 60%, 100% { transform: none; } 75% { transform: rotateY(180deg); } }
/* Settings: your name opens Settings and Sign out */
#tour .ts-menu { flex-direction: column; gap: 6px; }
#tour .tmenu { display: grid; gap: 2px; width: 170px; padding: 6px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-md); transform-origin: bottom; animation: t-menu 3.4s ease-in-out infinite; }
#tour .tmi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
#tour .tmi:first-child { background: var(--blue-wash); color: var(--blue); }
#tour .tmi .ti { width: 15px; height: 15px; }
#tour .tme { display: flex; align-items: center; gap: 8px; width: 170px; padding: 6px 8px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-sm); }
#tour .tav { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); }
#tour .tav .ti { width: 14px; height: 14px; stroke: #fff; }
#tour .tme b { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); }
#tour .tcaret { width: 14px; height: 14px; }
@keyframes t-menu { 0%, 8% { opacity: 0; transform: scaleY(.4); } 18%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scaleY(.4); } }
/* done: a little confetti */
#tour .ts-one { position: relative; }
#tour .tconf { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); animation: t-conf 1.6s calc(var(--i) * .05s + .3s) ease-out both; }
#tour .tconf:nth-of-type(even) { background: var(--ok); }
#tour .tconf:nth-of-type(3n) { background: var(--warn); }
#tour .tconf:nth-of-type(1) { --x: -70px; --y: -40px; } #tour .tconf:nth-of-type(2) { --x: 70px; --y: -36px; } #tour .tconf:nth-of-type(3) { --x: -54px; --y: 34px; }
#tour .tconf:nth-of-type(4) { --x: 60px; --y: 30px; } #tour .tconf:nth-of-type(5) { --x: -20px; --y: -54px; } #tour .tconf:nth-of-type(6) { --x: 24px; --y: 50px; }
@keyframes t-conf { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(200deg); } }
/* a little life on the older pictures too */
#tour .ts-welcome .tlogo { animation: t-beat 3s 1s infinite; }
#tour .ts-tiles:not(.thelp) .ttile .ti { animation: t-lift 2.8s calc(var(--i) * .3s) ease-in-out infinite; }
#tour .trow i { animation: t-dot 1.8s calc(var(--i) * .3s) infinite; }
#tour .ts-bars b { animation: t-regrow 3.4s calc(var(--i) * .08s) infinite; }
#tour .tday em { animation: t-pop .5s calc(var(--i) * .15s + .2s) both, t-lift 2.6s calc(var(--i) * .2s + 1s) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #tour .tline b, #tour .ts-bars b { transform: none; } #tour .tmenu { opacity: 1; transform: none; } #tour .tconf { display: none; } }